Skip to content

Commit f72815d

Browse files
ginkelsoft-developmentginkelsoft-development
authored
added mobile style (#11)
1 parent 9c64e9b commit f72815d

File tree

7 files changed

+129
-86
lines changed

7 files changed

+129
-86
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="block md:hidden flex justify-between items-center mt-4">
2+
<button wire:click="previousPage"
3+
class="px-4 py-2 rounded-lg text-sm shadow-sm transition {{ $currentPage === 1 ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
4+
{{ $currentPage === 1 ? 'disabled' : '' }}>
5+
{{ __('datatable::datatables.previous') }}
6+
</button>
7+
8+
<span class="text-sm text-gray-600">
9+
{{ __('datatable::datatables.page') }} {{ $currentPage }} {{ __('datatable::datatables.of') }} {{ $rows->lastPage() }}
10+
</span>
11+
12+
<button wire:click="nextPage"
13+
class="px-4 py-2 rounded-lg text-sm shadow-sm transition {{ $currentPage === $rows->lastPage() ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
14+
{{ $currentPage === $rows->lastPage() ? 'disabled' : '' }}>
15+
{{ __('datatable::datatables.next') }}
16+
</button>
17+
</div>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="block md:hidden">
2+
@foreach($rows as $row)
3+
<div class="bg-white rounded-lg shadow-md p-4 mb-4 border border-gray-300">
4+
<div class="flex items-center justify-between mb-3">
5+
<strong class="text-gray-800">#{{ $row->id }}</strong>
6+
<input type="checkbox" wire:model="selectedRows"
7+
wire:change="$dispatch('refreshTable')"
8+
value="{{ $row->id }}"
9+
class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition">
10+
</div>
11+
<div class="grid gap-2 text-sm text-gray-700">
12+
@foreach($columns as $column)
13+
@if(!in_array($column, $hiddenColumns))
14+
<div class="flex justify-between border-b pb-1">
15+
<strong>{{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }}:</strong>
16+
<span>{{ $row->$column }}</span>
17+
</div>
18+
@endif
19+
@endforeach
20+
</div>
21+
22+
{{-- ✅ Acties onderaan voor mobiel --}}
23+
<div class="mt-3 flex flex-wrap gap-2">
24+
@includeIf($actionsView, ['row' => $row])
25+
</div>
26+
</div>
27+
@endforeach
28+
</div>

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<label for="perPage" class="text-sm text-gray-600">{{ __('datatable::datatables.results_per_page') }}</label>
2-
<select wire:change="updatePerPage($event.target.value)" id="perPage"
3-
class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:ring-2 focus:ring-blue-400 transition">
4-
<option value="10">10</option>
5-
<option value="25">25</option>
6-
<option value="50">50</option>
7-
<option value="100">100</option>
8-
</select>
1+
<div class="hidden md:block">
2+
<label for="perPage" class="text-sm text-gray-600">{{ __('datatable::datatables.results_per_page') }}</label>
3+
<select wire:change="updatePerPage($event.target.value)" id="perPage"
4+
class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:ring-2 focus:ring-blue-400 transition">
5+
<option value="10">10</option>
6+
<option value="25">25</option>
7+
<option value="50">50</option>
8+
<option value="100">100</option>
9+
</select>
10+
11+
</div>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<span class="text-sm text-gray-600">
33
{{ __('datatable::datatables.page') }} {{ $currentPage }} {{ __('datatable::datatables.of') }} {{ $rows->lastPage() }} - {{ $rows->total() }} {{ __('datatable::datatables.results') }}
44
</span>
5-
6-
<div class="flex gap-2">
5+
<div class="hidden md:flex gap-2">
76
<button wire:click="previousPage"
87
class="px-4 py-2 rounded {{ $currentPage === 1 ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
98
{{ $currentPage === 1 ? 'disabled' : '' }}>
@@ -35,3 +34,5 @@ class="px-4 py-2 rounded {{ $currentPage === $rows->lastPage() ? 'bg-gray-200 te
3534
</button>
3635
</div>
3736
</div>
37+
38+
@includeIf('datatable::components.mobile.pagination')

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
<input type="text" wire:model="search"
2-
placeholder="{{ __('datatable::datatables.search') }}"
3-
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">
41

5-
<button wire:click="applySearch"
6-
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm shadow-sm transition">
7-
{{ __('datatable::datatables.search') }}
8-
</button>
2+
<input type="text" wire:model="search"
3+
placeholder="{{ __('datatable::datatables.search') }}"
4+
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">
95

10-
<button wire:click="resetSearch"
11-
class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm shadow-sm transition">
12-
{{ __('datatable::datatables.reset') }}
13-
</button>
6+
<button wire:click="applySearch"
7+
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm shadow-sm transition">
8+
{{ __('datatable::datatables.search') }}
9+
</button>
10+
11+
<button wire:click="resetSearch"
12+
class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm shadow-sm transition">
13+
{{ __('datatable::datatables.reset') }}
14+
</button>

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

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,59 @@
1-
<table class="min-w-full divide-y divide-gray-200 border border-gray-300 rounded-lg shadow-sm">
2-
<thead class="bg-gray-50">
3-
<tr>
4-
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border">
5-
<input type="checkbox" wire:click="toggleSelectAll"
6-
class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition">
7-
</th>
8-
@foreach($columns as $column)
9-
@if(!in_array($column, $hiddenColumns))
10-
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border cursor-pointer hover:bg-gray-100 transition"
11-
wire:click="sortBy('{{ $column }}')">
12-
<div class="flex items-center">
13-
{{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }}
14-
@if ($sortColumn === $column)
15-
<span class="ml-2 text-blue-500">
16-
@if ($sortDirection === 'asc')
17-
▲
18-
@else
19-
▼
20-
@endif
21-
</span>
22-
@endif
23-
</div>
24-
</th>
25-
@endif
26-
@endforeach
27-
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border">{{ __('datatable::datatables.actions') }}</th>
28-
</tr>
29-
</thead>
30-
<tbody class="bg-white divide-y divide-gray-200">
31-
@foreach($rows as $row)
32-
<tr class="hover:bg-gray-100 transition cursor-pointer"
33-
wire:click.prevent="toggleRowSelection({{ $row->id }})">
34-
<td class="px-4 py-3 border">
35-
<input type="checkbox" wire:model="selectedRows"
36-
value="{{ $row->id }}"
37-
class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition"
38-
onclick="event.stopPropagation();">
39-
</td>
40-
1+
<div class="overflow-x-auto">
2+
<table class="w-full min-w-max divide-y divide-gray-200 border border-gray-300 rounded-lg shadow-sm hidden md:table">
3+
<thead class="bg-gray-50">
4+
<tr>
5+
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border">
6+
<input type="checkbox" wire:click="toggleSelectAll"
7+
class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition">
8+
</th>
419
@foreach($columns as $column)
4210
@if(!in_array($column, $hiddenColumns))
43-
<td class="px-4 py-3 border text-sm text-gray-700">
44-
{{ $row->$column }}
45-
</td>
11+
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border cursor-pointer hover:bg-gray-100 transition"
12+
wire:click="sortBy('{{ $column }}')">
13+
<div class="flex items-center">
14+
{{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }}
15+
@if ($sortColumn === $column)
16+
<span class="ml-2 text-blue-500">
17+
@if ($sortDirection === 'asc')
18+
▲
19+
@else
20+
▼
21+
@endif
22+
</span>
23+
@endif
24+
</div>
25+
</th>
4626
@endif
4727
@endforeach
48-
49-
<td class="px-4 py-3 border">
50-
@includeIf($actionsView, ['row' => $row])
51-
</td>
28+
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border">
29+
{{ __('datatable::datatables.actions') }}
30+
</th>
5231
</tr>
53-
@endforeach
54-
</tbody>
55-
</table>
32+
</thead>
33+
<tbody class="bg-white divide-y divide-gray-200">
34+
@foreach($rows as $row)
35+
<tr class="hover:bg-gray-100 transition cursor-pointer"
36+
wire:click.prevent="toggleRowSelection({{ $row->id }})">
37+
<td class="px-4 py-3 border">
38+
<input type="checkbox" wire:model="selectedRows"
39+
value="{{ $row->id }}"
40+
class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-400 transition"
41+
onclick="event.stopPropagation();">
42+
</td>
43+
@foreach($columns as $column)
44+
@if(!in_array($column, $hiddenColumns))
45+
<td class="px-4 py-3 border text-sm text-gray-700">
46+
{{ $row->$column }}
47+
</td>
48+
@endif
49+
@endforeach
50+
<td class="px-4 py-3 border">
51+
@includeIf($actionsView, ['row' => $row])
52+
</td>
53+
</tr>
54+
@endforeach
55+
</tbody>
56+
</table>
57+
</div>
58+
59+
@includeIf('datatable::components.mobile.table')

‎src/Livewire/DataTableComponent.php‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ public function getRows(): LengthAwarePaginator
247247

248248
$query->orderBy($this->sortColumn, $this->sortDirection);
249249

250-
250+
// Handmatige paginatie zonder Livewire’s paginate() (voorkomt URL-updates)
251251
$total = $query->count();
252252
$rows = $query->skip(($this->currentPage - 1) * $this->perPage)->take($this->perPage)->get();
253253

@@ -259,30 +259,19 @@ public function getRows(): LengthAwarePaginator
259259
);
260260
}
261261

262-
/**
263-
* Navigate to a specific page without modifying the URL.
264-
*
265-
* @param int $page The page number to navigate to.
266-
*/
267262
public function gotoPage(int $page): void
268263
{
269-
$this->setPage($page, $this->getPaginationName());
264+
$this->currentPage = max(1, min($page, $this->getRows()->lastPage()));
270265
}
271266

272-
/**
273-
* Navigate to the previous page.
274-
*/
275267
public function previousPage(): void
276268
{
277-
$this->setPage($this->page - 1, $this->getPaginationName());
269+
$this->currentPage = max(1, $this->currentPage - 1);
278270
}
279271

280-
/**
281-
* Navigate to the next page.
282-
*/
283272
public function nextPage(): void
284273
{
285-
$this->setPage($this->page + 1, $this->getPaginationName());
274+
$this->currentPage = min($this->currentPage + 1, $this->getRows()->lastPage());
286275
}
287276

288277
/**

0 commit comments

Comments
 (0)