fix(filters): setting date picker should always work, fixes #1582 (#1583

)
ghiscoding · Jun 22, 2024 · 92f6164 · 92f6164
1 parent c742a83
commit 92f6164
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 56 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts
@@ -146,8 +146,9 @@ export default class Example10 {
       },
     ];
 
-    const presetLowestDay = tempoFormat(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const presetLowestDay = `${currentYear}-01-01`;
+    const presetHighestDay = `${currentYear}-02-15`;
 
     this.gridOptions = {
       enableAutoTooltip: true,
@@ -334,8 +335,9 @@ export default class Example10 {
   }
 
   setFiltersDynamically() {
-    const presetLowestDay = tempoFormat(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const presetLowestDay = `${currentYear}-01-01`;
+    const presetHighestDay = `${currentYear}-02-15`;
 
     // we can Set Filters Dynamically (or different filters) afterward through the FilterService
     this.sgb.filterService.updateFilters([
@@ -356,8 +358,9 @@ export default class Example10 {
   }
 
   resetToOriginalPresets() {
-    const presetLowestDay = tempoFormat(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const presetLowestDay = `${currentYear}-01-01`;
+    const presetHighestDay = `${currentYear}-02-15`;
 
     this.sgb?.filterService.updateFilters([
       // you can use OperatorType or type them as string, e.g.: operator: 'EQ'

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -77,7 +77,7 @@
     "multiple-select-vanilla": "^3.2.2",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12",
-    "vanilla-calendar-picker": "^2.11.6"
+    "vanilla-calendar-picker": "^2.11.7"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",

diff --git a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts
@@ -1,6 +1,7 @@
 import { format } from '@formkit/tempo';
 import type { AutocompleteItem } from 'autocompleter';
-import type { IOptions } from 'vanilla-calendar-picker';
+import { dequal } from 'dequal/lite';
+import type { IOptions, ISelected, VanillaCalendar } from 'vanilla-calendar-picker';
 
 import type { AutocompleterOption, Column, ColumnEditor, ColumnFilter } from '../interfaces/index';
 import { FieldType } from '../enums';
@@ -33,30 +34,55 @@ export function addAutocompleteLoadingByOverridingFetch<T extends AutocompleteIt
   }
 }
 
-export function setPickerDates(dateInputElm: HTMLInputElement, pickerOptions: IOptions, dateValues: Date | Date[] | string | string[] | undefined, columnDef: Column, colEditorOrFilter: ColumnEditor | ColumnFilter): void {
-  const currentDateOrDates = dateValues;
-  const outputFieldType = columnDef.outputType || colEditorOrFilter.type || columnDef.type || FieldType.dateUtc;
-  const inputFieldType = colEditorOrFilter.type || columnDef.type;
-  const isoFormat = mapTempoDateFormatWithFieldType(FieldType.dateIso) as string;
-  const inputFormat = inputFieldType ? mapTempoDateFormatWithFieldType(inputFieldType) : undefined;
-  const initialDates = Array.isArray(currentDateOrDates) ? currentDateOrDates : [(currentDateOrDates || '') as string];
-  if (initialDates.length && initialDates[0]) {
+export function setPickerDates(
+  colEditorOrFilter: ColumnEditor | ColumnFilter,
+  dateInputElm: HTMLInputElement,
+  pickerInstance: IOptions | VanillaCalendar,
+  options: {
+    oldVal?: Date | string | Array<Date | string> | undefined,
+    newVal: Date | string | Array<Date | string> | undefined,
+    columnDef: Column,
+    updatePickerUI?: boolean;
+    selectedSettings?: ISelected;
+  }
+): void {
+  const { oldVal, newVal, columnDef, selectedSettings, updatePickerUI } = options;
+
+  if (oldVal !== newVal) {
+    const inputFieldType = colEditorOrFilter.type || columnDef.type;
+    const outputFieldType = columnDef.outputType || colEditorOrFilter.type || columnDef.type || FieldType.dateUtc;
+    const newDates = Array.isArray(newVal) ? newVal : [(newVal || '') as string];
     const pickerDates: Date[] = [];
-    for (const initialDate of initialDates) {
+
+    const isoFormat = mapTempoDateFormatWithFieldType(FieldType.dateIso) as string;
+    const inputFormat = inputFieldType ? mapTempoDateFormatWithFieldType(inputFieldType) : undefined;
+    for (const initialDate of newDates) {
       const date = initialDate instanceof Date ? initialDate : tryParseDate(initialDate, inputFormat);
       if (date) {
         pickerDates.push(date);
       }
     }
 
-    if (pickerDates.length) {
-      pickerOptions.settings!.selected = {
-        dates: [pickerDates.map(p => format(p, isoFormat)).join(':')],
-        month: pickerDates[0].getMonth(),
-        year: pickerDates[0].getFullYear(),
-        time: inputFormat === 'ISO8601' || (inputFormat || '').toLowerCase().includes('h') ? format(pickerDates[0], 'HH:mm') : undefined,
-      };
+    const newSettingSelected: ISelected = selectedSettings ?? {
+      dates: [pickerDates.map(p => format(p, isoFormat)).join(':')],
+      month: pickerDates[0]?.getMonth(),
+      year: pickerDates[0]?.getFullYear(),
+      time: inputFormat === 'ISO8601' || (inputFormat || '').toLowerCase().includes('h') ? format(pickerDates[0], 'HH:mm') : undefined,
+    };
+
+    if (!dequal(pickerInstance.settings!.selected, newSettingSelected)) {
+      pickerInstance.settings!.selected = newSettingSelected;
+
+      if (updatePickerUI && (pickerInstance as VanillaCalendar)?.update) {
+        (pickerInstance as VanillaCalendar).update({
+          dates: true,
+          month: true,
+          year: true,
+          time: true,
+        });
+      }
     }
-    dateInputElm.value = initialDates.length ? pickerDates.map(p => formatDateByFieldType(p, undefined, outputFieldType)).join(' — ') : '';
+
+    dateInputElm.value = newDates.length ? pickerDates.map(p => formatDateByFieldType(p, undefined, outputFieldType)).join(' — ') : '';
   }
 }
diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -209,12 +209,11 @@ export class DateEditor implements Editor {
           this.focus();
         }
         if (this.calendarInstance) {
-          setPickerDates(this._inputElm, this.calendarInstance, this.defaultDate, this.columnDef, this.columnEditor);
-          this.calendarInstance.update({
-            dates: true,
-            month: true,
-            year: true,
-            time: true,
+          setPickerDates(this.columnEditor, this._inputElm, this.calendarInstance, {
+            columnDef: this.columnDef,
+            oldVal: this.getValue(),
+            newVal: this.defaultDate,
+            updatePickerUI: true
           });
         }
       });
@@ -305,7 +304,12 @@ export class DateEditor implements Editor {
 
   setValue(val: string, isApplyingValue = false, triggerOnCompositeEditorChange = true): void {
     if (this.calendarInstance) {
-      setPickerDates(this._inputElm, this.calendarInstance, val, this.columnDef, this.columnEditor);
+      setPickerDates(this.columnEditor, this._inputElm, this.calendarInstance, {
+        columnDef: this.columnDef,
+        oldVal: this.getValue(),
+        newVal: val,
+        updatePickerUI: true
+      });
     }
 
     if (isApplyingValue) {

diff --git a/packages/common/src/filters/dateFilter.ts b/packages/common/src/filters/dateFilter.ts
@@ -159,14 +159,19 @@ export class DateFilter implements Filter {
       if (this._selectOperatorElm) {
         this._selectOperatorElm.selectedIndex = 0;
       }
-      if (this.calendarInstance.input) {
-        this.calendarInstance.settings.selected.dates = [];
-        this._dateInputElm.value = '';
-        this.calendarInstance.update({
-          dates: true,
-          month: true,
-          year: true,
-          time: true,
+
+      if (this.calendarInstance) {
+        const now = new Date();
+        setPickerDates(this.columnFilter, this._dateInputElm, this.calendarInstance, {
+          columnDef: this.columnDef,
+          oldVal: this._currentDateOrDates,
+          newVal: '',
+          updatePickerUI: true,
+          selectedSettings: {
+            dates: [],
+            month: now.getMonth(),
+            year: now.getFullYear()
+          }
         });
       }
     }
@@ -220,7 +225,12 @@ export class DateFilter implements Filter {
     }
 
     if (this.calendarInstance && pickerValues !== undefined) {
-      setPickerDates(this._dateInputElm, this.calendarInstance, pickerValues, this.columnDef, this.columnFilter);
+      setPickerDates(this.columnFilter, this._dateInputElm, this.calendarInstance, {
+        columnDef: this.columnDef,
+        oldVal: this._currentDateOrDates,
+        newVal: pickerValues,
+        updatePickerUI: true
+      });
       this._currentDateOrDates = (values && pickerValues) ? pickerValues : undefined;
     }
 
@@ -412,7 +422,12 @@ export class DateFilter implements Filter {
     }
 
     if (pickerValues) {
-      setPickerDates(this._dateInputElm, pickerOptions, pickerValues, this.columnDef, this.columnFilter);
+      setPickerDates(this.columnFilter, this._dateInputElm, this.calendarInstance, {
+        columnDef: this.columnDef,
+        oldVal: undefined,
+        newVal: pickerValues,
+        updatePickerUI: false
+      });
     }
   }
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/cypress/e2e/example10.cy.ts b/test/cypress/e2e/example10.cy.ts
@@ -4,8 +4,9 @@ function removeSpaces(textS) {
   return `${textS}`.replace(/\s+/g, '');
 }
 
-const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
-const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
+const currentYear = new Date().getFullYear();
+const presetLowestDay = `${currentYear}-01-01`;
+const presetHighestDay = `${currentYear}-02-15`;
 
 describe('Example 10 - GraphQL Grid', () => {
   beforeEach(() => {
@@ -402,6 +403,34 @@ describe('Example 10 - GraphQL Grid', () => {
       });
   });
 
+  it('should open Date picker and expect date range between 01-Jan to 15-Feb', () => {
+    cy.get('.search-filter.filter-finish.filled')
+      .click();
+
+    cy.get('.vanilla-calendar-column:nth(0) .vanilla-calendar-month')
+      .should('have.text', 'January');
+
+    cy.get('.vanilla-calendar-column:nth(1) .vanilla-calendar-month')
+      .should('have.text', 'February');
+
+    cy.get('.vanilla-calendar-year:nth(0)')
+      .should('have.text', currentYear);
+
+    cy.get('.vanilla-calendar:visible')
+      .find('.vanilla-calendar-day__btn_selected')
+      .should('have.length', 46);
+
+    cy.get('.vanilla-calendar:visible')
+      .find('.vanilla-calendar-day__btn_selected')
+      .first()
+      .should('have.text', '1');
+
+    cy.get('.vanilla-calendar:visible')
+      .find('.vanilla-calendar-day__btn_selected')
+      .last()
+      .should('have.text', '15');
+  });
+
   describe('Set Dynamic Sorting', () => {
     it('should use slower server wait delay to test loading widget', () => {
       cy.get('[data-test="server-delay"]')
@@ -452,9 +481,20 @@ describe('Example 10 - GraphQL Grid', () => {
             totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
         });
     });
-  });
 
+    it('should open Date picker and no longer expect date range selection in the picker', () => {
+      cy.get('.search-filter.filter-finish')
+        .should('not.have.class', 'filled')
+        .click();
+
+      cy.get('.vanilla-calendar-year:nth(0)')
+        .should('have.text', currentYear);
 
+      cy.get('.vanilla-calendar:visible')
+        .find('.vanilla-calendar-day__btn_selected')
+        .should('not.exist');
+    });
+  });
 
   describe('Translate by Language', () => {
     it('should Clear all Filters & Sorts', () => {
@@ -544,7 +584,10 @@ describe('Example 10 - GraphQL Grid', () => {
         .click({ force: true });
     });
 
-    it('should switch locale to French', () => {
+    it('should switch locale from English to French', () => {
+      cy.get('[data-test=selected-locale]')
+        .should('contain', 'en.json');
+
       cy.get('[data-test=language-button]')
         .click();