Feature/update filters and style

resources/views/vendor/datatables/components/search.blade.php

@@ -1,14 +1,5 @@
-
-    <input type="text" wire:model="search"
-           placeholder="{{ __('datatable::datatables.search') }}"
-           class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-64 focus:ring-2 focus:ring-blue-400 focus:outline-none transition">
-
-    <button wire:click="applySearch"
-            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm shadow-sm transition">
-        {{ __('datatable::datatables.search') }}
-    </button>
-
-    <button wire:click="resetSearch"
-            class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm shadow-sm transition">
-        {{ __('datatable::datatables.reset') }}
-    </button>
+<input type="text" wire:model.debounce.500ms="search"
+       @keydown.enter="$dispatch('searchUpdated')"
+       @blur="$dispatch('searchUpdated')"
+       placeholder="{{ __('datatable::datatables.search') }}"
+       class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-96 focus:ring-2 focus:ring-blue-400 focus:outline-none transition">

resources/views/vendor/datatables/filters.blade.php

@@ -1,11 +1,13 @@
 <div x-data="{ open: @entangle('showFilters') }" class="relative">
 
     <button @click="open = !open"
-            class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded-lg text-sm flex items-center gap-1 shadow-sm transition">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+            class="flex items-center gap-2 px-4 py-2 text-sm md:text-base font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-lg
+               hover:bg-gray-200 focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 ease-in-out
+               active:scale-95 sm:px-3 sm:py-1 sm:text-sm">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 sm:w-4 sm:h-4" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 011 1v1.5l-4.5 5.5V15a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3L3 6.5V5zm2 1v.378L9.5 12.5V15h1v-2.5l4.5-6.122V6H5z" clip-rule="evenodd"/>
         </svg>
-        {{ __('datatable::datatables.filters') }}
+        <span class="hidden sm:inline">{{ __('datatable::datatables.filters') }}</span>
     </button>
 
     <div class="flex flex-wrap gap-2 mt-3">

resources/views/vendor/datatables/filters/types/checkbox.blade.php

@@ -1,5 +1,5 @@
 <div class="flex items-center gap-2">
-    <input type="checkbox" wire:model.defer="filters.{{ $filter['column'] }}.value"
+    <input type="checkbox" wire:model.defer="filters.{{ $column }}.value"
            class="h-4 w-4 text-blue-500 border-gray-300 rounded">
-    <label class="text-sm font-medium text-gray-600">{{ ucfirst(str_replace('_', ' ', $filter['column'])) }}</label>
+    <label class="text-sm font-medium text-gray-600">{{ ucfirst($filter['label']) }}</label>
 </div>

resources/views/vendor/datatables/filters/types/date.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <label class="text-sm font-medium text-gray-600">{{ ucfirst(str_replace('_', ' ', $filter['column'])) }}</label>
-    <input type="date" wire:model.defer="filters.{{ $filter['column'] }}.value"
+    <label class="text-sm font-medium text-gray-600">{{ ucfirst($filter['label']) }}</label>
+    <input type="date" wire:model.defer="filters.{{ $column }}.value"
            class="border border-gray-300 rounded px-3 py-1 text-sm w-48">
 </div>

resources/views/vendor/datatables/filters/types/input.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <label class="text-sm font-medium text-gray-600">{{ ucfirst(str_replace('_', ' ', $filter['column'])) }}</label>
-    <input type="text" wire:model.defer="filters.{{ $filter['column'] }}.value"
+    <label class="text-sm font-medium text-gray-600">{{ ucfirst($filter['label']) }}</label>
+    <input type="text" wire:model.defer="filters.{{ $column }}.value"
            class="border border-gray-300 rounded px-3 py-1 text-sm w-48">
 </div>

resources/views/vendor/datatables/filters/types/radio.blade.php

@@ -1,9 +1,9 @@
 <div>
-    <label class="text-sm font-medium text-gray-600 block">{{ ucfirst(str_replace('_', ' ', $filter['column'])) }}</label>
+    <label class="text-sm font-medium text-gray-600 block">{{ ucfirst($filter['label']) }}</label>
     <div class="flex gap-2">
         @foreach($filter['options'] as $key => $option)
             <label class="flex items-center gap-1 text-sm">
-                <input type="radio" wire:model.defer="filters.{{ $filter['column'] }}.value" value="{{ $key }}"
+                <input type="radio" wire:model.defer="filters.{{ $column }}.value" value="{{ $key }}"
                        class="h-4 w-4 text-blue-500 border-gray-300 rounded">
                 {{ $option }}
             </label>

resources/views/vendor/datatables/filters/types/select.blade.php

@@ -1,6 +1,6 @@
 <div>
-    <label class="text-sm font-medium text-gray-600">{{ ucfirst(str_replace('_', ' ', $filter['column'])) }}</label>
-    <select wire:model.defer="filters.{{ $filter['column'] }}.value"
+    <label class="text-sm font-medium text-gray-600">{{ ucfirst($filter['label']) }}</label>
+    <select wire:model.defer="filters.{{ $column }}.value"
             class="border border-gray-300 rounded px-3 py-1 text-sm w-48">
         <option value="">{{ __('datatable::datatables.select_option') }}</option>
         @foreach($filter['options'] as $key => $option)

src/Factories/FilterFactory.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Ginkelsoft\DataTables\Factories;
+
+use Ginkelsoft\DataTables\Filters\DateFilter;
+use Ginkelsoft\DataTables\Filters\TextFilter;
+use Ginkelsoft\DataTables\Filters\SelectFilter;
+use Ginkelsoft\DataTables\Filters\CheckboxFilter;
+use Ginkelsoft\DataTables\Filters\RadioFilter;
+use Ginkelsoft\DataTables\Filter;
+
+class FilterFactory
+{
+    /**
+     * Create a filter instance based on the type.
+     */
+    public static function make(array $filter): Filter
+    {
+        return match ($filter['type']) {
+            'input' => new TextFilter(
+                $filter['column'],
+                $filter['value'] ?? '',
+                $filter['label'] ?? ''
+            ),
+            'select' => new SelectFilter($filter['column'], $filter['value'] ?? '', $filter['options'] ?? [], $filter['label'] ?? ''),
+            'checkbox' => new CheckboxFilter($filter['column'], $filter['value'] ?? false, $filter['label'] ?? ''),
+            'radio' => new RadioFilter($filter['column'], $filter['value'] ?? false, $filter['options'] ?? [], $filter['label'] ?? ''),
+            'date' => new DateFilter($filter['column'], $filter['value'] ?? null, $filter['label'] ?? ''),
+            /*'date-between' => new DateBetweenFilter(
+                $filter['column'],
+                $filter['value']['from'] ?? null,
+                $filter['value']['to'] ?? null
+            ),*/
+            default => throw new \Exception("Unknown filter type: {$filter['type']}"),
+        };
+    }
+}

src/Filter.php

@@ -18,12 +18,14 @@ class Filter
     /** @var string The type of filter (e.g., input, select, checkbox, date-range) */
     public string $type;
 
-    /** @var mixed The filter value */
-    public mixed $value;
+    /** @var mixed The raw filter value */
+    protected mixed $value;
 
     /** @var array Options for select and radio button filters */
     public array $options;
 
+    public string $label;
+
     /**
      * Filter constructor.
      *
@@ -32,12 +34,52 @@ class Filter
      * @param string $type The type of filter (default: 'input').
      * @param array $options Options for select, radio, or other multi-choice filters.
      */
-    public function __construct(string $column, mixed $value = '', string $type = 'input', array $options = [])
+    public function __construct(string $column, mixed $value = '', string $type = 'input', array $options = [], string $label = '')
     {
+
         $this->column = $column;
-        $this->value = $value;
         $this->type = $type;
         $this->options = $options;
+        $this->setValue($value);
+        $this->label = $label ?: ucfirst(str_replace('_', ' ', $column));
+    }
+
+    /**
+     * Set the filter value.
+     *
+     * @param mixed $value
+     * @return void
+     */
+    public function setValue(mixed $value): void
+    {
+        $this->value = !is_string($value) ? json_decode($value, true) : $value;
+    }
+
+    /**
+     * Get the filter value.
+     *
+     * @return mixed
+     */
+    public function getValue(): mixed
+    {
+        return $this->value;
+    }
+
+    /**
+     * Convert the filter to an array format.
+     *
+     * @return array
+     */
+    public function toArray(): array
+    {
+        return [
+            $this->column => [
+                'type' => $this->type,
+                'value' => $this->getValue(), // ✅ Correcte waarde
+                'options' => $this->options,
+                'label' => $this->label,
+            ]
+        ];
     }
 
     /**
@@ -48,36 +90,6 @@ public function __construct(string $column, mixed $value = '', string $type = 'i
      */
     public function apply(Builder $query): Builder
     {
-        if (!empty($this->value)) {
-            switch ($this->type) {
-                case 'select':
-                    $query->where($this->column, $this->value);
-                    break;
-
-                case 'checkbox':
-                    $query->where($this->column, '=', (bool) $this->value);
-                    break;
-
-                case 'radio':
-                    $query->where($this->column, '=', $this->value);
-                    break;
-
-                case 'date-range':
-                    if (is_array($this->value)) {
-                        if (!empty($this->value['from'])) {
-                            $query->whereDate($this->column, '>=', $this->value['from']);
-                        }
-                        if (!empty($this->value['to'])) {
-                            $query->whereDate($this->column, '<=', $this->value['to']);
-                        }
-                    }
-                    break;
-
-                default:
-                    $query->where($this->column, 'like', "%{$this->value}%");
-                    break;
-            }
-        }
         return $query;
     }
 }

src/Filters/BooleanFilter.php → src/Filters/CheckboxFilter.php

@@ -10,17 +10,17 @@
  *
  * A specialized filter for handling boolean (true/false) values using checkboxes.
  */
-class BooleanFilter extends Filter
+class CheckboxFilter extends Filter
 {
     /**
      * BooleanFilter constructor.
      *
      * @param string $column The column to filter.
      * @param bool|null $value The boolean value to filter by (default: null).
      */
-    public function __construct(string $column, ?bool $value = null)
+    public function __construct(string $column, ?bool $value = null, string $label = '')
     {
-        parent::__construct($column, $value, 'checkbox');
+        parent::__construct($column, $value, 'checkbox', [], $label);
     }
 
     /**
@@ -31,7 +31,9 @@ public function __construct(string $column, ?bool $value = null)
      */
     public function apply(Builder $query): Builder
     {
-        if (!is_null($this->value)) {
+        $value = $this->getValue();
+
+        if (!empty($value)) {
             $query->where($this->column, (bool) $this->value);
         }
 

src/Filters/DateFilter.php

@@ -18,9 +18,9 @@ class DateFilter extends Filter
      * @param string $column The column to filter.
      * @param string|null $date The selected date (default: null).
      */
-    public function __construct(string $column, ?string $date = null)
+    public function __construct(string $column, ?string $date = null, string $label = '')
     {
-        parent::__construct($column, $date, 'date');
+        parent::__construct($column, $date, 'date', [], $label);
     }
 
     /**
@@ -31,7 +31,9 @@ public function __construct(string $column, ?string $date = null)
      */
     public function apply(Builder $query): Builder
     {
-        if (!empty($this->value)) {
+        $value = $this->getValue();
+
+        if (!empty($value)) {
             $query->whereDate($this->column, '=', $this->value);
         }
 

src/Filters/RadioFilter.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace Ginkelsoft\DataTables\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+use Ginkelsoft\DataTables\Filter;
+
+/**
+ * Class SelectFilter
+ *
+ * A filter for handling dropdown (select) filtering in a DataTable.
+ */
+class RadioFilter extends Filter
+{
+    /**
+     * SelectFilter constructor.
+     *
+     * @param string $column The column to filter.
+     * @param mixed|null $value The selected value (default: null).
+     * @param array $options Available options for the select dropdown.
+     */
+    public function __construct(string $column, mixed $value = null, array $options = [], string $label = '')
+    {
+        parent::__construct($column, $value, 'radio', $options, $label);
+    }
+
+    /**
+     * Apply the select filter to the query.
+     *
+     * @param Builder $query The Eloquent query builder instance.
+     * @return Builder The modified query with the select filter applied.
+     */
+    public function apply(Builder $query): Builder
+    {
+        $value = $this->getValue();
+
+        if (!empty($value)) {
+            $query->where($this->column, '=', $this->value);
+        }
+
+        return $query;
+    }
+}

src/Filters/SelectFilter.php

@@ -19,9 +19,9 @@ class SelectFilter extends Filter
      * @param mixed|null $value The selected value (default: null).
      * @param array $options Available options for the select dropdown.
      */
-    public function __construct(string $column, mixed $value = null, array $options = [])
+    public function __construct(string $column, mixed $value = null, array $options = [], string $label = '')
     {
-        parent::__construct($column, $value, 'select', $options);
+        parent::__construct($column, $value, 'select', $options, $label);
     }
 
     /**
@@ -32,7 +32,9 @@ public function __construct(string $column, mixed $value = null, array $options
      */
     public function apply(Builder $query): Builder
     {
-        if (!empty($this->value)) {
+        $value = $this->getValue();
+
+        if (!empty($value)) {
             $query->where($this->column, '=', $this->value);
         }
 

src/Filters/TextFilter.php

@@ -16,11 +16,11 @@ class TextFilter extends Filter
      * TextFilter constructor.
      *
      * @param string $column The column to filter.
-     * @param mixed|null $value The search value (default: null).
+     * @param mixed|null $value The search value (default: '').
      */
-    public function __construct(string $column, mixed $value = null)
+    public function __construct(string $column, mixed $value = '', string $label = '')
     {
-        parent::__construct($column, $value, 'input');
+        parent::__construct($column, $value, 'input', [], $label);
     }
 
     /**
@@ -31,10 +31,14 @@ public function __construct(string $column, mixed $value = null)
      */
     public function apply(Builder $query): Builder
     {
-        if (!empty($this->value)) {
-            $query->where($this->column, 'like', "%{$this->value}%");
+        $value = $this->getValue();
+
+        if (!empty($value)) {
+            $query->where($this->column, 'like', "%{$value}%");
         }
 
+        // dd($this->value, $query->get());
+
         return $query;
     }
 }