Merge pull request #1219 from rappasoft/develop

v2.14.0
rappasoft · May 19, 2023 · 77408c7 · 77408c7
2 parents c5b4a5a + 5024e1a
commit 77408c7
Show file tree

Hide file tree

Showing 107 changed files with 563 additions and 2,016 deletions.
diff --git a/.github/workflows/php-cs-fixer.yml b/.github/workflows/php-cs-fixer.yml
diff --git a/.github/workflows/pint.yml b/.github/workflows/pint.yml
@@ -0,0 +1,27 @@
+name: Fix PHP code style issues
+
+on:
+  push:
+    paths:
+      - '**.php'
+
+permissions:
+  contents: write
+
+jobs:
+  php-code-styling:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Fix PHP code style issues
+        uses: aglipanci/[email protected]
+
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Fix styling
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/.php-cs-fixer.php b/.php-cs-fixer.php
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,33 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [2.14.0] - 2023-05-18
+
+### 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.1] - 2023-05-18
+
+### Changed
+
+- Fixes for AlpineJS
+
 ## [2.13.0] - 2023-05-17
 
 ### Changed
@@ -800,7 +827,9 @@ Ground Up Rebuild
 
 - Initial release
 
-[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.13.0...development
+[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.14.0...development
+[2.14.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.14.0...v2.13.1
+[2.13.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.13.0...v2.13.1
 [2.13.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.12.0...v2.13.0
 [2.12.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.11.0...v2.12.0
 [2.11.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.10.0...v2.11.0

diff --git a/composer.json b/composer.json
@@ -19,9 +19,9 @@
     ],
     "require": {
         "php": "^7.4|^8.0|^8.1|^8.2",
+        "illuminate/contracts": "^8.0|^9.0|^10.0",
         "livewire/livewire": "^2.6",
-        "spatie/laravel-package-tools": "^1.4.3",
-        "illuminate/contracts": "^8.0|^9.0|^10.0"
+        "spatie/laravel-package-tools": "^1.4.3"
     },
     "require-dev": {
         "ext-sqlite3": "*",
@@ -43,7 +43,8 @@
     "scripts": {
         "psalm": "vendor/bin/psalm",
         "test": "vendor/bin/phpunit --colors=always",
-        "test-coverage": "vendor/bin/phpunit --coverage-html coverage"
+        "test-coverage": "vendor/bin/phpunit --coverage-html coverage",
+        "format": "vendor/bin/pint"
     },
     "config": {
         "sort-packages": true

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,32 +5,27 @@
         $theme = $component->getTheme();
     @endphp
 
-    @if ($theme === 'tailwind')
-        <x-livewire-tables::table.th.plain>
-            <div class="inline-flex rounded-md shadow-sm">
-                <input
-                    wire:model="selectAll"
-                    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