v3.0.0-beta.11 Merge (#1499)

* v3 - Fix - Correct setFilter behaviour (#1451) * Fix for setFilter * Update return types --------- Co-authored-by: lrljoe <[email protected]> * Fixes for missing brackets (#1455) * v3 Toolbar - Splitting of Views/Blades (#1454) * Initial Commit - Full Split of Toolbar * Remove Confirms Code * Fix superfluous endif * Combining Blades - Stage 1 * More Merging * Bulk Actions - Icon Adjustment * Further clean up of toolbar - filter button * Stripping Toolbar Theme Distinctions * Adjust childElementOpen to respect hierachy * To remove files * Merge Column-Select into Single Blade * Clean Up Blades * Fix missing BootStrap Classes from Toolbar Blade (#1466) * Adding x-cloak where it is missing for x-show (#1463) * V3 - QueryString migration into Traits (#1465) * Initial migration of queryString to Traits * Lock $queryStringStatus * Return empty arrays for Traits * Add WithQueryString Trait * Add Config/Helper Traits to WithQueryString * Add default queryStringStatus --------- Co-authored-by: lrljoe <[email protected]> * Update Changelog (#1467) * v3 DateRange - Icon Styling, FilterHelper Method (#1490) * DateRange - Icon Styling, FilterHelper Method * Add can_get_datestring test * Add non-array test for DateRangeFilter --------- Co-authored-by: lrljoe <[email protected]> * V3 DateRangeFilter - Remove Icon, Add Placeholder (#1492) * Remove DateRangeFilter Icon * DateRangeFilter - Remove Icon & Add Placeholder * Use FilterHelper method to generate wire:key, add placeholder with docs (#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 * Minor tweaks to toolbar/column select styling (#1494) --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Oct 29, 2023 · dc254a3 · dc254a3
1 parent cf20177
commit dc254a3
Show file tree

Hide file tree

Showing 20 changed files with 304 additions and 246 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [3.0.0-beta.11] - 2023-10-29
+- Update Date Range Icon Styling
+- Migrate PHP from date-range blade into new DateRangeFilter method
+- Add FilterHelper method for generating filter wire:keys
+- Add Filter CustomPosition tests
+- Add Placeholder config option for DateRangeFilter
+- Add Placeholder config option for DateFilter, DateTimeFilter, NumberFilter
+- Clean up classes on filters
+- Minor tweaks to toolbar/column select styling
+
 ## [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) 
 - Fix queryStringEnabled by @lrljoe in #[1465](https://github.com/rappasoft/laravel-livewire-tables/pull/1465) 

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
@@ -1,53 +1,27 @@
 @php
-
     $filterKey = $filter->getKey();
-    $filterConfigs = $filter->getConfigs();
-    $dateString = '';
-    $dateInput = isset($this->filters[$filterKey]) ? $this->filters[$filterKey] : '';
-    if ($dateInput != '') {
-        if (is_array($dateInput)) {
-            $startDate = isset($dateInput['minDate']) ? $dateInput['minDate'] : (isset($dateInput[1]) ? $dateInput[1] : date('Y-m-d'));
-            $endDate = isset($dateInput['maxDate']) ? $dateInput['maxDate'] : (isset($dateInput[0]) ? $dateInput[0] : date('Y-m-d'));
-            $dateString = $startDate . ' to ' . $endDate;
-        } else {
-            $dateArray = explode(',', $dateInput);
-            $startDate = isset($dateArray[0]) ? $dateArray[0] : date('Y-m-d');
-            $endDate = isset($dateArray[2]) ? $dateArray[2] : date('Y-m-d');
-            $dateString = $startDate . ' to ' . $endDate;
-        }
-    }
-
 @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
-                @class([
-                    'w-full rounded-md shadow-sm text-right' => $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="{{ $dateString }}"
-                    wire:key="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
-                    id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
-                    @class([
-                        'w-full inline 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 form-control w-100 pr-2 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,
-                    ])
-                />
-
-                <x-heroicon-o-calendar-days class="w-3 h-3 group-hover:opacity-0" />
-
-            </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 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,
+            ])
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+        />     
     </div>
-</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

diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
@@ -52,10 +52,8 @@
         @if ($component->showBulkActionsDropdownAlpine())
             <x-livewire-tables::tools.toolbar.items.bulk-actions />
         @endif
-
-        @if ($component->columnSelectIsEnabled()  && $component->isTailwind())
-            <x-livewire-tables::tools.toolbar.items.column-select /> 
-        @elseif($component->columnSelectIsEnabled() && $component->isBootstrap())
+
+        @if ($component->columnSelectIsEnabled())
             <x-livewire-tables::tools.toolbar.items.column-select /> 
         @endif