Merge pull request #5 from kirschbaum-development/dev

Better options handling

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `livewire-filters` will be documented in this file.
 
+## 0.3 - 2022-03-05
+
+- Added `getOptionId` method for better handling of setting an option's ID attribute when dealing with associative arrays
+- Added `getOptionName` method for better handling of setting an option's name attribute when dealing with associative arrays
+- Added `getOptionValue` method for better handling of setting an option's value when dealing with associative arrays
+
 ## 0.2 - 2022-02-28
 
 - Added the `meta` field to `Filter` class

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "kirschbaum-development/livewire-filters",
-    "description": "This is my package livewire-filters",
+    "description": "Livewire Filters is a series of Livewire components that provide you with the tools to do live filtering of your data from your own Livewire components.",
     "keywords": [
         "kirschbaum-development",
         "laravel",
@@ -19,6 +19,7 @@
     "require": {
         "php": "^8.0",
         "illuminate/contracts": "^9.0",
+        "illuminate/support": "^9.0",
         "livewire/livewire": "^2.10",
         "spatie/laravel-package-tools": "^1.9.2"
     },

resources/views/checkbox-filter.blade.php

@@ -1,16 +1,16 @@
 <div>
     <div class="space-y-2">
-        @foreach ($options as $option)
+        @foreach ($options as $id => $option)
             <div class="flex items-center">
                 <input
                     type="checkbox"
-                    name="{{ $key }}-{{ $option }}"
+                    name="{{ $this->getOptionName($option) }}"
                     class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    id="{{ $key }}-{{ $option }}"
+                    id="{{ $this->getOptionId($option) }}"
                     wire:model="value"
-                    value="{{ $option }}"
+                    value="{{ $this->getOptionValue($id, $option) }}"
                 >
-                <label for="{{ $key }}-{{ $option }}" class="ml-2 block text-sm text-gray-700"> {{ ucfirst($option) }} </label>
+                <label for="{{ $this->getOptionId($option) }}" class="ml-2 block text-sm text-gray-700">{{ $option }}</label>
             </div>
         @endforeach
     </div>

resources/views/radio-filter.blade.php

@@ -1,16 +1,16 @@
 <div>
     <div class="space-y-2">
-        @foreach ($options as $option)
+        @foreach ($options as $id => $option)
             <div class="flex items-center">
                 <input
                     type="radio"
-                    name="{{ $key }}"
+                    name="{{ $this->getOptionName($option) }}"
                     class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-                    id="{{ $key }}-{{ $option }}"
+                    id="{{ $this->getOptionId($option) }}"
                     wire:model="value"
-                    value="{{ $option }}"
+                    value="{{ $this->getOptionValue($id, $option) }}"
                 >
-                <label for="{{ $key }}-{{ $option }}" class="ml-2 block text-sm text-gray-700"> {{ ucfirst($option) }} </label>
+                <label for="{{ $this->getOptionId($option) }}" class="ml-2 block text-sm text-gray-700">{{ $option }}</label>
             </div>
         @endforeach
     </div>

resources/views/select-filter.blade.php

@@ -1,7 +1,7 @@
 <div class="flex items-center space-x-2">
     <select id="{{ $key }}" name="{{ $key }}" class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm shrink-0" wire:model="value">
-        @foreach ($options as $option)
-            <option value="{{ $option }}">{{ ucfirst($option) }}</option>
+        @foreach ($options as $id => $option)
+            <option value="{{ $this->getOptionValue($id, $option) }}">{{ $option }}</option>
         @endforeach
     </select>
 

src/FilterComponent.php

@@ -2,6 +2,7 @@
 
 namespace Kirschbaum\LivewireFilters;
 
+use Illuminate\Support\Arr;
 use Livewire\Component;
 
 abstract class FilterComponent extends Component
@@ -33,6 +34,25 @@ public function resetValue(): void
         $this->emitFilterEvent();
     }
 
+    public function getOptionId($value): string
+    {
+        return $this->key . '-' . strtolower(str_replace(' ', '_', $value));
+    }
+
+    public function getOptionName($value): string
+    {
+        return $this->key . '-' . strtolower(str_replace(' ', '_', $value));
+    }
+
+    public function getOptionValue($id, $value): mixed
+    {
+        if (Arr::isAssoc($this->options)) {
+            return $id;
+        }
+
+        return $value;
+    }
+
     public function updatedValue(): void
     {
         $this->emitFilterEvent();

src/Filters/RadioFilter.php

@@ -6,6 +6,11 @@
 
 class RadioFilter extends FilterComponent
 {
+    public function getOptionName($value): string
+    {
+        return $this->key;
+    }
+
     public function render()
     {
         return view('livewire-filters::radio-filter');