V3 - Add Custom Attributes for Bulk Actions (#1564)

* Initial Commit * Remove CollapsedColumns Config - Not Used * Add Get Tests for BulkActions TD/TH Attribute Defaults * Add Defaults * Add Initial Tests * Update Changelog --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Dec 4, 2023 · c12ce7c · c12ce7c
1 parent 55f7d36
commit c12ce7c
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,11 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 ### Tweaks
 - Create additional Exception Classes (NoColumnsException, NoSearchableColumnsException, NoSortableColumnsException)
 - Revert previous splitting of JS Files
+- Add capability to customise Bulk Actions Styling with tests by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1564
+  - TH Classes
+  - TH Checkbox Classes
+  - TD Classes
+  - TD Checkbox Classes
 
 ## [v3.1.3] - 2023-11-03
 - Add additional Lifecycle Hook by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1534

diff --git a/docs/bulk-actions/available-methods.md b/docs/bulk-actions/available-methods.md
@@ -184,3 +184,58 @@ public function configure(): void
 }
 ```
 
+## setBulkActionsThAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the table header
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsThAttributes([
+        'class' => 'bg-red-500',
+        'default' => false
+    ]);
+}
+```
+
+## setBulkActionsThCheckboxAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Select All/None checkbox in the Table Header
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsThCheckboxAttributes([
+        'class' => 'bg-blue-500',
+        'default' => false
+    ]);
+}
+```
+
+## setBulkActionsTdAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the td containing the Bulk Actions Checkbox for the row
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsTdAttributes([
+        'class' => 'bg-green-500',
+        'default' => true
+    ]);
+}
+```
+
+## setBulkActionsTdCheckboxAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Checkbox for the row
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsTdCheckboxAttributes([
+        'class' => 'bg-green-500',
+        'default' => true
+    ]);
+}
+```
diff --git a/resources/views/components/table/td/bulk-actions.blade.php b/resources/views/components/table/td/bulk-actions.blade.php
@@ -1,10 +1,14 @@
 @aware(['component', 'tableName'])
 @props(['row', 'rowIndex'])
 
-@php($theme = $component->getTheme())
+@php
+    $customAttributes = $component->getBulkActionsTdAttributes();
+    $bulkActionsTdCheckboxAttributes = $component->getBulkActionsTdCheckboxAttributes();
+    $theme = $component->getTheme();
+@endphp
 
 @if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
-    <x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $row->{$this->getPrimaryKey()} }}" :displayMinimisedOnReorder="true"  >
+    <x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $row->{$this->getPrimaryKey()} }}" :displayMinimisedOnReorder="true"  :$customAttributes>
         <div @class([
             'inline-flex rounded-md shadow-sm' => $theme === 'tailwind',
             'form-check' => $theme === 'bootstrap-5',
@@ -16,10 +20,13 @@
                 wire:loading.attr.delay="disabled"
                 value="{{ $row->{$this->getPrimaryKey()} }}"
                 type="checkbox"
-                @class([
-                    'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $theme === 'tailwind',
-                    'form-check-input' => $theme === 'bootstrap-5',
-                ])
+                {{
+                    $attributes->merge($bulkActionsTdCheckboxAttributes)->class([
+                        'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($theme === 'tailwind') && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
+                        'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
+                        'except' => 'default',
+                    ])
+                }}
             />
         </div>
     </x-livewire-tables::table.td.plain>

diff --git a/resources/views/components/table/th/bulk-actions.blade.php b/resources/views/components/table/th/bulk-actions.blade.php
@@ -1,8 +1,12 @@
 @aware(['component', 'tableName'])
-@php($theme = $component->getTheme())
+@php
+    $customAttributes = $component->getBulkActionsThAttributes();
+    $bulkActionsThCheckboxAttributes = $component->getBulkActionsThCheckboxAttributes();
+    $theme = $component->getTheme();
+@endphp
 
 @if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
-    <x-livewire-tables::table.th.plain wire:key="{{ $tableName }}-thead-bulk-actions" :displayMinimisedOnReorder="true">
+    <x-livewire-tables::table.th.plain wire:key="{{ $tableName }}-thead-bulk-actions" :displayMinimisedOnReorder="true" :$customAttributes>
         <div
             x-data="{newSelectCount: 0, indeterminateCheckbox: false, bulkActionHeaderChecked: false}"
             x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
@@ -17,11 +21,13 @@
                 x-on:click="if(selectedItems.length == paginationTotalItemCount) { $el.indeterminate = false; $wire.clearSelected(); bulkActionHeaderChecked = false; } else { bulkActionHeaderChecked = true; $el.indeterminate = false; $wire.setAllSelected(); }"
                 type="checkbox"
                 :checked="selectedItems.length == paginationTotalItemCount"
-
-                @class([
-                    'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $theme === 'tailwind',
-                    'form-check-input' => $theme === 'bootstrap-5',
-                ])
+                {{
+                    $attributes->merge($bulkActionsThCheckboxAttributes)->class([
+                        'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($theme === 'tailwind') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
+                        'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
+                        'except' => 'default',
+                    ])
+                }}
             />
         </div>
     </x-livewire-tables::table.th.plain>

diff --git a/resources/views/components/table/th/plain.blade.php b/resources/views/components/table/th/plain.blade.php
@@ -1,11 +1,13 @@
 @aware(['component'])
-@props(['displayMinimisedOnReorder' => false, 'hideUntilReorder' => false])
+@props(['displayMinimisedOnReorder' => false, 'hideUntilReorder' => false, 'customAttributes' => ['default' => true]])
 
 <th x-cloak {{ $attributes }} scope="col"
-    @class([
-        'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $component->isTailwind(),
-        'laravel-livewire-tables-reorderingMinimised' => ($component->isBootstrap())
-    ])
+    {{ 
+        $attributes->merge($customAttributes)->class([
+            'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => ($component->isTailwind()) && ($customAttributes['default'] ?? true),
+            'laravel-livewire-tables-reorderingMinimised' => ($component->isBootstrap()) && ($customAttributes['default'] ?? true),
+        ])
+    }}
     @if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif
 >
     {{ $slot }}

diff --git a/src/Traits/Configuration/BulkActionsConfiguration.php b/src/Traits/Configuration/BulkActionsConfiguration.php
@@ -110,4 +110,44 @@ public function setBulkActionDefaultConfirmationMessage(string $defaultConfirmat
 
         return $this;
     }
+
+    /**
+     * Used to set attributes for the <th> for Bulk Actions
+     */
+    public function setBulkActionsThAttributes(array $bulkActionsThAttributes): self
+    {
+        $this->bulkActionsThAttributes = [...$this->bulkActionsThAttributes, ...$bulkActionsThAttributes];
+
+        return $this;
+    }
+
+    /**
+     * Used to set attributes for the Bulk Actions Checkbox in the <th>
+     */
+    public function setBulkActionsThCheckboxAttributes(array $bulkActionsThCheckboxAttributes): self
+    {
+        $this->bulkActionsThCheckboxAttributes = [...$this->bulkActionsThCheckboxAttributes, ...$bulkActionsThCheckboxAttributes];
+
+        return $this;
+    }
+
+    /**
+     * Used to set attributes for the Bulk Actions TD in the Row
+     */
+    public function setBulkActionsTdAttributes(array $bulkActionsTdAttributes): self
+    {
+        $this->bulkActionsTdAttributes = [...$this->bulkActionsTdAttributes, ...$bulkActionsTdAttributes];
+
+        return $this;
+    }
+
+    /**
+     * Used to set attributes for the Bulk Actions Checkbox in the Row
+     */
+    public function setBulkActionsTdCheckboxAttributes(array $bulkActionsTdCheckboxAttributes): self
+    {
+        $this->bulkActionsTdCheckboxAttributes = [...$this->bulkActionsTdCheckboxAttributes, ...$bulkActionsTdCheckboxAttributes];
+
+        return $this;
+    }
 }
diff --git a/src/Traits/Helpers/BulkActionsHelpers.php b/src/Traits/Helpers/BulkActionsHelpers.php
@@ -172,4 +172,44 @@ public function getBulkActionDefaultConfirmationMessage(): string
     {
         return isset($this->bulkActionConfirmDefaultMessage) ? $this->bulkActionConfirmDefaultMessage : __('Bulk Actions Confirm');
     }
+
+    /**
+     * Used to get attributes for the <th> for Bulk Actions
+     *
+     * @return array<mixed>
+     */
+    public function getBulkActionsThAttributes(): array
+    {
+        return $this->bulkActionsThAttributes ?? ['default' => true];
+    }
+
+    /**
+     * Used to get attributes for the Checkbox for Bulk Actions TH
+     *
+     * @return array<mixed>
+     */
+    public function getBulkActionsThCheckboxAttributes(): array
+    {
+        return $this->bulkActionsThCheckboxAttributes ?? ['default' => true];
+    }
+
+    /**
+     * Used to get attributes for the Bulk Actions TD
+     *
+     * @return array<mixed>
+     */
+    public function getBulkActionsTdAttributes(): array
+    {
+        return $this->bulkActionsTdAttributes ?? ['default' => true];
+    }
+
+    /**
+     * Used to get attributes for the Bulk Actions TD
+     *
+     * @return array<mixed>
+     */
+    public function getBulkActionsTdCheckboxAttributes(): array
+    {
+        return $this->bulkActionsTdCheckboxAttributes ?? ['default' => true];
+    }
 }
diff --git a/src/Traits/WithBulkActions.php b/src/Traits/WithBulkActions.php
@@ -24,6 +24,16 @@ trait WithBulkActions
 
     public ?string $bulkActionConfirmDefaultMessage;
 
+    protected array $bulkActionsCheckboxAttributes = [];
+
+    protected array $bulkActionsThAttributes = ['default' => true];
+
+    protected array $bulkActionsThCheckboxAttributes = ['default' => true];
+
+    protected array $bulkActionsTdAttributes = ['default' => true];
+
+    protected array $bulkActionsTdCheckboxAttributes = ['default' => true];
+
     public function bulkActions(): array
     {
         return property_exists($this, 'bulkActions') ? $this->bulkActions : [];

diff --git a/tests/Traits/Configuration/BulkActionsConfigurationTest.php b/tests/Traits/Configuration/BulkActionsConfigurationTest.php
@@ -150,4 +150,60 @@ public function can_set_bulk_action_default_confirmation_message(): void
         $this->assertSame('Test Default Message', $this->basicTable->getBulkActionDefaultConfirmationMessage());
 
     }
+
+    /** @test */
+    public function can_set_bulk_actions_td_attributes(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsTdAttributes());
+
+        $this->basicTable->setBulkActionsTdAttributes(['class' => 'bg-blue-500']);
+
+        $this->assertSame(['default' => true, 'class' => 'bg-blue-500'], $this->basicTable->getBulkActionsTdAttributes());
+
+        $this->basicTable->setBulkActionsTdAttributes(['class' => 'bg-blue-500', 'default' => false]);
+
+        $this->assertSame(['default' => false, 'class' => 'bg-blue-500'], $this->basicTable->getBulkActionsTdAttributes());
+    }
+
+    /** @test */
+    public function can_set_bulk_actions_td_checkbox_attributes(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsTdCheckboxAttributes());
+
+        $this->basicTable->setBulkActionsTdCheckboxAttributes(['class' => 'bg-gray-500']);
+
+        $this->assertSame(['default' => true, 'class' => 'bg-gray-500'], $this->basicTable->getBulkActionsTdCheckboxAttributes());
+
+        $this->basicTable->setBulkActionsTdCheckboxAttributes(['class' => 'bg-gray-500', 'default' => false]);
+
+        $this->assertSame(['default' => false, 'class' => 'bg-gray-500'], $this->basicTable->getBulkActionsTdCheckboxAttributes());
+    }
+
+    /** @test */
+    public function can_set_bulk_actions_th_attributes(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsThAttributes());
+
+        $this->basicTable->setBulkActionsThAttributes(['class' => 'bg-red-500']);
+
+        $this->assertSame(['default' => true, 'class' => 'bg-red-500'], $this->basicTable->getBulkActionsThAttributes());
+
+        $this->basicTable->setBulkActionsThAttributes(['class' => 'bg-red-500', 'default' => false]);
+
+        $this->assertSame(['default' => false, 'class' => 'bg-red-500'], $this->basicTable->getBulkActionsThAttributes());
+    }
+
+    /** @test */
+    public function can_set_bulk_actions_th_checkbox_attributes(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsThCheckboxAttributes());
+
+        $this->basicTable->setBulkActionsThCheckboxAttributes(['class' => 'bg-green-500']);
+
+        $this->assertSame(['default' => true, 'class' => 'bg-green-500'], $this->basicTable->getBulkActionsThCheckboxAttributes());
+
+        $this->basicTable->setBulkActionsThCheckboxAttributes(['class' => 'bg-green-500', 'default' => false]);
+
+        $this->assertSame(['default' => false, 'class' => 'bg-green-500'], $this->basicTable->getBulkActionsThCheckboxAttributes());
+    }
 }
diff --git a/tests/Traits/Helpers/BulkActionsHelpersTest.php b/tests/Traits/Helpers/BulkActionsHelpersTest.php
@@ -204,4 +204,28 @@ public function can_get_bulk_action_default_confirmation_message(): void
     {
         $this->assertSame('Are you sure?', $this->basicTable->getBulkActionDefaultConfirmationMessage());
     }
+
+    /** @test */
+    public function bulk_actions_td_attributes_returns_default_true_if_not_set(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsTdAttributes());
+    }
+
+    /** @test */
+    public function bulk_actions_td_checkbox_attributes_returns_default_true_if_not_set(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsTdCheckboxAttributes());
+    }
+
+    /** @test */
+    public function bulk_actions_th_attributes_returns_default_true_if_not_set(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsThAttributes());
+    }
+
+    /** @test */
+    public function bulk_actions_th_checkbox_attributes_returns_default_true_if_not_set(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getBulkActionsThCheckboxAttributes());
+    }
 }