diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts new file mode 100644 index 000000000..be1f767b7 --- /dev/null +++ b/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts @@ -0,0 +1,276 @@ + +import { TestBed } from '@angular/core/testing'; +import { TranslateService, TranslateModule } from '@ngx-translate/core'; +import { Column, FilterArguments, GridOption, FieldType } from '../../models'; +import { Filters } from '..'; +import { CompoundDateFilter } from '../compoundDateFilter'; + +const containerId = 'demo-container'; + +// define a
container to simulate the grid container +const template = `
`; + +const gridOptionMock = { + enableFiltering: true, + enableFilterTrimWhiteSpace: true, +} as GridOption; + +const gridStub = { + getOptions: () => gridOptionMock, + getColumns: jest.fn(), + getHeaderRowColumn: jest.fn(), + render: jest.fn(), +}; + +describe('CompoundDateFilter', () => { + let divContainer: HTMLDivElement; + let filter: CompoundDateFilter; + let filterArguments: FilterArguments; + let spyGetHeaderRow; + let mockColumn: Column; + let translate: TranslateService; + + beforeEach(() => { + divContainer = document.createElement('div'); + divContainer.innerHTML = template; + document.body.appendChild(divContainer); + spyGetHeaderRow = jest.spyOn(gridStub, 'getHeaderRowColumn').mockReturnValue(divContainer); + + mockColumn = { id: 'finish', field: 'finish', filterable: true, outputType: FieldType.dateIso, filter: { model: Filters.compoundDate, operator: '>' } }; + filterArguments = { + grid: gridStub, + columnDef: mockColumn, + callback: jest.fn() + }; + + TestBed.configureTestingModule({ + providers: [], + imports: [TranslateModule.forRoot()] + }); + translate = TestBed.get(TranslateService); + + translate.setTranslation('en', { + CONTAINS: 'Contains', + EQUALS: 'Equals', + ENDS_WITH: 'Ends With', + STARTS_WITH: 'Starts With', + }); + translate.setTranslation('fr', { + CONTAINS: 'Contient', + EQUALS: 'Égale', + ENDS_WITH: 'Se termine par', + STARTS_WITH: 'Commence par', + }); + translate.setDefaultLang('en'); + + filter = new CompoundDateFilter(translate); + }); + + afterEach(() => { + filter.destroy(); + }); + + it('should throw an error when trying to call init without any arguments', () => { + expect(() => filter.init(null)).toThrowError('[Angular-SlickGrid] A filter must always have an "init()" with valid arguments.'); + }); + + it('should initialize the filter', () => { + filter.init(filterArguments); + const filterCount = divContainer.querySelectorAll('.form-group.search-filter.filter-finish').length; + + expect(spyGetHeaderRow).toHaveBeenCalled(); + expect(filterCount).toBe(1); + }); + + it('should have a placeholder when defined in its column definition', () => { + const testValue = 'test placeholder'; + mockColumn.filter.placeholder = testValue; + + filter.init(filterArguments); + const filterElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + + expect(filterElm.placeholder).toBe(testValue); + }); + + it('should be able to retrieve default flatpickr options through the Getter', () => { + filter.init(filterArguments); + + expect(filter.flatInstance).toBeTruthy(); + expect(filter.flatpickrOptions).toEqual({ + altFormat: 'Y-m-d', + altInput: true, + closeOnSelect: true, + dateFormat: 'Y-m-d', + defaultDate: '', + locale: 'en', + onChange: expect.anything(), + wrap: true, + }); + }); + + it('should be able to call "setValues" and have that value set in the picker', () => { + const mockDate = '2001-01-02T16:02:02.239Z'; + filter.init(filterArguments); + filter.setValues(mockDate); + expect(filter.currentDate).toEqual(mockDate); + }); + + it('should be able to call "setValues" as an array and have that value set in the picker', () => { + const mockDate = '2001-01-02T16:02:02.239Z'; + filter.init(filterArguments); + filter.setValues([mockDate]); + expect(filter.currentDate).toEqual(mockDate); + }); + + it('should trigger input change event and expect the callback to be called with the date provided in the input', () => { + mockColumn.filter.filterOptions = { allowInput: true }; // change to allow input value only for testing purposes + mockColumn.filter.operator = '>'; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + filterInputElm.value = '2001-01-02T16:02:02.239Z'; + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(spyCallback).toHaveBeenCalledWith(undefined, { + columnDef: mockColumn, operator: '>', searchTerms: ['2001-01-02'], shouldTriggerQuery: true + }); + }); + + it('should pass a different operator then trigger an input change event and expect the callback to be called with the date provided in the input', () => { + mockColumn.filter.filterOptions = { allowInput: true }; // change to allow input value only for testing purposes + mockColumn.filter.operator = '>'; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + filterInputElm.value = '2001-01-02T16:02:02.239Z'; + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: '>', searchTerms: ['2001-01-02'], shouldTriggerQuery: true }); + }); + + it('should create the input filter with a default search term when passed as a filter argument', () => { + filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z']; + mockColumn.filter.operator = '<='; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + + filterInputElm.focus(); + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(filter.currentDate).toBe('2000-01-01T05:00:00.000Z'); + expect(filterInputElm.value).toBe('2000-01-01'); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true }); + }); + + it('should trigger an operator change event and expect the callback to be called with the searchTerms and operator defined', () => { + filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z']; + mockColumn.filter.operator = '>'; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterSelectElm = divContainer.querySelector('.search-filter.filter-finish select'); + + filterSelectElm.value = '<='; + filterSelectElm.dispatchEvent(new Event('change')); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true }); + }); + + it('should work with different locale when locale is changed', () => { + translate.use('fr-CA'); + filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z']; + mockColumn.filter.operator = '<='; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + + filterInputElm.focus(); + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(filter.currentDate).toBe('2000-01-01T05:00:00.000Z'); + expect(filterInputElm.value).toBe('2000-01-01'); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true }); + }); + + 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'); + + filter.init(filterArguments); + filter.clear(); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterInputElm.value).toBe(''); + expect(filterFilledElms.length).toBe(0); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true }); + }); + + it('should trigger a callback with the clear filter but without querying when when calling the "clear" method with False as argument', () => { + filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z']; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + filter.clear(false); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterInputElm.value).toBe(''); + expect(filterFilledElms.length).toBe(0); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false }); + }); + + it('should have a value with date & time in the picker when "enableTime" option is set and we trigger a change', () => { + mockColumn.filter.filterOptions = { enableTime: true, allowInput: true }; // change to allow input value only for testing purposes + mockColumn.outputType = FieldType.dateTimeIsoAmPm; + mockColumn.filter.operator = '>'; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + filterInputElm.value = '2001-01-02T16:02:02.000Z'; + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(filter.currentDate.toISOString()).toBe('2001-01-02T16:02:02.000Z'); + expect(filterInputElm.value).toBe('2001-01-02 11:02:02 AM'); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { + columnDef: mockColumn, operator: '>', searchTerms: ['2001-01-02'], shouldTriggerQuery: true + }); + }); + + it('should have a value with date & time in the picker when using no "outputType" which will default to UTC date', () => { + mockColumn.outputType = null; + filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z']; + mockColumn.filter.operator = '<='; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + + filterInputElm.focus(); + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(filter.currentDate).toBe('2000-01-01T05:00:00.000Z'); + expect(filterInputElm.value).toBe('2000-01-01T05:00:00.000Z'); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true }); + }); +}); diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts index a130a0b41..8a9f235c4 100644 --- a/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts +++ b/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts @@ -1,7 +1,7 @@ import { TestBed } from '@angular/core/testing'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; -import { Column, FilterArguments, GridOption } from '../../models'; +import { Column, FilterArguments, GridOption, FieldType } from '../../models'; import { Filters } from '..'; import { DateRangeFilter } from '../dateRangeFilter'; @@ -141,7 +141,7 @@ describe('DateRangeFilter', () => { }); it('should pass a different operator then trigger an input change event and expect the callback to be called with the date provided in the input', () => { - mockColumn.filter.filterOptions = { allowInput: true }; // change to allow input value only for testing purposes + mockColumn.filter.filterOptions = { allowInput: true, enableTime: false }; // change to allow input value only for testing purposes mockColumn.filter.operator = 'RangeExclusive'; const spyCallback = jest.spyOn(filterArguments, 'callback'); @@ -235,4 +235,43 @@ describe('DateRangeFilter', () => { expect(filterFilledElms.length).toBe(0); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false }); }); + + it('should have a value with date & time in the picker when "enableTime" option is set and we trigger a change', () => { + mockColumn.filter.filterOptions = { enableTime: true, allowInput: true }; // change to allow input value only for testing purposes + mockColumn.outputType = FieldType.dateTimeIsoAmPm; + mockColumn.filter.operator = '>'; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + filterInputElm.value = '2000-01-01T05:00:00.000Z to 2000-01-31T05:00:00.000Z'; + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.flatpickr.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(filter.currentDates.map((date) => date.toISOString())).toEqual(['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']); + expect(filterInputElm.value).toBe('2000-01-01 12:00:00 AM to 2000-01-31 12:00:00 AM'); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { + columnDef: mockColumn, operator: '>', searchTerms: ['2000-01-01 12:00:00 am', '2000-01-31 12:00:00 am'], shouldTriggerQuery: true + }); + }); + + it('should have a value with date & time in the picker when using no "outputType" which will default to UTC date', () => { + mockColumn.outputType = null; + filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']; + mockColumn.filter.operator = '<='; + const spyCallback = jest.spyOn(filterArguments, 'callback'); + + filter.init(filterArguments); + const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + + filterInputElm.focus(); + filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); + const filterFilledElms = divContainer.querySelectorAll('.flatpickr.search-filter.filter-finish.filled'); + + expect(filterFilledElms.length).toBe(1); + expect(filter.currentDates).toEqual(['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']); + expect(filterInputElm.value).toBe('2000-01-01T05:00:00.000Z to 2000-01-31T05:00:00.000Z'); + expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01', '2000-01-31'], shouldTriggerQuery: true }); + }); }); diff --git a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts index ca9524e4e..7c85b1087 100644 --- a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts +++ b/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts @@ -1,3 +1,4 @@ +import { Optional } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { mapFlatpickrDateFormatWithFieldType } from '../services/utilities'; import { @@ -14,7 +15,6 @@ import { SearchTerm, } from './../models/index'; import Flatpickr from 'flatpickr'; -import { Optional } from '@angular/core'; import { BaseOptions as FlatpickrBaseOptions } from 'flatpickr/dist/types/options'; // use Flatpickr from import or 'require', whichever works first @@ -26,6 +26,8 @@ declare var $: any; export class CompoundDateFilter implements Filter { private _clearFilterTriggered = false; + private _currentDate: Date; + private _flatpickrOptions: FlatpickrOption; private _shouldTriggerQuery = true; private $filterElm: any; private $filterInputElm: any; @@ -50,6 +52,16 @@ export class CompoundDateFilter implements Filter { return this.columnDef && this.columnDef.filter || {}; } + /** Getter for the Current Dates selected */ + get currentDate(): Date { + return this._currentDate; + } + + /** Getter for the Flatpickr Options */ + get flatpickrOptions(): FlatpickrOption { + return this._flatpickrOptions || {}; + } + /** Setter for the Filter Operator */ set operator(op: OperatorType | OperatorString) { this._operator = op; @@ -57,36 +69,37 @@ export class CompoundDateFilter implements Filter { /** Getter for the Filter Operator */ get operator(): OperatorType | OperatorString { - return this._operator || OperatorType.empty; + return this._operator || this.columnFilter.operator || OperatorType.empty; } /** * Initialize the Filter */ init(args: FilterArguments) { - if (args) { - this.grid = args.grid; - this.callback = args.callback; - this.columnDef = args.columnDef; - this.operator = args.operator || ''; - this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || []; - - // date input can only have 1 search term, so we will use the 1st array index if it exist - const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : ''; - - // step 1, create the DOM Element of the filter which contain the compound Operator+Input - // and initialize it if searchTerm is filled - this.$filterElm = this.createDomElement(searchTerm); - - // step 3, subscribe to the keyup event and run the callback when that happens - // also add/remove "filled" class for styling purposes - this.$filterInputElm.keyup((e: any) => { - this.onTriggerEvent(e); - }); - this.$selectOperatorElm.change((e: any) => { - this.onTriggerEvent(e); - }); + if (!args) { + throw new Error('[Angular-SlickGrid] A filter must always have an "init()" with valid arguments.'); } + this.grid = args.grid; + this.callback = args.callback; + this.columnDef = args.columnDef; + this.operator = args.operator || ''; + this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || []; + + // date input can only have 1 search term, so we will use the 1st array index if it exist + const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : ''; + + // step 1, create the DOM Element of the filter which contain the compound Operator+Input + // and initialize it if searchTerm is filled + this.$filterElm = this.createDomElement(searchTerm); + + // step 3, subscribe to the keyup event and run the callback when that happens + // also add/remove "filled" class for styling purposes + this.$filterInputElm.keyup((e: any) => { + this.onTriggerEvent(e); + }); + this.$selectOperatorElm.change((e: any) => { + this.onTriggerEvent(e); + }); } /** @@ -114,9 +127,13 @@ export class CompoundDateFilter implements Filter { /** * Set value(s) on the DOM element */ - setValues(values: SearchTerm[]) { + setValues(values: SearchTerm | SearchTerm[]) { if (this.flatInstance && values && Array.isArray(values)) { + this._currentDate = values[0] as Date; this.flatInstance.setDate(values[0]); + } else if (this.flatInstance && values && values) { + this._currentDate = values as Date; + this.flatInstance.setDate(values); } } @@ -131,6 +148,11 @@ export class CompoundDateFilter implements Filter { currentLocale = currentLocale.substring(0, 2); } + // if we are preloading searchTerms, we'll keep them for reference + if (searchTerm) { + this._currentDate = searchTerm as Date; + } + const pickerOptions: FlatpickrOption = { defaultDate: (searchTerm as string) || '', altInput: true, @@ -141,6 +163,7 @@ export class CompoundDateFilter implements Filter { locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en', onChange: (selectedDates: Date[] | Date, dateStr: string, instance: any) => { this._currentValue = dateStr; + this._currentDate = Array.isArray(selectedDates) && selectedDates[0]; // when using the time picker, we can simulate a keyup event to avoid multiple backend request // since backend request are only executed after user start typing, changing the time should be treated the same way @@ -152,21 +175,20 @@ export class CompoundDateFilter implements Filter { } }; - // add the time picker when format is UTC (Z) or has the 'h' (meaning hours) if (outputFormat && (outputFormat === 'Z' || outputFormat.toLowerCase().includes('h'))) { pickerOptions.enableTime = true; } // merge options with optional user's custom options - const pickerMergedOptions: Partial = { ...pickerOptions, ...(this.columnFilter.filterOptions as FlatpickrBaseOptions) }; + this._flatpickrOptions = { ...pickerOptions, ...(this.columnFilter.filterOptions as FlatpickrOption) }; let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : ''; if (this.columnFilter && this.columnFilter.placeholder) { placeholder = this.columnFilter.placeholder; } const $filterInputElm: any = $(`
`); - this.flatInstance = ($filterInputElm[0] && typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(pickerMergedOptions) : Flatpickr($filterInputElm, pickerMergedOptions as Partial); + this.flatInstance = ($filterInputElm[0] && typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(this._flatpickrOptions) : Flatpickr($filterInputElm, this._flatpickrOptions as unknown as Partial); return $filterInputElm; } @@ -231,8 +253,9 @@ export class CompoundDateFilter implements Filter { } // if there's a search term, we will add the "filled" class for styling purposes - if (searchTerm) { - $filterContainerElm.addClass('filled'); + if (searchTerm && searchTerm !== '') { + this.$filterInputElm.addClass('filled'); + this._currentDate = searchTerm as Date; this._currentValue = searchTerm as string; } @@ -244,15 +267,16 @@ export class CompoundDateFilter implements Filter { return $filterContainerElm; } - private loadFlatpickrLocale(locale: string) { - // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/ - if (this.gridOptions && this.gridOptions.params && this.gridOptions.params.flapickrLocale) { - return this.gridOptions.params.flapickrLocale; - } else if (locale !== 'en') { - const localeDefault: any = require(`flatpickr/dist/l10n/${locale}.js`).default; - return (localeDefault && localeDefault[locale]) ? localeDefault[locale] : 'en'; + /** Load a different set of locales for Flatpickr to be localized */ + 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'; } - return 'en'; + return locales; } private onTriggerEvent(e: Event | undefined) { @@ -268,16 +292,4 @@ export class CompoundDateFilter implements Filter { this._clearFilterTriggered = false; this._shouldTriggerQuery = true; } - - private hide() { - if (this.flatInstance && typeof this.flatInstance.close === 'function') { - this.flatInstance.close(); - } - } - - private show() { - if (this.flatInstance && typeof this.flatInstance.open === 'function') { - this.flatInstance.open(); - } - } } diff --git a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts b/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts index 0a8f68205..ac3042d7b 100644 --- a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts +++ b/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts @@ -119,7 +119,7 @@ export class DateRangeFilter implements Filter { setValues(searchTerms: SearchTerm[]) { let pickerValues = []; - // get the slider values, if it's a string with the "..", we'll do the split else we'll use the array of search terms + // get the picker values, if it's a string with the "..", we'll do the split else we'll use the array of search terms if (typeof searchTerms === 'string' || (Array.isArray(searchTerms) && typeof searchTerms[0] === 'string') && (searchTerms[0] as string).indexOf('..') > 0) { pickerValues = (typeof searchTerms === 'string') ? [(searchTerms as string)] : (searchTerms[0] as string).split('..'); } else if (Array.isArray(searchTerms)) { @@ -146,7 +146,7 @@ export class DateRangeFilter implements Filter { let pickerValues = []; - // get the slider values, if it's a string with the "..", we'll do the split else we'll use the array of search terms + // get the picker values, if it's a string with the "..", we'll do the split else we'll use the array of search terms if (typeof searchTerms === 'string' || (Array.isArray(searchTerms) && typeof searchTerms[0] === 'string') && (searchTerms[0] as string).indexOf('..') > 0) { pickerValues = (typeof searchTerms === 'string') ? [(searchTerms as string)] : (searchTerms[0] as string).split('..'); } else if (Array.isArray(searchTerms)) { @@ -172,7 +172,7 @@ export class DateRangeFilter implements Filter { onChange: (selectedDates: Date[] | Date, dateStr: string, instance: any) => { if (Array.isArray(selectedDates)) { this._currentDates = selectedDates; - const outFormat = mapMomentDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso); + const outFormat = mapMomentDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateIso); this._currentDateStrings = selectedDates.map(date => moment(date).format(outFormat)); this._currentValue = this._currentDateStrings.join('..'); }