Filters - Set wire:model Method per-filter (#1699)

* Add wireableMethod tests --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>
rappasoft · Apr 30, 2024 · d0f4a76 · d0f4a76
1 parent 193b39c
commit d0f4a76
Show file tree

Hide file tree

Showing 26 changed files with 427 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.2.6] - UNRELEASED
+### New Features
+- Add configurable wire:model for filters by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1699
+
 ## [v3.2.5] - 2024-04-30
 ### New Features
 - Add setConfigurableArea by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1706

diff --git a/docs/filters/available-methods.md b/docs/filters/available-methods.md
@@ -398,3 +398,63 @@ If the filter takes any config options, you can set them with the `config` metho
         'max' => '2021-12-31',
     ])
 ```
+
+### Customising Wireable Behaviour
+
+For the following Filters, you may customise how the input is wire:model into the Table Component:
+
+- DateFilter (Defaults to Live)
+- DateTimeFilter (Defaults to Live)
+- MultiSelectDropdownFilter (Defaults to live.debounce.250ms)
+- MultiSelectFilter (Defaults to live.debounce.250ms)
+- NumberFilter (Defaults to Blur)
+- SelectFilter (Defaults to Live)
+- TextFilter (Defaults to Blur)
+
+You may override this using the following methods, on any of the above Filter types:
+
+#### setWireBlur()
+Forces the filter to use a wire:model.blur approach
+```
+    TextFilter::make('Name')
+    ->config([
+        'placeholder' => 'Search Name',
+        'maxlength' => '25',
+    ])
+    ->setWireBlur()
+```
+
+#### setWireDefer()
+Forces the filter to use a wire:model approach
+```
+    TextFilter::make('Name')
+    ->config([
+        'placeholder' => 'Search Name',
+        'maxlength' => '25',
+    ])
+    ->setWireDefer()
+```
+
+#### setWireLive()
+Forces the fitler to use a wire:model.live approach
+```
+    TextFilter::make('Name')
+    ->config([
+        'placeholder' => 'Search Name',
+        'maxlength' => '25',
+    ])
+    ->setWireLive()
+```
+
+#### setWireDebounce(int $debounceDelay)
+Allows you to pass a string to use a wire:model.live.debounce.Xms approach
+```
+```
+    TextFilter::make('Name')
+    ->config([
+        'placeholder' => 'Search Name',
+        'maxlength' => '25',
+    ])
+    ->setWireDebounce(50)
+```
+```
diff --git a/resources/views/components/tools/filters/date.blade.php b/resources/views/components/tools/filters/date.blade.php
@@ -4,8 +4,7 @@
         "rounded-md shadow-sm" => $isTailwind,
         "mb-3 mb-md-0 input-group" => $isBootstrap,
     ])>
-        <input
-            wire:model.live="filterComponents.{{ $filter->getKey() }}"
+        <input {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
             wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="date"

diff --git a/resources/views/components/tools/filters/datetime.blade.php b/resources/views/components/tools/filters/datetime.blade.php
@@ -6,7 +6,6 @@
         "mb-3 mb-md-0 input-group" => $isBootstrap,
     ])>
         <input
-            wire:model.live="filterComponents.{{ $filter->getKey() }}"
             wire:key="{{ $filter->generateWireKey($tableName, 'datetime') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="datetime-local"

diff --git a/resources/views/components/tools/filters/multi-select-dropdown.blade.php b/resources/views/components/tools/filters/multi-select-dropdown.blade.php
@@ -5,7 +5,7 @@
     @if ($isTailwind)
         <div class="rounded-md shadow-sm">
             <select multiple
-                wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
+                {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
                 wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
                 id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
                 class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
@@ -28,7 +28,7 @@ class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-
         </div>
     @elseif ($isBootstrap)
         <select multiple
-            wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
+            {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
             wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             class="{{ $isBootstrap4 ? 'form-control' : 'form-select' }}"

diff --git a/resources/views/components/tools/filters/multi-select.blade.php b/resources/views/components/tools/filters/multi-select.blade.php
@@ -27,7 +27,7 @@ class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150
                         id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
                         value="{{ $key }}"
                         wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
-                        wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
+                        {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
                         class="text-indigo-600 rounded border-gray-300 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 disabled:opacity-50 disabled:cursor-wait"
                     >
                     <label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif" class="dark:text-white">{{ $value }}</label>
@@ -53,7 +53,8 @@ class="form-check-input"
                     id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
                     value="{{ $key }}"
                     wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
-                    wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
+                    {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
+
                 >
                 <label class="form-check-label" for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif">{{ $value }}</label>
             </div>

diff --git a/resources/views/components/tools/filters/number.blade.php b/resources/views/components/tools/filters/number.blade.php
@@ -6,8 +6,7 @@
         "rounded-md shadow-sm" => $isTailwind,
         "mb-3 mb-md-0 input-group" => $isBootstrap,
     ])>
-        <input
-            wire:model.blur="filterComponents.{{ $filter->getKey() }}"
+        <input {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
             wire:key="{{ $filter->generateWireKey($tableName, 'number') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="number"

diff --git a/resources/views/components/tools/filters/select.blade.php b/resources/views/components/tools/filters/select.blade.php
@@ -5,8 +5,7 @@
         'rounded-md shadow-sm' => $isTailwind,
         'inline' => $isBootstrap,
     ])>
-        <select
-            wire:model.live="filterComponents.{{ $filter->getKey() }}"
+        <select {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
             wire:key="{{ $filter->generateWireKey($tableName, 'select') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             @class([

diff --git a/resources/views/components/tools/filters/text-field.blade.php b/resources/views/components/tools/filters/text-field.blade.php
@@ -5,8 +5,7 @@
         "rounded-md shadow-sm" => $isTailwind,
         "mb-3 mb-md-0 input-group" => $isBootstrap,
     ])>
-        <input
-            wire:model.blur="filterComponents.{{ $filter->getKey() }}"
+        <input {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
             wire:key="{{ $filter->generateWireKey($tableName, 'text') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="text"

diff --git a/src/Views/Filters/DateFilter.php b/src/Views/Filters/DateFilter.php
@@ -4,12 +4,16 @@
 
 use DateTime;
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasConfig, IsStringFilter};
 
 class DateFilter extends Filter
 {
     use HasConfig,
         IsStringFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'live';
 
     protected string $view = 'livewire-tables::components.tools.filters.date';
 

diff --git a/src/Views/Filters/DateRangeFilter.php b/src/Views/Filters/DateRangeFilter.php
@@ -3,12 +3,16 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasConfig,HasOptions};
 
 class DateRangeFilter extends Filter
 {
     use HasOptions,
         HasConfig;
+    use HasWireables;
+
+    public string $wireMethod = 'blur';
 
     protected string $view = 'livewire-tables::components.tools.filters.date-range';
 

diff --git a/src/Views/Filters/DateTimeFilter.php b/src/Views/Filters/DateTimeFilter.php
@@ -4,12 +4,16 @@
 
 use DateTime;
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasConfig, IsStringFilter};
 
 class DateTimeFilter extends Filter
 {
     use HasConfig,
         IsStringFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'live';
 
     protected string $view = 'livewire-tables::components.tools.filters.datetime';
 

diff --git a/src/Views/Filters/LivewireComponentFilter.php b/src/Views/Filters/LivewireComponentFilter.php
@@ -4,9 +4,14 @@
 
 use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 
 class LivewireComponentFilter extends Filter
 {
+    use HasWireables;
+
+    public string $wireMethod = 'blur';
+
     protected string $view = 'livewire-tables::components.tools.filters.livewire-component-filter';
 
     public string $livewireComponent = '';

diff --git a/src/Views/Filters/MultiSelectDropdownFilter.php b/src/Views/Filters/MultiSelectDropdownFilter.php
@@ -3,12 +3,16 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasOptions,IsArrayFilter};
 
 class MultiSelectDropdownFilter extends Filter
 {
     use HasOptions,
         IsArrayFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'live.debounce.250ms';
 
     protected string $view = 'livewire-tables::components.tools.filters.multi-select-dropdown';
 

diff --git a/src/Views/Filters/MultiSelectFilter.php b/src/Views/Filters/MultiSelectFilter.php
@@ -3,12 +3,16 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasOptions,IsArrayFilter};
 
 class MultiSelectFilter extends Filter
 {
     use HasOptions,
         IsArrayFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'live.debounce.250ms';
 
     protected string $view = 'livewire-tables::components.tools.filters.multi-select';
 

diff --git a/src/Views/Filters/NumberFilter.php b/src/Views/Filters/NumberFilter.php
@@ -3,11 +3,15 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{IsStringFilter};
 
 class NumberFilter extends Filter
 {
     use IsStringFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'blur';
 
     protected string $view = 'livewire-tables::components.tools.filters.number';
 

diff --git a/src/Views/Filters/NumberRangeFilter.php b/src/Views/Filters/NumberRangeFilter.php
@@ -3,11 +3,15 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasOptions};
 
 class NumberRangeFilter extends Filter
 {
     use HasOptions;
+    use HasWireables;
+
+    public string $wireMethod = 'blur';
 
     protected string $view = 'livewire-tables::components.tools.filters.number-range';
 

diff --git a/src/Views/Filters/SelectFilter.php b/src/Views/Filters/SelectFilter.php
@@ -3,12 +3,16 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasOptions,IsStringFilter};
 
 class SelectFilter extends Filter
 {
     use HasOptions,
         IsStringFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'live';
 
     protected string $view = 'livewire-tables::components.tools.filters.select';
 

diff --git a/src/Views/Filters/TextFilter.php b/src/Views/Filters/TextFilter.php
@@ -3,11 +3,15 @@
 namespace Rappasoft\LaravelLivewireTables\Views\Filters;
 
 use Rappasoft\LaravelLivewireTables\Views\Filter;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{IsStringFilter};
 
 class TextFilter extends Filter
 {
     use IsStringFilter;
+    use HasWireables;
+
+    public string $wireMethod = 'blur';
 
     protected string $view = 'livewire-tables::components.tools.filters.text-field';