From 73d761bc31a3694ebebb43340186aa41723675be Mon Sep 17 00:00:00 2001 From: Joe <104938042+lrljoe@users.noreply.github.com> Date: Sat, 13 Jul 2024 04:53:13 +0100 Subject: [PATCH] Add Separator customisation for Array Filters for FilterPills (#1772) * Add Filter Pills Separation Methods * Add FilterVisuals test for Separator --------- Co-authored-by: lrljoe --- docs/filter-types/filters-date.md | 2 - docs/filter-types/filters-daterange.md | 2 - docs/filter-types/filters-datetime.md | 2 - .../filters-livewire-component.md | 2 - .../filters-multiselect-dropdown.md | 26 +++- docs/filter-types/filters-multiselect.md | 25 +++- docs/filter-types/filters-number-range.md | 2 - docs/filter-types/filters-number.md | 2 - docs/filter-types/filters-select.md | 2 - docs/filter-types/filters-text.md | 2 - docs/filter-types/introduction.md | 33 +++++ .../components/tools/filter-pills.blade.php | 12 +- src/Views/Filters/DateFilter.php | 2 +- src/Views/Filters/DateRangeFilter.php | 2 +- src/Views/Filters/DateTimeFilter.php | 2 +- .../Filters/MultiSelectDropdownFilter.php | 4 +- src/Views/Filters/MultiSelectFilter.php | 4 +- src/Views/Filters/NumberRangeFilter.php | 2 +- src/Views/Filters/SelectFilter.php | 2 +- src/Views/Traits/Filters/IsArrayFilter.php | 14 ++ src/Views/Traits/Helpers/FilterHelpers.php | 2 +- .../Http/Livewire/PetsTableCustomFilters.php | 138 ++++++++++++++++++ tests/Traits/Visuals/FilterVisualsTest.php | 57 ++++++++ .../Filters/MultiSelectDropdownFilterTest.php | 13 +- tests/Views/Filters/MultiSelectFilterTest.php | 7 + 25 files changed, 327 insertions(+), 34 deletions(-) create mode 100644 tests/Http/Livewire/PetsTableCustomFilters.php diff --git a/docs/filter-types/filters-date.md b/docs/filter-types/filters-date.md index 488cda84f..d29a900df 100644 --- a/docs/filter-types/filters-date.md +++ b/docs/filter-types/filters-date.md @@ -3,8 +3,6 @@ title: Date Filters weight: 2 --- -## Date Filters - Date filters are HTML date elements. ```php diff --git a/docs/filter-types/filters-daterange.md b/docs/filter-types/filters-daterange.md index 37d0ea552..742719db1 100644 --- a/docs/filter-types/filters-daterange.md +++ b/docs/filter-types/filters-daterange.md @@ -3,8 +3,6 @@ title: DateRange Filters weight: 3 --- -## DateRange Filters - DateRange filters are Flatpickr based components, and simply filtering by a date range. If you would like to more smoothly filter your query by a start and end date, you can use the DateRangeFilter: ```php diff --git a/docs/filter-types/filters-datetime.md b/docs/filter-types/filters-datetime.md index 288d90b4b..64c14eca4 100644 --- a/docs/filter-types/filters-datetime.md +++ b/docs/filter-types/filters-datetime.md @@ -3,8 +3,6 @@ title: DateTime Filters weight: 4 --- -## DateTime Filters - DateTime filters are HTML datetime-local elements and act the same as date filters. ```php diff --git a/docs/filter-types/filters-livewire-component.md b/docs/filter-types/filters-livewire-component.md index d11d337f9..5ffb6dac6 100644 --- a/docs/filter-types/filters-livewire-component.md +++ b/docs/filter-types/filters-livewire-component.md @@ -3,8 +3,6 @@ title: Livewire Custom Filter (Beta) weight: 11 --- -## Livewire Custom Filter - **IN BETA** This feature is currently in beta, and use in production is not recommended. diff --git a/docs/filter-types/filters-multiselect-dropdown.md b/docs/filter-types/filters-multiselect-dropdown.md index d81c14570..2f3ed9c01 100644 --- a/docs/filter-types/filters-multiselect-dropdown.md +++ b/docs/filter-types/filters-multiselect-dropdown.md @@ -3,9 +3,6 @@ title: Multi-Select Dropdown Filters weight: 5 --- - -## Multi-select dropdown Filters - Multi-select dropdown filters are a simple dropdown list. The user can select multiple options from the list. There is also an 'All' option that will select all values ```php @@ -27,3 +24,26 @@ public function filters(): array ]; } ``` + +## Filter Pills Separator + +As this filter returns one or more values, you have the option to utilise a custom separator for the values displayed in the Filter Pills section at the top of the table. The default is ", ", but you may use any HTML string to separate the selected values + +```php +public function filters(): array +{ + return [ + MultiSelectFilter::make('Tags') + ->options( + Tag::query() + ->orderBy('name') + ->get() + ->keyBy('id') + ->map(fn($tag) => $tag->name) + ->toArray() + ) + ->setPillsSeparator('
'), + ]; +} + +``` \ No newline at end of file diff --git a/docs/filter-types/filters-multiselect.md b/docs/filter-types/filters-multiselect.md index f6c6bfa37..f91a65912 100644 --- a/docs/filter-types/filters-multiselect.md +++ b/docs/filter-types/filters-multiselect.md @@ -3,8 +3,6 @@ title: Multi-Select Filters weight: 6 --- -## Multi-select Filters - Multi-select filters are a list of checkboxes. The user can select multiple options from the list. There is also an 'All' option that will select all values. ```php @@ -25,3 +23,26 @@ public function filters(): array ]; } ``` + +## Filter Pills Separator + +As this filter returns one or more values, you have the option to utilise a custom separator for the values displayed in the Filter Pills section at the top of the table. The default is ", ", but you may use any HTML string to separate the selected values + +```php +public function filters(): array +{ + return [ + MultiSelectFilter::make('Tags') + ->options( + Tag::query() + ->orderBy('name') + ->get() + ->keyBy('id') + ->map(fn($tag) => $tag->name) + ->toArray() + ) + ->setPillsSeparator('
'), + ]; +} + +``` \ No newline at end of file diff --git a/docs/filter-types/filters-number-range.md b/docs/filter-types/filters-number-range.md index 0969e5c33..bb0c7a04a 100644 --- a/docs/filter-types/filters-number-range.md +++ b/docs/filter-types/filters-number-range.md @@ -3,8 +3,6 @@ title: NumberRange Filters weight: 7 --- -## NumberRange Filters - NumberRange filters allow for a minimum and maximum value to be input on a single slider. ```php diff --git a/docs/filter-types/filters-number.md b/docs/filter-types/filters-number.md index 3b629dd0a..e1423ae9c 100644 --- a/docs/filter-types/filters-number.md +++ b/docs/filter-types/filters-number.md @@ -3,8 +3,6 @@ title: Number Filters weight: 8 --- -## Number Filters - Number filters are just HTML number inputs. ```php diff --git a/docs/filter-types/filters-select.md b/docs/filter-types/filters-select.md index d28cfba94..568522f1b 100644 --- a/docs/filter-types/filters-select.md +++ b/docs/filter-types/filters-select.md @@ -3,8 +3,6 @@ title: Select Filters weight: 9 --- -## Select Filters - Select filters are a simple dropdown list. The user selects one choice from the list. ```php diff --git a/docs/filter-types/filters-text.md b/docs/filter-types/filters-text.md index 649384915..22255dfd4 100644 --- a/docs/filter-types/filters-text.md +++ b/docs/filter-types/filters-text.md @@ -3,8 +3,6 @@ title: Text Filters weight: 10 --- -## Text Filters - Text filters are just HTML text fields. ```php diff --git a/docs/filter-types/introduction.md b/docs/filter-types/introduction.md index d509cdc39..c553de5f9 100644 --- a/docs/filter-types/introduction.md +++ b/docs/filter-types/introduction.md @@ -4,3 +4,36 @@ weight: 1 --- There are several Filter types available for use, offering a range of capabilities to filter your data. + + \ No newline at end of file diff --git a/resources/views/components/tools/filter-pills.blade.php b/resources/views/components/tools/filter-pills.blade.php index afb9568a7..5079909d7 100644 --- a/resources/views/components/tools/filter-pills.blade.php +++ b/resources/views/components/tools/filter-pills.blade.php @@ -30,7 +30,17 @@ 'badge rounded-pill bg-info d-inline-flex align-items-center' => $component->isBootstrap5(), ]) > - {{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }} + {{ $filter->getFilterPillTitle() }}: + @php( $filterPillValue = $filter->getFilterPillValue($value)) + @php( $separator = method_exists($filter, 'getPillsSeparator') ? $filter->getPillsSeparator() : ', ') + + @if(is_array($filterPillValue) && !empty($filterPillValue)) + @foreach($filterPillValue as $filterPillArrayValue) + {{ $filterPillArrayValue }}{!! $separator !!} + @endforeach + @else + {{ $filterPillValue }} + @endif @if ($component->isTailwind())