From 212c275c7f3303b3462296d03e748b73760c30d6 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Mon, 2 Nov 2020 08:00:36 -0500 Subject: [PATCH] fix(filters): slider filter setValues really change input value (#621) --- .../filters/__tests__/sliderFilter.spec.ts | 4 +-- .../filters/compoundSliderFilter.ts | 11 ++++-- .../angular-slickgrid/filters/sliderFilter.ts | 34 +++++++++++-------- 3 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/sliderFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/sliderFilter.spec.ts index 281fd4aa9..e15a4cd3d 100644 --- a/src/app/modules/angular-slickgrid/filters/__tests__/sliderFilter.spec.ts +++ b/src/app/modules/angular-slickgrid/filters/__tests__/sliderFilter.spec.ts @@ -63,7 +63,7 @@ describe('SliderFilter', () => { filter.init(filterArguments); filter.setValues(['2']); - const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration'); + const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input'); filterElm.dispatchEvent(new CustomEvent('change')); expect(spyCallback).toHaveBeenLastCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['2'], shouldTriggerQuery: true }); @@ -74,7 +74,7 @@ describe('SliderFilter', () => { filter.init(filterArguments); filter.setValues(3); - const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration'); + const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input'); const mockEvent = new Event('change'); Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: { value: '13' } }); filterElm.dispatchEvent(mockEvent); diff --git a/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts index b9b2464e3..02af1b8ec 100644 --- a/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts +++ b/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts @@ -41,6 +41,11 @@ export class CompoundSliderFilter implements Filter { constructor(protected translate: TranslateService) { } + /** Getter for the Filter Operator */ + get columnFilter(): ColumnFilter { + return this.columnDef && this.columnDef.filter || {}; + } + /** Getter to know what would be the default operator when none is specified */ get defaultOperator(): OperatorType | OperatorString { return OperatorType.empty; @@ -68,7 +73,7 @@ export class CompoundSliderFilter implements Filter { /** Getter for the Filter Operator */ get operator(): OperatorType | OperatorString { - return this._operator || this.defaultOperator; + return this._operator || this.columnFilter.operator || this.defaultOperator; } /** Setter for the Filter Operator */ @@ -149,8 +154,8 @@ export class CompoundSliderFilter implements Filter { * destroy the filter */ destroy() { - if (this.$filterElm) { - this.$filterElm.off('input change').remove(); + if (this.$filterInputElm) { + this.$filterInputElm.off('input change').remove(); } } diff --git a/src/app/modules/angular-slickgrid/filters/sliderFilter.ts b/src/app/modules/angular-slickgrid/filters/sliderFilter.ts index 65e2a796e..d8967c210 100644 --- a/src/app/modules/angular-slickgrid/filters/sliderFilter.ts +++ b/src/app/modules/angular-slickgrid/filters/sliderFilter.ts @@ -23,6 +23,8 @@ export class SliderFilter implements Filter { private _elementRangeInputId: string; private _elementRangeOutputId: string; private $filterElm: any; + private $filterInputElm: any; + private $filterNumberElm: any; grid: any; searchTerms: SearchTerm[]; columnDef: Column; @@ -86,7 +88,7 @@ export class SliderFilter implements Filter { // step 3, subscribe to the change event and run the callback when that happens // also add/remove "filled" class for styling purposes - this.$filterElm.change((e: any) => { + this.$filterInputElm.change((e: any) => { const value = e && e.target && e.target.value; this._currentValue = +value; @@ -105,7 +107,7 @@ export class SliderFilter implements Filter { // if user chose to display the slider number on the right side, then update it every time it changes // we need to use both "input" and "change" event to be all cross-browser if (!this.filterParams.hideSliderNumber) { - this.$filterElm.on('input change', (e: { target: HTMLInputElement }) => { + this.$filterInputElm.on('input change', (e: { target: HTMLInputElement }) => { const value = e && e.target && e.target.value; if (value !== undefined && value !== null) { const elements = document.getElementsByClassName(this._elementRangeOutputId); @@ -127,10 +129,9 @@ export class SliderFilter implements Filter { this.searchTerms = []; const clearedValue = this.filterParams.hasOwnProperty('sliderStartValue') ? this.filterParams.sliderStartValue : DEFAULT_MIN_VALUE; this._currentValue = +clearedValue; - this.$filterElm.children('input').val(clearedValue); - this.$filterElm.children('div.input-group-addon.input-group-append').children().html(clearedValue); - this.$filterElm.val(clearedValue); - this.$filterElm.trigger('change'); + this.$filterInputElm.val(clearedValue); + this.$filterNumberElm.html(clearedValue); + this.$filterInputElm.trigger('change'); } } @@ -138,8 +139,8 @@ export class SliderFilter implements Filter { * destroy the filter */ destroy() { - if (this.$filterElm) { - this.$filterElm.off('change').remove(); + if (this.$filterInputElm) { + this.$filterInputElm.off('change').remove(); } } @@ -154,10 +155,11 @@ export class SliderFilter implements Filter { /** Set value(s) on the DOM element */ setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) { if (Array.isArray(values)) { - this.$filterElm.val(values[0]); + this.$filterInputElm.val(`${values[0]}`); + this.$filterNumberElm.html(`${values[0]}`); this._currentValue = +values[0]; } else if (values) { - this.$filterElm.val(values); + this.$filterInputElm.val(values); this._currentValue = +values; } @@ -207,10 +209,10 @@ export class SliderFilter implements Filter { * @param searchTerm optional preset search terms */ private createDomElement(filterTemplate: string, searchTerm?: SearchTerm) { - const fieldId = this.columnDef && this.columnDef.id; + const columnId = this.columnDef && this.columnDef.id; const minValue = this.filterProperties.hasOwnProperty('minValue') ? this.filterProperties.minValue : DEFAULT_MIN_VALUE; const startValue = this.filterParams.hasOwnProperty('sliderStartValue') ? this.filterParams.sliderStartValue : minValue; - const $headerElm = this.grid.getHeaderRowColumn(fieldId); + const $headerElm = this.grid.getHeaderRowColumn(columnId); $($headerElm).empty(); // create the DOM element & add an ID and filter class @@ -224,9 +226,11 @@ export class SliderFilter implements Filter { } this._currentValue = +searchTermInput; - $filterElm.children('input').val(searchTermInput); - $filterElm.children('div.input-group-addon.input-group-append').children().html(searchTermInput); - $filterElm.data('columnId', fieldId); + this.$filterInputElm = $filterElm.children('input'); + this.$filterNumberElm = $filterElm.children('div.input-group-addon.input-group-append').children(); + this.$filterInputElm.val(searchTermInput); + this.$filterNumberElm.html(searchTermInput); + $filterElm.data('columnId', columnId); // if there's a search term, we will add the "filled" class for styling purposes if (searchTerm) {