Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Pagination to use new Styling Approach #1985

Open
wants to merge 10 commits into
base: development
Choose a base branch
from
+689 −364
Open

Update Pagination to use new Styling Approach #1985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ca42680
Migrate Pagination to use new HasPaginationStyling
lrljoe Oct 1, 2024
6bc6850
Add Visual Test for PaginationWrapper
lrljoe Oct 1, 2024
e53d95a
Fix styling
lrljoe Oct 1, 2024
8c299ab
Fix issue in pagination blade
lrljoe Oct 1, 2024
e9b70e1
Updated test suite
lrljoe Oct 1, 2024
4bce413
Fix styling
lrljoe Oct 1, 2024
ebf2e09
PaginationVisuals - Utilise Class Inheritance for Tests
lrljoe Oct 1, 2024
719f73f
Fix styling
lrljoe Oct 1, 2024
c467aca
Remove unused attribute bags
lrljoe Oct 1, 2024
220048d
Adjust changes to pagination
lrljoe Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 0 additions & 45 deletions docs/pagination/available-methods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,40 +229,6 @@ public function configure(): void
}
```

## setPerPageFieldAttributes
Allows for customisation of the appearance of the "Per Page" dropdown

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.

### default-colors
Setting to false will disable the default colors for the Per Page dropdown, the default colors are:
Bootstrap:
None

Tailwind:
border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600

### default-styling
Setting to false will disable the default styling for the Per Page dropdown, the default styling is:
Bootstrap 4:
form-control

Bootstrap 5:
form-select

Tailwind:
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

```php
public function configure(): void
{
$this->setPerPageFieldAttributes([
'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
'default-colors' => false, // Do not output the default colors
'default-styles' => true, // Output the default styling
]);
}
```

## setShouldRetrieveTotalItemCountStatus

Expand Down Expand Up @@ -296,14 +262,3 @@ public function configure(): void
$this->setShouldRetrieveTotalItemCountDisabled();
}
```

## setPaginationWrapperAttributes

Used to set attributes for the "div" that wraps the pagination section

```php
public function configure(): void
{
$this->setPaginationWrapperAttributes(['class' => 'text-lg']);
}
```
65 changes: 65 additions & 0 deletions docs/pagination/styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: Styling
weight: 2
---


## setPaginationWrapperAttributes

Used to set attributes for the "div" that wraps the pagination section (typically in the footer)

```php
public function configure(): void
{
$this->setPaginationWrapperAttributes(['class' => 'text-lg']);
}
```

## setPerPageFieldAttributes
Allows for customisation of the appearance of the "Per Page" dropdown

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.

### default-colors
Setting to false will disable the default colors for the Per Page dropdown, the default colors are:
Bootstrap:
None

Tailwind:
border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600

### default-styling
Setting to false will disable the default styling for the Per Page dropdown, the default styling is:
Bootstrap 4:
form-control

Bootstrap 5:
form-select

Tailwind:
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

```php
public function configure(): void
{
$this->setPerPageFieldAttributes([
'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
'default-colors' => false, // Do not output the default colors
'default-styles' => true, // Output the default styling
]);
}
```

## setPerPageWrapperAttributes
Allows for customisation of the appearance of the wrapper for the "Per Page" dropdown

```php
public function configure(): void
{
$this->setPerPageWrapperAttributes([
'class' => 'bg-blue-500 text-black dark:bg-red-700 dark:text-white ',
'default-colors' => false, // Do not output the default colors
'default-styles' => true, // Output the default styling
]);
}
```
98 changes: 59 additions & 39 deletions resources/views/components/pagination.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,63 @@
)

@if ($this->isTailwind)
<div {{ $this->getPaginationWrapperAttributesBag() }}>
<div {{ $this->getPaginationWrapperAttributesBag()->class([
'mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0' => $this->getPaginationWrapperAttributesBag()->getAttributes()['default'] ?? true
])
->except([
'default',
'default-colors',
'default-styling'
])
}}>
@if ($this->paginationVisibilityIsEnabled())
<div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
<div>
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
@if($this->showPaginationDetails())
<span>@lang('livewire-tables::Showing')</span>
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
<span>@lang('livewire-tables::to')</span>
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
<span>@lang('livewire-tables::of')</span>
<span class="font-medium"><span x-text="paginationTotalItemCount"></span></span>
<span>@lang('livewire-tables::results')</span>
@endif
</p>
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple'))
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
@if($this->showPaginationDetails())
<span>@lang('livewire-tables::Showing')</span>
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
<span>@lang('livewire-tables::to')</span>
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
@endif
</p>
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor'))
@else
<p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
@lang('livewire-tables::Showing')
<span class="font-medium">{{ $this->getRows->count() }}</span>
@lang('livewire-tables::results')
</p>
@endif
</div>

@if ($this->paginationIsEnabled())
{{ $this->getRows->links('livewire-tables::specific.tailwind.'.(!$this->isPaginationMethod('standard') ? 'simple-' : '').'pagination') }}
<div>
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
@if($this->showPaginationDetails())
<span>@lang('livewire-tables::Showing')</span>
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
<span>@lang('livewire-tables::to')</span>
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
<span>@lang('livewire-tables::of')</span>
<span class="font-medium"><span x-text="paginationTotalItemCount"></span></span>
<span>@lang('livewire-tables::results')</span>
@endif
</p>
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple'))
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
@if($this->showPaginationDetails())
<span>@lang('livewire-tables::Showing')</span>
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
<span>@lang('livewire-tables::to')</span>
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
@endif
</p>
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor'))
@else
<p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
@lang('livewire-tables::Showing')
<span class="font-medium">{{ $this->getRows->count() }}</span>
@lang('livewire-tables::results')
</p>
@endif

</div>

@if ($this->paginationIsEnabled())
{{ $this->getRows->links('livewire-tables::specific.tailwind.'.(!$this->isPaginationMethod('standard') ? 'simple-' : '').'pagination') }}
@endif

@endif
</div>
@elseif ($this->isBootstrap4)
<div {{ $this->getPaginationWrapperAttributesBag() }}>
<div {{ $this->getPaginationWrapperAttributesBag()
->except([
'default',
'default-colors',
'default-styling'
])
}}>
@if ($this->paginationVisibilityIsEnabled())
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
<div class="row mt-3">
Expand Down Expand Up @@ -102,7 +116,13 @@
@endif
</div>
@elseif ($this->isBootstrap5)
<div {{ $this->getPaginationWrapperAttributesBag() }} >
<div {{ $this->getPaginationWrapperAttributesBag()
->except([
'default',
'default-colors',
'default-styling'
])
}} >
@if ($this->paginationVisibilityIsEnabled())
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
<div class="row mt-3">
Expand Down Expand Up @@ -158,4 +178,4 @@
$this->hasConfigurableAreaFor('after-pagination'),
$this->getConfigurableAreaFor('after-pagination'),
$this->getParametersForConfigurableArea('after-pagination')
)
)
39 changes: 19 additions & 20 deletions resources/views/components/tools/toolbar/items/pagination-dropdown.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
@aware(['component', 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
<div @class([
'ml-0 ml-md-2' => $this->isBootstrap4,
'ms-0 ms-md-2' => $this->isBootstrap5,
])
>
<select wire:model.live="perPage" id="{{ $tableName }}-perPage"
{{
$attributes->merge($component->getPerPageFieldAttributes())
@aware(['tableName'])
<div {{
$attributes->merge($this->getPerPageWrapperAttributes())
->class([
'ml-0 ml-md-2' => $this->isBootstrap4 && ($this->getPerPageWrapperAttributes()['default-styling'] ?? true),
'ms-0 ms-md-2' => $this->isBootstrap5 && ($this->getPerPageWrapperAttributes()['default-styling'] ?? true),
])
->except(['default','default-styling','default-colors'])
}}>
<select wire:model.live="perPage" id="{{ $tableName }}-perPage" {{
$attributes->merge($this->getPerPageFieldAttributes())
->class([
'form-control' => $this->isBootstrap4 && $component->getPerPageFieldAttributes()['default-styling'],
'form-select' => $this->isBootstrap5 && $component->getPerPageFieldAttributes()['default-styling'],
'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'],
'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'],
'form-control' => $this->isBootstrap4 && ($this->getPerPageFieldAttributes()['default-styling'] ?? true),
'form-select' => $this->isBootstrap5 && ($this->getPerPageFieldAttributes()['default-styling'] ?? true),
'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)),
'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)),
])
->except(['default','default-styling','default-colors'])
}}
>
@foreach ($component->getPerPageAccepted() as $item)
<option
value="{{ $item }}"
wire:key="{{ $tableName }}-per-page-{{ $item }}"
>
}}>

@foreach ($this->getPerPageAccepted() as $item)
<option value="{{ $item }}" wire:key="{{ $tableName }}-per-page-{{ $item }}">
{{ $item === -1 ? __('livewire-tables::All') : $item }}
</option>
@endforeach
Expand Down
8 changes: 6 additions & 2 deletions resources/views/datatable.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,12 @@
@endif
</x-livewire-tables::table>

<x-livewire-tables::pagination />

@if($this->hasCustomPaginationBlade)
@include($this->getCustomPaginationBlade)
@else
<x-livewire-tables::pagination />
@endif

@includeIf($customView)
</x-livewire-tables::wrapper>

Expand Down
2 changes: 1 addition & 1 deletion resources/views/specific/bootstrap-4/pagination.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@if ($paginator->hasPages())
@php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)

<nav>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
Expand Down
2 changes: 1 addition & 1 deletion resources/views/specific/bootstrap-4/simple-pagination.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
@if ($paginator->hasPages())
<nav>
<nav role="navigation" aria-label="Pagination Navigation" >
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
Expand Down
21 changes: 0 additions & 21 deletions src/Traits/Configuration/PaginationConfiguration.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,6 @@ public function setPageName(string $name): self
return $this;
}

public function setPaginationTheme(string $theme): self
{
$this->paginationTheme = $theme;

return $this;
}

public function setPaginationStatus(bool $status): self
{
$this->paginationStatus = $status;
Expand Down Expand Up @@ -149,13 +142,6 @@ public function setDefaultPerPage(int $perPage): self
return $this;
}

public function setPerPageFieldAttributes(array $attributes = []): self
{
$this->perPageFieldAttributes = [...$this->perPageFieldAttributes, ...$attributes];

return $this;
}

public function setShouldRetrieveTotalItemCountStatus(bool $status): self
{
$this->shouldRetrieveTotalItemCount = $status;
Expand All @@ -177,11 +163,4 @@ public function setShouldRetrieveTotalItemCountDisabled(): self

return $this;
}

public function setPaginationWrapperAttributes(array $paginationWrapperAttributes): self
{
$this->paginationWrapperAttributes = array_merge(['class' => ''], $paginationWrapperAttributes);

return $this;
}
}
Loading
Loading