Add Separator customisation for Array Filters for FilterPills (#1772)

* Add Filter Pills Separation Methods

* Add FilterVisuals test for Separator


---------

Co-authored-by: lrljoe <[email protected]>

docs/filter-types/filters-date.md

@@ -3,8 +3,6 @@ title: Date Filters
 weight: 2
 ---
 
-## Date Filters
-
 Date filters are HTML date elements.
 
 ```php

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

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

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.
 

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('<br />'),
+    ];
+}
+
+```

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('<br />'),
+    ];
+}
+
+```

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

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

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

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

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.
+
+<ul>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-date">Date Filter</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-daterange">DateRange Filter</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-datetime">DateTime Filter</a>
+    </li>
+        <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-livewire-component">Livewire Component (BETA)</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-multiselect-dropdown">Multi Select Filter (Dropdown)</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-multiselect">Multi-Select Filter (Checkbox)</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-number-range">Number Range Filter</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-number">Number Filter</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-select">Select Filter</a>
+    </li>
+    <li>
+        <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/filter-types/filters-text">Text Filter</a>
+    </li>
+</ul>

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())
                             <button

src/Views/Filters/DateFilter.php

@@ -28,7 +28,7 @@ public function validate(string $value): string|bool
         return $value;
     }
 
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
         if ($this->validate($value)) {
             return DateTime::createFromFormat('Y-m-d', $value)->format($this->getConfig('pillFormat'));

src/Views/Filters/DateRangeFilter.php

@@ -108,7 +108,7 @@ public function getDefaultValue(): array
         return [];
     }
 
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
         $validatedValue = $this->validate($value);
 

src/Views/Filters/DateTimeFilter.php

@@ -28,7 +28,7 @@ public function validate(string $value): string|bool
         return $value;
     }
 
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
         if ($this->validate($value)) {
             return DateTime::createFromFormat('Y-m-d\TH:i', $value)->format($this->getConfig('pillFormat'));

src/Views/Filters/MultiSelectDropdownFilter.php

@@ -37,7 +37,7 @@ public function validate(int|string|array $value): array|int|string|bool
         return (is_string($value) || is_numeric($value)) ? $value : false;
     }
 
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
         $values = [];
 
@@ -52,7 +52,7 @@ public function getFilterPillValue($value): ?string
             }
         }
 
-        return implode(', ', $values);
+        return $values;
     }
 
     public function isEmpty(mixed $value): bool

src/Views/Filters/MultiSelectFilter.php

@@ -34,7 +34,7 @@ public function validate(int|string|array $value): array|int|string|bool
         return $value;
     }
 
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
         $values = [];
 
@@ -46,6 +46,6 @@ public function getFilterPillValue($value): ?string
             }
         }
 
-        return implode(', ', $values);
+        return $values;
     }
 }

src/Views/Filters/NumberRangeFilter.php

@@ -86,7 +86,7 @@ public function getDefaultValue(): array|string
         return [];
     }
 
-    public function getFilterPillValue($values): ?string
+    public function getFilterPillValue($values): string|array|null
     {
         if ($this->validate($values)) {
             return __('Min:').$values['min'].', '.__('Max:').$values['max'];

src/Views/Filters/SelectFilter.php

@@ -41,7 +41,7 @@ public function validate(string $value): array|string|bool
         return $value;
     }
 
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
 
         return $this->getCustomFilterPillValue($value)

src/Views/Traits/Filters/IsArrayFilter.php

@@ -8,6 +8,8 @@
 
 trait IsArrayFilter
 {
+    public string $pillsSeparator = ', ';
+
     /**
      * Get the filter default options.
      */
@@ -32,4 +34,16 @@ public function isEmpty(mixed $value): bool
 
         return empty($value);
     }
+
+    public function getPillsSeparator(): string
+    {
+        return $this->pillsSeparator ?? ', ';
+    }
+
+    public function setPillsSeparator(string $pillsSeparator): self
+    {
+        $this->pillsSeparator = $pillsSeparator;
+
+        return $this;
+    }
 }

src/Views/Traits/Helpers/FilterHelpers.php

@@ -70,7 +70,7 @@ public function getFilterPillTitle(): string
     /**
      * @param  mixed  $value
      */
-    public function getFilterPillValue($value): ?string
+    public function getFilterPillValue($value): string|array|null
     {
         return $value;
     }