Skip to content

Commit dc254a3

Browse files
lrljoelrljoe
authored
v3.0.0-beta.11 Merge (#1499)
* v3 - Fix - Correct setFilter behaviour (#1451) * Fix for setFilter * Update return types --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * 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 <lrljoe@users.noreply.github.com> * 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 <lrljoe@users.noreply.github.com> * 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 <lrljoe@users.noreply.github.com>
1 parent cf20177 commit dc254a3

20 files changed

+304
-246
lines changed

‎CHANGELOG.md

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

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

5+
## [3.0.0-beta.11] - 2023-10-29
6+
- Update Date Range Icon Styling
7+
- Migrate PHP from date-range blade into new DateRangeFilter method
8+
- Add FilterHelper method for generating filter wire:keys
9+
- Add Filter CustomPosition tests
10+
- Add Placeholder config option for DateRangeFilter
11+
- Add Placeholder config option for DateFilter, DateTimeFilter, NumberFilter
12+
- Clean up classes on filters
13+
- Minor tweaks to toolbar/column select styling
14+
515
## [3.0.0-beta.10] - 2023-10-27
616
- Changes to toolbar blade structure by @lrljoe in #[1454](https://github.com/rappasoft/laravel-livewire-tables/pull/1454)
717
- Fix queryStringEnabled by @lrljoe in #[1465](https://github.com/rappasoft/laravel-livewire-tables/pull/1465)

‎docs/filter-types/filters-date.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,18 @@ public function filters(): array
1818
}
1919
```
2020

21-
Date filters have configs to set min and max, and to set the format for the Filter Pills
21+
Date filters have configs to set min and max, to set the format for the Filter Pills, and to set a placeholder value
2222

2323
```php
2424
public function filters(): array
2525
{
2626
return [
2727
DateFilter::make('Verified From')
2828
->config([
29-
'min' => '2020-01-01',
30-
'max' => '2021-12-31',
31-
'pillFormat' => 'd M Y',
29+
'min' => '2020-01-01', // Earliest Acceptable Date
30+
'max' => '2021-12-31', // Latest Acceptable Date
31+
'pillFormat' => 'd M Y', // Format for use in Filter Pills
32+
'placeholder' => 'Enter Date', // A placeholder value
3233
])
3334
];
3435
}

‎docs/filter-types/filters-daterange.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ public function filters(): array
1818
}
1919
```
2020

21-
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
21+
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
2222

2323
```php
2424
public function filters(): array
@@ -32,6 +32,7 @@ public function filters(): array
3232
'dateFormat' => 'Y-m-d', // Date format that will be received by the filter
3333
'earliestDate' => '2020-01-01', // The earliest acceptable date
3434
'latestDate' => '2023-08-01', // The latest acceptable date
35+
'placeholder' => 'Enter Date Range', // A placeholder value
3536
])
3637
->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
3738
->filter(function (Builder $builder, array $dateRange) { // Expects an array.

‎docs/filter-types/filters-datetime.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,18 @@ public function filters(): array
1818
}
1919
```
2020

21-
DateTime filters have configs to set min and max, and to set the format for the Filter Pills
21+
DateTime filters have configs to set min and max, to set the format for the Filter Pills, and to set a placeholder value
2222

2323
```php
2424
public function filters(): array
2525
{
2626
return [
2727
DateTimeFilter::make('Verified From')
2828
->config([
29-
'min' => '2022-11-31 00:00:00',
30-
'max' => '2022-12-31 05:00:00',
31-
'pillFormat' => 'd M Y - H:i',
29+
'min' => '2022-11-31 00:00:00', // Earliest Acceptable DateTime
30+
'max' => '2022-12-31 05:00:00', // Latest Acceptable Date
31+
'pillFormat' => 'd M Y - H:i', // Format for use in Filter Pills
32+
'placeholder' => 'Enter Date Time', // A placeholder value
3233
])
3334
];
3435
}

‎docs/filter-types/filters-number.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ public function filters(): array
1313
return [
1414
NumberFilter::make('Amount')
1515
->config([
16-
'min' => 0,
17-
'max' => 100,
16+
'min' => 0, // Minimum Value Accepted
17+
'max' => 100, // Maximum Value Accepted
18+
'placeholder' => 'Enter Number 0 - 100', // A placeholder value
1819
])
1920
->filter(function(Builder $builder, string $value) {
2021
$builder->where('amount', '<', $value);

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

Lines changed: 21 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,27 @@
11
@php
2-
32
$filterKey = $filter->getKey();
4-
$filterConfigs = $filter->getConfigs();
5-
$dateString = '';
6-
$dateInput = isset($this->filters[$filterKey]) ? $this->filters[$filterKey] : '';
7-
if ($dateInput != '') {
8-
if (is_array($dateInput)) {
9-
$startDate = isset($dateInput['minDate']) ? $dateInput['minDate'] : (isset($dateInput[1]) ? $dateInput[1] : date('Y-m-d'));
10-
$endDate = isset($dateInput['maxDate']) ? $dateInput['maxDate'] : (isset($dateInput[0]) ? $dateInput[0] : date('Y-m-d'));
11-
$dateString = $startDate . ' to ' . $endDate;
12-
} else {
13-
$dateArray = explode(',', $dateInput);
14-
$startDate = isset($dateArray[0]) ? $dateArray[0] : date('Y-m-d');
15-
$endDate = isset($dateArray[2]) ? $dateArray[2] : date('Y-m-d');
16-
$dateString = $startDate . ' to ' . $endDate;
17-
}
18-
}
19-
203
@endphp
214

225
<div x-cloak id="{{ $tableName }}-dateRangeFilter-{{ $filterKey }}" x-data="flatpickrFilter($wire, '{{ $filterKey }}', @js($filter->getConfigs()), $refs.dateRangeInput, '{{ App::currentLocale() }}')" >
23-
24-
25-
<div>
26-
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
27-
28-
29-
<div
30-
@class([
31-
'w-full rounded-md shadow-sm text-right' => $isTailwind,
32-
'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap,
33-
])
34-
>
35-
<input
36-
type="text"
37-
x-ref="dateRangeInput"
38-
x-on:click="init"
39-
value="{{ $dateString }}"
40-
wire:key="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
41-
id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
42-
@class([
43-
'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,
44-
'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,
45-
])
46-
/>
47-
48-
<x-heroicon-o-calendar-days class="w-3 h-3 group-hover:opacity-0" />
49-
50-
</div>
51-
6+
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
7+
<div
8+
@class([
9+
'w-full rounded-md shadow-sm text-left ' => $isTailwind,
10+
'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap,
11+
])
12+
>
13+
<input
14+
type="text"
15+
x-ref="dateRangeInput"
16+
x-on:click="init"
17+
value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
18+
wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
19+
id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
20+
@class([
21+
'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,
22+
'd-inline-block w-100 form-control' => $isBootstrap,
23+
])
24+
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
25+
/>
5226
</div>
53-
</div>
27+
</div>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
<div>
22
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
3-
4-
53
<div @class([
64
"rounded-md shadow-sm" => $isTailwind,
75
"mb-3 mb-md-0 input-group" => $isBootstrap,
86
])>
97
<input
108
wire:model.live="filterComponents.{{ $filter->getKey() }}"
11-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
9+
wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
1210
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1311
type="date"
1412
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
1513
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
14+
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
1615
@class([
1716
"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,
1817
"form-control" => $isBootstrap,

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
])>
88
<input
99
wire:model.live="filterComponents.{{ $filter->getKey() }}"
10-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
10+
wire:key="{{ $filter->generateWireKey($tableName, 'datetime') }}"
1111
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
1212
type="datetime-local"
1313
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
1414
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
15+
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
1516
@class([
1617
"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,
1718
"form-control" => $isBootstrap,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="rounded-md shadow-sm">
77
<select multiple
88
wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
9-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
9+
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"
1212
>
@@ -29,7 +29,7 @@ class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-
2929
@elseif ($isBootstrap)
3030
<select multiple
3131
wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
32-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
32+
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' }}"
3535
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44

55
@if ($isTailwind)
6-
<div class="rounded-md">
6+
<div class="rounded-md shadow-sm">
77
<div>
88
<input
99
type="checkbox"

0 commit comments

Comments
 (0)