Merge branch 'Wit3-feature-datetime-filter' into develop

Author: rappasoft

docs/filters/creating-filters.md

@@ -7,7 +7,7 @@ Creating filters is not required, and the filters box will be hidden if none are
 
 To create filters, you return an array of `Filter` class objects from the `filters()` method.
 
-The current types of filters are: `select`, `multiSelect`, and `date`.
+The current types of filters are: `select`, `multiSelect`, `date`, and `datetime` (for supported browsers).
 
 There are two steps to making a filter:
 
@@ -49,7 +49,7 @@ public function filters(): array
                 'tag2' => 'Tags 2',
                 'tag3' => 'Tags 3',
                 'tag4' => 'Tags 4',
-            ]),     
+            ]),
     ];
 }
 ```

resources/views/bootstrap-4/includes/filter-type-datetime.blade.php

@@ -0,0 +1,11 @@
+<div class="mb-3 mb-md-0 input-group">
+    <input
+        wire:model="filters.{{ $key }}"
+        wire:key="filter-{{ $key }}"
+        id="filter-{{ $key }}"
+        type="datetime-local"
+        @if(isset($filter->options['min']) && strlen($filter->options['min'])) min="{{ $filter->options['min'] }}" @endif
+        @if(isset($filter->options['max']) && strlen($filter->options['max'])) max="{{ $filter->options['max'] }}" @endif
+        class="form-control"
+    />
+</div>

resources/views/bootstrap-4/includes/filters.blade.php

@@ -42,6 +42,8 @@ class="dropdown-menu w-100 mt-md-3"
                                 @include('livewire-tables::bootstrap-4.includes.filter-type-multiselect')
                             @elseif($filter->isDate())
                                 @include('livewire-tables::bootstrap-4.includes.filter-type-date')
+                            @elseif($filter->isDatetime())
+                                @include('livewire-tables::bootstrap-4.includes.filter-type-datetime')
                             @endif
                         </div>
                     @endforeach

resources/views/bootstrap-5/includes/filter-type-datetime.blade.php

@@ -0,0 +1,11 @@
+<div class="flex rounded-md shadow-sm mt-1">
+    <input
+        wire:model="filters.{{ $key }}"
+        wire:key="filter-{{ $key }}"
+        id="filter-{{ $key }}"
+        type="datetime-local"
+        @if(isset($filter->options['min']) && strlen($filter->options['min'])) min="{{ $filter->options['min'] }}" @endif
+        @if(isset($filter->options['max']) && strlen($filter->options['max'])) max="{{ $filter->options['max'] }}" @endif
+        class="form-control"
+    />
+</div>

resources/views/bootstrap-5/includes/filters.blade.php

@@ -42,6 +42,8 @@ class="dropdown-menu w-100"
                                 @include('livewire-tables::bootstrap-5.includes.filter-type-multiselect')
                             @elseif($filter->isDate())
                                 @include('livewire-tables::bootstrap-5.includes.filter-type-date')
+                            @elseif($filter->isDatetime())
+                                @include('livewire-tables::bootstrap-5.includes.filter-type-datetime')
                             @endif
                         </div>
                     @endforeach

resources/views/tailwind/includes/filter-type-datetime.blade.php

@@ -0,0 +1,11 @@
+<div class="flex rounded-md shadow-sm mt-1">
+    <input
+        wire:model.stop="filters.{{ $key }}"
+        wire:key="filter-{{ $key }}"
+        id="filter-{{ $key }}"
+        type="datetime-local"
+        @if(isset($filter->options['min']) && strlen($filter->options['min'])) min="{{ $filter->options['min'] }}" @endif
+        @if(isset($filter->options['max']) && strlen($filter->options['max'])) max="{{ $filter->options['max'] }}" @endif
+        class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+    />
+</div>

resources/views/tailwind/includes/filters.blade.php

@@ -62,6 +62,8 @@ class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
                                 @include('livewire-tables::tailwind.includes.filter-type-multiselect')
                             @elseif($filter->isDate())
                                 @include('livewire-tables::tailwind.includes.filter-type-date')
+                            @elseif($filter->isDatetime())
+                                @include('livewire-tables::tailwind.includes.filter-type-datetime')    
                             @endif
                         </div>
                     </div>

src/Traits/WithFilters.php

@@ -192,6 +192,15 @@ public function cleanFilters(): void
                 return $dt !== false && ! array_sum($dt::getLastErrors());
             }
 
+            if ($filterDefinitions[$filterName]->isDatetime()) {
+                // array_sum trick is a terse way of ensuring that PHP
+                // did not do "month shifting"
+                // (e.g. consider that January 32 is February 1)
+                $dt = DateTime::createFromFormat("Y-m-d\TH:i", $filterValue);
+
+                return $dt !== false && ! array_sum($dt::getLastErrors());
+            }
+
             return false;
         })->toArray();
     }

src/Views/Filter.php

@@ -9,6 +9,8 @@ class Filter
 {
     public const TYPE_DATE = 'date';
 
+    public const TYPE_DATETIME_LOCAL = 'datetime-local';
+
     public const TYPE_SELECT = 'select';
 
     public const TYPE_MULTISELECT = 'multiselect';
@@ -96,6 +98,20 @@ public function date(array $options = []): Filter
         return $this;
     }
 
+    /**
+     * @param array $options
+     *
+     * @return $this
+     */
+    public function datetime(array $options = []): Filter
+    {
+        $this->type = self::TYPE_DATETIME_LOCAL;
+
+        $this->options = $options;
+
+        return $this;
+    }
+
     /**
      * @return string
      */
@@ -135,4 +151,12 @@ public function isDate(): bool
     {
         return $this->type === self::TYPE_DATE;
     }
+
+    /**
+     * @return bool
+     */
+    public function isDatetime(): bool
+    {
+        return $this->type === self::TYPE_DATETIME_LOCAL;
+    }
 }