fix(filter): Date Filters using Flatpickr throw error w/invalid locale

- fixes #346
- when using a locale that Flatpickr doesn't support, like "ua", it should use "en" (English) as default locale.
  - it will display a console warning that this locale is not supported but not throw an error (unless user set a different locale, see next)
  - user can choose to override the locale by setting locale to use via `filterOptions: { locale: 'en' }`

Author: ghiscoding-SE

src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts

@@ -245,6 +245,28 @@ describe('CompoundDateFilter', () => {
     expect(selectonOptionElms[0].textContent).toBe('janvier');
   });
 
+  it('should throw an error and use English locale when user tries to load an unsupported Flatpickr locale', () => {
+    translate.use('zx');
+    const consoleSpy = jest.spyOn(global.console, 'warn').mockReturnValue();
+
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    mockColumn.filter.operator = '<=';
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const calendarElm = document.body.querySelector<HTMLDivElement>('.flatpickr-calendar');
+    const selectonOptionElms = calendarElm.querySelectorAll<HTMLSelectElement>(' .flatpickr-monthDropdown-months option');
+
+    filter.show();
+
+    filterInputElm.focus();
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+
+    expect(consoleSpy).toHaveBeenCalledWith(expect.toInclude('[Angular-Slickgrid - CompoundDate Filter] It seems that "zx" is not a locale supported by Flatpickr'));
+    expect(selectonOptionElms.length).toBe(12);
+    expect(selectonOptionElms[0].textContent).toBe('January');
+  });
+
   it('should trigger a callback with the clear filter set when calling the "clear" method', () => {
     filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
     const spyCallback = jest.spyOn(filterArguments, 'callback');

src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts

@@ -235,6 +235,28 @@ describe('DateRangeFilter', () => {
     expect(selectonOptionElms[0].textContent).toBe('janvier');
   });
 
+  it('should throw an error and use English locale when user tries to load an unsupported Flatpickr locale', () => {
+    translate.use('zx');
+    const consoleSpy = jest.spyOn(global.console, 'warn').mockReturnValue();
+
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z'];
+    mockColumn.filter.operator = 'RangeInclusive';
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const calendarElm = document.body.querySelector<HTMLDivElement>('.flatpickr-calendar');
+    const selectonOptionElms = calendarElm.querySelectorAll<HTMLSelectElement>(' .flatpickr-monthDropdown-months option');
+
+    filter.show();
+
+    filterInputElm.focus();
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+
+    expect(consoleSpy).toHaveBeenCalledWith(expect.toInclude('[Angular-Slickgrid - DateRange Filter] It seems that "zx" is not a locale supported by Flatpickr'));
+    expect(selectonOptionElms.length).toBe(12);
+    expect(selectonOptionElms[0].textContent).toBe('January');
+  });
+
   it('should trigger a callback with the clear filter set when calling the "clear" method', () => {
     filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z'];
     const spyCallback = jest.spyOn(filterArguments, 'callback');

src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts

@@ -167,7 +167,10 @@ export class CompoundDateFilter implements Filter {
   private buildDatePickerInput(searchTerm?: SearchTerm) {
     const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso);
     const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateUtc);
-    let currentLocale = this.translate && this.translate.currentLang || 'en';
+    const userFilterOptions = (this.columnFilter && this.columnFilter.filterOptions || {}) as FlatpickrOption;
+
+    // get current locale, if user defined a custom locale just use or get it the Translate Service if it exist else just use English
+    let currentLocale = (userFilterOptions && userFilterOptions.locale) || (this.translate && this.translate.currentLang) || 'en';
     if (currentLocale && currentLocale.length > 2) {
       currentLocale = currentLocale.substring(0, 2);
     }
@@ -205,7 +208,7 @@ export class CompoundDateFilter implements Filter {
     }
 
     // merge options with optional user's custom options
-    this._flatpickrOptions = { ...pickerOptions, ...(this.columnFilter.filterOptions as FlatpickrOption) };
+    this._flatpickrOptions = { ...pickerOptions, ...userFilterOptions };
 
     let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
     if (this.columnFilter && this.columnFilter.placeholder) {
@@ -295,10 +298,16 @@ export class CompoundDateFilter implements Filter {
   private loadFlatpickrLocale(language: string) {
     let locales = 'en';
 
-    if (language !== 'en') {
-      // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/
-      const localeDefault: any = require(`flatpickr/dist/l10n/${language}.js`).default;
-      locales = (localeDefault && localeDefault[language]) ? localeDefault[language] : 'en';
+    try {
+      if (language !== 'en') {
+        // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/
+        const localeDefault: any = require(`flatpickr/dist/l10n/${language}.js`).default;
+        locales = (localeDefault && localeDefault[language]) ? localeDefault[language] : 'en';
+      }
+    } catch (e) {
+      console.warn(`[Angular-Slickgrid - CompoundDate Filter] It seems that "${language}" is not a locale supported by Flatpickr, we will use "en" instead. `
+        + `To avoid seeing this message, you can specifically set "filter: { filterOptions: { locale: 'en' } }" in your column definition.`);
+      return 'en';
     }
     return locales;
   }

src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts

@@ -169,7 +169,10 @@ export class DateRangeFilter implements Filter {
     const columnId = this.columnDef && this.columnDef.id;
     const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso);
     const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateUtc);
-    let currentLocale = this.translate && this.translate.currentLang || 'en';
+    const userFilterOptions = (this.columnFilter && this.columnFilter.filterOptions || {}) as FlatpickrOption;
+
+    // get current locale, if user defined a custom locale just use or get it the Translate Service if it exist else just use English
+    let currentLocale = (userFilterOptions && userFilterOptions.locale) || (this.translate && this.translate.currentLang) || 'en';
     if (currentLocale.length > 2) {
       currentLocale = currentLocale.substring(0, 2);
     }
@@ -220,7 +223,7 @@ export class DateRangeFilter implements Filter {
     }
 
     // merge options with optional user's custom options
-    this._flatpickrOptions = { ...pickerOptions, ...(this.columnFilter.filterOptions as FlatpickrOption) };
+    this._flatpickrOptions = { ...pickerOptions, ...userFilterOptions };
 
     let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
     if (this.columnFilter && this.columnFilter.placeholder) {
@@ -272,10 +275,16 @@ export class DateRangeFilter implements Filter {
   private loadFlatpickrLocale(language: string) {
     let locales = 'en';
 
-    if (language !== 'en') {
-      // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/
-      const localeDefault: any = require(`flatpickr/dist/l10n/${language}.js`).default;
-      locales = (localeDefault && localeDefault[language]) ? localeDefault[language] : 'en';
+    try {
+      if (language !== 'en') {
+        // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/
+        const localeDefault: any = require(`flatpickr/dist/l10n/${language}.js`).default;
+        locales = (localeDefault && localeDefault[language]) ? localeDefault[language] : 'en';
+      }
+    } catch (e) {
+      console.warn(`[Angular-Slickgrid - DateRange Filter] It seems that "${language}" is not a locale supported by Flatpickr, we will use "en" instead. `
+        + `To avoid seeing this message, you can specifically set "filter: { filterOptions: { locale: 'en' } }" in your column definition.`);
+      return 'en';
     }
     return locales;
   }