fixed editing and deleting of colors

app/Livewire/Filament/Color.php

@@ -26,6 +26,11 @@ class Color extends Component
 
     public $search ='';
 
+    // Edit Modal + Query
+    public $editModal = false;
+    public $editquery = '';
+    
+
     public function create() {
         @Auth::check();
 
@@ -47,7 +52,29 @@ class Color extends Component
         $this->createModal = false;
     }
 
-    public function delete(Color $color) {
+    public function edit($colorid) {
+        @Auth::check();
+
+        $color =ColorModel::findOrFail($colorid);
+
+        $this->name = $color->name;
+        $this->hex = $color->hex;
+        
+    }
+
+    public function save($colorid) {
+        @Auth::check();
+        
+        $color = ColorModel::findOrFail($colorid);
+        $color->name = $this->name;
+        $color->hex = $this->hex;
+        $color->save();
+
+        session()->flash('status', 'Color successfully updated.');
+        
+        $this->editModal = false;
+    }
+    public function delete(ColorModel $color) {
         @Auth::check();
         $color->delete();
     }

resources/views/livewire/filament/color.blade.php

@@ -14,23 +14,27 @@
     
 
 
-    <div class="container m-auto my-8 bg-zinc-700">
+    <div class="container m-auto my-8">
         <table class="w-full">
-            <thead class="bg-zinc-900">
+            <thead class="border-b border-zinc-500">
                 <tr class="text-left">
                     <th class="px-8 py-4 font-bold text-lg">Name</th>
                     <th class="px-8 py-4 font-bold text-lg text-center">Color</th>
                     <th class="px-8 py-4 font-bold text-lg text-center">Hex</th>
-                    <th></th>
+                    <th class="w-1/6"></th>
                 </tr>
             </thead>
             <tbody>
                 @foreach ($colors as $color)
-                    <tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-600 transition duration-200">
+                    <tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-900 transition duration-200">
                         <td><p class="p-4 pl-8">{{ $color->name }}</p></td>
                         <td><div class="w-8 h-8 rounded mx-auto" style="background-color: {{ $color->hex }}"></div></td>
                         <td><p class="p-4 text-center">{{ $color->hex }}</p></td>
-                        <td class="text-right pr-8"><button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button></td>
+                        <td class="text-right pr-8 flex flex-row gap-4 justify-end">
+                            <button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button>
+                            
+                            <button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button>
+                        </td>
                     </tr>
                 @endforeach
             </tbody>
@@ -64,4 +68,28 @@
         </div>
     </x-modal>
 
+        <!-- Edit Form -->
+
+        <x-modal wire:model="editModal" >
+            <div class="flex justify-center flex-col">
+                <div class="flex justify-end">
+                    <button wire:click="$set('editModal', false)" class="text-accent p-2 m-2 cursor-pointer rounded-full bg-zinc-800 absolute"><flux:icon.x-mark class="size-6"/></button>
+                </div>
+                <div class="bg-zinc-700">
+                    <h3 class="text-2xl content-cente p-8 text-center border-b border-zinc-600">Edit Color</h3>
+                </div>
+                <div class="py-8 px-8">
+                    <form class="flex flex-col gap-4" wire:submit="save({{ $color->id }})">
+                        <div class="flex justify-center gap-8 flex-col">
+                            <input type="text" placeholder="Name" wire:model="name" class="bg-zinc-800 rounded" required/>
+                            <input type="text" placeholder="Hex" wire:model="hex" class="bg-zinc-800 rounded" required/>
+                            <button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
+                        </div>
+                    </form>
+                </div>
+    
+    
+            </div>
+        </x-modal>
+
 </section>

routes/web.php

@@ -4,6 +4,7 @@ use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\FilamentTypeController;
 use App\Http\Controllers\FilamentController;
 use App\Http\Controllers\ManufacturerController;
+use App\Http\Controllers\ColorController;
 
 use App\Livewire\Dashboard;
 use App\Livewire\Filament\Color;