Merge pull request #1676 from rappasoft/develop

V3.2.3 Pre-Release Merge (#1675)
rappasoft · Mar 1, 2024 · 67c6489 · 67c6489
2 parents d07354a + ac641df
commit 67c6489
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 13 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -6,7 +6,7 @@
 /.phpunit.cache                                         export-ignore
 /build                                                  export-ignore
 /database/database.sqlite                               export-ignore
-/database/sqlite.database.                              export-ignore
+/database/sqlite.database                               export-ignore
 /docs                                                   export-ignore
 /resources/views/tests                                  export-ignore
 /tests                                                  export-ignore

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.2.3] - 2024-03-01
+### New Features
+- Add capability to customise colors/styling on the Pagination Per-Page Dropdown by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1677
+
+### Docs
+- Amend Lifecycle Hooks document to use "public" rather than "protected" methods
+
 ## [v3.2.2] - 2024-02-29
 ### New Features
 - Add setDefaultPerPage by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1671
@@ -1149,4 +1156,4 @@ Ground Up Rebuild
 [0.1.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.1...v0.1.2
-[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
+[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
diff --git a/docs/misc/lifecycle-hooks.md b/docs/misc/lifecycle-hooks.md
@@ -23,20 +23,26 @@ This is called immediately after the Columns are set up
 This is called immediately after the query is executed, and is passed the result from the executed query.
 
 ## Use in Traits
-To use these in a trait, append the Lifecycle Hook with your trait name, e.g.
+To use these in a trait, allowing you to easily set defaults across multiple tables, you should ensure that you append the Lifecycle Hook with your trait name, e.g.
+
+You can then add the trait to your tables, allowing you to centralise your defaults, and avoid code duplication.
 
 ```php
 trait StandardTableMethods
 {
 
-    protected function configuringStandardTableMethods()
+    public function configuringStandardTableMethods()
     {
         // Your standard configure() options go here, anything set here will be over-ridden by the configure() method
+        // For Example
+        $this->setColumnSelectDisabled();
     }
 
-    protected function configuredStandardTableMethods()
+    public function configuredStandardTableMethods()
     {
         // Your standard configure() options go here, anything set here will override those set in the configure() method
+        // For Example
+        $this->setColumnSelectDisabled();
     }
 
 }

diff --git a/docs/pagination/available-methods.md b/docs/pagination/available-methods.md
@@ -228,3 +228,38 @@ public function configure(): void
     $this->setDisplayPaginationDetailsDisabled();
 }
 ```
+
+## 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
+    ]);
+}
+```
diff --git a/resources/views/components/tools/toolbar/items/pagination-dropdown.blade.php b/resources/views/components/tools/toolbar/items/pagination-dropdown.blade.php
@@ -4,14 +4,17 @@
         'ms-0 ms-md-2' => $component->isBootstrap5(),
     ])
 >
-    <select
-        wire:model.live="perPage" id="{{ $tableName }}-perPage"
-
-        @class([
-                'form-control' => $component->isBootstrap4(),
-                'form-select' => $component->isBootstrap5(),
-                'block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600' => $component->isTailwind(),
+    <select wire:model.live="perPage" id="{{ $tableName }}-perPage"
+        {{ 
+            $attributes->merge($component->getPerPageFieldAttributes())
+            ->class([
+                'form-control' => $component->isBootstrap4() && $component->getPerPageFieldAttributes()['default-styling'],
+                'form-select' => $component->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' => $component->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' => $component->isTailwind() && $component->getPerPageFieldAttributes()['default-colors'],
             ])
+            ->except(['default','default-styling','default-colors']) 
+        }}
     >
         @foreach ($component->getPerPageAccepted() as $item)
             <option

diff --git a/src/LaravelLivewireTablesServiceProvider.php b/src/LaravelLivewireTablesServiceProvider.php
@@ -14,7 +14,7 @@ class LaravelLivewireTablesServiceProvider extends ServiceProvider
     public function boot(): void
     {
 
-        AboutCommand::add('Rappasoft Laravel Livewire Tables', fn () => ['Version' => '3.2.2']);
+        AboutCommand::add('Rappasoft Laravel Livewire Tables', fn () => ['Version' => '3.2.3']);
 
         $this->mergeConfigFrom(
             __DIR__.'/../config/livewire-tables.php', 'livewire-tables'

diff --git a/src/Traits/Configuration/PaginationConfiguration.php b/src/Traits/Configuration/PaginationConfiguration.php
@@ -148,4 +148,11 @@ public function setDefaultPerPage(int $perPage): self
 
         return $this;
     }
+
+    public function setPerPageFieldAttributes(array $attributes = []): self
+    {
+        $this->perPageFieldAttributes = [...$this->perPageFieldAttributes, ...$attributes];
+
+        return $this;
+    }
 }
diff --git a/src/Traits/Helpers/PaginationHelpers.php b/src/Traits/Helpers/PaginationHelpers.php
@@ -2,6 +2,8 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
 
+use Livewire\Attributes\Computed;
+
 trait PaginationHelpers
 {
     public function getPageName(): ?string
@@ -141,4 +143,10 @@ private function getPerPagePaginationSessionKey(): string
     {
         return $this->tableName.'-perPage';
     }
+
+    #[Computed]
+    public function getPerPageFieldAttributes(): array
+    {
+        return $this->perPageFieldAttributes;
+    }
 }
diff --git a/src/Traits/WithPagination.php b/src/Traits/WithPagination.php
@@ -39,6 +39,8 @@ trait WithPagination
 
     protected bool $shouldShowPaginationDetails = true;
 
+    protected array $perPageFieldAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
     public function mountWithPagination(): void
     {
         $sessionPerPage = session()->get($this->getPerPagePaginationSessionKey(), $this->getPerPageAccepted()[0] ?? 10);

diff --git a/tests/Traits/Helpers/PaginationHelpersTest.php b/tests/Traits/Helpers/PaginationHelpersTest.php
@@ -128,4 +128,29 @@ public function can_disable_detailed_pagination(): void
         $this->assertFalse($this->basicTable->showPaginationDetails());
 
     }
+
+    /** @test */
+    public function can_get_pagination_field_attributes(): void
+    {
+
+        $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $this->basicTable->getPerPageFieldAttributes());
+
+        $this->basicTable->setPerPageFieldAttributes(
+            [
+                'class' => 'bg-blue-500 dark:bg-red-500',
+                'default-colors' => true,
+            ]
+        );
+
+        $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => 'bg-blue-500 dark:bg-red-500'], $this->basicTable->getPerPageFieldAttributes());
+
+        $this->basicTable->setPerPageFieldAttributes(
+            [
+                'default-styling' => false,
+            ]
+        );
+
+        $this->assertSame(['default-styling' => false, 'default-colors' => true, 'class' => 'bg-blue-500 dark:bg-red-500'], $this->basicTable->getPerPageFieldAttributes());
+
+    }
 }
diff --git a/tests/Traits/Visuals/PaginationVisualsTest.php b/tests/Traits/Visuals/PaginationVisualsTest.php
@@ -299,4 +299,94 @@ public function detailed_pagination_is_not_displayed_simple_bs5(): void
             ->assertDontSeeHtml('<span>Showing</span>')
             ->assertDontSeeHtml('<span>to</span>');
     }
+
+    /** @test */
+    public function pagination_field_can_set_colors(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'default-colors' => true,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'testclass1',
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 testclass1"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'bg-gre-500 dark:bg-ba-500',
+                'default-colors' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 bg-gre-500 dark:bg-ba-500"',
+            ]);
+    }
+
+    /** @test */
+    public function pagination_field_can_set_styling(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'default-styling' => true,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'default-styling' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'testclass1',
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 testclass1"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'bg-gre-500 dark:bg-ba-500',
+                'default-styling' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 bg-gre-500 dark:bg-ba-500"',
+            ]);
+    }
+
+    /** @test */
+    public function pagination_field_can_remove_default_styling_and_colors(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="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 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'bg-gre-500 dark:bg-ba-500',
+                'default-styling' => false,
+                'default-colors' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="bg-gre-500 dark:bg-ba-500"',
+            ]);
+    }
 }