Added Date filter columns

app/Http/Controllers/DataTablesController.php

@@ -72,12 +72,11 @@ class DataTablesController extends Controller
             $config = $columnConfig[$index];
             $columnName = $config['name'];
             $searchType = $columnHeader['searchtype'];
-
-            if ($searchType === 'date' && is_array($value)) {
-                if (!empty($value['start'])) {
+            if ($searchType == 'date' && is_array($value)) {
+                if (!empty($value[$index]['start'])) {
                     $query->whereDate($columnName, '>=', $value[$index]['start']);
                 }
-                if (!empty($value['end'])) {
+                if (!empty($value[$index]['end'])) {
                     $query->whereDate($columnName, '<=', $value[$index]['end']);
                 }
             } elseif (!empty($value)) {

app/Livewire/ShowReports.php

@@ -12,7 +12,7 @@ class ShowReports extends Component
     public $datatableName;
     public $datatableColumnsConfig;
     public $datatableHeadersConfig;
-    public array $searchTerms = [];
+
 
     public function mount($datatableName)
     {
@@ -30,12 +30,7 @@ class ShowReports extends Component
         $this->datatableColumnsConfig = json_decode($datatableConfigQuery->columns_config, true);
         $this->datatableHeadersConfig = json_decode($datatableConfigQuery->column_headers, true);
     }
-    public function updatedSearchTerms($value)
-    {
 
-        $this->dispatch('search-terms-updated', $this->searchTerms);
-
-    }
     public function render()
     {
 

resources/js/datatables.js

@@ -19,7 +19,7 @@ window.$ = window.jQuery = $;
 window.JSZip = JSZip;
 // Initialize DataTable
 let dataTableInstance;
-var livewireSearchTerms ={};
+var searchTerms ={};
 function initializeDataTable() {
     var dataTableName = document.getElementById('datatable-config').dataset.datatableName;
     var dataTableColumnsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnsConfig);
@@ -44,7 +44,7 @@ function initializeDataTable() {
                 return json.data;
             },
             data: function (d) {
-                d.searchTerms = livewireSearchTerms || {};
+                d.searchTerms = searchTerms || {};
             }
         },
         columns: dataTableColumnsConfig,
@@ -73,20 +73,41 @@ document.addEventListener('livewire:init', function () {
 
     initializeDataTable();
 
-    Livewire.on('search-terms-updated', (searchTerms) => {
 
-        livewireSearchTerms = searchTerms || {};
-        setTimeout(() => {
-            initializeDataTable();
-        }, 50); // Slight delay gives Livewire time to patch DOM
+    });
+let inner = {};
+function getFilterInput(searchTerm, index, searchType, extra){
+
+
+    switch (searchType) {
+        case "text":
+        case "number":
+            inner[index] = searchTerm;
+            break;
+        case "date":
+            if($.isEmptyObject(inner[index])) {
+                inner[index] = {"start": "", "end": ""};
+            }
+            if (extra === "start") {
+                inner[index].start = searchTerm;
+                console.log("start date: ");
+            }
+            else if (extra ===  "end") {
+                inner[index].end = searchTerm;
+            }
+            break;
+    }
+    searchTerms[index] =  inner;
+    console.log(searchTerms[index]);
+    dataTableInstance.ajax.reload();
 
 
 
 
-    });
 
-    });
+}
 
+window.getFilterInput = getFilterInput;
 
 
 

resources/views/livewire/show-reports.blade.php

@@ -20,12 +20,12 @@
 
                     @switch($headerConfig['searchtype'])
                         @case("text")
-                            <input type="text" id="{{$headerConfig['header']}}Filter"  wire:model.live.debounce.250ms="searchTerms.{{ $index }}" placeholder="{{$headerConfig['header']}} Search" />
+                            <input type="text" id="{{$headerConfig['header']}}Filter"  oninput="getFilterInput(this.value, {{$index}},'text', null)" placeholder="{{$headerConfig['header']}} Search" />
                             @break
                         @case("date")
-                            <input type="date" id="{{$headerConfig['header']}}FilterStartDate" wire:model.live="searchTerms.{{ $index }}.start" placeholder="{{$headerConfig['header']}} Start Date" />
+                            <input type="date" id="{{$headerConfig['header']}}FilterStartDate" onchange="getFilterInput(this.value, {{$index}},'date', 'start')" placeholder="{{$headerConfig['header']}} Start Date" />
                             -
-                            <input type="date" id="{{$headerConfig['header']}}FilterEndDate" wire:model.live="searchTerms.{{ $index }}.end" placeholder="{{$headerConfig['header']}} End Date" />
+                            <input type="date" id="{{$headerConfig['header']}}FilterEndDate" onchange="getFilterInput(this.value, {{$index}},'date', 'end')" placeholder="{{$headerConfig['header']}} End Date" />
                             @break
                     @endswitch