iridium34/FilamentLaravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored Color Livewire components, added CreateColor, EditColor, and ShowColor components. Updated views, navigation, and Tailwind color schemes. Adjusted database migrations for consistency.

Browse Source
This commit is contained in:
iridium34
2025-12-14 01:39:16 +01:00
parent 7e79d1d034
commit ac812ed142
32 changed files with 496 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/color/create.blade.php
+41
View File
@@ -0,0 +1,41 @@
<section>
<form wire:submit="save">
<x-header>
{{ __('Create Color') }}
<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">Color Information</h3>
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color 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">Hex Code</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>#</flux:input.group.prefix>
<flux:input wire:model="hex" type="text" class="block w-full"/>
</flux:input.group>
</dd>
</div>
</dl>
</div>
</div>
</div>
</form>
</section>
resources/views/livewire/color/edit.blade.php
+41
View File
@@ -0,0 +1,41 @@
<section>
<form wire:submit="save">
<x-header>
{{ __('Create Color') }}
<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">Color Information</h3>
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color 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">Hex Code</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>#</flux:input.group.prefix>
<flux:input wire:model="hex" type="text" class="block w-full"/>
</flux:input.group>
</dd>
</div>
</dl>
</div>
</div>
</div>
</form>
</section>
resources/views/livewire/color/index.blade.php
+10 -74
View File
@@ -3,12 +3,12 @@
{{ __('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" />
<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 Color</flux:button>
<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>
</flux:modal.trigger>
</x-slot>
</x-header>
@@ -16,26 +16,25 @@
<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>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-table.header class="w-[150px]">Actions</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>
<tr wire:key="{{ $color->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 "><a wire:click="edit({{ $color->id }})" class="hover:cursor-pointer">{{ $color->name }}</a></p></x-table.item>
<x-table.item><div class="p-4 mx-3 w-[20px] h-[20px] 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>
<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({{ $color->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({{ $color->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({{ $color->id }})" icon="trash"></flux:button>
</div>
</x-table.item>
</tr>
@@ -47,67 +46,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 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>
resources/views/livewire/color/show.blade.php
+40
View File
@@ -0,0 +1,40 @@
<section>
<x-header>
{{ __('Create Color') }}
<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({{ $color->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">Color Information</h3>
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color 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">
{{ $color->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">Hex Code</dt>
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
<div class="flex items-center gap-4">
<div class="w-[20px] h-[20px] rounded" style="background-color:#{{ $color->hex }}"></div>
<span>#{{ $color->hex }}</span>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</form>
</section>
resources/views/livewire/dashboard.blade.php
-6
View File
@@ -1,12 +1,6 @@
<div>
<x-header>
{{ __('Dashboard') }}
<x-slot name="headerright">
<flux:modal.trigger name="createModal">
<flux:button variant="primary" class="bg-olivine transition-all hover:bg-jet hover:text-jet-100 hover:cursor-pointer">Create Buildplate</flux:button>
</flux:modal.trigger>
</x-slot>
</x-header>
<div class="py-12">
resources/views/livewire/type/create.blade.php
+8 -8
View File
@@ -4,28 +4,28 @@
{{ __('Create Type') }}
<x-slot name="headerright">
<flux:button type="submit" variant="primary" icon="check">Save</flux:button>
<flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
<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-jet-800 rounded-lg shadow p-6 text-jet-50">
<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">Type Information</h3>
<p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Type 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-jet-100">Name</dt>
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
<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-jet-100">Description</dt>
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
<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>
resources/views/livewire/type/edit.blade.php
+10 -11
View File
@@ -4,30 +4,29 @@
{{ __('Create Type') }}
<x-slot name="headerright">
<flux:button type="submit" variant="primary" icon="check">Save</flux:button>
<flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
<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-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">
<div>
<div>Loaded: {{ $type?->id }} - {{ $type?->name }}</div>
<div class="px-4 sm:px-0">
<h3 class="text-base/7 font-semibold text-white">Type Information</h3>
<p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Type 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-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="type.name" type="text" class="mt-1 block w-full"/>
<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-jet-100">Description</dt>
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
<flux:textarea wire:model="type.description" type="text" rows="auto" class="mt-1 block w-full" />
<dt class="text-sm/6 font-medium text-gray-100">Description</dt>
<dd class="mt-1 text-sm/6 text-jet-gray sm:col-span-2 sm:mt-0">
<flux:textarea wire:model="description" type="text" rows="auto" class="mt-1 block w-full" />
</dd>
</div>
</dl>
resources/views/livewire/type/index.blade.php
+10 -9
View File
@@ -3,19 +3,20 @@
{{ __('Types') }}
<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 wire:click="create" variant="primary" class="bg-olivine hover:bg-olivine-600">Create Type</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>
</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">
<div class="container m-auto my-8 bg-elephant-950 rounded-lg shadow p-6 text-gray-50 border border-elephant-900">
<x-table>
<x-slot name="tableheader">
<x-table.header>Name</x-table.header>
@@ -25,15 +26,15 @@
</x-slot>
@foreach ($types as $type)
<tr wire:key="{{ $type->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">{{ $type->name }}</p></x-table.item>
<tr wire:key="{{ $type->id }}" class="text-gray-200 border-b border-white/40 hover:bg-white/10 transition duration-150 ease-in-out">
<x-table.item><p class="p-4 px-3 pl-6 font-bold"><a class="hover:cursor-pointer" wire:click="show({{ $type->id }})" >{{ $type->name }}</a></p></x-table.item>
<x-table.item><p class="p-4 px-3">{{ $type->description }}</p></x-table.item>
<x-table.item><p class="p-4 px-3">{{ $type->amount }}</p></x-table.item>
<x-table.item>
<div class="flex flex-row gap-4 justify-end pr-8">
<flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-olivine hover:shadow hover:text-jet-950" wire:click="show({{ $type->id }})" icon="magnifying-glass"></flux:button>
<flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-pumpkin-500 hover:shadow" wire:click="edit({{ $type->id }})" icon="pencil"></flux:button>
<flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-red-600 hover:shadow" wire:click="delete({{ $type->id }})" icon="trash"></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({{ $type->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({{ $type->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({{ $type->id }})" icon="trash"></flux:button>
</div>
</x-table.item>
</tr>
resources/views/livewire/type/show.blade.php
+3 -3
View File
@@ -3,12 +3,12 @@
{{ __('Show Type - ') . $type->name }}
<x-slot name="headerright">
<flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
<flux:button wire:click="edit({{ $type->id }})" variant="primary" icon="check">Edit</flux:button>
<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({{ $type->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-jet-800 rounded-lg shadow p-6 text-jet-50">
<div class="container m-auto my-8 bg-elephant-950 rounded-lg shadow p-6 text-gray-50 border border-elephant-900">
<div>
<div class="px-4 sm:px-0">
<h3 class="text-base/7 font-semibold text-white">Type Information</h3>