Use FilterHelper method to generate wire:key, add placeholder with do…

…cs (#1493) * For all Filters (Except MultiSelect currently), use the FilterHelper method to generate the wire:key rather than doing it in the blade. This centralises for future updates MultiSelectFilter will follow in due course, as it requires some tidying & updates. * Add placeholder config option to: DateRangeFilter, DateFilter, DateTimeFilter, NumberFilter and update docs to reflect the availability of the option * Clean up classes on Filters
rappasoft · Oct 29, 2023 · 11ae25b · 11ae25b
1 parent 0cc1dea
commit 11ae25b
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,9 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 - Migrate PHP from date-range blade into new DateRangeFilter method
 - Add FilterHelper method for generating filter wire:keys
 - Add Filter CustomPosition tests
-- Add Placeholder option for DateRangeFilter
+- Add Placeholder config option for DateRangeFilter
+- Add Placeholder config option for DateFilter, DateTimeFilter, NumberFilter
+- Clean up classes on filters
 
 ## [3.0.0-beta.10] - 2023-10-27
 - Changes to toolbar blade structure by @lrljoe in #[1454](https://github.com/rappasoft/laravel-livewire-tables/pull/1454) 

diff --git a/docs/filter-types/filters-date.md b/docs/filter-types/filters-date.md
@@ -18,17 +18,18 @@ public function filters(): array
 }
 ```
 
-Date filters have configs to set min and max, and to set the format for the Filter Pills
+Date filters have configs to set min and max, to set the format for the Filter Pills, and to set a placeholder value
 
 ```php
 public function filters(): array
 {
     return [
         DateFilter::make('Verified From')
             ->config([
-                'min' => '2020-01-01',
-                'max' => '2021-12-31',
-                'pillFormat' => 'd M Y',
+                'min' => '2020-01-01',  // Earliest Acceptable Date
+                'max' => '2021-12-31', // Latest Acceptable Date
+                'pillFormat' => 'd M Y', // Format for use in Filter Pills
+                'placeholder' => 'Enter Date', // A placeholder value
             ])
     ];
 }

diff --git a/docs/filter-types/filters-daterange.md b/docs/filter-types/filters-daterange.md
@@ -18,7 +18,7 @@ public function filters(): array
 }
 ```
 
-DateRange filters have configs to set earliestDate and latestDate, to allow/disallow input, to set the input format, and display format, plus Filter Pills labels
+DateRange filters have configs to set earliestDate and latestDate, to allow/disallow input, to set the input format, to set a placeholder value,  display format, plus Filter Pills labels
 
 ```php
 public function filters(): array
@@ -32,6 +32,7 @@ public function filters(): array
             'dateFormat' => 'Y-m-d', // Date format that will be received by the filter
             'earliestDate' => '2020-01-01', // The earliest acceptable date
             'latestDate' => '2023-08-01', // The latest acceptable date
+            'placeholder' => 'Enter Date Range', // A placeholder value
         ])
         ->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
         ->filter(function (Builder $builder, array $dateRange) { // Expects an array.

diff --git a/docs/filter-types/filters-datetime.md b/docs/filter-types/filters-datetime.md
@@ -18,17 +18,18 @@ public function filters(): array
 }
 ```
 
-DateTime filters have configs to set min and max, and to set the format for the Filter Pills
+DateTime filters have configs to set min and max, to set the format for the Filter Pills, and to set a placeholder value
 
 ```php
 public function filters(): array
 {
     return [
         DateTimeFilter::make('Verified From')
             ->config([
-                'min' => '2022-11-31 00:00:00',
-                'max' => '2022-12-31 05:00:00',
-                'pillFormat' => 'd M Y - H:i',
+                'min' => '2022-11-31 00:00:00',  // Earliest Acceptable DateTime
+                'max' => '2022-12-31 05:00:00', // Latest Acceptable Date
+                'pillFormat' => 'd M Y - H:i', // Format for use in Filter Pills
+                'placeholder' => 'Enter Date Time', // A placeholder value
             ])
     ];
 }

diff --git a/docs/filter-types/filters-number.md b/docs/filter-types/filters-number.md
@@ -13,8 +13,9 @@ public function filters(): array
     return [
         NumberFilter::make('Amount')
             ->config([
-                'min' => 0,
-                'max' => 100,
+                'min' => 0, // Minimum Value Accepted
+                'max' => 100, // Maximum Value Accepted
+                'placeholder' => 'Enter Number 0 - 100', // A placeholder value
             ])
             ->filter(function(Builder $builder, string $value) {
                 $builder->where('amount', '<', $value);

diff --git a/resources/views/components/tools/filters/date-range.blade.php b/resources/views/components/tools/filters/date-range.blade.php
@@ -3,27 +3,25 @@
 @endphp
 
 <div x-cloak id="{{ $tableName }}-dateRangeFilter-{{ $filterKey }}" x-data="flatpickrFilter($wire, '{{ $filterKey }}', @js($filter->getConfigs()), $refs.dateRangeInput, '{{ App::currentLocale() }}')" >
-    <div>
-        <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
-        <div
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+    <div
+        @class([
+            'w-full rounded-md shadow-sm text-left ' => $isTailwind,
+            'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap,
+        ])
+    >
+        <input
+            type="text"
+            x-ref="dateRangeInput"
+            x-on:click="init"
+            value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
+            wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
+            id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
             @class([
-                'w-full rounded-md shadow-sm text-left ' => $isTailwind,
-                'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap,
+                'w-full inline-block align-middle transition duration-150 ease-in-out border-gray-300 rounded-md 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-800 dark:text-white dark:border-gray-600' => $isTailwind,
+                'd-inline-block w-100 form-control' => $isBootstrap,
             ])
-        >
-            <input
-                type="text"
-                x-ref="dateRangeInput"
-                x-on:click="init"
-                value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
-                wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
-                id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
-                @class([
-                    'w-full inline-block align-middle 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' => $isTailwind,
-                    'd-inline-block w-100 form-control transition duration-150 ease-in-out border border-gray rounded-sm 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' => $isBootstrap,
-                ])
-                @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
-            />     
-        </div>
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+        />     
     </div>
 </div>
diff --git a/resources/views/components/tools/filters/date.blade.php b/resources/views/components/tools/filters/date.blade.php
@@ -1,18 +1,17 @@
 <div>
     <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
-
-
     <div @class([
         "rounded-md shadow-sm" => $isTailwind,
         "mb-3 mb-md-0 input-group" => $isBootstrap,
     ])>
         <input
             wire:model.live="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="date"
             @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
             @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
             @class([
                 "block w-full border-gray-300 rounded-md 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-800 dark:text-white dark:border-gray-600" => $isTailwind,
                 "form-control" => $isBootstrap,

diff --git a/resources/views/components/tools/filters/datetime.blade.php b/resources/views/components/tools/filters/datetime.blade.php
@@ -7,11 +7,12 @@
     ])>
         <input
             wire:model.live="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'datetime') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="datetime-local"
             @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
             @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
             @class([
                 "block w-full border-gray-300 rounded-md 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-800 dark:text-white dark:border-gray-600" => $isTailwind,
                 "form-control" => $isBootstrap,

diff --git a/resources/views/components/tools/filters/multi-select-dropdown.blade.php b/resources/views/components/tools/filters/multi-select-dropdown.blade.php
@@ -6,7 +6,7 @@
         <div class="rounded-md shadow-sm">
             <select multiple
                 wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
-                wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+                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"
             >
@@ -29,7 +29,7 @@ class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-
     @elseif ($isBootstrap)
         <select multiple
             wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            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
@@ -3,7 +3,7 @@
 
 
     @if ($isTailwind)
-        <div class="rounded-md">
+        <div class="rounded-md shadow-sm">
             <div>
                 <input
                     type="checkbox"

diff --git a/resources/views/components/tools/filters/number.blade.php b/resources/views/components/tools/filters/number.blade.php
@@ -8,11 +8,12 @@
     ])>
         <input
             wire:model.blur="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'number') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="number"
             @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
             @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
             @class([
                 "block w-full border-gray-300 rounded-md 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-800 dark:text-white dark:border-gray-600" => $isTailwind,
                 "form-control" => $isBootstrap,

diff --git a/resources/views/components/tools/filters/select.blade.php b/resources/views/components/tools/filters/select.blade.php
@@ -7,7 +7,7 @@
     ])>
         <select
             wire:model.live="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'select') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             @class([
                     'block w-full border-gray-300 rounded-md 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-800 dark:text-white dark:border-gray-600' => $isTailwind,

diff --git a/resources/views/components/tools/filters/text-field.blade.php b/resources/views/components/tools/filters/text-field.blade.php
@@ -7,7 +7,7 @@
     ])>
         <input
             wire:model.blur="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'text') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="text"
             @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif