fix(filters): Compound Operator alt texts should work with custom list (#1541)

* fix(filters): Compound Operator alt texts should work with custom list

Author: ghiscoding

docs/column-functionalities/filters/compound-filters.md

@@ -181,7 +181,17 @@ this.columnDefinitions = [
 ### Compound Operator Alternate Texts
 You can change any of the compound operator text or description shown in the select dropdown list by using `compoundOperatorAltTexts` to provide alternate texts.
 
-**Note** make sure to not use more than 2 or 3 characters for the operator text, exceeding that will require CSS style changes.
+The texts are separated into 2 groups (`numeric` or `text`) so that the alternate texts can be applied to all assigned filters, hence the type will vary depending on which Filter you choose as shown below:
+- `numeric`
+  - `Filters.compoundDate`
+  - `Filters.compoundInputNumber`
+  - `Filters.compoundSlider`
+- `text`
+  - `Filters.compoundInput`
+  - `Filters.compoundInputPassword`
+  - `Filters.compoundInputText`
+
+> **Note** avoid using text with more than 2 or 3 characters for the operator text (which is roughly the width of the compound operator select dropdown), exceeding this limit will require CSS style changes.
 
 ```ts
 this.gridOptions = {

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

@@ -516,7 +516,6 @@ describe('CompoundDateFilter', () => {
     filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
     gridOptionMock.compoundOperatorAltTexts = {
       numeric: { '=': { operatorAlt: 'eq', descAlt: 'alternate numeric equal description' } },
-      text: { '=': { operatorAlt: 'eq', descAlt: 'alternate text equal description' } }
     };
 
     filter.init(filterArguments);
@@ -531,6 +530,33 @@ describe('CompoundDateFilter', () => {
     expect(removeExtraSpaces(filterOperatorElm[0][6].textContent!)).toBe('<> Not equal to');
   });
 
+  it('should have custom compound operator list including alternate texts and show up in the operator select dropdown options list', () => {
+    mockColumn.outputType = null as any;
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    mockColumn.filter!.compoundOperatorList = [
+      { operator: '', desc: '' },
+      { operator: '=', desc: 'Equal to' },
+      { operator: '<', desc: 'Less than' },
+      { operator: '>', desc: 'Greater than' },
+      { operator: 'Custom', desc: 'SQL LIKE' },
+    ];
+    gridOptionMock.compoundOperatorAltTexts = {
+      numeric: {
+        '=': { operatorAlt: 'eq', descAlt: 'alternate numeric equal description' },
+        'Custom': { operatorAlt: '%', descAlt: 'alternate SQL LIKE' }
+      }
+    };
+
+    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('eq alternate numeric equal description');
+    expect(removeExtraSpaces(filterOperatorElm[0][2].textContent!)).toBe('< Less than');
+    expect(removeExtraSpaces(filterOperatorElm[0][3].textContent!)).toBe('> Greater than');
+    expect(removeExtraSpaces(filterOperatorElm[0][4].textContent!)).toBe('% alternate SQL LIKE');
+  });
+
   describe('with French I18N translations', () => {
     beforeEach(() => {
       gridOptionMock.enableTranslate = true;

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

@@ -413,6 +413,35 @@ describe('CompoundInputFilter', () => {
     expect(removeExtraSpaces(filterOperatorElm[0][5].textContent!)).toBe('*z Ends With');
   });
 
+  it('should have custom compound operator list including alternate texts and show up in the operator select dropdown options list', () => {
+    mockColumn.outputType = null as any;
+    filterArguments.searchTerms = ['xyz'];
+    mockColumn.filter!.compoundOperatorList = [
+      { operator: '', desc: '' },
+      { operator: '=', desc: 'Equal to' },
+      { operator: '<', desc: 'Less than' },
+      { operator: '>', desc: 'Greater than' },
+      { operator: 'Custom', desc: 'SQL LIKE' },
+    ];
+    jest.spyOn(gridStub, 'getOptions').mockReturnValue({
+      ...gridOptionMock, compoundOperatorAltTexts: {
+        text: {
+          '=': { operatorAlt: 'eq', descAlt: 'alternate numeric equal description' },
+          'Custom': { operatorAlt: '%', descAlt: 'alternate SQL LIKE' }
+        }
+      }
+    });
+
+    filter.init(filterArguments);
+    const filterOperatorElm = divContainer.querySelectorAll<HTMLSelectElement>('.search-filter.filter-duration select');
+
+    expect(filterOperatorElm[0][0].title).toBe('');
+    expect(removeExtraSpaces(filterOperatorElm[0][1].textContent!)).toBe('eq alternate numeric equal description');
+    expect(removeExtraSpaces(filterOperatorElm[0][2].textContent!)).toBe('< Less than');
+    expect(removeExtraSpaces(filterOperatorElm[0][3].textContent!)).toBe('> Greater than');
+    expect(removeExtraSpaces(filterOperatorElm[0][4].textContent!)).toBe('% alternate SQL LIKE');
+  });
+
   describe('with French I18N translations', () => {
     beforeEach(() => {
       gridOptionMock.enableTranslate = true;

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

@@ -395,6 +395,33 @@ describe('CompoundSliderFilter', () => {
     expect(removeExtraSpaces(filterOperatorElm[0][6].textContent!)).toBe('<> Not equal to');
   });
 
+  it('should have custom compound operator list including alternate texts and show up in the operator select dropdown options list', () => {
+    mockColumn.outputType = null as any;
+    filterArguments.searchTerms = ['9'];
+    mockColumn.filter!.compoundOperatorList = [
+      { operator: '', desc: '' },
+      { operator: '=', desc: 'Equal to' },
+      { operator: '<', desc: 'Less than' },
+      { operator: '>', desc: 'Greater than' },
+      { operator: 'Custom', desc: 'SQL LIKE' },
+    ];
+    gridOptionMock.compoundOperatorAltTexts = {
+      numeric: {
+        '=': { operatorAlt: 'eq', descAlt: 'alternate numeric equal description' },
+        'Custom': { operatorAlt: '%', descAlt: 'alternate SQL LIKE' }
+      }
+    };
+
+    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('eq alternate numeric equal description');
+    expect(removeExtraSpaces(filterOperatorElm[0][2].textContent!)).toBe('< Less than');
+    expect(removeExtraSpaces(filterOperatorElm[0][3].textContent!)).toBe('> Greater than');
+    expect(removeExtraSpaces(filterOperatorElm[0][4].textContent!)).toBe('% alternate SQL LIKE');
+  });
+
   describe('with French I18N translations', () => {
     beforeEach(() => {
       gridOptionMock.enableTranslate = true;

packages/common/src/filters/dateFilter.ts

@@ -18,7 +18,7 @@ import type {
   GridOption,
   OperatorDetail,
 } from '../interfaces/index';
-import { buildSelectOperator, compoundOperatorNumeric } from './filterUtilities';
+import { applyOperatorAltTextWhenExists, buildSelectOperator, compoundOperatorNumeric } from './filterUtilities';
 import { formatDateByFieldType, mapTempoDateFormatWithFieldType } from '../services/dateUtils';
 import { mapOperatorToShorthandDesignation } from '../services/utilities';
 import type { TranslaterService } from '../services/translater.service';
@@ -407,11 +407,17 @@ export class DateFilter implements Filter {
 
   /** Get the available operator option values to populate the operator select dropdown list */
   protected getOperatorOptionValues(): OperatorDetail[] {
+    let operatorList: OperatorDetail[];
     if (this.columnFilter?.compoundOperatorList) {
-      return this.columnFilter.compoundOperatorList;
+      operatorList = this.columnFilter.compoundOperatorList;
     } else {
-      return compoundOperatorNumeric(this.gridOptions, this.translaterService);
+      operatorList = compoundOperatorNumeric(this.gridOptions, this.translaterService);
     }
+
+    // add alternate texts when provided
+    applyOperatorAltTextWhenExists(this.gridOptions, operatorList, 'numeric');
+
+    return operatorList;
   }
 
   /**

packages/common/src/filters/filterUtilities.ts

@@ -133,9 +133,6 @@ export function compoundOperatorString(gridOptions: GridOption, translaterServic
     { operator: '*z', desc: getOutputText('ENDS_WITH', 'TEXT_ENDS_WITH', 'Ends with', gridOptions, translaterService) },
   ];
 
-  // add alternate texts when provided
-  applyOperatorAltTextWhenExists(gridOptions, operatorList, 'text');
-
   return operatorList;
 }
 
@@ -151,14 +148,11 @@ export function compoundOperatorNumeric(gridOptions: GridOption, translaterServi
     { operator: '<>', desc: getOutputText('NOT_EQUAL_TO', 'TEXT_NOT_EQUAL_TO', 'Not equal to', gridOptions, translaterService) }
   ];
 
-  // add alternate texts when provided
-  applyOperatorAltTextWhenExists(gridOptions, operatorList, 'numeric');
-
   return operatorList;
 }
 
 // internal function to apply Operator detail alternate texts when they exists
-function applyOperatorAltTextWhenExists(gridOptions: GridOption, operatorDetailList: OperatorDetail[], filterType: 'text' | 'numeric') {
+export function applyOperatorAltTextWhenExists(gridOptions: GridOption, operatorDetailList: OperatorDetail[], filterType: 'text' | 'numeric') {
   if (gridOptions.compoundOperatorAltTexts) {
     for (const opDetail of operatorDetailList) {
       if (gridOptions.compoundOperatorAltTexts.hasOwnProperty(filterType)) {

packages/common/src/filters/inputFilter.ts

@@ -11,7 +11,7 @@ import type {
   OperatorDetail,
 } from '../interfaces/index';
 import { FieldType, OperatorType, type OperatorString, type SearchTerm } from '../enums/index';
-import { buildSelectOperator, compoundOperatorNumeric, compoundOperatorString } from './filterUtilities';
+import { applyOperatorAltTextWhenExists, buildSelectOperator, compoundOperatorNumeric, compoundOperatorString } from './filterUtilities';
 import { mapOperatorToShorthandDesignation, type TranslaterService, } from '../services';
 import { type SlickGrid } from '../core/index';
 
@@ -219,25 +219,31 @@ export class InputFilter implements Filter {
   /** Get the available operator option values to populate the operator select dropdown list */
   protected getCompoundOperatorOptionValues(): OperatorDetail[] {
     const type = (this.columnDef.type && this.columnDef.type) ? this.columnDef.type : FieldType.string;
-    let optionValues = [];
+    let operatorList: OperatorDetail[];
+    let listType: 'text' | 'numeric' = 'text';
 
     if (this.columnFilter?.compoundOperatorList) {
-      return this.columnFilter.compoundOperatorList;
+      operatorList = this.columnFilter.compoundOperatorList;
     } else {
       switch (type) {
         case FieldType.string:
         case FieldType.text:
         case FieldType.readonly:
         case FieldType.password:
-          optionValues = compoundOperatorString(this.gridOptions, this.translaterService);
+          listType = 'text';
+          operatorList = compoundOperatorString(this.gridOptions, this.translaterService);
           break;
         default:
-          optionValues = compoundOperatorNumeric(this.gridOptions, this.translaterService);
+          listType = 'numeric';
+          operatorList = compoundOperatorNumeric(this.gridOptions, this.translaterService);
           break;
       }
     }
 
-    return optionValues;
+    // add alternate texts when provided
+    applyOperatorAltTextWhenExists(this.gridOptions, operatorList, listType);
+
+    return operatorList;
   }
 
   /**

packages/common/src/filters/sliderFilter.ts

@@ -19,7 +19,7 @@ import type {
 } from '../interfaces/index';
 import type { TranslaterService } from '../services/translater.service';
 import { mapOperatorToShorthandDesignation } from '../services/utilities';
-import { buildSelectOperator, compoundOperatorNumeric } from './filterUtilities';
+import { applyOperatorAltTextWhenExists, buildSelectOperator, compoundOperatorNumeric } from './filterUtilities';
 
 const DEFAULT_SLIDER_TRACK_FILLED_COLOR = '#86bff8';
 const GAP_BETWEEN_SLIDER_HANDLES = 0;
@@ -374,10 +374,17 @@ export class SliderFilter implements Filter {
 
   /** Get the available operator option values to populate the operator select dropdown list */
   protected getOperatorOptionValues(): OperatorDetail[] {
+    let operatorList: OperatorDetail[];
     if (this.columnFilter.compoundOperatorList) {
-      return this.columnFilter.compoundOperatorList;
+      operatorList = this.columnFilter.compoundOperatorList;
+    } else {
+      operatorList = compoundOperatorNumeric(this.gridOptions, this.translaterService);
     }
-    return compoundOperatorNumeric(this.gridOptions, this.translaterService);
+
+    // add alternate texts when provided
+    applyOperatorAltTextWhenExists(this.gridOptions, operatorList, 'numeric');
+
+    return operatorList;
   }
 
   /** handle value change event triggered, trigger filter callback & update "filled" class name */