From 5b88b0da8dad9708d5513f02de0d7b5a1194327d Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Fri, 19 May 2023 00:04:54 +0100
Subject: [PATCH] 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>
---
 .gitignore                                    |  1 +
 CHANGELOG.md                                  | 24 +++++--
 .../views/components/pagination.blade.php     | 12 ++--
 .../table/td/bulk-actions.blade.php           | 40 ++++-------
 .../table/th/bulk-actions.blade.php           | 48 ++++++--------
 .../table/tr/bulk-actions.blade.php           | 23 +++----
 .../views/components/tools/toolbar.blade.php  |  6 +-
 resources/views/components/wrapper.blade.php  | 66 +++++++++----------
 src/Traits/WithData.php                       | 10 ++-
 src/Traits/WithPagination.php                 |  1 +
 .../Traits/Visuals/ReorderingVisualsTest.php  |  2 +-
 11 files changed, 113 insertions(+), 120 deletions(-)

diff --git a/.gitignore b/.gitignore
index 05c756b00..043be3f9a 100644
--- 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
index 89a81cb82..01380c88d 100644
--- 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
index 51c932320..5ba6992cf 100644
--- 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
index 34b7a6c73..d5b7af025 100644
--- 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
index 457d58cdc..e0fdead7b 100644
--- 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
index 3eb147765..1107a6216 100644
--- 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
index 03dc549e5..4183f606f 100644
--- 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
index b024c02ec..5f0ad00ae 100644
--- 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')
 
diff --git a/src/Traits/WithData.php b/src/Traits/WithData.php
index 99fa45dfc..4d1786e57 100644
--- a/src/Traits/WithData.php
+++ b/src/Traits/WithData.php
@@ -17,7 +17,10 @@ public function getRows()
 
         $executedQuery = $this->executeQuery();
 
+        // Get All Currently Paginated Items Primary Keys
         $this->paginationCurrentItems = $executedQuery->pluck($this->getPrimaryKey())->toArray() ?? [];
+
+        // Get Count of Items in Current Page
         $this->paginationCurrentCount = $executedQuery->count() ?? 0;
 
         return $executedQuery;
@@ -46,7 +49,12 @@ protected function executeQuery()
     {
         if ($this->paginationIsEnabled()) {
             if ($this->isPaginationMethod('standard')) {
-                return $this->getBuilder()->paginate($this->getPerPage() === -1 ? $this->getBuilder()->count() : $this->getPerPage(), ['*'], $this->getComputedPageName());
+                $paginatedResults = $this->getBuilder()->paginate($this->getPerPage() === -1 ? $this->getBuilder()->count() : $this->getPerPage(), ['*'], $this->getComputedPageName());
+
+                // Get the total number of items available
+                $this->paginationTotalItemCount = $paginatedResults->total() ?? 0;
+
+                return $paginatedResults;
             }
 
             if ($this->isPaginationMethod('simple')) {
diff --git a/src/Traits/WithPagination.php b/src/Traits/WithPagination.php
index f601d9995..362d492dc 100644
--- a/src/Traits/WithPagination.php
+++ b/src/Traits/WithPagination.php
@@ -22,6 +22,7 @@ trait WithPagination
     public string $paginationMethod = 'standard';
     public array $paginationCurrentItems = [];
     public int $paginationCurrentCount = 0;
+    public ?int $paginationTotalItemCount = null;
 
     // TODO: Test
     public function setupPagination(): void
diff --git a/tests/Traits/Visuals/ReorderingVisualsTest.php b/tests/Traits/Visuals/ReorderingVisualsTest.php
index 787e1558e..a1fd92184 100644
--- a/tests/Traits/Visuals/ReorderingVisualsTest.php
+++ b/tests/Traits/Visuals/ReorderingVisualsTest.php
@@ -224,7 +224,7 @@ public function bulk_actions_header_gets_hidden_on_reorder(): void
             ->call('setReorderEnabled')
             ->assertSet('bulkActionsStatus', true)
             ->call('setBulkActions', ['activate' => 'Activate'])
-            ->assertSeeHtml('x-model="allItemsSelected"')
+            ->assertSeeHtml("selectedItems.length == paginationTotalItemCount")
             ->call('enableReordering')
             ->assertSet('bulkActionsStatus', false)
             ->assertDontSee('Select All');