AlpineJS - Bulk Actions Fixes (#1218)

* Start of AlpineJS Cleanup * Fix styling * Interim Fixes - Removing unnecessary variables * Fixes for Checkboxes * Theme to Conditional Class in Bulk Actions th & td * Adjust wrapper for no bulk actions * Wrapper tweak to cater for no bulk actions * ReorderingVisualsTest fix for AlpineJS * Fix pagination totals * Fix styling * Pagination - AlpineJS Tweaks * Fix PaginationCurrentItems * Bulk Actions - Indeterminate * Fix ReorderingVisualsTest again,changelog updated --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>
rappasoft · May 18, 2023 · 5b88b0d · 5b88b0d
1 parent 74e1224
commit 5b88b0d
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 120 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@ output.txt
 phpunit.xml.dist.bak
 phpunit.xml.dist.dev
 .github/workflows/code-cov.yml
+.history/*
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,12 +4,24 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
-### Fixes
-- Bulk Actions (AlpineJS)
-  - Moving Table Head Checkbox to AlpineJS
-  - Using AlpineJS for calculating if all items have been selected
-  - Correcting missing x-cloak
-
+### Changed
+- Fixes
+    - Bulk Actions (AlpineJS)
+    - Moving Table Head Checkbox to AlpineJS
+    - Using AlpineJS for calculating if all items have been selected
+    - Correcting missing x-cloak
+    - Added indeterminateCheckbox for TH for bulk actions
+    - Cleaned up ALpineJS functionality for Bulk Actions
+    - Repair of tests that were looking for wire:model that no longer existed
+
+- Enhancements
+    - Several new public variables for accessing pagination data cleanly, to avoid calling functions repeatedly across various blades.
+        - paginationTotalItemCount (Total number of items in the results across all page)
+        - paginationCurrentItems (Primary keys of items in the current page)
+        - paginationCurrentCount (Number of results on the current page)
+
+- Blades
+    - Several blades have had the classic Tables approach ($theme == 'tailwind', $theme == 'bootstrap) replaced with conditional classes using the @class([]) approach.  This is to reduce the complexity of the blade files.
 
 ## [2.13.0] - 2023-05-17
 

diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php
@@ -12,7 +12,7 @@
 @endif
 
 @if ($theme === 'tailwind')
-    <div x-init="@if ($component->bulkActionsAreEnabled()) this.visibleItems = @js($rows->pluck($component->getPrimaryKey())->toArray()); @endif">
+    <div>
         @if ($component->paginationVisibilityIsEnabled())
             <div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
                 <div>
@@ -23,7 +23,7 @@
                             <span>@lang('to')</span>
                             <span class="font-medium">{{ $rows->lastItem() }}</span>
                             <span>@lang('of')</span>
-                            <span class="font-medium">{{ $rows->total() }}</span>
+                            <span class="font-medium"><span x-text="paginationTotalItemCount"></span></span>
                             <span>@lang('results')</span>
                         </p>
                     @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
@@ -49,7 +49,7 @@
         @endif
     </div>
 @elseif ($theme === 'bootstrap-4')
-    <div x-init="@if ($component->bulkActionsAreEnabled()) this.visibleItems = @js($rows->pluck($component->getPrimaryKey())->toArray()); @endif">
+    <div >
         @if ($component->paginationVisibilityIsEnabled())
             @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
                 <div class="row mt-3">
@@ -63,7 +63,7 @@
                         <span>@lang('to')</span>
                         <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
                         <span>@lang('of')</span>
-                        <strong>{{ $rows->total() }}</strong>
+                        <strong><span x-text="paginationTotalItemCount"></span></strong>
                         <span>@lang('results')</span>
                     </div>
                 </div>
@@ -92,7 +92,7 @@
         @endif
     </div>
 @elseif ($theme === 'bootstrap-5')
-    <div x-init="@if ($component->bulkActionsAreEnabled()) this.visibleItems = @js($rows->pluck($component->getPrimaryKey())->toArray()); @endif">
+    <div >
         @if ($component->paginationVisibilityIsEnabled())
             @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
                 <div class="row mt-3">
@@ -106,7 +106,7 @@
                         <span>@lang('to')</span>
                         <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
                         <span>@lang('of')</span>
-                        <strong>{{ $rows->total() }}</strong>
+                        <strong><span x-text="paginationTotalItemCount"></span></strong>
                         <span>@lang('results')</span>
                     </div>
                 </div>

diff --git a/resources/views/components/table/td/bulk-actions.blade.php b/resources/views/components/table/td/bulk-actions.blade.php
@@ -6,38 +6,22 @@
         $theme = $component->getTheme();
     @endphp
 
-    @if ($theme === 'tailwind')
-        <x-livewire-tables::table.td.plain>
-            <div class="inline-flex rounded-md shadow-sm">
-                <input
-                    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"
-                    x-model="selectedItems"
-                />
-            </div>
-        </x-livewire-tables::table.td.plain>
-    @elseif ($theme === 'bootstrap-4')
-        <x-livewire-tables::table.td.plain>
+    <x-livewire-tables::table.td.plain>
+        <div @class([
+            "inline-flex rounded-md shadow-sm" => $theme === "tailwind",
+            "form-check" => $theme === "bootstrap-5",
+            ])
+        >
             <input
                 wire:loading.attr.delay="disabled"
                 value="{{ $row->{$this->getPrimaryKey()} }}"
                 type="checkbox"
                 x-model="selectedItems"
+                @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",
+                    ])
             />
-        </x-livewire-tables::table.td.plain>
-    @elseif ($theme === 'bootstrap-5')
-        <x-livewire-tables::table.td.plain>
-            <div class="form-check">
-                <input
-                    wire:loading.attr.delay="disabled"
-                    value="{{ $row->{$this->getPrimaryKey()} }}"
-                    type="checkbox"
-                    class="form-check-input"
-                    x-model="selectedItems"
-                />
-            </div>
-        </x-livewire-tables::table.td.plain>
-    @endif
+        </div>
+    </x-livewire-tables::table.td.plain>
 @endif
diff --git a/resources/views/components/table/th/bulk-actions.blade.php b/resources/views/components/table/th/bulk-actions.blade.php
@@ -5,33 +5,27 @@
         $theme = $component->getTheme();
     @endphp
 
-    @if ($theme === 'tailwind')
-        <x-livewire-tables::table.th.plain>
-            <div class="inline-flex rounded-md shadow-sm">
-                <input
-                    x-model="allItemsSelected"
-                    x-on:click="toggleSelectAll"
-                    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"
-                />
-            </div>
-        </x-livewire-tables::table.th.plain>
-    @elseif ($theme === 'bootstrap-4')
-        <x-livewire-tables::table.th.plain>
-            <input
-                wire:model="selectAll"
+    <x-livewire-tables::table.th.plain>
+        <div
+            x-data="{ newSelectCount: 0, indeterminateCheckbox: false, bulkActionHeaderChecked: false}"  
+            x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
+
+            @class([
+                'inline-flex rounded-md shadow-sm' => $theme === 'tailwind',
+                'form-check' => $theme === 'bootstrap-5',
+                ])
+        >
+            <input 
+                :checked="selectedItems.length == paginationTotalItemCount"
+                x-on:click="if(selectedItems.length == paginationTotalItemCount) { $el.indeterminate = false; $wire.clearSelected(); bulkActionHeaderChecked = false; } else { bulkActionHeaderChecked = true; $el.indeterminate = false; $wire.setAllSelected(); }"
                 type="checkbox"
+                x-init="$watch('indeterminateCheckbox', value => $el.indeterminate = value); $watch('selectedItems', value => newSelectCount = value.length);"
+
+                @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',
+                ])
             />
-        </x-livewire-tables::table.th.plain>
-    @elseif ($theme === 'bootstrap-5')
-        <x-livewire-tables::table.th.plain>
-            <div class="form-check">
-                <input
-                    wire:model="selectAll"
-                    type="checkbox"
-                    class="form-check-input"
-                />
-            </div>
-        </x-livewire-tables::table.th.plain>
-    @endif
+        </div>
+    </x-livewire-tables::table.th.plain>
 @endif
diff --git a/resources/views/components/table/tr/bulk-actions.blade.php b/resources/views/components/table/tr/bulk-actions.blade.php
@@ -6,7 +6,6 @@
         $table = $component->getTableName();
         $theme = $component->getTheme();
         $colspan = $component->getColspanCount();
-        $selected = $component->getSelectedCount();
         $selectAll = $component->selectAllIsEnabled();
         $simplePagination = $component->paginationMethod == 'simple' ? true : false;
     @endphp
@@ -16,15 +15,14 @@
             wire:key="bulk-select-message-{{ $table }}"
             class="bg-indigo-50 dark:bg-gray-900 dark:text-white" 
             x-cloak
-            x-show="shouldShowBulkActionSelect"
-            x-effect="updateTotalItemCount({{ $rows->total() ?? 'unknown' }})"
+            x-show="selectedItems.length > 0"
         >
             <x-livewire-tables::table.td.plain :colspan="$colspan">
-                <template x-if="allItemsSelected">
+                <template x-if="selectedItems.length == paginationTotalItemCount">
                     <div wire:key="all-selected-{{ $table }}">
                         <span>
                             @lang('You are currently selecting all')
-                            @if(!$simplePagination) <strong>{{ number_format($rows->total()) }}</strong> @endif
+                            @if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
                             @lang('rows').
                         </span>
 
@@ -38,13 +36,13 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
                         </button>
                     </div>
                 </template>
-                <template x-if="!allItemsSelected">
+                <template x-if="selectedItems.length !== paginationTotalItemCount">
                     <div wire:key="some-selected-{{ $table }}">
                         <span>
                             @lang('You have selected')
                             <strong><span x-text="selectedItems.length"></span></strong>
                             @lang('rows, do you want to select all')
-                            @if(!$simplePagination) <strong>{{ number_format($rows->total()) }}</strong> @endif
+                            @if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
                         </span>
 
                         <button
@@ -81,15 +79,14 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
         <x-livewire-tables::table.tr.plain 
             wire:key="bulk-select-message-{{ $table }}"
             x-cloak
-            x-show="shouldShowBulkActionSelect"
-            x-effect="updateTotalItemCount({{ $rows->total() ?? 'unknown' }})"
+            x-show="selectedItems.length > 0"
         >
             <x-livewire-tables::table.td.plain :colspan="$colspan">
-                <template x-if="allItemsSelected">
+                <template x-if="selectedItems.length == paginationTotalItemCount">
                     <div wire:key="all-selected-{{ $table }}">
                         <span>
                             @lang('You are currently selecting all')
-                            @if(!$simplePagination) <strong>{{ number_format($rows->total()) }}</strong> @endif
+                            @if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
                             @lang('rows').
                         </span>
 
@@ -103,13 +100,13 @@ class="btn btn-primary btn-sm"
                         </button>
                     </div>
                 </template>
-                <template x-if="!allItemsSelected">
+                <template x-if="selectedItems.length !== paginationTotalItemCount">
                     <div wire:key="some-selected-{{ $table }}">
                         <span>
                             @lang('You have selected')
                             <strong><span x-text="selectedItems.length"></span></strong>
                             @lang('rows, do you want to select all')
-                            @if(!$simplePagination) <strong>{{ number_format($rows->total()) }}</strong> @endif
+                            @if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
                         </span>
 
                         <button

diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
@@ -128,7 +128,7 @@ class="w-full inline-flex items-center justify-center px-3 py-2 border border-gr
             @endif
 
             @if ($component->showBulkActionsDropdownAlpine())
-                <div x-cloak x-show="shouldShowBulkActionSelect" class="w-full md:w-auto mb-4 md:mb-0">
+                <div x-cloak x-show="selectedItems.length > 0" class="w-full md:w-auto mb-4 md:mb-0">
                     <div x-data="{ open: false, childElementOpen: false }" @keydown.window.escape="if (!childElementOpen) { open = false }"
                         x-on:click.away="if (!childElementOpen) { open = false }"
                         class="relative inline-block text-left z-10 w-full md:w-auto">
@@ -409,7 +409,7 @@ class="dropdown-item btn text-center">
             @endif
 
             @if ($component->showBulkActionsDropdownAlpine())
-                <div x-cloak x-show="shouldShowBulkActionSelect" class="mb-3 mb-md-0">
+                <div x-cloak x-show="selectedItems.length > 0" class="mb-3 mb-md-0">
                     <div class="dropdown d-block d-md-inline">
                         <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button"
                             id="{{ $component->getTableName() }}-bulkActionsDropdown" data-toggle="dropdown"
@@ -634,7 +634,7 @@ class="dropdown-item text-center">
             @endif
 
             @if ($component->showBulkActionsDropdownAlpine())
-                <div x-cloak x-show="shouldShowBulkActionSelect" class="mb-3 mb-md-0">
+                <div x-cloak x-show="selectedItems.length > 0" class="mb-3 mb-md-0">
                     <div class="dropdown d-block d-md-inline">
                         <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button"
                             id="{{ $component->getTableName() }}-bulkActionsDropdown" data-bs-toggle="dropdown"

diff --git a/resources/views/components/wrapper.blade.php b/resources/views/components/wrapper.blade.php
@@ -6,45 +6,41 @@
 @endphp
 
 <div x-data="{
-    shouldShowBulkActionSelect: false,
     @if ($component->isFilterLayoutSlideDown()) filtersOpen: $wire.filterSlideDownDefaultVisible, @endif
-        selectedItems: $wire.entangle('selected').defer,
-        selectedCount: 0,
-        totalItems: 0,
-        visibleItems: {},
-        allItemsSelected: false,
-        toggleSelectAll() {
-            if (this.totalItems == this.selectedCount) {
-                this.clearSelected()
-            } else {
-                this.setAllSelected()
-            }
-        },
-        setAllSelected() {
-            allItemsSelected = true;
-            $wire.setAllSelected();
-        },
-        clearSelected() {
-            $wire.clearSelected();
-        },
-        selectAllOnPage() {
-            let tempSelectedItems = this.selectedItems;
-            const iterator = visibleItems.values();
-            for (const value of iterator) {
-                tempSelectedItems.push(value.toString());
-            }
-            this.selectedItems = [...new Set(tempSelectedItems)];
-        },
-        updateTotalItemCount(itemCount) {
-            this.totalItems = itemCount;
-            this.allItemsSelected = (itemCount == this.selectedCount);
-        },
-}"
-    x-init="selectedCount = selectedItems.length; shouldShowBulkActionSelect = (selectedCount > 0);"
-    x-effect="selectedCount = selectedItems.length; shouldShowBulkActionSelect = (selectedItems.length > 0);">
+    paginationCurrentCount: $wire.entangle('paginationCurrentCount'),
+    paginationTotalItemCount: $wire.entangle('paginationTotalItemCount'),
+    paginationCurrentItems: $wire.entangle('paginationCurrentItems'),
+    @if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
+    selectedItems: $wire.entangle('selected').defer,
+    @else
+    selectedItems: {},
+    @endif
+    toggleSelectAll() {
+        if (this.paginationTotalItemCount == this.selectedItems.length) {
+            this.clearSelected();
+        } else {
+            this.setAllSelected();
+        }
+    },
+    setAllSelected() {
+        $wire.setAllSelected();
+    },
+    clearSelected() {
+        $wire.clearSelected();
+    },
+    selectAllOnPage() {
+        let tempSelectedItems = this.selectedItems;
+        const iterator = this.paginationCurrentItems.values();
+        for (const value of iterator) {
+            tempSelectedItems.push(value.toString());
+        }
+        this.selectedItems = [...new Set(tempSelectedItems)];
+    },
+}">
     <div {{ $attributes->merge($this->getComponentWrapperAttributes()) }}
         @if ($component->hasRefresh()) wire:poll{{ $component->getRefreshOptions() }} @endif
         @if ($component->isFilterLayoutSlideDown()) wire:ignore.self @endif>
+
         @include('livewire-tables::includes.debug')
         @include('livewire-tables::includes.offline')