Skip to content

Commit d0f4a76

Browse files
lrljoelrljoe
authored
Filters - Set wire:model Method per-filter (rappasoft#1699)
 * Add wireableMethod tests --------- Co-authored-by: lrljoe <[email protected]>
1 parent 193b39c commit d0f4a76

26 files changed

+427
-13
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
All notable changes to `laravel-livewire-tables` will be documented in this file
44

5+
## [v3.2.6] - UNRELEASED
6+
### New Features
7+
- Add configurable wire:model for filters by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1699
8+
59
## [v3.2.5] - 2024-04-30
610
### New Features
711
- Add setConfigurableArea by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1706

‎docs/filters/available-methods.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,3 +398,63 @@ If the filter takes any config options, you can set them with the `config` metho
398398
'max' => '2021-12-31',
399399
])
400400
```
401+
402+
### Customising Wireable Behaviour
403+
404+
For the following Filters, you may customise how the input is wire:model into the Table Component:
405+
406+
- DateFilter (Defaults to Live)
407+
- DateTimeFilter (Defaults to Live)
408+
- MultiSelectDropdownFilter (Defaults to live.debounce.250ms)
409+
- MultiSelectFilter (Defaults to live.debounce.250ms)
410+
- NumberFilter (Defaults to Blur)
411+
- SelectFilter (Defaults to Live)
412+
- TextFilter (Defaults to Blur)
413+
414+
You may override this using the following methods, on any of the above Filter types:
415+
416+
#### setWireBlur()
417+
Forces the filter to use a wire:model.blur approach
418+
```
419+
TextFilter::make('Name')
420+
->config([
421+
'placeholder' => 'Search Name',
422+
'maxlength' => '25',
423+
])
424+
->setWireBlur()
425+
```
426+
427+
#### setWireDefer()
428+
Forces the filter to use a wire:model approach
429+
```
430+
TextFilter::make('Name')
431+
->config([
432+
'placeholder' => 'Search Name',
433+
'maxlength' => '25',
434+
])
435+
->setWireDefer()
436+
```
437+
438+
#### setWireLive()
439+
Forces the fitler to use a wire:model.live approach
440+
```
441+
TextFilter::make('Name')
442+
->config([
443+
'placeholder' => 'Search Name',
444+
'maxlength' => '25',
445+
])
446+
->setWireLive()
447+
```
448+
449+
#### setWireDebounce(int $debounceDelay)
450+
Allows you to pass a string to use a wire:model.live.debounce.Xms approach
451+
```
452+
```
453+
TextFilter::make('Name')
454+
->config([
455+
'placeholder' => 'Search Name',
456+
'maxlength' => '25',
457+
])
458+
->setWireDebounce(50)
459+
```
460+
```

‎resources/views/components/tools/filters/date.blade.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
"rounded-md shadow-sm" => $isTailwind,
55
"mb-3 mb-md-0 input-group" => $isBootstrap,
66
])>
7-
<input
8-
wire:model.live="filterComponents.{{ $filter->getKey() }}"
7+
<input {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
98
wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
109
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1110
type="date"

‎resources/views/components/tools/filters/datetime.blade.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"mb-3 mb-md-0 input-group" => $isBootstrap,
77
])>
88
<input
9-
wire:model.live="filterComponents.{{ $filter->getKey() }}"
109
wire:key="{{ $filter->generateWireKey($tableName, 'datetime') }}"
1110
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1211
type="datetime-local"

‎resources/views/components/tools/filters/multi-select-dropdown.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@if ($isTailwind)
66
<div class="rounded-md shadow-sm">
77
<select multiple
8-
wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
8+
{{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
99
wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
1010
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1111
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-
2828
</div>
2929
@elseif ($isBootstrap)
3030
<select multiple
31-
wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
31+
{{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
3232
wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
3333
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
3434
class="{{ $isBootstrap4 ? 'form-control' : 'form-select' }}"

‎resources/views/components/tools/filters/multi-select.blade.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150
2727
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
2828
value="{{ $key }}"
2929
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
30-
wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
30+
{{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
3131
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"
3232
>
3333
<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"
5353
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
5454
value="{{ $key }}"
5555
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
56-
wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
56+
{{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
57+
5758
>
5859
<label class="form-check-label" for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif">{{ $value }}</label>
5960
</div>

‎resources/views/components/tools/filters/number.blade.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
"rounded-md shadow-sm" => $isTailwind,
77
"mb-3 mb-md-0 input-group" => $isBootstrap,
88
])>
9-
<input
10-
wire:model.blur="filterComponents.{{ $filter->getKey() }}"
9+
<input {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
1110
wire:key="{{ $filter->generateWireKey($tableName, 'number') }}"
1211
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1312
type="number"

‎resources/views/components/tools/filters/select.blade.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
'rounded-md shadow-sm' => $isTailwind,
66
'inline' => $isBootstrap,
77
])>
8-
<select
9-
wire:model.live="filterComponents.{{ $filter->getKey() }}"
8+
<select {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
109
wire:key="{{ $filter->generateWireKey($tableName, 'select') }}"
1110
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1211
@class([

‎resources/views/components/tools/filters/text-field.blade.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"rounded-md shadow-sm" => $isTailwind,
66
"mb-3 mb-md-0 input-group" => $isBootstrap,
77
])>
8-
<input
9-
wire:model.blur="filterComponents.{{ $filter->getKey() }}"
8+
<input {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
109
wire:key="{{ $filter->generateWireKey($tableName, 'text') }}"
1110
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1211
type="text"

‎src/Views/Filters/DateFilter.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@
44

55
use DateTime;
66
use Rappasoft\LaravelLivewireTables\Views\Filter;
7+
use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasWireables;
78
use Rappasoft\LaravelLivewireTables\Views\Traits\Filters\{HasConfig, IsStringFilter};
89

910
class DateFilter extends Filter
1011
{
1112
use HasConfig,
1213
IsStringFilter;
14+
use HasWireables;
15+
16+
public string $wireMethod = 'live';
1317

1418
protected string $view = 'livewire-tables::components.tools.filters.date';
1519

0 commit comments

Comments
 (0)