Livewire Datatable: adding delete/restore functionality as livewire actions instead of regular controller actions.

app/Http/Livewire/Datatable.php

@@ -10,7 +10,7 @@ use Illuminate\Support\Str;
 
 class Datatable extends Component
 {
-	use WithPagination, Traits\WithSort;
+	use WithPagination, Traits\WithSort, Traits\Alert;
 
 	/**
 	 * Query string settings.
@@ -55,14 +55,14 @@ class Datatable extends Component
 	public $route_edit;
 
 	/**
-	 * Route for deleting a record (if null, link is omitted)
+	 * True if delete functionality is enabled.
 	 */
-	public $route_delete;
+	public $delete_enabled;
 
 	/**
-	 * Route for restoring a record (if null, link is omitted)
+	 * True if restore functionality is enabled.
 	 */
-	public $route_restore;
+	public $restore_enabled;
 
 	/**
 	 * How many records should be displayed on one page.
@@ -71,7 +71,7 @@ class Datatable extends Component
 
     public function mount(string $model, array $columns,
 		array $sort_columns = [], $default_sort = '',
-		$route_create = null, $route_edit = null, $route_delete = null, $route_restore = null)
+		$route_create = null, $route_edit = null, $delete_enabled = false, $restore_enabled = false)
     {
 		$this->model = app()->make($model);
 		$this->default_sort = $default_sort;
@@ -79,12 +79,54 @@ class Datatable extends Component
 		$this->sort_columns = $sort_columns;
 		$this->route_create = $route_create;
 		$this->route_edit = $route_edit;
-		$this->route_delete = $route_delete;
+		$this->delete_enabled = (bool) $delete_enabled;
-		$this->route_restore = $route_restore;
+		$this->restore_enabled = (bool) $restore_enabled;
 
 		$this->setTrashedColumns();
     }
 
+	/**
+	 * Delete an record
+	 */
+	public function delete($id)
+	{
+		if (!$this->delete_enabled) {
+			return;
+		}
+
+		$record = $this->model->find($id);
+
+		if (!$record) {
+			$this->danger('Record not found');
+			return;
+		}
+
+		$record->delete();
+
+		$this->info(__("Record #:id was deleted.", [ 'id' => $record->id ]));
+	}
+
+	/**
+	 * Restore a delted record
+	 */
+	public function restore($id)
+	{
+		if (!$this->restore_enabled) {
+			return;
+		}
+
+		$record = $this->model->withTrashed()->find($id);
+
+		if (!$record) {
+			$this->danger('Record not found');
+			return;
+		}
+
+		$record->restore();
+
+		$this->info(__("Record #:id was restored.", [ 'id' => $record->id ]));
+	}
+
     /**
      * Render the datatable
      */

resources/views/livewire/datatable.blade.php

@@ -1,12 +1,12 @@
 <div>
 
-    @if ($route_create || $route_restore)
+    @if ($route_create || $restore_enabled)
     <div class="flex space-x-4 mb-4">
         @if ($route_create)
         <x-button :href="route($route_create)" type="info">{{ __('New') }}</x-button>
         @endif
 
-        @if ($route_restore)
+        @if ($restore_enabled)
         <x-button wire:click="toggleTrashed" type="warning">{{ __('Show deleted records') }}</x-button>
         @endif
     </div>
@@ -28,7 +28,7 @@
             </th>
             @endforeach
 
-            @if($route_delete || $route_edit)
+            @if($delete_enabled || $route_edit)
             <th class="border px-6 py-3 w-4">{{ __('Actions') }}</th>
             @endif
         </tr>
@@ -40,7 +40,7 @@
             <td class="border px-4 py-2">{{ Arr::get($item, $key) }}</td>
             @endforeach
 
-            @if (!$trashed && ($route_edit || $route_delete))
+            @if (!$trashed && ($route_edit || $delete_enabled))
             <td class="border px-4 py-2">
                 @if($route_edit)
                 <a href="{{ route($route_edit, [ $item ]) }}">
@@ -48,19 +48,13 @@
                 </a>
                 @endif
 
-                @if($route_delete)
+                @if ($delete_enabled)
-                <x-ignite-form class="inline-block" id="dt-delete-{{$_instance->id}}-{{ $item->id }}" method="DELETE" action="{{ route($route_delete, [ $item ]) }}">
+                <x-icon wire:click="delete({{ $item->id }})" name="heroicon-o-trash" class="cursor-pointer inline-block w-6 text-red-500"/>
-                <a href="javascript:document.getElementById('dt-delete-{{$_instance->id}}-{{ $item->id }}').submit();">
-                    <x-icon name="heroicon-o-trash" class="inline-block w-6 text-red-500"/>
-                </a>
-                </x-ignite-form>
                 @endif
             </td>
-            @elseif ($trashed && $route_restore)
+            @elseif ($trashed && $restore_enabled)
             <td class="border px-4 py-2">
-                <a href="{{ route($route_restore, [ $item ]) }}">
+                <x-icon wire:click="restore({{ $item->id }})" name="heroicon-o-refresh" class="cursor-pointer inline-block w-6 text-blue-500"/>
-                    <x-icon name="heroicon-o-refresh" class="inline-block w-6 text-blue-500"/>
-                </a>
             </td>
             @endif
         </tr>