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:
@@ -1,135 +1,116 @@
|
||||
<section>
|
||||
<x-header>
|
||||
{{ __('Edit Filament - ') . $filament->name }}
|
||||
<form wire:submit="save">
|
||||
<x-header>
|
||||
{{ __('Edit Filament') }}
|
||||
|
||||
<x-slot name="headerleft">
|
||||
<flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
|
||||
</x-slot>
|
||||
<x-slot name="headerright">
|
||||
<flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button variant="primary" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="show({{ $filament->id }})" variant="danger" icon="x-mark">Cancel</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Filament Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Filament details and QR Code.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">ID</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input readonly variant="filled" wire:model="id" type="text" class="mt-1 block w-full" value="{{ $filament->id }}"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="name" type="text" class="mt-1 block w-full" value="{{ $filament->name }}"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Color</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:select wire:model="color_id" >
|
||||
<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>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Manufacturer</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:select wire:model="manufacturer_id">
|
||||
<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>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Filament Type</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:select wire:model="type_id" >
|
||||
<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>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Weight</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="weight" type="text" class="mt-1 block w-full" value="{{ $filament->weight }}"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Diameter</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="diameter" type="text" class="mt-1 block w-full" value="{{ $filament->diameter }}"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Temperature</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0 flex gap-4 flex-row items-center">
|
||||
<flux:input wire:model="temp_min" type="text" class="mt-1 w-1/2" value="{{ $filament->temp_min }}"/>
|
||||
<span>-</span>
|
||||
<flux:input wire:model="temp_max" type="text" class="mt-1 w-1/2" value="{{ $filament->temp_max }}"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">BuildPlate</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->buildplate_id }}</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Extruder</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->extruder_id }}</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Attachments</dt>
|
||||
<dd class="mt-2 text-sm text-white sm:col-span-2 sm:mt-0">
|
||||
<ul role="list" class="divide-y divide-white/5 rounded-md border border-white/10">
|
||||
<li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
|
||||
<div class="flex w-0 flex-1 items-center">
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
|
||||
<path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="ml-4 flex min-w-0 flex-1 gap-2">
|
||||
<span class="truncate font-medium text-white">resume_back_end_developer.pdf</span>
|
||||
<span class="shrink-0 text-gray-500">2.4mb</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 shrink-0">
|
||||
<a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
|
||||
<div class="flex w-0 flex-1 items-center">
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
|
||||
<path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="ml-4 flex min-w-0 flex-1 gap-2">
|
||||
<span class="truncate font-medium text-white">coverletter_back_end_developer.pdf</span>
|
||||
<span class="shrink-0 text-gray-500">4.5mb</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 shrink-0">
|
||||
<a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Filament Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Filament details.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Description</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:textarea wire:model="description" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Color</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:select wire:model="color_id" class="mt-1 block w-full">
|
||||
<flux:select.option default value="">Select Color</flux:select.option>
|
||||
@foreach(\App\Models\Color::all() as $color)
|
||||
<flux:select.option key="{{ $color->id }}" value="{{$color->id}}">{{$color->name}}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Manufacturer</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:select wire:model="manufacturer_id" class="mt-1 block w-full">
|
||||
<flux:select.option default value="">Select Manufacturer</flux:select.option>
|
||||
@foreach(\App\Models\Manufacturer::all() as $manufacturer)
|
||||
<flux:select.option key="{{ $manufacturer->id }}" value="{{$manufacturer->id}}">{{$manufacturer->name}}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Filament Type</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:select wire:model="filament_type_id" class="mt-1 block w-full">
|
||||
<flux:select.option default value="">Select Filament Type</flux:select.option>
|
||||
@foreach(\App\Models\FilamentType::all() as $filament_type)
|
||||
<flux:select.option key="{{ $filament_type->id }}" value="{{$filament_type->id}}">{{$filament_type->name}}</flux:select.option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Weight</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input wire:model="weight" type="text" class="block w-full"/>
|
||||
<flux:input.group.suffix>g</flux:input.group.suffix>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Diameter</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input wire:model="diameter" type="text" class="block w-full"/>
|
||||
<flux:input.group.suffix>mm</flux:input.group.suffix>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Price</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input wire:model="price" type="text" class="block w-full"/>
|
||||
<flux:input.group.suffix>€</flux:input.group.suffix>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Min Temperature</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input wire:model="temp_min" type="text" class="block w-full"/>
|
||||
<flux:input.group.suffix>°C</flux:input.group.suffix>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Max Temperature</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input wire:model="temp_max" type="text" class="block w-full"/>
|
||||
<flux:input.group.suffix>°C</flux:input.group.suffix>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user