Filter types, Language, Views and Components

resources/lang/vendor/datatables/de/datatables.php

@@ -0,0 +1,24 @@
+<?php
+
+return [
+    'search' => 'Suchen',
+    'reset' => 'Zurücksetzen',
+    'filters' => 'Filter',
+    'bulk_actions' => 'Massenaktionen',
+    'execute' => 'Ausführen',
+    'select_all' => 'Alle auswählen',
+    'deselect_all' => 'Alle abwählen',
+    'results' => 'Ergebnisse',
+    'apply_filters' => 'Filter anwenden',
+    'results_per_page' => 'Ergebnisse pro Seite',
+    'page' => 'Seite',
+    'of' => 'von',
+    'previous' => 'Zurück',
+    'next' => 'Weiter',
+    'actions' => 'Aktionen',
+    'select_all_question' => 'Möchten Sie nur die sichtbaren Zeilen auf dieser Seite oder alle Zeilen in der Datenbank auswählen?',
+    'select_all_visible_rows' => 'Nur die sichtbaren Zeilen',
+    'select_all_rows' => 'Alle Zeilen auswählen',
+    'cancel' => 'Abbrechen',
+    'select_option' => 'Option auswählen',
+];

resources/lang/vendor/datatables/en/datatables.php

@@ -0,0 +1,24 @@
+<?php
+
+return [
+    'search' => 'Search',
+    'reset' => 'Reset',
+    'filters' => 'Filters',
+    'bulk_actions' => 'Bulk Actions',
+    'execute' => 'Execute',
+    'select_all' => 'Select all',
+    'deselect_all' => 'Deselect all',
+    'results' => 'Results',
+    'apply_filters' => 'Apply Filters',
+    'results_per_page' => 'Results per page',
+    'page' => 'Page',
+    'of' => 'of',
+    'previous' => 'Previous',
+    'next' => 'Next',
+    'actions' => 'Actions',
+    'select_all_question' => 'Do you want to select only the visible rows on this page or all rows in the database?',
+    'select_all_visible_rows' => 'Only the visible rows',
+    'select_all_rows' => 'Select all rows',
+    'cancel' => 'Cancel',
+    'select_option' => 'Select option',
+];

resources/lang/vendor/datatables/es/datatables.php

@@ -0,0 +1,24 @@
+<?php
+
+return [
+    'search' => 'Buscar',
+    'reset' => 'Restablecer',
+    'filters' => 'Filtros',
+    'bulk_actions' => 'Acciones en masa',
+    'execute' => 'Ejecutar',
+    'select_all' => 'Seleccionar todo',
+    'deselect_all' => 'Deseleccionar todo',
+    'results' => 'Resultados',
+    'apply_filters' => 'Aplicar filtros',
+    'results_per_page' => 'Resultados por página',
+    'page' => 'Página',
+    'of' => 'de',
+    'previous' => 'Anterior',
+    'next' => 'Siguiente',
+    'actions' => 'Acciones',
+    'select_all_question' => '¿Desea seleccionar solo las filas visibles en esta página o todas las filas de la base de datos?',
+    'select_all_visible_rows' => 'Solo las filas visibles',
+    'select_all_rows' => 'Seleccionar todas las filas',
+    'cancel' => 'Cancelar',
+    'select_option' => 'Seleccionar opción',
+];

resources/lang/vendor/datatables/fr/datatables.php

@@ -0,0 +1,24 @@
+<?php
+
+return [
+    'search' => 'Rechercher',
+    'reset' => 'Réinitialiser',
+    'filters' => 'Filtres',
+    'bulk_actions' => 'Actions groupées',
+    'execute' => 'Exécuter',
+    'select_all' => 'Tout sélectionner',
+    'deselect_all' => 'Tout désélectionner',
+    'results' => 'Résultats',
+    'apply_filters' => 'Appliquer les filtres',
+    'results_per_page' => 'Résultats par page',
+    'page' => 'Page',
+    'of' => 'de',
+    'previous' => 'Précédent',
+    'next' => 'Suivant',
+    'actions' => 'Actions',
+    'select_all_question' => 'Voulez-vous sélectionner uniquement les lignes visibles sur cette page ou toutes les lignes de la base de données ?',
+    'select_all_visible_rows' => 'Uniquement les lignes visibles',
+    'select_all_rows' => 'Sélectionner toutes les lignes',
+    'cancel' => 'Annuler',
+    'select_option' => 'Sélectionner une option',
+];

resources/lang/vendor/datatables/nl/datatables.php

@@ -0,0 +1,24 @@
+<?php
+
+return [
+    'search' => 'Zoeken',
+    'reset' => 'Reset',
+    'filters' => 'Filters',
+    'bulk_actions' => 'Bulkacties',
+    'execute' => 'Uitvoeren',
+    'select_all' => 'Alles selecteren',
+    'deselect_all' => 'Alles deselecteren',
+    'results' => 'Resultaten',
+    'apply_filters' => 'Filters toepassen',
+    'results_per_page' => 'Resultaten per pagina',
+    'page' => 'Pagina',
+    'of' => 'van',
+    'previous' => 'Vorige',
+    'next' => 'Volgende',
+    'actions' => 'Acties',
+    'select_all_question' => 'Wil je alleen de zichtbare rijen op deze pagina selecteren of alle rijen in de database?',
+    'select_all_visible_rows' => 'Alleen de zichtbare rijen',
+    'select_all_rows' => 'Alle rijen selecteren',
+    'cancel' => 'Annuleren',
+    'select_option' => 'Selecteer een optie',
+];

resources/views/vendor/datatables/components/bulk-action.blade.php

@@ -0,0 +1,13 @@
+<label class="text-sm text-gray-600">{{ __('datatable::datatables.bulk_actions') }}</label>
+<select wire:model="bulkAction"
+        class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48 focus:ring-2 focus:ring-blue-400 transition">
+    <option value="">-- Selecteer een actie --</option>
+    @foreach($bulkActions as $key => $action)
+        <option value="{{ $key }}">{{ $action['label'] }}</option>
+    @endforeach
+</select>
+
+<button wire:click="executeBulkAction"
+        class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm shadow-sm transition">
+    {{ __('datatable::datatables.execute') }}
+</button>

resources/views/vendor/datatables/components/page-result.blade.php

@@ -0,0 +1,8 @@
+<label for="perPage" class="text-sm text-gray-600">{{ __('datatable::datatables.results_per_page') }}</label>
+<select wire:change="updatePerPage($event.target.value)" id="perPage"
+        class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:ring-2 focus:ring-blue-400 transition">
+    <option value="10">10</option>
+    <option value="25">25</option>
+    <option value="50">50</option>
+    <option value="100">100</option>
+</select>

resources/views/vendor/datatables/components/pagination.blade.php

@@ -0,0 +1,39 @@
+<div class="mt-4 flex justify-between items-center">
+                <span class="text-sm text-gray-600">
+                    {{ __('datatable::datatables.page') }} {{ $rows->currentPage() }} van {{ $rows->lastPage() }} - {{ $rows->total() }} {{ __('datatable::datatables.results') }}
+                </span>
+
+    <div class="flex gap-2">
+        <button wire:click="previousPage"
+                class="px-4 py-2 rounded {{ $rows->onFirstPage() ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
+                {{ $rows->onFirstPage() ? 'disabled' : '' }}>
+            {{ __('datatable::datatables.previous') }}
+        </button>
+
+        @if ($rows->lastPage() <= 10)
+            @for ($page = 1; $page <= $rows->lastPage(); $page++)
+                <button wire:click="gotoPage({{ $page }})"
+                        class="px-4 py-2 rounded {{ $rows->currentPage() == $page ? 'bg-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}">
+                    {{ $page }}
+                </button>
+            @endfor
+        @else
+
+            <select wire:change="gotoPage($event.target.value)"
+                    class="border border-gray-300 rounded px-3 py-1 text-sm w-16">
+                @for ($page = 1; $page <= $rows->lastPage(); $page++)
+                    <option value="{{ $page }}" {{ $rows->currentPage() == $page ? 'selected' : '' }}>
+                        {{ $page }}
+                    </option>
+                @endfor
+            </select>
+        @endif
+
+        {{-- Volgende knop --}}
+        <button wire:click="nextPage"
+                class="px-4 py-2 rounded {{ $rows->hasMorePages() ? 'bg-gray-100 hover:bg-gray-200 text-gray-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed' }}"
+                {{ $rows->hasMorePages() ? '' : 'disabled' }}>
+            {{ __('datatable::datatables.next') }}
+        </button>
+    </div>
+</div>

resources/views/vendor/datatables/components/search.blade.php

@@ -0,0 +1,13 @@
+<input type="text" wire:model="search"
+       placeholder="{{ __('datatable::datatables.search') }}"
+       class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-64 focus:ring-2 focus:ring-blue-400 focus:outline-none transition">
+
+<button wire:click="applySearch"
+        class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm shadow-sm transition">
+    {{ __('datatable::datatables.search') }}
+</button>
+
+<button wire:click="resetSearch"
+        class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm shadow-sm transition">
+    {{ __('datatable::datatables.reset') }}
+</button>

resources/views/vendor/datatables/components/select-all-modal.blade.php

@@ -0,0 +1,22 @@
+<div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center z-50">
+    <div class="bg-white p-6 rounded-xl shadow-xl w-96">
+        <h2 class="text-lg font-semibold mb-4 text-gray-800">{{ __('datatable::datatables.select_all_rows') }}</h2>
+        <p class="text-gray-600 text-sm mb-4">
+            {{ __('datatable::datatables.select_all_question') }}
+        </p>
+        <div class="flex justify-end gap-3">
+            <button wire:click="confirmSelectAll('visible')"
+                    class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-sm transition">
+                {{ __('datatable::datatables.select_all_visible_rows') }}
+            </button>
+            <button wire:click="confirmSelectAll('all')"
+                    class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg shadow-sm transition">
+                {{ __('datatable::datatables.select_all_rows') }}
+            </button>
+            <button wire:click="cancelSelectAll"
+                    class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-lg shadow-sm transition">
+                {{ __('datatable::datatables.cancel') }}
+            </button>
+        </div>
+    </div>
+</div>

resources/views/vendor/datatables/components/table.blade.php

@@ -0,0 +1,55 @@
+<table class="min-w-full divide-y divide-gray-200 border border-gray-300 rounded-lg shadow-sm">
+    <thead class="bg-gray-50">
+    <tr>
+        <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border">
+            <input type="checkbox" wire:click="toggleSelectAll"
+                   class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition">
+        </th>
+        @foreach($columns as $column)
+            @if(!in_array($column, $hiddenColumns))
+                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border cursor-pointer hover:bg-gray-100 transition"
+                    wire:click="sortBy('{{ $column }}')">
+                    <div class="flex items-center">
+                        {{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }}
+                        @if ($sortColumn === $column)
+                            <span class="ml-2 text-blue-500">
+                                            @if ($sortDirection === 'asc')
+                                    ▲
+                                @else
+                                    ▼
+                                @endif
+                                        </span>
+                        @endif
+                    </div>
+                </th>
+            @endif
+        @endforeach
+        <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border">{{ __('datatable::datatables.actions') }}</th>
+    </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-gray-200">
+    @foreach($rows as $row)
+        <tr class="hover:bg-gray-100 transition cursor-pointer"
+            wire:click.prevent="toggleRowSelection({{ $row->id }})">
+            <td class="px-4 py-3 border">
+                <input type="checkbox" wire:model="selectedRows"
+                       value="{{ $row->id }}"
+                       class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition"
+                       onclick="event.stopPropagation();">
+            </td>
+
+            @foreach($columns as $column)
+                @if(!in_array($column, $hiddenColumns))
+                    <td class="px-4 py-3 border text-sm text-gray-700">
+                        {{ $row->$column }}
+                    </td>
+                @endif
+            @endforeach
+
+            <td class="px-4 py-3 border">
+                @includeIf($actionsView, ['row' => $row])
+            </td>
+        </tr>
+    @endforeach
+    </tbody>
+</table>