fix(presets): Multiple Select Filter Grid Presets values should be shown

- our filter conditions assume that values will always be treated as string when filtering but the grid presets was not doing the same assumptions, we can cast both the option value and the search term to string while comparing on what to show as pre-selected items

Author: ghiscoding

package.json

@@ -118,18 +118,18 @@
   },
   "devDependencies": {
     "@angular-builders/jest": "^7.4.4",
-    "@angular-devkit/build-angular": "~0.1102.4",
-    "@angular/animations": "^11.2.5",
-    "@angular/cli": "^11.2.4",
-    "@angular/common": "^11.2.5",
-    "@angular/compiler": "^11.2.5",
-    "@angular/compiler-cli": "^11.2.5",
-    "@angular/core": "^11.2.5",
-    "@angular/forms": "^11.2.5",
-    "@angular/language-service": "^11.2.5",
-    "@angular/platform-browser": "^11.2.5",
-    "@angular/platform-browser-dynamic": "^11.2.5",
-    "@angular/router": "^11.2.5",
+    "@angular-devkit/build-angular": "~0.1102.5",
+    "@angular/animations": "^11.2.6",
+    "@angular/cli": "^11.2.5",
+    "@angular/common": "^11.2.6",
+    "@angular/compiler": "^11.2.6",
+    "@angular/compiler-cli": "^11.2.6",
+    "@angular/core": "^11.2.6",
+    "@angular/forms": "^11.2.6",
+    "@angular/language-service": "^11.2.6",
+    "@angular/platform-browser": "^11.2.6",
+    "@angular/platform-browser-dynamic": "^11.2.6",
+    "@angular/router": "^11.2.6",
     "@ng-select/ng-select": "^6.1.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
@@ -174,7 +174,7 @@
     "tslib": "^2.1.0",
     "tslint": "~6.1.0",
     "typescript": "4.0.7",
-    "uglify-js": "^3.12.5",
+    "uglify-js": "^3.13.2",
     "vinyl-paths": "^2.1.0",
     "yargs": "^16.2.0",
     "zone.js": "~0.10.2"

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

@@ -382,7 +382,7 @@ export class SelectFilter implements Filter {
             throw new Error(`[select-filter] A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example:: { filter: model: Filters.multipleSelect, collection: [ { value: '1', label: 'One' } ]')`);
           }
           const labelKey = (option.labelKey || option[this.labelName]) as string;
-          const selected = (searchTerms.findIndex((term) => term === option[this.valueName]) >= 0) ? 'selected' : '';
+          const selected = (searchTerms.findIndex((term) => `${term}` === `${option[this.valueName]}`) >= 0) ? 'selected' : '';
           const labelText = ((option.labelKey || this.enableTranslateLabel) && labelKey && isEnableTranslate) ? this.translate && this.translate.currentLang && this.translate.instant(labelKey || ' ') : labelKey;
           let prefixText = option[this.labelPrefixName] || '';
           let suffixText = option[this.labelSuffixName] || '';

test/cypress/integration/example04.spec.js

@@ -15,7 +15,11 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
     const presetDurationValues = [98, 10];
     const presetUsDateShort = '04/20/25';
 
-    it('should have "Duration" fields within the inclusive range of the preset filters', () => {
+    it('should have "Duration" fields within the inclusive range of the preset filters and be displayed in the Filter itself', () => {
+      cy.get('.ms-filter.search-filter.filter-duration.filled')
+        .find('.ms-choice')
+        .contains('98, 10');
+
       cy.get('#grid4')
         .find('.slick-row')
         .each(($row) => {
@@ -49,6 +53,16 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
         });
     });
 
+    it('should have some metrics shown in the grid footer well below 1500 items', () => {
+      cy.get('#slickGridContainer-grid4')
+        .find('.slick-custom-footer')
+        .find('.right-footer')
+        .should($span => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).not.to.eq('1500 of 1500 items');
+        });
+    });
+
     it('should expect the grid to be sorted by "Duration" descending and "% Complete" ascending', () => {
       cy.get('#grid4')
         .get('.slick-header-column:nth(2)')
@@ -69,9 +83,8 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
         .children('.slick-cell:nth(2)')
         .should('contain', '98');
 
-      // cy.get('.slick-viewport-top.slick-viewport-left')
-      //   .scrollTo('bottom')
-      //   .wait(50);
+      cy.get('[data-test="scroll-bottom-btn"')
+        .click();
 
       cy.get('.slick-row')
         .last()
@@ -156,8 +169,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
         .should($span => {
           const text = removeExtraSpaces($span.text()); // remove all white spaces
           expect(text).to.eq('1500 of 1500 items');
-        })
-      // .contains('1500 of 1500 items')
+        });
     });
 
     it('should expect the grid to be sorted by "Duration" ascending and "Start" descending', () => {

test/cypress/package.json

@@ -10,7 +10,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^6.6.0",
+    "cypress": "^6.8.0",
     "mocha": "^8.3.2",
     "mochawesome": "^6.2.2"
   }