Archived
1
0
Fork 0

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

This commit is contained in:
Henrik Hautakoski 2022-01-24 22:09:46 +01:00
parent 7c49bb8cf7
commit 170a53e473
2 changed files with 58 additions and 22 deletions

View file

@ -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->route_restore = $route_restore;
$this->delete_enabled = (bool) $delete_enabled;
$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
*/

View file

@ -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)
<x-ignite-form class="inline-block" id="dt-delete-{{$_instance->id}}-{{ $item->id }}" method="DELETE" action="{{ route($route_delete, [ $item ]) }}">
<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>
@if ($delete_enabled)
<x-icon wire:click="delete({{ $item->id }})" name="heroicon-o-trash" class="cursor-pointer inline-block w-6 text-red-500"/>
@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 name="heroicon-o-refresh" class="inline-block w-6 text-blue-500"/>
</a>
<x-icon wire:click="restore({{ $item->id }})" name="heroicon-o-refresh" class="cursor-pointer inline-block w-6 text-blue-500"/>
</td>
@endif
</tr>