feat(filters): add back Slider Range filter in pure JS

ghiscoding · Nov 8, 2022 · 271da15 · 271da15
1 parent cdcdfc5
commit 271da15
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/app/examples/grid-range.component.ts b/src/app/examples/grid-range.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { CustomInputFilter } from './custom-inputFilter';
 import {
   AngularGridInstance,
@@ -13,6 +15,7 @@ import {
   Metrics,
   MultipleSelectOption,
   OperatorType,
+  SliderRangeOption,
   unsubscribeAllObservables,
 } from '../modules/angular-slickgrid';
 import * as moment from 'moment-mini';
@@ -101,15 +104,18 @@ export class GridRangeComponent implements OnInit, OnDestroy {
       {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', minWidth: 120,
         sortable: true,
+        customTooltip: { position: 'center' },
         formatter: Formatters.progressBar,
         type: FieldType.number,
         filterable: true,
         filter: {
-          model: Filters.slider,
+          model: Filters.sliderRange,
           maxValue: 100, // or you can use the filterOptions as well
           operator: OperatorType.rangeInclusive, // defaults to inclusive
-          params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side
-          filterOptions: { min: 0, step: 5 }
+          filterOptions: {
+            hideSliderNumbers: false, // you can hide/show the slider numbers on both side
+            min: 0, step: 5
+          } as SliderRangeOption
         }
       },
       {
@@ -177,7 +183,8 @@ export class GridRangeComponent implements OnInit, OnDestroy {
           { columnId: 'percentComplete', direction: 'DESC' },
           { columnId: 'duration', direction: 'ASC' },
         ],
-      }
+      },
+      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService()],
     };
 
     // mock a dataset
@@ -229,7 +236,7 @@ export class GridRangeComponent implements OnInit, OnDestroy {
     console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
   }
 
-  refreshMetrics(e: Event, args: any) {
+  refreshMetrics(_e: Event, args: any) {
     if (args && args.current >= 0) {
       setTimeout(() => {
         this.metrics = {

diff --git a/test/cypress/e2e/example25.cy.js b/test/cypress/e2e/example25.cy.js
@@ -75,12 +75,13 @@ describe('Example 25 - Range Filters', { retries: 1 }, () => {
       });
   });
 
-  xit('should change "% Complete" filter range by using the slider left handle (min value) to make it a higher min value and expect all rows to be within new range', () => {
+  it('should change "% Complete" filter range by using the slider left handle (min value) to make it a higher min value and expect all rows to be within new range', () => {
     let newLowest = presetMinComplete;
     let newHighest = presetMaxComplete;
 
-    cy.get('.ui-slider-range')
-      .click('bottom', { force: true });
+    // first input is the lowest range
+    cy.get('.slider-filter-input:nth(0)')
+      .as('range').invoke('val', 10).trigger('change', { force: true });
 
     cy.get('.lowest-range-percentComplete')
       .then(($lowest) => {
@@ -121,9 +122,12 @@ describe('Example 25 - Range Filters', { retries: 1 }, () => {
     cy.get('#grid25')
       .find('.slick-row')
       .each(($row) => {
-        cy.wrap($row)
+        cy.wrap($row, idx)
           .children('.slick-cell:nth(5)')
           .each(($cell) => {
+            if (idx > 8) {
+              return;
+            }
             const value = parseInt($cell.text().trim(), 10);
             if (!isNaN(value)) {
               expect(value >= newMin).to.eq(true);