BulkActions - Migration to AlpineJS v2 (#1196)

How this works Changes to a number of blades, and a couple of traits have occurred to allow for this to work smoothly. The design is so that the "Selected" is only updated on a typical Livewire refresh, rather than forcing it on each checkbox select. --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Update ChangeLog --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>
rappasoft · May 12, 2023 · d86227d · d86227d
1 parent 9504b4f
commit d86227d
Show file tree

Hide file tree

Showing 10 changed files with 437 additions and 525 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,20 +6,22 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ### Changed
 - General
- - Add capability for passing a custom model path to the MakeCommand
- - Add setFilterDefaultValue() on a per-component basis
- - Add getFilterDefaultValue() to each Filter Component (to maintain support for PHP7.4 - variable return types)
- - Moved Setting of Filter Defaults to Traits/Helpers/FilterHelpers - mountFilterHelpers
- - Moved Setting of Theme to Traits/ComponentUtilities - mountComponentUtilities for efficiency
- - Fix for TypeHint to allow continued support of PHP 7.4
+ - Migrate to AlpineJS for Bulk Actions - https://github.com/rappasoft/laravel-livewire-tables/pull/1196
+ - Add capability for passing a custom model path to the MakeCommand - https://github.com/rappasoft/laravel-livewire-tables/pull/1168
+ - Add setFilterDefaultValue() on a per-component basis - https://github.com/rappasoft/laravel-livewire-tables/pull/1191
+ - Add getFilterDefaultValue() to each Filter Component (to maintain support for PHP7.4 - variable return types) - https://github.com/rappasoft/laravel-livewire-tables/pull/1191
+ - Moved Setting of Filter Defaults to Traits/Helpers/FilterHelpers - mountFilterHelpers - https://github.com/rappasoft/laravel-livewire-tables/pull/1191
+ - Moved Setting of Theme to Traits/ComponentUtilities - mountComponentUtilities for efficiency - https://github.com/rappasoft/laravel-livewire-tables/pull/1191
 
 - Filters
  - *Fix* - Changed the booting order to prevent repeated calling of filters() - https://github.com/rappasoft/laravel-livewire-tables/pull/1166 
  - *Fix* - fixed multiSelectDropdownFilter in menus - https://github.com/rappasoft/laravel-livewire-tables/pull/1160 
+ - *Fix* - TypeHint to allow continued support of PHP 7.4 - https://github.com/rappasoft/laravel-livewire-tables/pull/1185
 
 - Documentation
  - *Fix* - Minor wording tweak to documentation - https://github.com/rappasoft/laravel-livewire-tables/pull/1139 
- - *Fix* - Fix to example in applying-filters
+ - *Fix* - Fix to example in applying-filters - https://github.com/rappasoft/laravel-livewire-tables/pull/1171
+ - Improved template for New Issue/Bug - https://github.com/rappasoft/laravel-livewire-tables/pull/1194 
 
 - Tests
  - Restore PHP 7.4 tests for L8 only (includes minor tweaks)

diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php
@@ -6,11 +6,13 @@
 @endphp
 
 @if ($component->hasConfigurableAreaFor('before-pagination'))
- @include($component->getConfigurableAreaFor('before-pagination'), $component->getParametersForConfigurableArea('before-pagination'))
+ @include(
+ $component->getConfigurableAreaFor('before-pagination'),
+ $component->getParametersForConfigurableArea('before-pagination'))
 @endif
 
 @if ($theme === 'tailwind')
- <div>
+ <div x-init="@if ($component->bulkActionsAreEnabled()) this.visibleItems = @js($rows->pluck($component->getPrimaryKey())->toArray()); @endif">
  @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>
@@ -47,7 +49,7 @@
  @endif
  </div>
 @elseif ($theme === 'bootstrap-4')
- <div>
+ <div x-init="@if ($component->bulkActionsAreEnabled()) this.visibleItems = @js($rows->pluck($component->getPrimaryKey())->toArray()); @endif">
  @if ($component->paginationVisibilityIsEnabled())
  @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
  <div class="row mt-3">
@@ -90,7 +92,7 @@
  @endif
  </div>
 @elseif ($theme === 'bootstrap-5')
- <div>
+ <div x-init="@if ($component->bulkActionsAreEnabled()) this.visibleItems = @js($rows->pluck($component->getPrimaryKey())->toArray()); @endif">
  @if ($component->paginationVisibilityIsEnabled())
  @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
  <div class="row mt-3">
@@ -135,5 +137,7 @@
 @endif
 
 @if ($component->hasConfigurableAreaFor('after-pagination'))
- @include($component->getConfigurableAreaFor('after-pagination'), $component->getParametersForConfigurableArea('after-pagination'))
+ @include(
+ $component->getConfigurableAreaFor('after-pagination'),
+ $component->getParametersForConfigurableArea('after-pagination'))
 @endif
diff --git a/resources/views/components/table/td/bulk-actions.blade.php b/resources/views/components/table/td/bulk-actions.blade.php
@@ -10,32 +10,32 @@
  <x-livewire-tables::table.td.plain>
  <div class="inline-flex rounded-md shadow-sm">
  <input
- wire:model="selected"
  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>
  <input
- wire:model="selected"
  wire:loading.attr.delay="disabled"
  value="{{ $row->{$this->getPrimaryKey()} }}"
  type="checkbox"
+ x-model="selectedItems"
  />
  </x-livewire-tables::table.td.plain>
  @elseif ($theme === 'bootstrap-5')
  <x-livewire-tables::table.td.plain>
  <div class="form-check">
  <input
- wire:model="selected"
  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>

diff --git a/resources/views/components/table/tr/bulk-actions.blade.php b/resources/views/components/table/tr/bulk-actions.blade.php
@@ -1,23 +1,24 @@
 @aware(['component'])
 @props(['rows'])
 
-@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions() && $component->hasSelected())
+@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
  @php
  $table = $component->getTableName();
  $theme = $component->getTheme();
  $colspan = $component->getColspanCount();
  $selected = $component->getSelectedCount();
  $selectAll = $component->selectAllIsEnabled();
- $simplePagination = ($component->paginationMethod == "simple") ? true : false;
+ $simplePagination = $component->paginationMethod == 'simple' ? true : false;
  @endphp
 
  @if ($theme === 'tailwind')
- <x-livewire-tables::table.tr.plain
+ <x-livewire-tables::table.tr.plain 
  wire:key="bulk-select-message-{{ $table }}"
- class="bg-indigo-50 dark:bg-gray-900 dark:text-white"
+ class="bg-indigo-50 dark:bg-gray-900 dark:text-white" 
+ x-show="shouldShowBulkActionSelect"
  >
  <x-livewire-tables::table.td.plain :colspan="$colspan">
- @if ($selectAll)
+ <template x-if="allItemsSelected">
  <div wire:key="all-selected-{{ $table }}">
  <span>
  @lang('You are currently selecting all')
@@ -34,15 +35,25 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
  @lang('Deselect All')
  </button>
  </div>
- @else
+ </template>
+ <template x-if="!allItemsSelected">
  <div wire:key="some-selected-{{ $table }}">
  <span>
  @lang('You have selected')
- <strong>{{ $selected }}</strong>
+ <strong><span x-text="selectedCount"></span></strong>
  @lang('rows, do you want to select all')
  @if(!$simplePagination) <strong>{{ number_format($rows->total()) }}</strong> @endif
  </span>
 
+ <button
+ x-on:click="selectAllOnPage()"
+ wire:loading.attr="disabled"
+ type="button"
+ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
+ >
+ @lang('Select All On Page')
+ </button>&nbsp;
+
  <button
  wire:click="setAllSelected"
  wire:loading.attr="disabled"
@@ -61,15 +72,16 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
  @lang('Deselect All')
  </button>
  </div>
- @endif
+ </template>
  </x-livewire-tables::table.td.plain>
  </x-livewire-tables::table.tr.plain>
  @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
- <x-livewire-tables::table.tr.plain
+ <x-livewire-tables::table.tr.plain 
  wire:key="bulk-select-message-{{ $table }}"
+ x-show="shouldShowBulkActionSelect"
  >
  <x-livewire-tables::table.td.plain :colspan="$colspan">
- @if ($selectAll)
+ <template x-if="allItemsSelected">
  <div wire:key="all-selected-{{ $table }}">
  <span>
  @lang('You are currently selecting all')
@@ -86,15 +98,25 @@ class="btn btn-primary btn-sm"
  @lang('Deselect All')
  </button>
  </div>
- @else
+ </template>
+ <template x-if="!allItemsSelected">
  <div wire:key="some-selected-{{ $table }}">
  <span>
  @lang('You have selected')
- <strong>{{ $selected }}</strong>
+ <strong><span x-text="selectedCount"></span></strong>
  @lang('rows, do you want to select all')
  @if(!$simplePagination) <strong>{{ number_format($rows->total()) }}</strong> @endif
  </span>
 
+ <button
+ x-on:click="selectAllOnPage()"
+ wire:loading.attr="disabled"
+ type="button"
+ class="btn btn-primary btn-sm"
+ >
+ @lang('Select All On Page')
+ </button>&nbsp;
+
  <button
  wire:click="setAllSelected"
  wire:loading.attr="disabled"
@@ -113,7 +135,7 @@ class="btn btn-primary btn-sm"
  @lang('Deselect All')
  </button>
  </div>
- @endif
+ </template>
  </x-livewire-tables::table.td.plain>
  </x-livewire-tables::table.tr.plain>
  @endif