fixed Color & Type View and Tables

app/Livewire/Filament/Color.php

@@ -7,6 +7,7 @@ use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\Attributes\title;
 use Illuminate\Support\Facades\Auth;
+use Flux\Flux;
 
 use App\Models\Color as ColorModel;
 
@@ -22,13 +23,13 @@ class Color extends Component
     #[Validate('required')]
     public $hex = '';
 
-    public $createModal = false;
-
     public $search ='';
 
     // Edit Modal + Query
-    public $editModal = false;
     public $editquery = '';
+
+    public $editid = '';
+    public $deleteid = '';
     
 
     public function create() {
@@ -49,39 +50,70 @@ class Color extends Component
         $this->reset(['name', 'hex']);
 
         // Close the modal
-        $this->createModal = false;
+        Flux::modal('createModal')->close();
     }
 
     public function edit($colorid) {
         @Auth::check();
 
-        $color =ColorModel::findOrFail($colorid);
+        $editid = $colorid;
+        $this->editid = $editid;
+
+        $color =ColorModel::findOrFail($editid);
 
         $this->name = $color->name;
         $this->hex = $color->hex;
         
+        Flux::modal('editModal')->show();
     }
 
-    public function save($colorid) {
+    public function save($editid) {
         @Auth::check();
         
-        $color = ColorModel::findOrFail($colorid);
+        $color = ColorModel::findOrFail($editid);
         $color->name = $this->name;
         $color->hex = $this->hex;
         $color->save();
 
         session()->flash('status', 'Color successfully updated.');
         
-        $this->editModal = false;
+        Flux::modal('editModal')->close();
     }
-    public function delete(ColorModel $color) {
+
+    public function deleteModal($colorid) {
         @Auth::check();
-        $color->delete();
+
+        $deleteid = $colorid;
+        $this->deleteid = $deleteid;
+
+        $color = ColorModel::findOrFail($colorid);
+        $this->name = $color->name;
+        $this->hex = $color->hex;
+
+        Flux::modal('deleteModal')->show();
+    }
+    public function delete($deleteid) {
+        @Auth::check();
+
+        $color = ColorModel::findOrFail($deleteid)->delete();
+
+        $this->deleteid = $deleteid;
+        Flux::modal('deleteModal')->close();
+
+        // Clear the form
+        $this->reset(['name', 'hex', 'deleteid']);
+
+        session()->flash('status', 'Color successfully deleted.');
+    }
+
+    public function cancel() {
+        $this->reset(['name', 'hex', 'deleteid']);
+        Flux::modals()->close();
     }
     public function render()
     {
         return view('livewire.filament.color', [
-            'colors' => ColorModel::search('name', $this->search)->paginate(10)
+            'colors' => ColorModel::search('name', $this->search)->paginate(20)
         ]);
     }
 }

app/Livewire/Filament/Type.php

@@ -4,12 +4,110 @@ namespace App\Livewire\Filament;
 
 use Livewire\Component;
 use Livewire\Attributes\title;
+use Livewire\WithPagination;
+use Livewire\Attributes\Validate;
+use Illuminate\Support\Facades\Auth;
+use App\Models\FilamentType;
+use Flux\Flux;
 
 #[title('Types')]
 class Type extends Component
 {
+    use WithPagination;
+
+    // Validation
+    #[Validate('required')]
+    public $name = '';
+
+    public $description = '';
+
+    public $search ='';
+
+    public $editid = '';
+    public $deleteid = '';
+    
+
+    public function create() {
+        @Auth::check();
+
+
+        // Validate
+        $this->validate(); 
+
+        $type = new FilamentType();
+        $type->name = $this->name;
+        $type->description = $this->description;
+        $type->save();
+
+        // Clear the form
+        $this->resetInputFields();
+
+        // Close the modal
+        Flux::modal('createModal')->close();
+    }
+
+    public function edit($typeid) {
+        @Auth::check();
+
+        $editid = $typeid;
+        $this->editid = $editid;
+
+        $type =FilamentType::findOrFail($editid);
+
+        $this->name = $type->name;
+        $this->description = $type->description;
+        
+        Flux::modal('editModal')->show();
+    }
+
+    public function save($editid) {
+        @Auth::check();
+        
+        $type = FilamentType::findOrFail($editid);
+        $type->name = $this->name;
+        $type->description = $this->description;
+        $type->save();
+
+        $this->resetInputFields();
+        
+        Flux::modal('editModal')->close();
+    }
+    public function deleteModal($typeid) {
+        @Auth::check();
+
+        $deleteid = $typeid;
+        $this->deleteid = $deleteid;
+
+        $type = FilamentType::findOrFail($deleteid);
+        $this->name = $type->name;
+        $this->description = $type->description;
+
+        Flux::modal('deleteModal')->show();
+    }
+    public function delete($deleteid) {
+        @Auth::check();
+
+        $type = FilamentType::findOrFail($deleteid)->delete();
+
+        $this->deleteid = $deleteid;
+        Flux::modal('deleteModal')->close();
+
+        // Clear the form
+        $this->resetInputFields();
+    }
+
+    public function cancel() {
+        $this->resetInputFields();
+        Flux::modals()->close();
+    }
+
+    public function resetInputFields() {
+        $this->reset(['name', 'description', 'deleteid', 'editid']);
+    }
     public function render()
     {
-        return view('livewire.filament.type');
+        return view('livewire.filament.type', [
+            'types' => FilamentType::search('name', $this->search)->paginate(10)
+        ]);
     }
 }