Merge pull request #12358 from IgniteUI/mtsvyatkova/issue-12056

Define multiple keys for IgxFilterOptions

Author: ChronosSF

CHANGELOG.md

@@ -53,6 +53,9 @@ All notable changes for each version of this project will be documented in this
     - `multi` mode - select/deselect all dates between the last selected/deselected and the one clicked while holding `Shift`.
     - `range` mode - extend/shorten the range from the last selected date to the one clicked while holding `Shift`.
 
+- `IgxFilterOptions`
+    - Added support for multiple keys.
+
 ### Theme Changes
 - **Breaking Changes** - The `palette` function no longer provides `info`, `success`, `warn` and `error` colors. Therefore you have to pass custom values for them if you need to use these colors. You can also use the values for `info`, `success`, `warn` and `error` colors from our predefined color palettes.
 

projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts

@@ -74,6 +74,36 @@ describe('Filter', () => {
         expect(list.items.length).toBe(4);
     });
 
+    it('should filter a list by multiple keys', () => {
+        const fixture = TestBed.createComponent(DynamicListTestComponent);
+        const list = fixture.componentInstance.list;
+
+        fixture.detectChanges();
+        expect(list.items.length).toBe(4);
+        const items = list.items;
+
+        for (const item of items) {
+            expect(item instanceof IgxListItemComponent).toBeTruthy();
+        }
+
+        fixture.componentInstance.fo.key = ['key', 'text'];
+        fixture.componentInstance.filterValue = '1';
+        fixture.detectChanges();
+
+        expect(list.items.length).toBe(1);
+        expect(list.items[0] instanceof IgxListItemComponent).toBeTruthy();
+
+        fixture.componentInstance.filterValue = '';
+        fixture.detectChanges();
+
+        expect(list.items.length).toBe(4);
+
+        fixture.componentInstance.filterValue = 'Nav3';
+        fixture.detectChanges();
+
+        expect(list.items.length).toBe(1);
+    });
+
     it('should emit filter events on declaratively created list', () => {
         let visibleItems;
         const fixture = TestBed.createComponent(DeclarativeListTestComponent);

projects/igniteui-angular/src/lib/directives/filter/filter.directive.ts

@@ -18,15 +18,15 @@ export class IgxFilterOptions {
     public inputValue = '';
 
     // Item property, which value should be used for filtering
-    public key: string;
+    public key: string | string[];
 
-    // Represent items of the list. It should be used to handle decalaratevely defined widgets
+    // Represent items of the list. It should be used to handle declaratively defined widgets
     public items: any[];
 
     // Function - get value to be tested from the item
     // item - single item of the list to be filtered
     // key - property name of item, which value should be tested
-    // Default behavior - returns "key"- named property value of item if key si provided,
+    // Default behavior - returns "key"- named property value of item if key is provided,
     // otherwise textContent of the item's html element
     public get_value(item: any, key: string): string {
         let result = '';
@@ -125,6 +125,22 @@ export class IgxFilterDirective implements OnChanges {
 })
 
 export class IgxFilterPipe implements PipeTransform {
+    private findMatchByKey(item: any, options: IgxFilterOptions, key: string) {
+        const match = options.matchFn(options.formatter(options.get_value(item, key)), options.inputValue);
+
+        if (match) {
+            if (options.metConditionFn) {
+                options.metConditionFn(item);
+            }
+        } else {
+            if (options.overdueConditionFn) {
+                options.overdueConditionFn(item);
+            }
+        }
+
+        return match;        
+    }
+
     public transform(items: any[],
                      // options - initial settings of filter functionality
                      options: IgxFilterOptions) {
@@ -140,19 +156,17 @@ export class IgxFilterPipe implements PipeTransform {
         }
 
         result = items.filter((item: any) => {
-            const match = options.matchFn(options.formatter(options.get_value(item, options.key)), options.inputValue);
-
-            if (match) {
-                if (options.metConditionFn) {
-                    options.metConditionFn(item);
-                }
+            if (!Array.isArray(options.key)) {
+                return this.findMatchByKey(item, options, options.key);            
             } else {
-                if (options.overdueConditionFn) {
-                    options.overdueConditionFn(item);
-                }
+                let isMatch = false;
+                options.key.forEach(key => {
+                    if (this.findMatchByKey(item, options, key)) {
+                        isMatch = true;
+                    }
+                });
+                return isMatch;
             }
-
-            return match;
         });
 
         return result;

src/app/list/list.sample.ts

@@ -145,7 +145,7 @@ export class ListSampleComponent implements OnInit {
 
     public get fo1() {
         const _fo = new IgxFilterOptions();
-        _fo.key = 'text';
+        _fo.key = ['text', 'key'];
         _fo.inputValue = this.search1;
         return _fo;
     }