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,182 @@
|
||||
<section>
|
||||
<x-header>
|
||||
{{ __('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" />
|
||||
</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>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="m-auto my-8 mx-12 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header class="w-[50px]">ID</x-table.header>
|
||||
<x-table.header>Name</x-table.header>
|
||||
<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>
|
||||
<x-table.header>Price</x-table.header>
|
||||
<x-table.header class="w-[150px]">Actions</x-table.header>
|
||||
</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">
|
||||
<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>
|
||||
<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->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>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
<x-slot name="pagination">
|
||||
{{ $filaments->links() }}
|
||||
</x-slot>
|
||||
</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