Merge pull request #764 from rappasoft/inmanturbo-develop

Column Filters

Author: rappasoft

.gitignore

@@ -9,4 +9,5 @@ phpunit.xml
 psalm.xml
 testbench.yaml
 vendor
-output.txt
+output.txt
+.vscode

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [dev-develop] - 2022-05-05
+
+### Added
+
+- Added functionality to hide individual filters from popover and slide down views
+- Added functionality to hide individual filters from filter pills
+- Added functionality to hide individual filters from the active filter count
+- Added functionality to say which filters get reset by the clear button
+- Added functionality to set filters as secondaryHeader or footer of columns
+
 ## [2.6.0] - 2022-05-05
 
 ### Added

docs/columns/footer.md

@@ -17,4 +17,22 @@ Column::make('Price')
 
 The footer row is enabled when ever any column calls `footer`.
 
-See also [footer component configuration](../footer/available-methods).
+See also [footer component configuration](../footer/available-methods).
+
+## Using a filter as a footer
+
+As of version 2.7, you can use a filter as a footer.
+
+```php
+// Example filter
+SelectFilter::make('Active')
+    ->hiddenFromAll(), // Optional, hides the filter from the menus, pills, count.
+
+// You can pass a filter directly
+Column::make('Active')
+    ->footer($this->getFilterByKey('active')),
+
+// Or use the shorthand method
+Column::make('Active')
+    ->footerFilter('active'), // Takes the key from the filter, which you can find in the query string when the filter is applied.
+```

docs/columns/secondary-header.md

@@ -19,97 +19,20 @@ The secondary header row is enabled when ever any column calls `secondaryHeader`
 
 See also [secondary header component configuration](../secondary-header/available-methods).
 
-## Example: Adding a column search
+## Using a filter as a secondary header
 
-Column search is not built in by default, but is easily achievable using this feature.
-
-Here are the steps you need to take:
-
-1. Add state to the component to track the input values
-2. Add the inputs to the columns using the secondaryHeader method
-3. Add the clause to the query based on the new state
-
-### 1. Add state to the component to track the input values
-
-This can be called whatever you want, but you need an array to house the values of the column search fields:
-
-```php
-public $columnSearch = [
-    'name' => null,
-];
-```
-
-### 2. Add the inputs to the columns using the secondaryHeader method
-
-You can do this inline, but I'll break it out into a partial for clarity:
+As of version 2.7, you can use a filter as a header.
 
 ```php
-Column::make('Name')
-    ->sortable()
-    ->searchable()
-    ->asHtml()
-    ->secondaryHeader(
-        fn() => view('tables.cells.input-search', ['field' => 'name']);
-    ),
-```
-
-**input-search.blade.php**
-
-```html
-<input type="text" wire:model.debounce="columnSearch.{{ $field }}" placeholder="Search {{ ucfirst($field) }}" class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md" />
-```
-
-### 3. Add the clause to the query based on the new state
-
-Now you need to tell the query what to do when something is typed into the search:
-
-```php
-public function query()
-{
-    return User::query()
-        ->when(
-            $this->columnSearch['name'] ?? null, 
-            fn ($query, $name) => $query->where('name', 'like', '%' . $name . '%')
-        );
-}
-```
-
-### Extra: Add a clear button to the inputs
-
-If you want the input to have a clear button when it has a value like the default search does:
-
-1. Send the state to the partial
-
-```php
-Column::make('Name')
-    ->sortable()
-    ->searchable()
-    ->asHtml()
-    ->secondaryHeader(
-        fn() => view('tables.cells.input-search', [
-            'field' => 'name', 
-            'columnSearch' => $this->columnSearch
-        ])    
-    ),
-```
-
-2. Copy the search field and modify:
+// Example filter
+SelectFilter::make('Active')
+    ->hiddenFromAll(), // Optional, hides the filter from the menus, pills, count.
 
-```html
-<div class="flex rounded-md shadow-sm">
-    <input
-        wire:model.debounce="columnSearch.{{ $field }}"
-        placeholder="Search {{ ucfirst($field) }}"
-        type="text"
-        class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 @if (isset($columnSearch[$field]) && strlen($columnSearch[$field])) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif"
-    />
+// You can pass a filter directly
+Column::make('Active')
+    ->secondaryHeader($this->getFilterByKey('active')),
 
-    @if (isset($columnSearch[$field]) && strlen($columnSearch[$field]))
-        <span wire:click="$set('columnSearch.{{ $field }}', null)" class="inline-flex items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-        </span>
-    @endif
-</div>
+// Or use the shorthand method
+Column::make('Active')
+    ->secondaryHeaderFilter('active'), // Takes the key from the filter, which you can find in the query string when the filter is applied.
 ```

docs/filters/available-methods.md

@@ -195,6 +195,51 @@ SelectFilter::make('Active')
 
 Now instead of `Active: Yes` it will say `User Status: Active`
 
+### hiddenFromMenus
+
+Hide the filter from both the filter popover and the filter slide down.
+
+```php
+SelectFilter::make('Active')
+    ->hiddenFromMenus()
+```
+
+### hiddenFromPills
+
+Hide the filter from the filter pills when applied.
+
+```php
+SelectFilter::make('Active')
+    ->hiddenFromPills()
+```
+
+### hiddenFromFilterCount
+
+Hide the filter from the filter count when applied.
+
+```php
+SelectFilter::make('Active')
+    ->hiddenFromFilterCount()
+```
+
+### hiddenFromAll
+
+Hide the filter from the menus, pills, and count.
+
+```php
+SelectFilter::make('Active')
+    ->hiddenFromAll()
+```
+
+### notResetByClearButton
+
+By default the `clear` button will reset all filters to their defaults. You can prevent this on a specific filter by using this method.
+
+```php
+SelectFilter::make('Active')
+    ->notResetByClearButton()
+```
+
 ### Config
 
 If the filter takes any config options, you can set them with the `config` method:
@@ -205,4 +250,4 @@ If the filter takes any config options, you can set them with the `config` metho
         'min' => '2020-01-01',
         'max' => '2021-12-31',
     ])
-```
+```

resources/views/components/tools/filter-pills.blade.php

@@ -6,7 +6,7 @@
 
 @if ($theme === 'tailwind')
     <div>
-        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedFiltersWithValues())
+        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
             <div class="mb-4 px-4 md:p-0">
                 <small class="text-gray-700 dark:text-white">@lang('Applied Filters'):</small>
 
@@ -16,6 +16,7 @@
                     @endphp
 
                     @continue(is_null($filter))
+                    @continue($filter->isHiddenFromPills())
 
                     <span
                         wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
@@ -49,7 +50,7 @@ class="focus:outline-none active:outline-none"
     </div>
 @elseif ($theme === 'bootstrap-4')
     <div>
-        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedFiltersWithValues())
+        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
             <div class="mb-3">
                 <small>@lang('Applied Filters'):</small>
 
@@ -59,6 +60,7 @@ class="focus:outline-none active:outline-none"
                     @endphp
 
                     @continue(is_null($filter))
+                    @continue($filter->isHiddenFromPills())
 
                     <span
                         wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
@@ -91,7 +93,7 @@ class="badge badge-pill badge-light"
     </div>
 @elseif ($theme === 'bootstrap-5')
     <div>
-        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedFiltersWithValues())
+        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
             <div class="mb-3">
                 <small>@lang('Applied Filters'):</small>
 
@@ -101,6 +103,7 @@ class="badge badge-pill badge-light"
                     @endphp
 
                     @continue(is_null($filter))
+                    @continue($filter->isHiddenFromPills())
 
                     <span
                         wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"