fix(filters): slider filter setValues really change input value (#621)

Author: ghiscoding

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);

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();
     }
   }
 

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,19 +129,18 @@ 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');
     }
   }
 
   /**
    * 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) {