Skip to content

Commit ca42680

Browse files
lrljoelrljoe
authored
Migrate Pagination to use new HasPaginationStyling
1 parent 61a9b66 commit ca42680

File tree

13 files changed

+335
-166
lines changed

13 files changed

+335
-166
lines changed

‎docs/pagination/available-methods.md‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -229,40 +229,6 @@ public function configure(): void
229229
}
230230
```
231231

232-
## setPerPageFieldAttributes
233-
Allows for customisation of the appearance of the "Per Page" dropdown
234-
235-
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
236-
237-
### default-colors
238-
Setting to false will disable the default colors for the Per Page dropdown, the default colors are:
239-
Bootstrap:
240-
None
241-
242-
Tailwind:
243-
border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600
244-
245-
### default-styling
246-
Setting to false will disable the default styling for the Per Page dropdown, the default styling is:
247-
Bootstrap 4:
248-
form-control
249-
250-
Bootstrap 5:
251-
form-select
252-
253-
Tailwind:
254-
block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50
255-
256-
```php
257-
public function configure(): void
258-
{
259-
$this->setPerPageFieldAttributes([
260-
'class' => 'border-red-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-red-700 dark:text-white dark:border-red-600', // Add these classes to the dropdown
261-
'default-colors' => false, // Do not output the default colors
262-
'default-styles' => true, // Output the default styling
263-
]);
264-
}
265-
```
266232

267233
## setShouldRetrieveTotalItemCountStatus
268234

@@ -296,14 +262,3 @@ public function configure(): void
296262
$this->setShouldRetrieveTotalItemCountDisabled();
297263
}
298264
```
299-
300-
## setPaginationWrapperAttributes
301-
302-
Used to set attributes for the "div" that wraps the pagination section
303-
304-
```php
305-
public function configure(): void
306-
{
307-
$this->setPaginationWrapperAttributes(['class' => 'text-lg']);
308-
}
309-
```

‎docs/pagination/styling.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Styling
3+
weight: 2
4+
---
5+
6+
7+
## setPaginationWrapperAttributes
8+
9+
Used to set attributes for the "div" that wraps the pagination section (typically in the footer)
10+
11+
```php
12+
public function configure(): void
13+
{
14+
$this->setPaginationWrapperAttributes(['class' => 'text-lg']);
15+
}
16+
```
17+
18+
## setPerPageFieldAttributes
19+
Allows for customisation of the appearance of the "Per Page" dropdown
20+
21+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
22+
23+
### default-colors
24+
Setting to false will disable the default colors for the Per Page dropdown, the default colors are:
25+
Bootstrap:
26+
None
27+
28+
Tailwind:
29+
border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600
30+
31+
### default-styling
32+
Setting to false will disable the default styling for the Per Page dropdown, the default styling is:
33+
Bootstrap 4:
34+
form-control
35+
36+
Bootstrap 5:
37+
form-select
38+
39+
Tailwind:
40+
block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50
41+
42+
```php
43+
public function configure(): void
44+
{
45+
$this->setPerPageFieldAttributes([
46+
'class' => 'border-red-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-red-700 dark:text-white dark:border-red-600', // Add these classes to the dropdown
47+
'default-colors' => false, // Do not output the default colors
48+
'default-styles' => true, // Output the default styling
49+
]);
50+
}
51+
```
52+
53+
## setPerPageWrapperAttributes
54+
Allows for customisation of the appearance of the wrapper for the "Per Page" dropdown
55+
56+
```php
57+
public function configure(): void
58+
{
59+
$this->setPerPageWrapperAttributes([
60+
'class' => 'bg-blue-500 text-black dark:bg-red-700 dark:text-white ',
61+
'default-colors' => false, // Do not output the default colors
62+
'default-styles' => true, // Output the default styling
63+
]);
64+
}
65+
```

‎resources/views/components/tools/toolbar/items/pagination-dropdown.blade.php‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
1-
@aware(['component', 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2-
<div @class([
3-
'ml-0 ml-md-2' => $this->isBootstrap4,
4-
'ms-0 ms-md-2' => $this->isBootstrap5,
5-
])
1+
@aware(['tableName'])
2+
<div
3+
{{
4+
$attributes->merge($this->getPerPageWrapperAttributes())
5+
->class([
6+
'ml-0 ml-md-2' => $this->isBootstrap4 && ($this->getPerPageWrapperAttributes()['default-styling'] ?? true),
7+
'ms-0 ms-md-2' => $this->isBootstrap5 && ($this->getPerPageWrapperAttributes()['default-styling'] ?? true),
8+
])
9+
->except(['default','default-styling','default-colors'])
10+
}}
611
>
712
<select wire:model.live="perPage" id="{{ $tableName }}-perPage"
813
{{
9-
$attributes->merge($component->getPerPageFieldAttributes())
14+
$attributes->merge($this->getPerPageFieldAttributes())
1015
->class([
11-
'form-control' => $this->isBootstrap4 && $component->getPerPageFieldAttributes()['default-styling'],
12-
'form-select' => $this->isBootstrap5 && $component->getPerPageFieldAttributes()['default-styling'],
13-
'block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50' => $this->isTailwind && $component->getPerPageFieldAttributes()['default-styling'],
14-
'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600' => $this->isTailwind && $component->getPerPageFieldAttributes()['default-colors'],
16+
'form-control' => $this->isBootstrap4 && ($this->getPerPageFieldAttributes()['default-styling'] ?? true),
17+
'form-select' => $this->isBootstrap5 && ($this->getPerPageFieldAttributes()['default-styling'] ?? true),
18+
'block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50' => $this->isTailwind && (($this->getPerPageFieldAttributes()['default'] ?? false) || ($this->getPerPageFieldAttributes()['default-styling'] ?? true)),
19+
'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600' => $this->isTailwind && (($this->getPerPageFieldAttributes()['default'] ?? false) || ($this->getPerPageFieldAttributes()['default-colors'] ?? true)),
1520
])
1621
->except(['default','default-styling','default-colors'])
1722
}}
1823
>
19-
@foreach ($component->getPerPageAccepted() as $item)
24+
@foreach ($this->getPerPageAccepted() as $item)
2025
<option
2126
value="{{ $item }}"
2227
wire:key="{{ $tableName }}-per-page-{{ $item }}"

‎resources/views/datatable.blade.php‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,12 @@
125125
@endif
126126
</x-livewire-tables::table>
127127

128-
<x-livewire-tables::pagination />
129-
128+
@if($this->hasCustomPaginationBlade)
129+
@include($this->getCustomPaginationBlade)
130+
@else
131+
<x-livewire-tables::pagination />
132+
@endif
133+
130134
@includeIf($customView)
131135
</x-livewire-tables::wrapper>
132136

‎src/Traits/Configuration/PaginationConfiguration.php‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,6 @@ public function setPageName(string $name): self
1313
return $this;
1414
}
1515

16-
public function setPaginationTheme(string $theme): self
17-
{
18-
$this->paginationTheme = $theme;
19-
20-
return $this;
21-
}
22-
2316
public function setPaginationStatus(bool $status): self
2417
{
2518
$this->paginationStatus = $status;
@@ -149,13 +142,6 @@ public function setDefaultPerPage(int $perPage): self
149142
return $this;
150143
}
151144

152-
public function setPerPageFieldAttributes(array $attributes = []): self
153-
{
154-
$this->perPageFieldAttributes = [...$this->perPageFieldAttributes, ...$attributes];
155-
156-
return $this;
157-
}
158-
159145
public function setShouldRetrieveTotalItemCountStatus(bool $status): self
160146
{
161147
$this->shouldRetrieveTotalItemCount = $status;
@@ -178,10 +164,4 @@ public function setShouldRetrieveTotalItemCountDisabled(): self
178164
return $this;
179165
}
180166

181-
public function setPaginationWrapperAttributes(array $paginationWrapperAttributes): self
182-
{
183-
$this->paginationWrapperAttributes = array_merge(['class' => ''], $paginationWrapperAttributes);
184-
185-
return $this;
186-
}
187167
}

‎src/Traits/Helpers/PaginationHelpers.php‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
44

5-
use Illuminate\View\ComponentAttributeBag;
65
use Livewire\Attributes\Computed;
76

87
trait PaginationHelpers
@@ -22,11 +21,6 @@ public function getPaginationStatus(): bool
2221
return $this->paginationStatus;
2322
}
2423

25-
public function getPaginationTheme(): string
26-
{
27-
return $this->paginationTheme;
28-
}
29-
3024
public function paginationIsEnabled(): bool
3125
{
3226
return $this->getPaginationStatus() === true;
@@ -145,26 +139,12 @@ private function getPerPagePaginationSessionKey(): string
145139
return $this->tableName.'-perPage';
146140
}
147141

148-
#[Computed]
149-
public function getPerPageFieldAttributes(): array
150-
{
151-
return $this->perPageFieldAttributes;
152-
}
153142

154143
#[Computed]
155144
public function getShouldRetrieveTotalItemCount(): bool
156145
{
157146
return $this->shouldRetrieveTotalItemCount;
158147
}
159148

160-
public function getPaginationWrapperAttributes(): array
161-
{
162-
return $this->paginationWrapperAttributes ?? ['class' => ''];
163-
}
164149

165-
#[Computed]
166-
public function getPaginationWrapperAttributesBag(): ComponentAttributeBag
167-
{
168-
return new ComponentAttributeBag($this->getPaginationWrapperAttributes());
169-
}
170150
}

‎src/Traits/Styling/Configuration/PaginationStylingConfiguration.php‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
4+
5+
trait PaginationStylingConfiguration
6+
{
7+
public function setCustomPaginationBlade(string $customPaginationBlade): self
8+
{
9+
$this->customPaginationBlade = $customPaginationBlade;
10+
11+
return $this;
12+
}
13+
14+
public function setPaginationTheme(string $theme): self
15+
{
16+
$this->paginationTheme = $theme;
17+
18+
return $this;
19+
}
20+
21+
public function setPaginationWrapperAttributes(array $paginationWrapperAttributes = []): self
22+
{
23+
$this->setCustomAttributes(propertyName: 'paginationWrapperAttributes', customAttributes: array_merge($this->getPaginationWrapperAttributes(), $paginationWrapperAttributes));
24+
25+
return $this;
26+
}
27+
28+
public function setPerPageFieldAttributes(array $perPageFieldAttributes = []): self
29+
{
30+
$this->setCustomAttributes(propertyName: 'perPageFieldAttributes', customAttributes: array_merge($this->getPerPageFieldAttributes(), $perPageFieldAttributes));
31+
32+
return $this;
33+
}
34+
35+
public function setPerPageWrapperAttributes(array $perPageWrapperAttributes = []): self
36+
{
37+
$this->setCustomAttributes(propertyName: 'perPageWrapperAttributes', customAttributes: array_merge($this->getPerPageWrapperAttributes(), $perPageWrapperAttributes));
38+
39+
return $this;
40+
}
41+
42+
43+
}

‎src/Traits/Styling/HasPaginationStyling.php‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling;
4+
5+
use Livewire\Attributes\Locked;
6+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\PaginationStylingConfiguration;
7+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\PaginationStylingHelpers;
8+
9+
trait HasPaginationStyling
10+
{
11+
use PaginationStylingConfiguration,
12+
PaginationStylingHelpers;
13+
14+
#[Locked]
15+
public string $paginationTheme = 'tailwind';
16+
17+
// Used In Frontend
18+
protected array $perPageFieldAttributes = ['class' => '', 'default-colors' => true, 'default-styling' => true];
19+
20+
// Used In Frontend
21+
protected array $perPageWrapperAttributes = ['class' => '', 'default-colors' => true, 'default-styling' => true];
22+
23+
// Used In Frontend
24+
protected array $paginationWrapperAttributes = ['class' => ''];
25+
26+
protected ?string $customPaginationBlade;
27+
}

0 commit comments

Comments
 (0)