From 766d815e409096ed119e8adfea227a36aab2c3eb Mon Sep 17 00:00:00 2001 From: Wietse van Ginkel Date: Wed, 26 Feb 2025 16:02:43 +0100 Subject: [PATCH] Fix actions view Fix view path Update Readme --- README.md | 74 +----- .../views/vendor/datatables/actions.blade.php | 10 + .../vendor/datatables/datatable.blade.php | 234 ++++++++++++++---- src/DataTableServiceProvider.php | 7 +- src/Resources/views/datatable.blade.php | 191 -------------- 5 files changed, 211 insertions(+), 305 deletions(-) create mode 100644 resources/views/vendor/datatables/actions.blade.php delete mode 100644 src/Resources/views/datatable.blade.php diff --git a/README.md b/README.md index 8d5f3d8..4cd675c 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular ## Requirements - **PHP 8.2+** -- **Laravel 10.0+** +- **Laravel 10.0+** - **Livewire** *(Optional, only if you need AJAX-driven data tables.)* --- @@ -30,7 +30,7 @@ Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular 1. **Require the package**: ```bash - composer require ginkelsoft/datatables:dev-main + composer require ginkelsoft/datatables ``` 2. **Publish the package views** (optional) for customization: @@ -41,60 +41,6 @@ Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular --- -## Usage (Without Livewire) - -For a traditional server-rendered app: - -```php -use Ginkelsoft\DataTables\DataTable; -use Ginkelsoft\DataTables\Column; -use App\Models\User; - -public function index() -{ - $query = User::query(); - - $datatable = (new DataTable($query)) - ->setColumns([ - Column::make('id', 'ID'), - Column::make('name', 'Name'), - Column::make('email', 'Email'), - ]) - ->setPerPage(10); - - $rows = $datatable->getRows(); - - return view('users.index', compact('rows')); -} -``` - -And in `resources/views/users/index.blade.php`: - -```blade - - - - - - - - - - @foreach($rows as $row) - - - - - - @endforeach - -
IDNameEmail
{{ $row->id }}{{ $row->name }}{{ $row->email }}
- -{{ $rows->links() }} -``` - ---- - ## Usage (With Livewire) If you prefer an **AJAX-driven** workflow with real-time sorting, searching, and pagination: @@ -104,8 +50,8 @@ If you prefer an **AJAX-driven** workflow with real-time sorting, searching, and model="App\\Models\\User" :columns="['id', 'name', 'email']" :actions="[ - ['label' => 'Edit', 'route' => 'users.edit'], - ['label' => 'Delete', 'route' => 'users.destroy'] + ['label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded', 'style' => 'margin-right: 5px;'], + ['label' => 'Delete', 'route' => 'users.destroy', 'class' => 'bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded'] ]" :bulkActions="[ 'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'], @@ -127,18 +73,20 @@ You can now: ### Row Actions -Specify row-level actions in your Blade: +Actions now support custom **classes** and **styles** for better UI customization: ```blade :actions="[ - ['label' => 'Edit', 'route' => 'users.edit'], - ['label' => 'Delete', 'route' => 'users.destroy'] + ['label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded', 'style' => 'margin-right: 5px;'], + ['label' => 'Delete', 'route' => 'users.destroy', 'class' => 'bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded'] ]" ``` +These actions will be rendered as buttons with the specified styles. + ### Bulk Actions -For bulk actions (like deleting multiple rows) set `:bulkActions`: +For bulk actions (like deleting multiple rows), define them as follows: ```blade :bulkActions="[ @@ -157,6 +105,8 @@ When multiple rows are selected, the component redirects to the specified route - **Filter Class** for custom filters (status, categories, etc.). - **Sorting Class** for ascending/descending ordering. - **Select All** (with confirmation modal) to choose between only visible rows or all rows. +- **Custom Actions** now support custom classes and inline styles. +- **Prevent row selection when clicking an action button**, ensuring that clicking an action does not check the row checkbox. --- diff --git a/resources/views/vendor/datatables/actions.blade.php b/resources/views/vendor/datatables/actions.blade.php new file mode 100644 index 0000000..6aa0c18 --- /dev/null +++ b/resources/views/vendor/datatables/actions.blade.php @@ -0,0 +1,10 @@ +
+ @foreach($actions as $action) + + {{ $action['label'] }} + + @endforeach +
diff --git a/resources/views/vendor/datatables/datatable.blade.php b/resources/views/vendor/datatables/datatable.blade.php index 27b95db..eb44464 100644 --- a/resources/views/vendor/datatables/datatable.blade.php +++ b/resources/views/vendor/datatables/datatable.blade.php @@ -1,53 +1,191 @@ -
- {{-- 🔍 Zoekbalk --}} -
- - -
+
+
+
+ {{-- 🔍 Zoekbalk --}} +
+ {{-- 🔍 Zoekbalk met knop --}} +
+ + + {{-- Zoekknop --}} + + + {{-- Resetknop --}} + +
+
+ + + {{-- Selectie aantal resultaten per pagina --}} +
+ + +
+
+ +
+ {{-- ✅ Bulkactie dropdown - Alleen tonen als er rijen geselecteerd zijn --}} +
+ @if(count($selectedRows) > 0) + + + + @endif +
+
- {{-- 📊 Datatable --}} - - - - @foreach($columns as $column) - - @endforeach - @if (!empty($actions)) - - @endif - - - - @foreach($rows as $row) - - @foreach($columns as $column) - - @endforeach - @if (!empty($actions)) - - @endforeach - -
- - {{ ucfirst($column) }} - @if ($sortColumn === $column) - {{ $sortDirection === 'asc' ? '▲' : '▼' }} - @endif - - Acties
{{ $row->$column }} - @foreach($actions as $action) - {{ $action['label'] }} +
+
+ + + + {{-- "Selecteer alles" checkbox --}} + + @foreach($columns as $column) + @if(!in_array($column, $hiddenColumns)) + {{-- 🟢 Alleen tonen als niet hidden --}} + + @endif @endforeach - + + + + + @foreach($rows as $row) + + + + @foreach($columns as $column) + @if(!in_array($column, $hiddenColumns)) + {{-- 🟢 Alleen tonen als niet hidden --}} + + @endif + @endforeach + + + + @endforeach + +
+ + +
+ {{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }} + @if ($sortColumn === $column) + + @if ($sortDirection === 'asc') + ▲ + @else + ▼ + @endif + + @endif +
+ 		Acties
+ + + {{ $row->$column }} + + @includeIf($actionsView, ['row' => $row]) +
+
+
+ + {{-- Paginering --}} +
+ + Pagina {{ $rows->currentPage() }} van {{ $rows->lastPage() }} - {{ $rows->total() }} resultaten + + +
+ {{-- Vorige knop --}} + + + {{-- ✅ Als er 10 of minder pagina’s zijn: toon paginanummers als knoppen --}} + @if ($rows->lastPage() <= 10) + @for ($page = 1; $page <= $rows->lastPage(); $page++) + + @endfor + @else + {{-- ✅ Meer dan 10 pagina’s: gebruik een dropdown --}} + @endif -
- - {{-- Paginering --}} -
- {{ $rows->links() }} + + {{-- Volgende knop --}} + +
+
+ + @if($showSelectAllModal) +
+
+

Selecteer alle rijen?

+

+ Wil je alleen de zichtbare rijen op deze pagina selecteren, of alle rijen in de database? +

+
+ + + +
+
+
+ @endif
diff --git a/src/DataTableServiceProvider.php b/src/DataTableServiceProvider.php index 2d091cc..6d86eae 100644 --- a/src/DataTableServiceProvider.php +++ b/src/DataTableServiceProvider.php @@ -16,8 +16,8 @@ class DataTableServiceProvider extends ServiceProvider */ public function register(): void { - // Load package views - $this->loadViewsFrom(__DIR__ . '/Resources/views', 'datatable'); + // Load package views from the correct + $this->loadViewsFrom(__DIR__ . '/../resources/views/vendor/datatables', 'datatable'); } /** @@ -32,9 +32,8 @@ public function boot(): void { // Publish views to allow customization $this->publishes([ - __DIR__ . '/Resources/views' => resource_path('views/vendor/datatables'), + __DIR__ . '/../resources/views' => resource_path('views/vendor/datatables'), ], 'views'); - // Register the Livewire component for the DataTable Livewire::component('datatable', \Ginkelsoft\DataTables\Livewire\DataTableComponent::class); } diff --git a/src/Resources/views/datatable.blade.php b/src/Resources/views/datatable.blade.php deleted file mode 100644 index eb44464..0000000 --- a/src/Resources/views/datatable.blade.php +++ /dev/null @@ -1,191 +0,0 @@ -
-
-
- {{-- 🔍 Zoekbalk --}} -
- {{-- 🔍 Zoekbalk met knop --}} -
- - - {{-- Zoekknop --}} - - - {{-- Resetknop --}} - -
-
- - - {{-- Selectie aantal resultaten per pagina --}} -
- - -
-
- -
- {{-- ✅ Bulkactie dropdown - Alleen tonen als er rijen geselecteerd zijn --}} -
- @if(count($selectedRows) > 0) - - - - @endif -
-
- -
-
- - - - {{-- "Selecteer alles" checkbox --}} - - @foreach($columns as $column) - @if(!in_array($column, $hiddenColumns)) - {{-- 🟢 Alleen tonen als niet hidden --}} - - @endif - @endforeach - - - - - @foreach($rows as $row) - - - - @foreach($columns as $column) - @if(!in_array($column, $hiddenColumns)) - {{-- 🟢 Alleen tonen als niet hidden --}} - - @endif - @endforeach - - - - @endforeach - -
- - -
- {{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }} - @if ($sortColumn === $column) - - @if ($sortDirection === 'asc') - ▲ - @else - ▼ - @endif - - @endif -
- 		Acties
- - - {{ $row->$column }} - - @includeIf($actionsView, ['row' => $row]) -
-
-
- - {{-- Paginering --}} -
- - Pagina {{ $rows->currentPage() }} van {{ $rows->lastPage() }} - {{ $rows->total() }} resultaten - - -
- {{-- Vorige knop --}} - - - {{-- ✅ Als er 10 of minder pagina’s zijn: toon paginanummers als knoppen --}} - @if ($rows->lastPage() <= 10) - @for ($page = 1; $page <= $rows->lastPage(); $page++) - - @endfor - @else - {{-- ✅ Meer dan 10 pagina’s: gebruik een dropdown --}} - - @endif - - {{-- Volgende knop --}} - -
-
-
- - @if($showSelectAllModal) -
-
-

Selecteer alle rijen?

-

- Wil je alleen de zichtbare rijen op deze pagina selecteren, of alle rijen in de database? -

-
- - - -
-
-
- @endif -