fix flatpickr lose text value

Power-Components · Oct 9, 2023 · 989c9cf · 989c9cf
1 parent 4bcd4b2
commit 989c9cf
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 38 deletions.
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/powergrid.js": "/powergrid.js?id=50f814d7565817030b1b2ce4099bb763",
+    "/powergrid.js": "/powergrid.js?id=b21468b1ec2644107e4368cefcfab9b7",
     "/tom-select.css": "/tom-select.css?id=7af730d2c4bf937316d4002948b1571d",
     "/powergrid.css": "/powergrid.css?id=f2c32aef475db76375ad76fb2f0f7d33"
 }
diff --git a/dist/powergrid.js b/dist/powergrid.js
diff --git a/resources/js/components/pg-flatpickr.js b/resources/js/components/pg-flatpickr.js
@@ -1,27 +1,23 @@
 export default (params) => ({
     dataField: params.dataField,
     tableName: params.tableName,
-    filterKey: params.filterKey,
     label: params.label ?? null,
     locale: params.locale ?? 'en',
     onlyFuture: params.onlyFuture ?? false,
     noWeekEnds: params.noWeekEnds ?? false,
     customConfig: params.customConfig ?? null,
     type: params.type,
     element: null,
-    lastRequest: null,
     init() {
         window.addEventListener(`pg:clear_flatpickr::${this.tableName}:${this.dataField}`, () => {
             if (this.$refs.rangeInput && this.element) {
                 this.element.clear()
-                this.lastRequest = null;
             }
         })
 
         window.addEventListener(`pg:clear_all_flatpickr::${this.tableName}`, () => {
             if (this.$refs.rangeInput && this.element) {
                 this.element.clear()
-                this.lastRequest = null;
             }
         })
 
@@ -35,6 +31,9 @@ export default (params) => ({
 
         if(this.$refs.rangeInput) {
             this.element = flatpickr(this.$refs.rangeInput, options);
+
+            const selectedDates = this.$wire.get(`filters.${this.type}.${this.dataField}.formatted`)
+            this.element.setDate(selectedDates)
         }
     },
     getOptions() {
@@ -58,18 +57,16 @@ export default (params) => ({
         }
 
         options.onClose = (selectedDates, dateStr, instance) => {
-            selectedDates = selectedDates.map((date) => this.element.formatDate(date, 'Y-m-d'));
 
-            const key = `${this.tableName}::${this.dataField}::${selectedDates}`
-            const encrypted = Buffer.from(key).toString('base64')
+            selectedDates = selectedDates.map((date) => this.element.formatDate(date, 'Y-m-d'));
 
-            if (selectedDates.length > 0 && encrypted !== this.lastRequest) {
+            if (selectedDates.length > 0) {
                 Livewire.dispatch('pg:datePicker-' + this.tableName, {
                     selectedDates: selectedDates,
+                    dateStr,
                     timezone: this.customConfig.timezone ?? new Date().toString().match(/([-\+][0-9]+)\s/)[1],
                     type: this.type,
                     field: this.dataField,
-                    wireModel: this.filterKey,
                     label: this.label,
                 });
             }

diff --git a/resources/views/components/frameworks/bootstrap5/filters/date-picker.blade.php b/resources/views/components/frameworks/bootstrap5/filters/date-picker.blade.php
@@ -9,19 +9,18 @@
 @php
     unset($filter['className']);
     extract($filter);
-    
+
     $customConfig = [];
     if ($params) {
         foreach ($params as $key => $value) {
             $customConfig[$key] = $value;
         }
     }
-    
+
     $params = [
         'type' => $type,
         'dataField' => $field,
         'tableName' => $tableName,
-        'filterKey' => 'enabledFilters.datetime.' . $field,
         'label' => $title,
         'locale' => config('livewire-powergrid.plugins.flatpickr.locales.' . app()->getLocale()),
         'onlyFuture' => data_get($customConfig, 'only_future', false),
@@ -30,7 +29,7 @@
     ];
 @endphp
 <div
-    wire:ignore
+    wire:ignore.self
     x-data="pgFlatpickr(@js($params))"
 >
     <div
@@ -41,6 +40,7 @@ class="{{ $theme->baseClass }}"
             <input
                 id="input_{{ $column }}"
                 x-ref="rangeInput"
+                wire:model="filters.{{ $type }}.{{ $field }}.formatted"
                 autocomplete="off"
                 data-field="{{ $column }}"
                 style="{{ $theme->inputStyle }} {{ data_get($column, 'headerStyle') }}"

diff --git a/resources/views/components/frameworks/tailwind/filters/date-picker.blade.php b/resources/views/components/frameworks/tailwind/filters/date-picker.blade.php
@@ -9,14 +9,14 @@
 @php
     unset($filter['className']);
     extract($filter);
-    
+
     $customConfig = [];
     if ($params) {
         foreach ($params as $key => $value) {
             $customConfig[$key] = $value;
         }
     }
-    
+
     $params = [
         'type' => $type,
         'dataField' => $field,
@@ -46,6 +46,7 @@ class="{{ $theme->baseClass }}"
             <input
                 id="input_{{ $column }}"
                 x-ref="rangeInput"
+                wire:model="filters.{{ $type }}.{{ $field }}.formatted"
                 autocomplete="off"
                 data-field="{{ $field }}"
                 style="{{ $theme->inputStyle }} {{ data_get($column, 'headerStyle') }}"

diff --git a/src/Components/Filters/Builders/DateTimePicker.php b/src/Components/Filters/Builders/DateTimePicker.php
@@ -10,6 +10,10 @@ class DateTimePicker extends BuilderBase
 {
     public function builder(EloquentBuilder|QueryBuilder $builder, string $field, int|array|string|null $values): void
     {
+        if (gettype($values) === 'string') {
+            return;
+        }
+
         /** @var array $values */
         [$startDate, $endDate] = [
             0 => Carbon::parse($values[0]),

diff --git a/src/Traits/HasFilter.php b/src/Traits/HasFilter.php
@@ -193,7 +193,7 @@ private function resolveFilters(): void
     public function datePickerChanged(
         array $selectedDates,
         string $field,
-        string $wireModel,
+        string $dateStr,
         string $label,
         string $type,
         string $timezone = 'UTC',
@@ -204,8 +204,6 @@ public function datePickerChanged(
 
         $this->resetPage();
 
-        $input = explode('.', $wireModel);
-
         $startDate = strval($selectedDates[0]);
         $endDate   = strval($selectedDates[1]);
 
@@ -224,30 +222,16 @@ public function datePickerChanged(
             $endDate->endOfDay()->setTimeZone($appTimeZone);
         }
 
-        $selectedDates[0] = $startDate;
-        $selectedDates[1] = $endDate;
+        $selectedDatesFormatted = [$startDate, $endDate];
 
         $this->enabledFilters[$field]['data-field'] = $field;
         $this->enabledFilters[$field]['label']      = $label;
 
-        if (count($input) === 3) {
-            $this->filters[$type][$input[2]] = $selectedDates;
-            $this->persistState('filters');
+        $this->filters[$type][$field] = $selectedDatesFormatted;
 
-            return;
-        }
+        $this->filters[$type][$field]['formatted'] = $dateStr;
 
-        if (count($input) === 4) {
-            $this->filters[$type][$input[2] . '.' . $input[3]] = $selectedDates;
-            $this->persistState('filters');
-
-            return;
-        }
-
-        if (count($input) === 5) {
-            $this->filters[$type][$input[2] . '.' . $input[3] . '.' . $input[4]] = $selectedDates;
-            $this->persistState('filters');
-        }
+        $this->persistState('filters');
     }
 
     #[On('pg:multiSelect-{tableName}')]