feat(common): add "targetSelector" to onFilterChanged & Grid State (#813

)
ghiscoding · Nov 12, 2022 · a25791a · a25791a
1 parent ca9adfa
commit a25791a
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 56 deletions.
diff --git a/packages/common/src/interfaces/columnFilter.interface.ts b/packages/common/src/interfaces/columnFilter.interface.ts
@@ -129,6 +129,9 @@ export interface ColumnFilter {
    */
   skipCompoundOperatorFilterWithNullInput?: boolean;
 
+  /** Target element selector from which the filter was triggered from. */
+  targetSelector?: string;
+
   /** What is the Field Type that can be used by the Filter (as precedence over the "type" set the column definition) */
   type?: typeof FieldType[keyof typeof FieldType];
 

diff --git a/packages/common/src/interfaces/currentFilter.interface.ts b/packages/common/src/interfaces/currentFilter.interface.ts
@@ -13,4 +13,7 @@ export interface CurrentFilter {
 
   /** Filter search terms */
   searchTerms?: SearchTerm[];
+
+  /** Target element selector from which the filter was triggered from. */
+  targetSelector?: string;
 }
diff --git a/packages/common/src/interfaces/filterChangedArgs.interface.ts b/packages/common/src/interfaces/filterChangedArgs.interface.ts
@@ -13,4 +13,5 @@ export interface FilterChangedArgs {
   operator: OperatorType | OperatorString;
   searchTerms: SearchTerm[];
   shouldTriggerQuery?: boolean;
+  targetSelector?: string;
 }
diff --git a/packages/common/src/interfaces/searchColumnFilter.interface.ts b/packages/common/src/interfaces/searchColumnFilter.interface.ts
@@ -32,4 +32,7 @@ export interface SearchColumnFilter {
 
   /** What is the Field Type that can be used by the Filter (as precedence over the "type" set the column definition) */
   type: typeof FieldType[keyof typeof FieldType];
+
+  /** Target element selector from which the filter was triggered from. */
+  targetSelector?: string;
 }
diff --git a/packages/common/src/services/__tests__/domUtilities.spec.ts b/packages/common/src/services/__tests__/domUtilities.spec.ts
@@ -6,6 +6,7 @@ import {
   findFirstElementAttribute,
   getElementOffsetRelativeToParent,
   getHtmlElementOffset,
+  getSelectorStringFromElement,
   htmlEncode,
   htmlEntityDecode,
   sanitizeHtmlToText,
@@ -130,6 +131,37 @@ describe('Service/domUtilies', () => {
     });
   });
 
+  describe('getSelectorStringFromElement() method', () => {
+    it('should return html element selector without classes when div is created without classes', () => {
+      const result = getSelectorStringFromElement(null);
+
+      expect(result).toBe('');
+    });
+
+    it('should return html element selector without classes when div is created without classes', () => {
+      const tmpDiv = document.createElement('div');
+      const result = getSelectorStringFromElement(tmpDiv);
+
+      expect(result).toBe('div');
+    });
+
+    it('should return html element selector with a single class name when exists', () => {
+      const tmpDiv = document.createElement('div');
+      tmpDiv.className = 'some-class'
+      const result = getSelectorStringFromElement(tmpDiv);
+
+      expect(result).toBe('div.some-class');
+    });
+
+    it('should return html element selector with multiple classes when exists', () => {
+      const tmpDiv = document.createElement('div');
+      tmpDiv.className = 'some-class other-class yet-more'
+      const result = getSelectorStringFromElement(tmpDiv);
+
+      expect(result).toBe('div.some-class.other-class.yet-more');
+    });
+  });
+
   describe('htmlEncode method', () => {
     it('should return a encoded HTML string', () => {
       const result = htmlEncode(`<div class="color: blue">Something</div>`);

diff --git a/packages/common/src/services/__tests__/filter.service.spec.ts b/packages/common/src/services/__tests__/filter.service.spec.ts
diff --git a/packages/common/src/services/domUtilities.ts b/packages/common/src/services/domUtilities.ts
@@ -238,6 +238,14 @@ export function getHtmlElementOffset(element?: HTMLElement): HtmlElementPosition
   return { top, left, bottom, right };
 }
 
+export function getSelectorStringFromElement(elm?: HTMLElement | null) {
+  let selector = '';
+  if (elm?.localName) {
+    selector = elm?.className ? `${elm.localName}.${Array.from(elm.classList).join('.')}` : elm.localName;
+  }
+  return selector;
+}
+
 export function findFirstElementAttribute(inputElm: Element | null | undefined, attributes: string[]): string | null {
   if (inputElm) {
     for (const attribute of attributes) {

diff --git a/packages/common/src/services/filter.service.ts b/packages/common/src/services/filter.service.ts
@@ -31,7 +31,7 @@ import {
   SlickNamespace,
 } from './../interfaces/index';
 import { BackendUtilityService } from './backendUtility.service';
-import { sanitizeHtmlToText, } from '../services/domUtilities';
+import { getSelectorStringFromElement, sanitizeHtmlToText, } from '../services/domUtilities';
 import { getDescendantProperty, mapOperatorByFieldType, } from './utilities';
 import { SharedService } from './shared.service';
 import { RxJsFacade, Subject } from './rxjsFacade';
@@ -669,6 +669,9 @@ export class FilterService {
         if (columnFilter.operator) {
           filter.operator = columnFilter.operator;
         }
+        if (columnFilter.targetSelector) {
+          filter.targetSelector = columnFilter.targetSelector;
+        }
         if (Array.isArray(filter.searchTerms) && filter.searchTerms.length > 0 && (!emptySearchTermReturnAllValues || filter.searchTerms[0] !== '')) {
           currentFilters.push(filter);
         }
@@ -1127,7 +1130,8 @@ export class FilterService {
             columnId: colId,
             columnDef,
             parsedSearchTerms: [],
-            type: fieldType
+            type: fieldType,
+            targetSelector: getSelectorStringFromElement(event?.target as HTMLElement | undefined)
           };
           const inputSearchConditions = this.parseFormInputFilterConditions(searchTerms, colFilter);
           colFilter.operator = operator || inputSearchConditions.operator || mapOperatorByFieldType(fieldType);

diff --git a/packages/graphql/src/services/__tests__/graphql.service.spec.ts b/packages/graphql/src/services/__tests__/graphql.service.spec.ts
@@ -521,15 +521,16 @@ describe('GraphqlService', () => {
       const querySpy = jest.spyOn(service, 'buildQuery');
       const resetSpy = jest.spyOn(service, 'resetPaginationOptions');
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
-      const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'] } as ColumnFilter;
+      const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'], targetSelector: 'div.some-classes' } as ColumnFilter;
       const mockFilterChangedArgs = {
         columnDef: mockColumn,
         columnId: 'gender',
         columnFilters: { gender: mockColumnFilter },
         grid: gridStub,
         operator: 'EQ',
         searchTerms: ['female'],
-        shouldTriggerQuery: true
+        shouldTriggerQuery: true,
+        targetSelector: 'div.some-classes'
       } as FilterChangedArgs;
 
       service.init(serviceOptions, paginationOptions, gridStub);
@@ -539,7 +540,7 @@ describe('GraphqlService', () => {
       expect(removeSpaces(query)).toBe(removeSpaces(expectation));
       expect(querySpy).toHaveBeenCalled();
       expect(resetSpy).toHaveBeenCalled();
-      expect(currentFilters).toEqual([{ columnId: 'gender', operator: 'EQ', searchTerms: ['female'] }]);
+      expect(currentFilters).toEqual([{ columnId: 'gender', operator: 'EQ', searchTerms: ['female'], targetSelector: 'div.some-classes' }]);
     });
 
     it('should return a query with a new filter when previous filters exists', () => {
@@ -550,7 +551,7 @@ describe('GraphqlService', () => {
       const resetSpy = jest.spyOn(service, 'resetPaginationOptions');
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
       const mockColumnName = { id: 'firstName', field: 'firstName' } as Column;
-      const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'] } as ColumnFilter;
+      const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'], targetSelector: 'div.some-classes' } as ColumnFilter;
       const mockColumnFilterName = { columnDef: mockColumnName, columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'] } as ColumnFilter;
       const mockFilterChangedArgs = {
         columnDef: mockColumn,
@@ -570,7 +571,7 @@ describe('GraphqlService', () => {
       expect(querySpy).toHaveBeenCalled();
       expect(resetSpy).toHaveBeenCalled();
       expect(currentFilters).toEqual([
-        { columnId: 'gender', operator: 'EQ', searchTerms: ['female'] },
+        { columnId: 'gender', operator: 'EQ', searchTerms: ['female'], targetSelector: 'div.some-classes' },
         { columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'] }
       ]);
     });

diff --git a/packages/graphql/src/services/graphql.service.ts b/packages/graphql/src/services/graphql.service.ts
@@ -632,6 +632,9 @@ export class GraphqlService implements BackendService {
       if (filter.operator) {
         tmpFilter.operator = filter.operator;
       }
+      if (filter.targetSelector) {
+        tmpFilter.targetSelector = filter.targetSelector;
+      }
       if (Array.isArray(filter.searchTerms)) {
         tmpFilter.searchTerms = filter.searchTerms;
       }

diff --git a/packages/odata/src/services/__tests__/grid-odata.service.spec.ts b/packages/odata/src/services/__tests__/grid-odata.service.spec.ts
@@ -294,7 +294,8 @@ describe('GridOdataService', () => {
         grid: gridStub,
         operator: 'EQ',
         searchTerms: ['female'],
-        shouldTriggerQuery: true
+        shouldTriggerQuery: true,
+        targetSelector: 'div.some-classes'
       } as FilterChangedArgs;
 
       service.init(serviceOptions, paginationOptions, gridStub);
@@ -322,7 +323,8 @@ describe('GridOdataService', () => {
         grid: gridStub,
         operator: 'EQ',
         searchTerms: ['female'],
-        shouldTriggerQuery: true
+        shouldTriggerQuery: true,
+        targetSelector: 'div.some-classes'
       } as FilterChangedArgs;
 
       service.init(serviceOptions, paginationOptions, gridStub);
@@ -356,7 +358,8 @@ describe('GridOdataService', () => {
           grid: gridStub,
           operator: 'EQ',
           searchTerms: ['female'],
-          shouldTriggerQuery: true
+          shouldTriggerQuery: true,
+          targetSelector: 'div.some-classes'
         } as FilterChangedArgs;
 
         service.init(serviceOptions, paginationOptions, gridStub);
@@ -375,8 +378,8 @@ describe('GridOdataService', () => {
         const resetSpy = jest.spyOn(service, 'resetPaginationOptions');
         const mockColumn = { id: 'gender', field: 'gender' } as Column;
         const mockColumnName = { id: 'firstName', field: 'firstName' } as Column;
-        const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'] } as ColumnFilter;
-        const mockColumnFilterName = { columnDef: mockColumnName, columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'] } as ColumnFilter;
+        const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'], targetSelector: 'div.some-classes' } as ColumnFilter;
+        const mockColumnFilterName = { columnDef: mockColumnName, columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'], targetSelector: 'div.some-classes' } as ColumnFilter;
         const mockFilterChangedArgs = {
           columnDef: mockColumn,
           columnId: 'gender',
@@ -395,8 +398,8 @@ describe('GridOdataService', () => {
         expect(querySpy).toHaveBeenCalled();
         expect(resetSpy).toHaveBeenCalled();
         expect(currentFilters).toEqual([
-          { columnId: 'gender', operator: 'EQ', searchTerms: ['female'] },
-          { columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'] }
+          { columnId: 'gender', operator: 'EQ', searchTerms: ['female'], targetSelector: 'div.some-classes' },
+          { columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'], targetSelector: 'div.some-classes' }
         ]);
       });
     });
@@ -1798,7 +1801,7 @@ describe('GridOdataService', () => {
       serviceOptions.enableCount = true;
       service.init(serviceOptions, paginationOptions, gridStub);
 
-      service.postProcess({ '__count': 20 } );
+      service.postProcess({ '__count': 20 });
 
       expect(paginationOptions.totalItems).toBe(20);
     });

diff --git a/packages/odata/src/services/grid-odata.service.ts b/packages/odata/src/services/grid-odata.service.ts
@@ -590,6 +590,9 @@ export class GridOdataService implements BackendService {
       if (filter.operator) {
         tmpFilter.operator = filter.operator;
       }
+      if (filter.targetSelector) {
+        tmpFilter.targetSelector = filter.targetSelector;
+      }
       if (Array.isArray(filter.searchTerms)) {
         tmpFilter.searchTerms = filter.searchTerms;
       }

diff --git a/test/cypress/e2e/example09.cy.js b/test/cypress/e2e/example09.cy.js
@@ -599,7 +599,7 @@ describe('Example 09 - OData Grid', { retries: 1 }, () => {
 
       cy.window().then((win) => {
         // expect(win.console.log).to.have.callCount(2);
-        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'] }], type: 'filter' });
+        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input' }], type: 'filter' });
         // expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' });
       });
     });

diff --git a/test/cypress/e2e/example15.cy.js b/test/cypress/e2e/example15.cy.js
@@ -563,7 +563,7 @@ describe('Example 15 - OData Grid using RxJS', { retries: 1 }, () => {
 
       cy.window().then((win) => {
         // expect(win.console.log).to.have.callCount(2);
-        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'] }], type: 'filter' });
+        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input' }], type: 'filter' });
         // expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' });
       });
     });