feat(igx-combo): Filter pipe implemented, sample adjustments, #1260

Author: ViktorSlavov

demos/app/combo/sample.component.html

@@ -2,21 +2,23 @@
     <page-header title="Combo" description="Combo lets you choose value from a list"></page-header>
     <section class="sample-content">
         <p>Change data to:</p>
-        <button class="igx-button" (click)="changeData('primitive')">Primitve</button>
-        <button class="igx-button" (click)="changeData('complex')">Complex</button>
-        <button class="igx-button" (click)="changeData()">Initial</button>
+        <button class="igx-button" igxRipple (click)="changeData('primitive')">Primitve</button>
+        <button class="igx-button" igxRipple (click)="changeData('complex')">Complex</button>
+        <button class="igx-button" igxRipple (click)="changeData()">Initial</button>
         <igx-combo [placeholder]="'Location'" [data]="items" [filterable]="true" [primaryKey]="'field'" [width]="'400px'">
-            <ng-template #dropdownItemTemplate let-display let-key="primaryKey">
+            <ng-template #dropdownItemTemplate let-display let-key="primaryKey" let-data="data">
                 <div>
-                    <span class="small-red-circle"></span>{{display[key]}}
+                    <span class="small-red-circle"></span>
+                    <p class="display-value--main">State: {{display[key]}}</p>
+                    <p class="display-value--sub">Region: {{display.county}}</p>
                 </div>
             </ng-template>
-            <ng-template #dropdownFooter>
-                <div class="footer-class">This is a footer</div>
-            </ng-template>
             <ng-template #dropdownHeader>
                 <div class="header-class">This is a header</div>
             </ng-template>
+            <ng-template #dropdownFooter>
+                <div class="footer-class">This is a footer</div>
+            </ng-template>
         </igx-combo>
     </section>
 </div>

demos/app/combo/sample.component.ts

@@ -125,7 +125,6 @@ export class ComboSampleComponent implements OnInit {
             }
             this.items.push(item);
             this.initData = this.items;
-            this.currentDataType = "initial";
         }
     }
 

src/combo/combo.component.html

@@ -1,4 +1,4 @@
-<ng-template #complex let-display let-key="primaryKey">
+<ng-template #complex let-display let-data="data" let-key="primaryKey">
     {{display[key]}}
 </ng-template>
 <ng-template #primitive let-display>
@@ -23,7 +23,7 @@
         </igx-drop-down-item>
         <ng-template #content>
             <igx-drop-down-item #content *ngFor="let item of data | comboFiltering:filteringExpressions:filteringLogic:caller:pipeTrigger">
-                <ng-container *ngTemplateOutlet="template; context: {$implicit: item, primaryKey: primaryKey};"></ng-container>
+                <ng-container *ngTemplateOutlet="template; context: {$implicit: item, data: data, primaryKey: primaryKey};"></ng-container>
             </igx-drop-down-item>
         </ng-template>
         <ng-container *ngTemplateOutlet="dropdownFooter; context: {$impicit: this}">

src/combo/combo.component.spec.ts

@@ -10,6 +10,26 @@ describe("Combo", () => {
     }));
 
     it("Initialize combo", () => {
+        // TO DO
+    });
+
+    it("Initialize combo", () => {
+        // TO DO
+    });
+
+    it("Initialize combo", () => {
+        // TO DO
+    });
 
+    it("Initialize combo", () => {
+        // TO DO
+    });
+
+    it("Initialize combo", () => {
+        // TO DO
+    });
+
+    it("Initialize combo", () => {
+        // TO DO
     });
 });

src/combo/combo.component.ts

@@ -127,15 +127,15 @@ export class IgxComboComponent implements OnInit, OnDestroy {
 
     }
 
-    protected prepare_filtering_expression(state, searchVal, condition, ignoreCase) {
-        const newExpression = { searchVal, condition, ignoreCase };
-        state.push(newExpression);
+    protected prepare_filtering_expression(searchVal, condition, ignoreCase, fieldName?) {
+        if (fieldName !== undefined) {
+            return [{ fieldName, searchVal, condition, ignoreCase }];
+        }
+        return [{ searchVal, condition, ignoreCase }];
     }
 
-    public filter(term, condition, ignoreCase) {
-        const filteringState = this.filteringExpressions;
-        this.prepare_filtering_expression(filteringState, term, condition, ignoreCase);
-        this.filteringExpressions = filteringState;
+    public filter(term, condition, ignoreCase, primaryKey?) {
+        this.filteringExpressions = this.prepare_filtering_expression(term, condition, ignoreCase, primaryKey);
     }
 
     public get displayedData() {
@@ -146,7 +146,8 @@ export class IgxComboComponent implements OnInit, OnDestroy {
     }
     public hanldeKeyDown(evt) {
         if (this.filterable) {
-            this.filter(evt.target.value, STRING_FILTERS.contains, true);
+            this.filter(evt.target.value, STRING_FILTERS.contains,
+                true, this.getDataType() === DataTypes.PRIMITIVE ? undefined : this.primaryKey);
         }
     }