Renamed and reorganized Livewire components, namespaces, and views for improved file structure and clarity. Introduced filaments.show and filaments.edit routes. Updated database migrations and navigation routes accordingly. Upgraded dependencies in composer.
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
<section>
|
||||
<x-header>
|
||||
{{ __('Colors') }}
|
||||
|
||||
<x-slot name="headerleft">
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Color</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header>Name</x-table.header>
|
||||
<x-table.header>Color</x-table.header>
|
||||
<x-table.header>Hex</x-table.header>
|
||||
<x-table.header>Rolls</x-table.header>
|
||||
<x-table.header class="w-1/6"></x-table.header>
|
||||
</x-slot>
|
||||
|
||||
@foreach ($colors as $color)
|
||||
<tr wire:key="{{ $color->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold ">{{ $color->name }}</p></x-table.item>
|
||||
<x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3 text-left ">{{ $color->hex }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3"></p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<flux:button variant="ghost" wire:click="edit({{ $color->id }})" class=" rounded-lg px-4 py-2 cursor-pointer" icon="pencil">Edit</flux:button>
|
||||
<flux:button variant="danger" wire:click="deleteModal({{ $color->id }})" icon="x-mark">Delete</flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
<x-slot name="pagination">
|
||||
{{ $colors->links() }}
|
||||
</x-slot>
|
||||
</x-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Create Form -->
|
||||
<flux:modal wire:model.self='createModal' name="createModal" class="md:w-lg">
|
||||
<form wire:submit.prevent="create">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-nuke-400">Create color</flux:heading>
|
||||
<flux:text class="mt-2">Create a new color.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-nuke-400 hover:bg-nuke-500">Create</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
<!-- Edit Form -->
|
||||
@empty($color)
|
||||
@else
|
||||
<flux:modal wire:model.self='editModal' name="editModal" class="md:w-lg">
|
||||
<form wire:submit.prevent="save({{ $editid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-etheral-300">Edit color</flux:heading>
|
||||
<flux:text class="mt-2">Edit an existing color.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-etheral-300 hover:bg-etheral-400">Save</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
@endempty
|
||||
|
||||
<!-- Delete Form -->
|
||||
<flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-lg">
|
||||
<form wire:submit.prevent="delete({{ $deleteid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-red-500">Delete color?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this color.</p>
|
||||
<p>This action cannot be reversed.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" disabled placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" disabled type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="danger">Delete color</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</section>
|
||||
Reference in New Issue
Block a user