Merge pull request #38 from reachweb/add-clear-all-to-lftags

Add clear all to LfTags

resources/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/app.css": {
-    "file": "assets/app-CgFOoJ6F.css",
+    "file": "assets/app-CIhH1Pst.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },

resources/lang/en/ui.php

@@ -4,6 +4,7 @@
     // UI Elements
     'all' => 'All',
     'clear_filters' => 'Clear filter',
+    'clear_all' => 'Clear all',
     'default' => 'Default',
     'entries' => '{0} entries|{1} entry|[2,*] entries',
     'to' => 'to',

resources/views/livewire/ui/tags.blade.php

@@ -1,18 +1,33 @@
-<div class="flex flex-wrap gap-2">
-    @foreach ($this->tags as $tag)
+<div class="flex justify-between items-start">
+    <div class="flex flex-wrap gap-2">
+        @foreach ($this->tags as $tag)
+        <button
+            type="button"
+            wire:key="{{ $tag['field'].$tag['value'] }}"
+            class="py-2.5 px-5 me-2 mb-2 text-sm font-medium inline-flex items-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 
+                hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 cursor-default transition-opacity duration-500"
+            wire:loading.class="opacity-40"
+            >
+                <span class="whitespace-nowrap">{{ $tag['fieldLabel'] }}{{ trans('statamic-livewire-filters::ui.'.$tag['condition']) }} {{ $tag['optionLabel'] }}</span>
+                <div class="ml-3 cursor-pointer" wire:click="removeOption('{{ $tag['field'] }}', '{{ $tag['value'] }}')">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                    </svg>
+                </div>
+        </button>
+        @endforeach
+    </div>
+    @if ($this->tags->count() > 0)
     <button
         type="button"
-        wire:key="{{ $tag['field'].$tag['value'] }}"
         class="py-2.5 px-5 me-2 mb-2 text-sm font-medium inline-flex items-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 
             hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 cursor-default transition-opacity duration-500"
-        wire:loading.class="opacity-40"
-        >
-            <span class="whitespace-nowrap">{{ $tag['fieldLabel'] }}{{ trans('statamic-livewire-filters::ui.'.$tag['condition']) }} {{ $tag['optionLabel'] }}</span>
-            <div class="ml-3 cursor-pointer" wire:click="removeOption('{{ $tag['field'] }}', '{{ $tag['value'] }}')">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                </svg>
-            </div>
+        wire:click="clearAll()"
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+        </svg>          
+        <span class="ml-3 whitespace-nowrap">{{ trans('statamic-livewire-filters::ui.clear_all') }}</span>
     </button>
-    @endforeach
-</div>
+    @endif
+</div>

src/Http/Livewire/LfCheckboxFilter.php

@@ -40,6 +40,7 @@ public function updatedSelected()
             ->to(LivewireCollection::class);
     }
 
+    #[On('clear-all-filters')]
     public function clear()
     {
         $this->selected = [];

src/Http/Livewire/LfDateFilter.php

@@ -33,6 +33,7 @@ public function filterOptions()
         return $fieldOptions->only(['earliest_date', 'latest_date'])->all();
     }
 
+    #[On('clear-all-filters')]
     public function clear()
     {
         $this->selected = '';

src/Http/Livewire/LfDualRangeFilter.php

@@ -93,6 +93,7 @@ public function updatedSelectedMax($value)
         $this->dispatchEvent();
     }
 
+    #[On('clear-all-filters')]
     public function clear(): void
     {
         $this->selectedMin = $this->min;

src/Http/Livewire/LfRadioFilter.php

@@ -40,19 +40,20 @@ public function updatedSelected()
             ->to(LivewireCollection::class);
     }
 
-    public function clear()
-    {
-        $this->selected = '';
-        $this->clearFilters();
-    }
-
     public function rules()
     {
         return [
             'selected' => ['required', Rule::in(array_keys($this->filterOptions()))],
         ];
     }
 
+    #[On('clear-all-filters')]
+    public function clear()
+    {
+        $this->selected = '';
+        $this->clearFilters();
+    }
+
     #[On('clear-option')]
     public function clearOption($tag)
     {

src/Http/Livewire/LfRangeFilter.php

@@ -61,6 +61,7 @@ public function setPresetValues($params)
         }
     }
 
+    #[On('clear-all-filters')]
     public function clear(): void
     {
         $this->selected = $this->default ?? $this->min;

src/Http/Livewire/LfTags.php

@@ -166,6 +166,11 @@ public function removeOption($field, $value)
         $this->dispatch('clear-option', $tag);
     }
 
+    public function clearAll()
+    {
+        $this->dispatch('clear-all-filters');
+    }
+
     public function isNotTaggable($field)
     {
         return ! in_array($field, $this->fields);

src/Http/Livewire/LfTextFilter.php

@@ -24,6 +24,7 @@ public function updatedSelected()
             ->to(LivewireCollection::class);
     }
 
+    #[On('clear-all-filters')]
     public function clear()
     {
         $this->selected = '';

tests/Feature/LfCheckboxFilterTest.php

@@ -270,6 +270,19 @@ public function it_clears_the_value_when_clear_option_is_fired()
             ->assertSet('selected', []);
     }
 
+    /** @test */
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfCheckboxFilter::class, ['field' => 'item_options', 'blueprint' => 'pages.pages', 'condition' => 'is'])
+            ->set('selected', ['option1', 'option2'])
+            ->dispatch('clear-all-filters')
+            ->assertSet('selected', [])
+            ->assertDispatched('clear-filter',
+                field: 'item_options',
+                condition: 'is'
+            );
+    }
+
     /** @test */
     public function it_can_reorder_term_filter_values_by_slug()
     {

tests/Feature/LfDateFilterTest.php

@@ -120,6 +120,19 @@ public function it_clears_the_value_when_clear_option_is_fired()
             ->assertSet('selected', '');
     }
 
+    /** @test */
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfDateFilter::class, ['field' => 'item_from', 'collection' => 'pages', 'blueprint' => 'pages.pages', 'condition' => 'is_after'])
+            ->set('selected', '2024-03-01')
+            ->dispatch('clear-all-filters')
+            ->assertSet('selected', '')
+            ->assertDispatched('clear-filter',
+                field: 'item_from',
+                condition: 'is_after'
+            );
+    }
+
     /** @test */
     public function it_loads_a_param_that_is_preset()
     {

tests/Feature/LfDualRangeFilterTest.php

@@ -267,6 +267,26 @@ public function it_clears_a_filter_using_the_clear_option_event()
             );
     }
 
+    #[Test]
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfDualRangeFilter::class, [
+            'field' => 'cabins',
+            'blueprint' => 'yachts.yachts',
+            'condition' => 'dual_range',
+            'min' => 2,
+            'max' => 10,
+            'minRange' => 2,
+        ])
+            ->set('selectedMin', 5)
+            ->dispatch('clear-all-filters')
+            ->assertSet('selectedMin', 2)
+            ->assertDispatched('clear-filter',
+                field: 'cabins',
+                condition: 'dual_range'
+            );
+    }
+
     #[Test]
     public function collection_component_handles_different_conditions_by_modifier()
     {

tests/Feature/LfRadioFilterTest.php

@@ -183,6 +183,19 @@ public function it_clears_the_value_when_clear_option_is_fired()
             ->assertSet('selected', '');
     }
 
+    /** @test */
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfRadioFilter::class, ['field' => 'item_options', 'blueprint' => 'pages.pages', 'condition' => 'is'])
+            ->set('selected', 'option1')
+            ->dispatch('clear-all-filters')
+            ->assertSet('selected', '')
+            ->assertDispatched('clear-filter',
+                field: 'item_options',
+                condition: 'is'
+            );
+    }
+
     protected function makeEntry($collection, $slug)
     {
         return EntryFactory::id($slug)->collection($collection)->slug($slug)->make();

tests/Feature/LfRangeFilterTest.php

@@ -166,6 +166,26 @@ public function it_can_be_reset_using_the_clear_option_event()
             );
     }
 
+    /** @test */
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfRangeFilter::class, [
+            'field' => 'max_items',
+            'blueprint' => 'pages.pages',
+            'condition' => 'gte',
+            'min' => 1,
+            'max' => 4,
+            'default' => 2,
+        ])
+            ->set('selected', 3)
+            ->dispatch('clear-all-filters')
+            ->assertSet('selected', 2)
+            ->assertDispatched('clear-filter',
+                field: 'max_items',
+                condition: 'gte'
+            );
+    }
+
     /** @test */
     public function it_loads_a_param_that_is_preset()
     {

tests/Feature/LfSelectFilterTest.php

@@ -143,6 +143,19 @@ public function it_clears_the_value_when_clear_option_is_fired()
             ->assertSet('selected', '');
     }
 
+    /** @test */
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfSelectFilter::class, ['field' => 'item_options', 'collection' => 'pages', 'blueprint' => 'pages.pages', 'condition' => 'is'])
+            ->set('selected', 'option1')
+            ->dispatch('clear-all-filters')
+            ->assertSet('selected', '')
+            ->assertDispatched('clear-filter',
+                field: 'item_options',
+                condition: 'is'
+            );
+    }
+
     protected function makeEntry($collection, $slug)
     {
         return EntryFactory::id($slug)->collection($collection)->slug($slug)->make();

tests/Feature/LfTextFilterTest.php

@@ -127,6 +127,19 @@ public function it_clears_the_value_when_clear_option_is_fired()
             ->assertSet('selected', '');
     }
 
+    /** @test */
+    public function it_clears_the_value_when_clear_all_filters_event_is_fired()
+    {
+        Livewire::test(LfTextFilter::class, ['field' => 'item_options', 'collection' => 'pages', 'blueprint' => 'pages.pages', 'condition' => 'is'])
+            ->set('selected', 'option1')
+            ->dispatch('clear-all-filters')
+            ->assertSet('selected', '')
+            ->assertDispatched('clear-filter',
+                field: 'item_options',
+                condition: 'is'
+            );
+    }
+
     protected function makeEntry($collection, $slug)
     {
         return EntryFactory::id($slug)->collection($collection)->slug($slug)->make();