feat(styling): add description to Compound Filter Operators (#588)

- also change Compound Filter styling
ghiscoding · Sep 28, 2020 · 56588d1 · 56588d1
1 parent b9cf7f9
commit 56588d1
Show file tree

Hide file tree

Showing 19 changed files with 437 additions and 140 deletions.
diff --git a/src/app/modules/angular-slickgrid/constants.ts b/src/app/modules/angular-slickgrid/constants.ts
@@ -15,20 +15,26 @@ export class Constants {
     TEXT_COMMANDS: 'Commands',
     TEXT_COPY: 'Copy',
     TEXT_EQUALS: 'Equals',
+    TEXT_EQUAL_TO: 'Equal to',
     TEXT_ENDS_WITH: 'Ends With',
     TEXT_EXPAND_ALL_GROUPS: 'Expand all Groups',
     TEXT_EXPORT_TO_CSV: 'Export in CSV format',
     TEXT_EXPORT_TO_TEXT_FORMAT: 'Export in Text format (Tab delimited)',
     TEXT_EXPORT_TO_EXCEL: 'Export to Excel',
     TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
     TEXT_FREEZE_COLUMNS: 'Freeze Columns',
+    TEXT_GREATER_THAN: 'Greater than',
+    TEXT_GREATER_THAN_OR_EQUAL_TO: 'Greater than or equal to',
     TEXT_GROUP_BY: 'Group By',
     TEXT_HIDE_COLUMN: 'Hide Column',
     TEXT_ITEMS: 'items',
     TEXT_ITEMS_PER_PAGE: 'items per page',
     TEXT_OF: 'of',
     TEXT_OK: 'OK',
     TEXT_LAST_UPDATE: 'Last Update',
+    TEXT_LESS_THAN: 'Less than',
+    TEXT_LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
+    TEXT_NOT_EQUAL_TO: 'Not equal to',
     TEXT_PAGE: 'Page',
     TEXT_REFRESH_DATASET: 'Refresh Dataset',
     TEXT_REMOVE_FILTER: 'Remove Filter',

diff --git a/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts b/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts
@@ -405,7 +405,15 @@ export class AutoCompleteEditor implements Editor {
       }
     }
 
-    this._$editorElm.on('focus', () => this._$editorElm.select());
+    this._$editorElm.on('focus', () => {
+      this._$editorElm.select();
+
+      // we could optionally trigger a search to open the AutoComplete search list
+      if (this.editorOptions.openSearchListOnFocus) {
+        this._$editorElm.autocomplete('search', this._$editorElm.val());
+      }
+    });
+
     setTimeout(() => this.focus(), 50);
   }
 }
diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts
@@ -10,6 +10,10 @@ const containerId = 'demo-container';
 // define a <div> container to simulate the grid container
 const template = `<div id="${containerId}"></div>`;
 
+function removeExtraSpaces(textS: string) {
+  return `${textS}`.replace(/\s+/g, ' ');
+}
+
 const gridOptionMock = {
   enableFiltering: true,
   enableFilterTrimWhiteSpace: true,
@@ -54,12 +58,24 @@ describe('CompoundDateFilter', () => {
       EQUALS: 'Equals',
       ENDS_WITH: 'Ends With',
       STARTS_WITH: 'Starts With',
+      EQUAL_TO: 'Equal to',
+      LESS_THAN: 'Less than',
+      LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
+      GREATER_THAN: 'Greater than',
+      GREATER_THAN_OR_EQUAL_TO: 'Greater than or equal to',
+      NOT_EQUAL_TO: 'Not equal to',
     });
     translate.setTranslation('fr', {
       CONTAINS: 'Contient',
       EQUALS: 'Égale',
       ENDS_WITH: 'Se termine par',
       STARTS_WITH: 'Commence par',
+      EQUAL_TO: 'Égal à',
+      LESS_THAN: 'Plus petit que',
+      LESS_THAN_OR_EQUAL_TO: 'Plus petit ou égal à',
+      GREATER_THAN: 'Plus grand que',
+      GREATER_THAN_OR_EQUAL_TO: 'Plus grand ou égal à',
+      NOT_EQUAL_TO: 'Non égal à',
     });
     translate.setDefaultLang('en');
     translate.use('en');
@@ -334,4 +350,43 @@ describe('CompoundDateFilter', () => {
     expect(filterInputElm.value).toBe('2000-01-01T05:00:00.000Z');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
   });
+
+  it('should have default English text with operator dropdown options related to dates', () => {
+    mockColumn.outputType = null;
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+
+    filter.init(filterArguments);
+    const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.input-group-prepend.operator select');
+
+    expect(filterOperatorElm[0][0].title).toBe('');
+    expect(removeExtraSpaces(filterOperatorElm[0][1].textContent)).toBe('= Equal to');
+    expect(removeExtraSpaces(filterOperatorElm[0][2].textContent)).toBe('< Less than');
+    expect(removeExtraSpaces(filterOperatorElm[0][3].textContent)).toBe('<= Less than or equal to');
+    expect(removeExtraSpaces(filterOperatorElm[0][4].textContent)).toBe('> Greater than');
+    expect(removeExtraSpaces(filterOperatorElm[0][5].textContent)).toBe('>= Greater than or equal to');
+    expect(removeExtraSpaces(filterOperatorElm[0][6].textContent)).toBe('<> Not equal to');
+  });
+
+  describe('with French I18N translations', () => {
+    beforeEach(() => {
+      gridOptionMock.enableTranslate = true;
+      translate.use('fr');
+    });
+
+    it('should have French text translated with operator dropdown options related to dates', () => {
+      mockColumn.outputType = null;
+      filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+
+      filter.init(filterArguments);
+      const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.input-group-prepend.operator select');
+
+      expect(filterOperatorElm[0][0].title).toBe('');
+      expect(removeExtraSpaces(filterOperatorElm[0][1].textContent)).toBe('= Égal à');
+      expect(removeExtraSpaces(filterOperatorElm[0][2].textContent)).toBe('< Plus petit que');
+      expect(removeExtraSpaces(filterOperatorElm[0][3].textContent)).toBe('<= Plus petit ou égal à');
+      expect(removeExtraSpaces(filterOperatorElm[0][4].textContent)).toBe('> Plus grand que');
+      expect(removeExtraSpaces(filterOperatorElm[0][5].textContent)).toBe('>= Plus grand ou égal à');
+      expect(removeExtraSpaces(filterOperatorElm[0][6].textContent)).toBe('<> Non égal à');
+    });
+  });
 });
diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts
@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
 import { Column, FilterArguments, FieldType, GridOption, OperatorType } from '../../models';
 import { Filters } from '..';
 import { CompoundInputFilter } from '../compoundInputFilter';
@@ -9,6 +10,10 @@ const containerId = 'demo-container';
 // define a <div> container to simulate the grid container
 const template = `<div id="${containerId}"></div>`;
 
+function removeExtraSpaces(textS: string) {
+  return `${textS}`.replace(/\s+/g, ' ');
+}
+
 const gridOptionMock = {
   enableFiltering: true,
 } as GridOption;
@@ -52,12 +57,24 @@ describe('CompoundInputFilter', () => {
       EQUALS: 'Equals',
       ENDS_WITH: 'Ends With',
       STARTS_WITH: 'Starts With',
+      EQUAL_TO: 'Equal to',
+      LESS_THAN: 'Less than',
+      LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
+      GREATER_THAN: 'Greater than',
+      GREATER_THAN_OR_EQUAL_TO: 'Greater than or equal to',
+      NOT_EQUAL_TO: 'Not equal to',
     });
     translate.setTranslation('fr', {
       CONTAINS: 'Contient',
       EQUALS: 'Égale',
       ENDS_WITH: 'Se termine par',
       STARTS_WITH: 'Commence par',
+      EQUAL_TO: 'Égal à',
+      LESS_THAN: 'Plus petit que',
+      LESS_THAN_OR_EQUAL_TO: 'Plus petit ou égal à',
+      GREATER_THAN: 'Plus grand que',
+      GREATER_THAN_OR_EQUAL_TO: 'Plus grand ou égal à',
+      NOT_EQUAL_TO: 'Non égal à',
     });
     translate.setDefaultLang('en');
     translate.use('en');
@@ -129,12 +146,12 @@ describe('CompoundInputFilter', () => {
     filter.init(filterArguments);
     filter.setValues(['9'], OperatorType.greaterThanOrEqual);
 
-    const filterSelectElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration select');
+    const filterOperatorElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration select');
 
-    filterSelectElm.dispatchEvent(new Event('change'));
+    filterOperatorElm.dispatchEvent(new Event('change'));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>=', searchTerms: ['9'], shouldTriggerQuery: true });
-    expect(filterSelectElm.value).toBe('>=');
+    expect(filterOperatorElm.value).toBe('>=');
   });
 
   it('should trigger an operator change event and expect the callback to be called with the searchTerms and operator defined', () => {
@@ -143,10 +160,10 @@ describe('CompoundInputFilter', () => {
 
     filter.init(filterArguments);
     filter.setValues(['9']);
-    const filterSelectElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration select');
+    const filterOperatorElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration select');
 
-    filterSelectElm.value = '<=';
-    filterSelectElm.dispatchEvent(new Event('change'));
+    filterOperatorElm.value = '<=';
+    filterOperatorElm.dispatchEvent(new Event('change'));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['9'], shouldTriggerQuery: true });
   });
@@ -223,16 +240,15 @@ describe('CompoundInputFilter', () => {
 
     filter.init(filterArguments);
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
-    const filterSelectElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
+    const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
 
     expect(filterInputElm.value).toBe('9');
-    expect(filterSelectElm[0][1].title).toBe('=');
-    expect(filterSelectElm[0][1].textContent).toBe('=');
-    expect(filterSelectElm[0][2].textContent).toBe('<');
-    expect(filterSelectElm[0][3].textContent).toBe('<=');
-    expect(filterSelectElm[0][4].textContent).toBe('>');
-    expect(filterSelectElm[0][5].textContent).toBe('>=');
-    expect(filterSelectElm[0][6].textContent).toBe('<>');
+    expect(removeExtraSpaces(filterOperatorElm[0][1].textContent)).toBe('= Equal to');
+    expect(removeExtraSpaces(filterOperatorElm[0][2].textContent)).toBe('< Less than');
+    expect(removeExtraSpaces(filterOperatorElm[0][3].textContent)).toBe('<= Less than or equal to');
+    expect(removeExtraSpaces(filterOperatorElm[0][4].textContent)).toBe('> Greater than');
+    expect(removeExtraSpaces(filterOperatorElm[0][5].textContent)).toBe('>= Greater than or equal to');
+    expect(removeExtraSpaces(filterOperatorElm[0][6].textContent)).toBe('<> Not equal to');
   });
 
   it('should create the input filter with operator dropdown options related to strings when column definition type is FieldType.string', () => {
@@ -241,16 +257,13 @@ describe('CompoundInputFilter', () => {
 
     filter.init(filterArguments);
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
-    const filterSelectElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
+    const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
 
     expect(filterInputElm.value).toBe('xyz');
-    expect(filterSelectElm[0][0].title).toBe('Contains');
-    expect(filterSelectElm[0][1].title).toBe('Equals');
-    expect(filterSelectElm[0][2].title).toBe('Starts With');
-    expect(filterSelectElm[0][3].title).toBe('Ends With');
-    expect(filterSelectElm[0][1].textContent).toBe('=');
-    expect(filterSelectElm[0][2].textContent).toBe('a*');
-    expect(filterSelectElm[0][3].textContent).toBe('*z');
+    expect(removeExtraSpaces(filterOperatorElm[0][0].textContent)).toBe(' Contains');
+    expect(removeExtraSpaces(filterOperatorElm[0][1].textContent)).toBe('= Equals');
+    expect(removeExtraSpaces(filterOperatorElm[0][2].textContent)).toBe('a* Starts With');
+    expect(removeExtraSpaces(filterOperatorElm[0][3].textContent)).toBe('*z Ends With');
   });
 
   it('should trigger a callback with the clear filter set when calling the "clear" method', () => {
@@ -282,4 +295,43 @@ describe('CompoundInputFilter', () => {
     expect(filterFilledElms.length).toBe(0);
     expect(spyCallback).toHaveBeenCalledWith(null, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false });
   });
+
+  describe('with French I18N translations', () => {
+    beforeEach(() => {
+      gridOptionMock.enableTranslate = true;
+      translate.use('fr');
+    });
+
+    it('should have French text translated with operator dropdown options related to numbers when column definition type is FieldType.number', () => {
+      mockColumn.type = FieldType.number;
+      filterArguments.searchTerms = ['9'];
+
+      filter.init(filterArguments);
+      const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
+      const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
+
+      expect(filterInputElm.value).toBe('9');
+      expect(removeExtraSpaces(filterOperatorElm[0][1].textContent)).toBe('= Égal à');
+      expect(removeExtraSpaces(filterOperatorElm[0][2].textContent)).toBe('< Plus petit que');
+      expect(removeExtraSpaces(filterOperatorElm[0][3].textContent)).toBe('<= Plus petit ou égal à');
+      expect(removeExtraSpaces(filterOperatorElm[0][4].textContent)).toBe('> Plus grand que');
+      expect(removeExtraSpaces(filterOperatorElm[0][5].textContent)).toBe('>= Plus grand ou égal à');
+      expect(removeExtraSpaces(filterOperatorElm[0][6].textContent)).toBe('<> Non égal à');
+    });
+
+    it('should have French text translated with operator dropdown options related to strings when column definition type is FieldType.string', () => {
+      mockColumn.type = FieldType.string;
+      filterArguments.searchTerms = ['xyz'];
+
+      filter.init(filterArguments);
+      const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
+      const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
+
+      expect(filterInputElm.value).toBe('xyz');
+      expect(removeExtraSpaces(filterOperatorElm[0][0].textContent)).toBe(' Contient');
+      expect(removeExtraSpaces(filterOperatorElm[0][1].textContent)).toBe('= Égale');
+      expect(removeExtraSpaces(filterOperatorElm[0][2].textContent)).toBe('a* Commence par');
+      expect(removeExtraSpaces(filterOperatorElm[0][3].textContent)).toBe('*z Se termine par');
+    });
+  });
 });