Refactored Manufacturer and Buildplate Livewire components. Introduced create, edit, and show components with route-based navigation. Updated views for consistency and cleaned up unused modals and legacy code. Adjusted styles and table layouts.
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
<section>
|
||||
<form wire:submit="save">
|
||||
<x-header>
|
||||
{{ __('Create Manufacturer') }}
|
||||
|
||||
<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>
|
||||
|
||||
<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">Manufacturer Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Manufacturer 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="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="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">Website</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input.group.prefix>https://</flux:input.group.prefix>
|
||||
<flux:input wire:model="website" type="text" class="block w-full"/>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -0,0 +1,47 @@
|
||||
<section>
|
||||
<form wire:submit="save">
|
||||
<x-header>
|
||||
{{ __('Edit Manufacturer') }}
|
||||
|
||||
<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>
|
||||
|
||||
<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">Manufacturer Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Manufacturer 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="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="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">Website</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input.group.prefix>https://</flux:input.group.prefix>
|
||||
<flux:input wire:model="website" type="text" class="block w-full"/>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -3,38 +3,44 @@
|
||||
{{ __('Manufacturers') }}
|
||||
|
||||
<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 Manufacturer</flux:button>
|
||||
</flux:modal.trigger> </x-slot>
|
||||
<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 Type</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 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>Name</x-table.header>
|
||||
<x-table.header>Description</x-table.header>
|
||||
<x-table.header>Website</x-table.header>
|
||||
<x-table.header>Rolls</x-table.header>
|
||||
<x-table.header class="w-1/6"></x-table.header>
|
||||
<x-table.header class="w-[150px]">Actions</x-table.header>
|
||||
</x-slot>
|
||||
|
||||
@foreach ($manufacturers as $manufacturer)
|
||||
<tr wire:key="{{ $manufacturer->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
|
||||
<tr wire:key="{{ $manufacturer->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 font-bold">{{ $manufacturer->name }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $manufacturer->description }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3"><a href="{{ $manufacturer->website }}" target="_blank" class="flex justify-center items-center gap-2">{{ $manufacturer->website }} <flux:icon.arrow-top-right-on-square variant="mini"/></a></p></x-table.item>
|
||||
<x-table.item>
|
||||
<p class="p-4 px-3">
|
||||
@if($manufacturer->website !== '')
|
||||
<a href="{{ $manufacturer->website }}" target="_blank" class="flex justify-center items-center gap-2">{{ $manufacturer->website }} <flux:icon.arrow-top-right-on-square variant="mini"/></a>
|
||||
@endif
|
||||
</p>
|
||||
</x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $manufacturer->filament_count }}</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({{ $manufacturer->id }})" icon="pencil">Edit</flux:button>
|
||||
<flux:button variant="danger" wire:click="deleteModal({{ $manufacturer->id }})" icon="x-mark">Delete</flux:button>
|
||||
<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({{ $manufacturer->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({{ $manufacturer->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({{ $manufacturer->id }})" icon="trash"></flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@@ -46,71 +52,4 @@
|
||||
</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 manufacturer</flux:heading>
|
||||
<flux:text class="mt-2">Create a new manufacturer.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Manufacturer Name" required />
|
||||
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
|
||||
<flux:input label="Website" wire:model="website" placeholder="Website" />
|
||||
<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($manufacturer)
|
||||
@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 manufacturer</flux:heading>
|
||||
<flux:text class="mt-2">Edit an existing manufacturer.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Manufacturer Name" required />
|
||||
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
|
||||
<flux:input label="Website" wire:model="website" placeholder="Website" />
|
||||
<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 manufacturer?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this manufacturer.</p>
|
||||
<p>This action cannot be reversed.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" disabled placeholder="Manufacturer Name" required />
|
||||
<flux:textarea label="Description" disabled wire:model="description" placeholder="Description" />
|
||||
<flux:input label="Website" wire:model="website" disabled placeholder="Website" />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="danger">Delete type</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<section>
|
||||
<form wire:submit="save">
|
||||
<x-header>
|
||||
{{ __('Show Manufacturer') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
|
||||
<flux:button wire:click="edit({{ $manufacturer->id }})" variant="primary" class="bg-selective text-gray-950 shadow-none hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<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">Manufacturer Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Manufacturer 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">
|
||||
{{ $manufacturer->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-gray-100">Description</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
{{ $manufacturer->description }}
|
||||
</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">Website</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="https://{{ $manufacturer->website }}" target="_blank" class="hover:underline">{{ $manufacturer->website }}</a>
|
||||
<flux:icon name="arrow-top-right-on-square" class="w-4 h-4 text-gray-200"></flux:icon>
|
||||
</div>
|
||||
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
Reference in New Issue
Block a user