Refactored Filament Livewire components and views. Introduced separate CreateFilament component with route-based navigation. Simplified and cleaned up code by removing legacy modals and unused properties. Updated migrations, table layouts, and styles for consistency.
This commit is contained in:
@@ -3,20 +3,18 @@
|
||||
{{ __('Filaments') }}
|
||||
|
||||
<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" />
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-black/10 border-white/20 rounded text-gray-50 placeholder:text-gray-200 focus:border-white/50 focus:ring-white/50" />
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Filament</flux:button>
|
||||
</flux:modal.trigger>
|
||||
<flux:button wire:click="create" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 transition ease-in-out hover:cursor-pointer">Create Filament</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="m-auto my-8 mx-12 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header class="w-[50px]">ID</x-table.header>
|
||||
@@ -24,7 +22,6 @@
|
||||
<x-table.header>Color</x-table.header>
|
||||
<x-table.header>Manufacturer</x-table.header>
|
||||
<x-table.header>Material</x-table.header>
|
||||
<x-table.header>Finish</x-table.header>
|
||||
<x-table.header>Min Temp</x-table.header>
|
||||
<x-table.header>Max Temp</x-table.header>
|
||||
<x-table.header>Weight</x-table.header>
|
||||
@@ -33,27 +30,26 @@
|
||||
</x-slot>
|
||||
|
||||
@foreach ($filaments as $filament)
|
||||
<tr wire:key="{{ $filament->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
|
||||
<tr wire:key="{{ $filament->id }}" class="text-gray-200 border-b border-white/50 hover:bg-white/10 transition duration-150 ease-in-out">
|
||||
<x-table.item><p class="p-4 px-3 pl-6">{{ $filament->id }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3 font-bold">{{ $filament->name }}</p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-2 px-2 justify-start items-center">
|
||||
<div class="p-4 h-[20px] w-[20px] rounded" style="background-color: {{ App\Models\Color::find($filament->color_id)->hex}}"></div>
|
||||
<div class="p-4 h-[20px] w-[20px] rounded" style="background-color: #{{ App\Models\Color::find($filament->color_id)->hex}}"></div>
|
||||
<p>{{ App\Models\Color::find($filament->color_id)->name }}</p>
|
||||
</div>
|
||||
</x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ App\Models\Manufacturer::find($filament->manufacturer_id)->name }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ App\Models\FilamentType::find($filament->filament_type_id)->name }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->finish }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->temp_min }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->temp_max }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->temp_min }}°C</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->temp_max }}°C</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->weight }} g</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $filament->price }}€</p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-2 justify-start pr-2">
|
||||
<flux:button wire:click="show({{ $filament->id }})" variant="primary" class="bg-transparent border-0 shadow-transparent text-jet-200 hover:bg-olivine-500 hover:text-jet-950 transition-all ease-in-out hover:cursor-pointer" icon="magnifying-glass"></flux:button>
|
||||
<flux:button wire:click="edit({{ $filament->id }})" variant="primary" class="bg-transparent border-0 shadow-transparent text-jet-200 hover:bg-pumpkin-500 hover:text-jet-950 transition-all ease-in-out hover:cursor-pointer" icon="pencil"></flux:button>
|
||||
<flux:button wire:click="deleteModal({{ $filament->id }})" variant="primary" class="bg-transparent border-0 shadow-transparent text-jet-200 hover:bg-red-600 hover:text-jet-200 transition-all ease-in-out hover:cursor-pointer" icon="trash"></flux:button>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-cornflower hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="show({{ $filament->id }})" icon="magnifying-glass"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-gold-drop hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="edit({{ $filament->id }})" icon="pencil"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-red-700 hover:shadow hover:cursor-pointer" wire:click="delete({{ $filament->id }})" icon="trash"></flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@@ -65,118 +61,4 @@
|
||||
</x-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Create Form -->
|
||||
<flux:modal wire:model.self='createModal' name="createModal" class="md:w-5xl">
|
||||
<form wire:submit.prevent="create">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-nuke-400">Create filament</flux:heading>
|
||||
<flux:text class="mt-2">Create a new filament.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Filament Name" required />
|
||||
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
|
||||
<flux:select wire:model="manufacturer_id" label="Manufacturer">
|
||||
<flux:select.option disabled value="">Choose Manufacturer</flux:select.option>
|
||||
@foreach ($manufacturers as $manufacturer)
|
||||
<flux:select.option wire:key="{{ $manufacturer->id }}" value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:select wire:model="type_id" label="Type">
|
||||
<flux:select.option disabled value="">Choose Type</flux:select.option>
|
||||
@foreach ($types as $type)
|
||||
<flux:select.option wire:key="{{ $type->id }}" value="{{ $type->id }}">{{ $type->name }}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:select wire:model="color_id" label="Color" >
|
||||
<flux:select.option disabled value="">Choose Color</flux:select.option>
|
||||
@foreach ($colors as $color)
|
||||
<flux:select.option wire:key="{{ $color->id }}" value="{{ $color->id }}">{{ $color->name }}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:input label="Finish" wire:model="finish" placeholder="Finish" required />
|
||||
<flux:input label="Diameter" wire:model="diameter" placeholder="Diameter" required />
|
||||
<flux:input label="Weight" wire:model="weight" placeholder="Weight" required />
|
||||
<flux:input label="Price" wire:model="price" placeholder="Price" required />
|
||||
<flux:input label="Stock" wire:model="stock" placeholder="Stock" required />
|
||||
</div>
|
||||
<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($filament)
|
||||
@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-nuke-400">Edit filament</flux:heading>
|
||||
<flux:text class="mt-2">Create a new filament.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Filament Name" required />
|
||||
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
|
||||
<flux:select wire:model="manufacturer_id" label="Manufacturer">
|
||||
<flux:select.option disabled value="">Choose Manufacturer</flux:select.option>
|
||||
@foreach ($manufacturers as $manufacturer)
|
||||
<flux:select.option wire:key="{{ $manufacturer->id }}" value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:select wire:model="type_id" label="Type">
|
||||
<flux:select.option disabled value="">Choose Type</flux:select.option>
|
||||
@foreach ($types as $type)
|
||||
<flux:select.option wire:key="{{ $type->id }}" value="{{ $type->id }}">{{ $type->name }}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:select wire:model="color_id" label="Color" >
|
||||
<flux:select.option disabled value="">Choose Color</flux:select.option>
|
||||
@foreach ($colors as $color)
|
||||
<flux:select.option wire:key="{{ $color->id }}" value="{{ $color->id }}">{{ $color->name }}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:input label="Finish" wire:model="finish" placeholder="Finish" required />
|
||||
<flux:input label="Diameter" wire:model="diameter" placeholder="Diameter" required />
|
||||
<flux:input label="Weight" wire:model="weight" placeholder="Weight" required />
|
||||
<flux:input label="Price" wire:model="price" placeholder="Price" required />
|
||||
<flux:input label="Stock" wire:model="stock" placeholder="Stock" required />
|
||||
</div>
|
||||
<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-olivine hover:bg-olivine-600">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 filament?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this filament.</p>
|
||||
<p>This action cannot be reversed.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" disabled placeholder="Filament Name" required />
|
||||
<flux:textarea label="Description" disabled wire:model="description" placeholder="Description" />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="danger">Delete filament</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user