Added a Datetime Column (#543)

* Create DatetimeColumn.php

* Create datetime.blade.php

* Added DatetimeFilters to LivewireDatatable

* Changed doDateFilterStart and doDateFilterEnd to doDatetimeFilterStart and doDatetimeFilterEnd on filter

* Fix the issue detected by ci, and created a new config named "default_datetime_format"

Author: dnl4

config/livewire-datatables.php

@@ -13,6 +13,7 @@
 
     'default_time_format' => 'H:i',
     'default_date_format' => 'd/m/Y',
+    'default_datetime_format' => 'd/m/Y H:i',
 
     /*
     |--------------------------------------------------------------------------

resources/views/livewire/datatables/filters/datetime.blade.php

@@ -0,0 +1,24 @@
+<div x-data class="flex flex-col">
+    <div class="w-full relative flex">
+        <input x-ref="start" class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" type="datetime-local"
+            wire:change="doDatetimeFilterStart('{{ $index }}', $event.target.value)" style="padding-bottom: 5px"
+            value="{{ $this->activeDatetimeFilters[$index]['start'] ?? ''}}"
+            />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.start.value=''" wire:click="doDatetimeFilterStart('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-gray-400 hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-datatables.icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+    <div class="w-full relative flex items-center">
+        <input x-ref="end" class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" type="datetime-local"
+            wire:change="doDatetimeFilterEnd('{{ $index }}', $event.target.value)" style="padding-bottom: 5px"
+            value="{{ $this->activeDatetimeFilters[$index]['end'] ?? ''}}"
+            />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.end.value=''" wire:click="doDatetimeFilterEnd('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-gray-400 hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-datatables.icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+</div>

src/DatetimeColumn.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Mediconesystems\LivewireDatatables;
+
+use Illuminate\Support\Carbon;
+
+class DatetimeColumn extends Column
+{
+    public $type = 'datetime';
+    public $callback;
+
+    public function __construct()
+    {
+        $this->format();
+    }
+
+    public function format($format = null)
+    {
+        $this->callback = function ($value) use ($format) {
+            return $value ? Carbon::parse($value)->format($format ?? config('livewire-datatables.default_datetime_format')) : null;
+        };
+
+        return $this;
+    }
+}

src/Http/Livewire/LivewireDatatable.php

@@ -31,6 +31,7 @@ class LivewireDatatable extends Component
     public $sort;
     public $direction;
     public $activeDateFilters = [];
+    public $activeDatetimeFilters = [];
     public $activeTimeFilters = [];
     public $activeSelectFilters = [];
     public $activeBooleanFilters = [];
@@ -170,6 +171,7 @@ public function applyToTable($options)
             'search',
             'activeSelectFilters',
             'activeDateFilters',
+            'activeDatetimeFilters',
             'activeTimeFilters',
             'activeBooleanFilters',
             'activeTextFilters',
@@ -197,6 +199,7 @@ public function resetTable()
         $this->setPage(1);
         $this->activeSelectFilters = [];
         $this->activeDateFilters = [];
+        $this->activeDatetimeFilters = [];
         $this->activeTimeFilters = [];
         $this->activeTextFilters = [];
         $this->activeBooleanFilters = [];
@@ -531,6 +534,7 @@ public function setSessionStoredFilters()
                 'boolean' => $this->activeBooleanFilters,
                 'select' => $this->activeSelectFilters,
                 'date' => $this->activeDateFilters,
+                'datetime' => $this->activeDatetimeFilters,
                 'time' => $this->activeTimeFilters,
                 'number' => $this->activeNumberFilters,
                 'search' => $this->search,
@@ -638,6 +642,10 @@ public function initialiseDefaultFilters()
                 $this->activeDateFilters[$columnIndex] = $value;
             }
 
+            if ($column['type'] === 'datetime') {
+                $this->activeDatetimeFilters[$columnIndex] = $value;
+            }
+
             if ($column['type'] === 'time') {
                 $this->activeTimeFilters[$columnIndex] = $value;
             }
@@ -672,6 +680,10 @@ public function initialiseFilters()
             $this->activeDateFilters = $filters['date'];
         }
 
+        if (! empty($filters['datetime'])) {
+            $this->activeDatetimeFilters = $filters['datetime'];
+        }
+
         if (! empty($filters['time'])) {
             $this->activeTimeFilters = $filters['time'];
         }
@@ -923,6 +935,22 @@ public function doDateFilterEnd($index, $end)
         $this->setSessionStoredFilters();
     }
 
+    public function doDatetimeFilterStart($index, $start)
+    {
+        $this->activeDatetimeFilters[$index]['start'] = $start;
+        $this->setVisibleSelected();
+        $this->setPage(1);
+        $this->setSessionStoredFilters();
+    }
+
+    public function doDatetimeFilterEnd($index, $end)
+    {
+        $this->activeDatetimeFilters[$index]['end'] = $end;
+        $this->setVisibleSelected();
+        $this->setPage(1);
+        $this->setSessionStoredFilters();
+    }
+
     public function doTimeFilterStart($index, $start)
     {
         $this->activeTimeFilters[$index]['start'] = $start;
@@ -980,6 +1008,7 @@ public function removeSelectFilter($column, $key = null)
     public function clearAllFilters()
     {
         $this->activeDateFilters = [];
+        $this->activeDatetimeFilters = [];
         $this->activeTimeFilters = [];
         $this->activeSelectFilters = [];
         $this->activeBooleanFilters = [];
@@ -1154,6 +1183,7 @@ public function getNumberFiltersProperty()
     public function getActiveFiltersProperty()
     {
         return count($this->activeDateFilters)
+            || count($this->activeDatetimeFilters)
             || count($this->activeTimeFilters)
             || count($this->activeSelectFilters)
             || count($this->activeBooleanFilters)
@@ -1209,6 +1239,7 @@ public function buildDatabaseQuery($export = false)
             ->addTextFilters()
             ->addNumberFilters()
             ->addDateRangeFilter()
+            ->addDatetimeRangeFilter()
             ->addTimeRangeFilter()
             ->addComplexQuery()
             ->addSort();
@@ -1504,6 +1535,27 @@ public function addDateRangeFilter()
         return $this;
     }
 
+    public function addDatetimeRangeFilter()
+    {
+        if (! count($this->activeDatetimeFilters)) {
+            return $this;
+        }
+
+        $this->query->where(function ($query) {
+            foreach ($this->activeDatetimeFilters as $index => $filter) {
+                if (! ((isset($filter['start']) && $filter['start'] != '') || (isset($filter['end']) && $filter['end'] != ''))) {
+                    break;
+                }
+                $query->whereBetween($this->getColumnFilterStatement($index)[0], [
+                    isset($filter['start']) && $filter['start'] != '' ? $filter['start'] : config('livewire-datatables.default_time_start', '0000-00-00 00:00'),
+                    isset($filter['end']) && $filter['end'] != '' ? $filter['end'] : config('livewire-datatables.default_time_end', '9999-12-31 23:59'),
+                ]);
+            }
+        });
+
+        return $this;
+    }
+
     public function addTimeRangeFilter()
     {
         if (! count($this->activeTimeFilters)) {