Merge pull request #500 from ghiscoding/feat/internal-draggable-grouping

Feat/internal draggable grouping

examples/webpack-demo-vanilla-bundle/package.json

@@ -36,25 +36,25 @@
   "devDependencies": {
     "@types/jquery": "^3.5.6",
     "@types/moment": "^2.13.0",
-    "@types/node": "^16.9.0",
+    "@types/node": "^16.9.6",
     "@types/webpack": "^5.28.0",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.2.0",
+    "css-loader": "^6.3.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "5.3.2",
-    "mini-css-extract-plugin": "^2.2.2",
+    "mini-css-extract-plugin": "^2.3.0",
     "rxjs": "^7.3.0",
-    "sass": "^1.39.0",
+    "sass": "^1.42.1",
     "sass-loader": "^12.1.0",
-    "style-loader": "^3.2.1",
-    "ts-loader": "^9.2.5",
+    "style-loader": "^3.3.0",
+    "ts-loader": "^9.2.6",
     "ts-node": "^10.2.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.52.0",
+    "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.0"
+    "webpack-dev-server": "^4.2.1"
   }
-}
+}

package.json

@@ -50,17 +50,17 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.9.0",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "cypress": "^8.3.1",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "cypress": "^8.4.1",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "jest": "^27.1.1",
-    "jest-cli": "^27.1.1",
-    "jest-environment-jsdom": "^27.1.1",
+    "jest": "^27.2.1",
+    "jest-cli": "^27.2.1",
+    "jest-environment-jsdom": "^27.2.0",
     "jest-extended": "^0.11.5",
     "jsdom": "^17.0.0",
     "jsdom-global": "^3.0.2",
@@ -69,9 +69,9 @@
     "mochawesome": "^6.2.2",
     "npm-run-all": "^4.1.5",
     "rxjs": "^7.3.0",
-    "serve": "^12.0.0",
+    "serve": "^12.0.1",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.3"
   },
   "engines": {
     "node": ">=14.15.0",

packages/binding/package.json

@@ -39,11 +39,11 @@
     "not dead"
   ],
   "dependencies": {
-    "dompurify": "^2.3.1"
+    "dompurify": "^2.3.3"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2"
   }
-}
+}

packages/common/package.json

@@ -64,7 +64,7 @@
   "dependencies": {
     "assign-deep": "^1.0.1",
     "dequal": "^2.0.2",
-    "dompurify": "^2.3.1",
+    "dompurify": "^2.3.3",
     "flatpickr": "^4.6.9",
     "jquery": "~3.5.1",
     "jquery-ui-dist": "^1.12.1",
@@ -77,19 +77,19 @@
     "@types/dompurify": "^2.2.3",
     "@types/jquery": "^3.5.6",
     "@types/moment": "^2.13.0",
-    "autoprefixer": "^10.3.4",
+    "autoprefixer": "^10.3.5",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "mini-css-extract-plugin": "^2.2.2",
+    "mini-css-extract-plugin": "^2.3.0",
     "nodemon": "^2.0.12",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.7",
     "postcss-cli": "^8.3.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.39.0"
+    "sass": "^1.42.1"
   },
   "engines": {
     "node": ">=14.15.0",
     "npm": ">=6.14.8"
   }
-}
+}

packages/common/src/filter-conditions/__tests__/stringFilterCondition.spec.ts

@@ -171,4 +171,19 @@ describe('executeStringFilterCondition method', () => {
     const output = executeStringFilterCondition(options, getFilterParsedText(searchTerms));
     expect(output).toBe(false);
   });
+
+  it('should return True when input value contains accent is searchTerms value does not contain accent when "ignoreAccentOnStringFilterAndSort" is set in grid options', () => {
+    const searchTerms = ['jose'];
+    const options = { dataKey: '', operator: 'EQ', cellValue: 'José', fieldType: FieldType.string, ignoreAccentOnStringFilterAndSort: true} as FilterConditionOption;
+    const output = executeStringFilterCondition(options, getFilterParsedText(searchTerms));
+    expect(output).toBe(true);
+  });
+
+  it('should return False when input value contains accent is searchTerms value does not contain accent when "ignoreAccentOnStringFilterAndSort" is not set in grid options', () => {
+    const searchTerms = ['jose'];
+    const options = { dataKey: '', operator: 'EQ', cellValue: 'José', fieldType: FieldType.string, ignoreAccentOnStringFilterAndSort: false} as FilterConditionOption;
+    const output = executeStringFilterCondition(options, getFilterParsedText(searchTerms));
+    expect(output).toBe(false);
+  });
+
 });

packages/common/src/filter-conditions/stringFilterCondition.ts

@@ -15,12 +15,12 @@ export const executeStringFilterCondition: FilterCondition = ((options: FilterCo
   options.cellValue = (options.cellValue === undefined || options.cellValue === null) ? '' : options.cellValue.toString();
 
   // make both the cell value and search value lower for case insensitive comparison
-  const cellValue = options?.ignoreAccentOnStringFilter ? removeAccentFromText(options.cellValue, true) : options.cellValue.toLowerCase();
+  const cellValue = options?.ignoreAccentOnStringFilterAndSort ? removeAccentFromText(options.cellValue, true) : options.cellValue.toLowerCase();
   if (typeof searchValue1 === 'string') {
-    searchValue1 = options?.ignoreAccentOnStringFilter ? removeAccentFromText(searchValue1, true) : searchValue1.toLowerCase();
+    searchValue1 = options?.ignoreAccentOnStringFilterAndSort ? removeAccentFromText(searchValue1, true) : searchValue1.toLowerCase();
   }
   if (typeof searchValue2 === 'string') {
-    searchValue2 = options?.ignoreAccentOnStringFilter ? removeAccentFromText(searchValue2, true) : searchValue2.toLowerCase();
+    searchValue2 = options?.ignoreAccentOnStringFilterAndSort ? removeAccentFromText(searchValue2, true) : searchValue2.toLowerCase();
   }
 
   if (searchValue1 !== undefined && searchValue2 !== undefined) {

packages/common/src/filters/__tests__/compoundDateFilter.spec.ts

@@ -208,6 +208,20 @@ describe('CompoundDateFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the picker input to not have the "filled" css class', () => {
+    const mockDate = '2001-01-02T16:02:02.239Z';
+    filter.init(filterArguments);
+    filter.setValues(mockDate);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-finish .filled') as HTMLInputElement;
+
+    expect(filter.currentDate).toEqual(mockDate);
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-finish .filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should work with different locale when locale is changed', async () => {
     await (await import('flatpickr/dist/l10n/fr')).French;
 

packages/common/src/filters/__tests__/compoundInputFilter.spec.ts

@@ -146,6 +146,18 @@ describe('CompoundInputFilter', () => {
     expect(filterSelectElm.value).toBe('>=');
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues('9');
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-duration .filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-duration .filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should trigger an operator change event and expect the callback to be called with the searchTerms and operator defined', () => {
     mockColumn.type = FieldType.number;
     const spyCallback = jest.spyOn(filterArguments, 'callback');

packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts

@@ -124,6 +124,18 @@ describe('CompoundSliderFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>=', searchTerms: ['9'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues(9);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     const filterArgs = { ...filterArguments, operator: '<=', searchTerms: [3] } as FilterArguments;
 

packages/common/src/filters/__tests__/dateRangeFilter.spec.ts

@@ -194,6 +194,20 @@ describe('DateRangeFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'RangeInclusive', searchTerms: ['2000-01-01', '2000-01-31'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the picker input to not have the "filled" css class', () => {
+    const mockDates = ['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z'];
+    filter.init(filterArguments);
+    filter.setValues(mockDates);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-finish.filled') as HTMLInputElement;
+
+    expect(filter.currentDates).toEqual(mockDates);
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-finish.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should work with different locale when locale is changed', async () => {
     await (await import('flatpickr/dist/l10n/fr')).French;
 

packages/common/src/filters/__tests__/inputFilter.spec.ts

@@ -146,44 +146,56 @@ describe('InputFilter', () => {
       expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['abc'], shouldTriggerQuery: true });
     });
 
+    it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+      filter.init(filterArguments);
+      filter.setValues('9');
+      let filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+
+      expect(filledInputElm).toBeTruthy();
+
+      filter.setValues('');
+      filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+      expect(filledInputElm).toBeFalsy();
+    });
+
     it('should call "setValues" and include an operator and expect the operator to show up in the output search string shown in the filter input text value', () => {
       filter.init(filterArguments);
 
       filter.setValues('abc', '<>');
-      expect(filter.getValue()).toBe('<>abc');
+      expect(filter.getValues()).toBe('<>abc');
 
       filter.setValues('abc', '!=');
-      expect(filter.getValue()).toBe('!=abc');
+      expect(filter.getValues()).toBe('!=abc');
 
       filter.setValues('abc', '=');
-      expect(filter.getValue()).toBe('=abc');
+      expect(filter.getValues()).toBe('=abc');
 
       filter.setValues('abc', '==');
-      expect(filter.getValue()).toBe('==abc');
+      expect(filter.getValues()).toBe('==abc');
 
       filter.setValues(123, '<');
-      expect(filter.getValue()).toBe('<123');
+      expect(filter.getValues()).toBe('<123');
 
       filter.setValues(123, '<=');
-      expect(filter.getValue()).toBe('<=123');
+      expect(filter.getValues()).toBe('<=123');
 
       filter.setValues(123, '>');
-      expect(filter.getValue()).toBe('>123');
+      expect(filter.getValues()).toBe('>123');
 
       filter.setValues(123, '>=');
-      expect(filter.getValue()).toBe('>=123');
+      expect(filter.getValues()).toBe('>=123');
 
       filter.setValues('abc', 'EndsWith');
-      expect(filter.getValue()).toBe('*abc');
+      expect(filter.getValues()).toBe('*abc');
 
       filter.setValues('abc', '*z');
-      expect(filter.getValue()).toBe('*abc');
+      expect(filter.getValues()).toBe('*abc');
 
       filter.setValues('abc', 'StartsWith');
-      expect(filter.getValue()).toBe('abc*');
+      expect(filter.getValues()).toBe('abc*');
 
       filter.setValues('abc', 'a*');
-      expect(filter.getValue()).toBe('abc*');
+      expect(filter.getValues()).toBe('abc*');
     });
   });
 

packages/common/src/filters/__tests__/sliderFilter.spec.ts

@@ -92,6 +92,18 @@ describe('SliderFilter', () => {
     expect(spyCallback).toHaveBeenLastCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['13'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues(9);
+    let filledInputElm = divContainer.querySelector('.search-filter.slider-container.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.slider-container.filter-duration.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     filterArguments.searchTerms = [3];
 

packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts

@@ -129,6 +129,18 @@ describe('SliderRangeFilter', () => {
     expect(spyCallback).toHaveBeenLastCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'RangeInclusive', searchTerms: [3, 84], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues([3, 80]);
+    let filledInputElm = divContainer.querySelector('.search-filter.slider-range-container.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.slider-range-container.filter-duration.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     filterArguments.searchTerms = [3, 80];
 

packages/common/src/filters/autoCompleteFilter.ts

@@ -203,6 +203,7 @@ export class AutoCompleteFilter implements Filter {
       this.searchTerms = [];
       this.$filterElm.val('');
       this.$filterElm.trigger('input');
+      this.$filterElm.removeClass('filled');
     }
   }
 
@@ -221,11 +222,16 @@ export class AutoCompleteFilter implements Filter {
     unsubscribeAll(this.subscriptions);
   }
 
+  getValues() {
+    return this.$filterElm.val();
+  }
+
   /** Set value(s) on the DOM element  */
   setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) {
     if (values) {
       this.$filterElm.val(values);
     }
+    this.getValues() !== '' ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
 
     // set the operator when defined
     this.operator = operator || this.defaultOperator;