BulkActionTweaks - Adding default checkbox, customising attribute beh…

…aviours (#2203) * Tweaks for BulkActions * Fix styling * Tweaks for Bulk Actions * Fix styling
rappasoft · Feb 16, 2025 · b2d36c5 · b2d36c5
1 parent c5b63fc
commit b2d36c5
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 59 deletions.
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
@@ -0,0 +1,11 @@
+@aware(['tableName','primaryKey', 'isTailwind', 'isBootstrap', 'isBootstrap4', 'isBootstrap5'])
+@props(['checkboxAttributes'])
+<input x-cloak
+    {{
+        $attributes->merge($checkboxAttributes)->class([
+            'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($isTailwind) && ($checkboxAttributes['default-colors'] ?? ($checkboxAttributes['default'] ?? true)),
+            'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => ($isTailwind) && ($checkboxAttributes['default-styling'] ?? ($checkboxAttributes['default'] ?? true)),
+            'form-check-input' => ($isBootstrap5) && ($checkboxAttributes['default'] ?? true),
+        ])->except(['default','default-styling','default-colors'])
+    }}
+/>
diff --git a/resources/views/components/table/td/bulk-actions.blade.php b/resources/views/components/table/td/bulk-actions.blade.php
@@ -2,29 +2,20 @@
 @props(['row', 'rowIndex'])
 
 @php
-    $customAttributes = $this->getBulkActionsTdAttributes();
-    $bulkActionsTdCheckboxAttributes = $this->getBulkActionsTdCheckboxAttributes();
+    $tdAttributes = $this->getBulkActionsTdAttributes;
+    $tdCheckboxAttributes = $this->getBulkActionsTdCheckboxAttributes;
 @endphp
 
-@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
-    <x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $row->{$primaryKey} }}" :displayMinimisedOnReorder="true"  :$customAttributes>
+@if ($this->showBulkActionsSections())
+    <x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $row->{$primaryKey} }}" :displayMinimisedOnReorder="true"  :customAttributes=$tdAttributes>
         <div @class([
             'inline-flex rounded-md shadow-sm' => $isTailwind,
             'form-check' => $isBootstrap5,
         ])>
-            <input
-                x-cloak x-show="!currentlyReorderingStatus"
-                x-model="selectedItems"
-                wire:key="{{ $tableName . 'selectedItems-'.$row->{$primaryKey} }}"
-                wire:loading.attr.delay="disabled"
+            <x-livewire-tables::forms.checkbox 
+                wire:key="{{ $tableName . 'selectedItems-'.$row->{$primaryKey} }}" 
                 value="{{ $row->{$primaryKey} }}"
-                type="checkbox"
-                {{
-                    $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' => ($isTailwind) && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
-                        'form-check-input' => ($isBootstrap5) && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
-                    ])->except(['default','default-styling','default-colors'])
-                }}
+                :checkboxAttributes=$tdCheckboxAttributes
             />
         </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,11 +1,11 @@
-@aware(['isTailwind', 'isBootstrap'])
+@aware(['tableName','isTailwind', 'isBootstrap'])
 @php
     $customAttributes = $this->hasBulkActionsThAttributes ? $this->getBulkActionsThAttributes : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes'];
     $bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes();
 @endphp
 
 @if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
-    <x-livewire-tables::table.th.plain  :displayMinimisedOnReorder="true" wire:key="{{ $this->getTableName }}-thead-bulk-actions" :$customAttributes>
+    <x-livewire-tables::table.th.plain  :displayMinimisedOnReorder="true" wire:key="{{ $tableName }}-thead-bulk-actions" :$customAttributes>
         <div
             x-data="{newSelectCount: 0, indeterminateCheckbox: false, bulkActionHeaderChecked: false}"
             x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
@@ -30,4 +30,4 @@
             />
         </div>
     </x-livewire-tables::table.th.plain>
-@endif
+@endif
diff --git a/src/Traits/Core/HasCustomAttributes.php b/src/Traits/Core/HasCustomAttributes.php
@@ -76,4 +76,54 @@ public function getCustomAttributesBagFromArray(array $attributesArray): Compone
     {
         return new ComponentAttributeBag($attributesArray);
     }
+
+    public function getCustomAttributesNew(string $propertyName, bool $default = false, bool $classicMode = true): array
+    {
+
+        if ($classicMode) {
+            $defaultItems = ['default', 'default-colors', 'default-styling'];
+
+            if ($this->hasCustomAttributes($propertyName)) {
+                $vals = $this->{$propertyName};
+
+                foreach ($defaultItems as $defaultItem) {
+                    if (! array_key_exists($defaultItem, $vals) || is_null($vals[$defaultItem])) {
+                        $vals[$defaultItem] = $default;
+                    }
+                }
+
+                ksort($vals);
+
+                return $vals;
+            }
+
+            return ['default' => $default, 'default-colors' => $default, 'default-styling' => $default];
+        } else {
+            $defaultItems = ['default-colors', 'default-styling'];
+
+            if ($this->hasCustomAttributes($propertyName)) {
+                $vals = $this->{$propertyName};
+                foreach ($defaultItems as $defaultItem) {
+                    if (! array_key_exists($defaultItem, $vals) || is_null($vals[$defaultItem])) {
+                        $vals[$defaultItem] = $default;
+                    }
+                }
+
+                ksort($vals);
+
+                return $vals;
+            }
+
+            return ['default-colors' => $default, 'default-styling' => $default];
+
+        }
+    }
+
+    public function setCustomAttributesDefaults(string $propertyName, array $customAttributes, bool $default = false, bool $classicMode = true): self
+    {
+
+        $this->{$propertyName} = array_merge($this->getCustomAttributesNew(propertyName: $propertyName, default: $default, classicMode: $classicMode), $customAttributes);
+
+        return $this;
+    }
 }
diff --git a/src/Traits/Styling/HasBulkActionsStyling.php b/src/Traits/Styling/HasBulkActionsStyling.php
@@ -9,13 +9,13 @@ trait HasBulkActionsStyling
 {
     protected array $bulkActionsCheckboxAttributes = [];
 
-    protected array $bulkActionsThAttributes = ['default' => true];
+    protected array $bulkActionsThAttributes = ['default' => null, 'default-colors' => null, 'default-styling' => null];
 
-    protected array $bulkActionsThCheckboxAttributes = ['default' => true];
+    protected array $bulkActionsThCheckboxAttributes = ['default' => null, 'default-colors' => null, 'default-styling' => null];
 
-    protected array $bulkActionsTdAttributes = ['default' => true];
+    protected array $bulkActionsTdAttributes = ['default' => null, 'default-colors' => null, 'default-styling' => null];
 
-    protected array $bulkActionsTdCheckboxAttributes = ['default' => true];
+    protected array $bulkActionsTdCheckboxAttributes = ['default' => null, 'default-colors' => null, 'default-styling' => null];
 
     protected array $bulkActionsButtonAttributes = ['default-colors' => true, 'default-styling' => true];
 
@@ -69,7 +69,7 @@ public function getBulkActionsMenuItemAttributes(): array
     #[Computed]
     public function getBulkActionsThAttributes(): array
     {
-        return $this->getCustomAttributes('bulkActionsThAttributes');
+        return $this->getCustomAttributesNew('bulkActionsThAttributes', true, true);
 
     }
 
@@ -79,7 +79,7 @@ public function getBulkActionsThAttributes(): array
     #[Computed]
     public function hasBulkActionsThAttributes(): bool
     {
-        return $this->getBulkActionsThAttributes() != ['default' => true, 'default-colors' => false, 'default-styling' => false];
+        return $this->getBulkActionsThAttributes() != ['default' => true, 'default-colors' => true, 'default-styling' => true];
     }
 
     /**
@@ -89,28 +89,38 @@ public function hasBulkActionsThAttributes(): bool
      */
     public function getBulkActionsThCheckboxAttributes(): array
     {
-        return $this->getCustomAttributes('bulkActionsThCheckboxAttributes');
+        return $this->getCustomAttributesNew('bulkActionsThCheckboxAttributes', true, true);
+
     }
 
     /**
      * Used to get attributes for the Bulk Actions TD
      *
      * @return array<mixed>
      */
+    #[Computed]
     public function getBulkActionsTdAttributes(): array
     {
-        return $this->getCustomAttributes('bulkActionsTdAttributes');
+        return $this->getCustomAttributesNew('bulkActionsTdAttributes', true, true);
     }
 
     /**
      * Used to get attributes for the Bulk Actions TD
      *
      * @return array<mixed>
      */
+    #[Computed]
     public function getBulkActionsTdCheckboxAttributes(): array
     {
-        return $this->getCustomAttributes('bulkActionsTdCheckboxAttributes');
-
+        return array_merge(
+            [
+                'x-show' => '!currentlyReorderingStatus',
+                'x-model' => 'selectedItems',
+                'wire:loading.attr.delay' => 'disabled',
+                'type' => 'checkbox',
+            ],
+            $this->getCustomAttributesNew('bulkActionsTdCheckboxAttributes', true, true)
+        );
     }
 
     /**
@@ -136,78 +146,63 @@ public function getBulkActionsRowButtonAttributesBag(): ComponentAttributeBag
      */
     public function setBulkActionsButtonAttributes(array $bulkActionsButtonAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsButtonAttributes', $bulkActionsButtonAttributes);
-
-        return $this;
+        return $this->setCustomAttributes('bulkActionsButtonAttributes', $bulkActionsButtonAttributes);
     }
 
     /**
      * Used to set attributes for the Bulk Actions Menu
      */
     public function setBulkActionsMenuAttributes(array $bulkActionsMenuAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsMenuAttributes', $bulkActionsMenuAttributes);
-
-        return $this;
+        return $this->setCustomAttributes('bulkActionsMenuAttributes', $bulkActionsMenuAttributes);
     }
 
     /**
      * Used to set attributes for the Bulk Actions Menu Items
      */
     public function setBulkActionsMenuItemAttributes(array $bulkActionsMenuItemAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsMenuItemAttributes', $bulkActionsMenuItemAttributes);
-
-        return $this;
+        return $this->setCustomAttributes('bulkActionsMenuItemAttributes', $bulkActionsMenuItemAttributes);
     }
 
     /**
      * Used to set attributes for the Bulk Actions TD in the Row
      */
     public function setBulkActionsTdAttributes(array $bulkActionsTdAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsTdAttributes', $bulkActionsTdAttributes);
+        return $this->setCustomAttributesDefaults('bulkActionsTdAttributes', $bulkActionsTdAttributes);
 
-        return $this;
     }
 
     /**
      * Used to set attributes for the Bulk Actions Checkbox in the Row
      */
     public function setBulkActionsTdCheckboxAttributes(array $bulkActionsTdCheckboxAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsTdCheckboxAttributes', $bulkActionsTdCheckboxAttributes);
-
-        return $this;
+        return $this->setCustomAttributesDefaults('bulkActionsTdCheckboxAttributes', $bulkActionsTdCheckboxAttributes);
     }
 
     /**
      * Used to set attributes for the <th> for Bulk Actions
      */
     public function setBulkActionsThAttributes(array $bulkActionsThAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsThAttributes', $bulkActionsThAttributes);
-
-        return $this;
+        return $this->setCustomAttributesDefaults('bulkActionsThAttributes', $bulkActionsThAttributes);
     }
 
     /**
      * Used to set attributes for the Bulk Actions Checkbox in the <th>
      */
     public function setBulkActionsThCheckboxAttributes(array $bulkActionsThCheckboxAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsThCheckboxAttributes', $bulkActionsThCheckboxAttributes);
-
-        return $this;
+        return $this->setCustomAttributesDefaults('bulkActionsThCheckboxAttributes', $bulkActionsThCheckboxAttributes);
     }
 
     /**
      * Used to set attributes for the Bulk Actions Row Buttons
      */
     public function setBulkActionsRowButtonAttributes(array $bulkActionsRowButtonAttributes): self
     {
-        $this->setCustomAttributes('bulkActionsRowButtonAttributes', $bulkActionsRowButtonAttributes);
-
-        return $this;
+        return $this->setCustomAttributes('bulkActionsRowButtonAttributes', $bulkActionsRowButtonAttributes);
     }
 }