refactor(combo): move sorting in groupPipe, remove sorting pipe, cleanup

Author: ViktorSlavov

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1,6 +1,5 @@
 import { ElementRef, EventEmitter, InjectionToken } from '@angular/core';
 import { CancelableEventArgs, CancelableBrowserEventArgs } from '../core/utils';
-import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
 
 export const IGX_COMBO_COMPONENT = new InjectionToken<IgxComboBase>('IgxComboComponentToken');
 
@@ -12,7 +11,6 @@ export interface IgxComboBase {
     groupKey: string;
     isRemote: boolean;
     filteredData: any[];
-    filteringExpressions: IFilteringExpression[];
     totalItemCount: number;
     itemsMaxHeight: number;
     itemHeight: number;

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -42,12 +42,10 @@
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
         [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
-        <igx-combo-item *igxFor="let item of data | comboFiltering:searchValue:displayKey
-        | comboSorting:sortingExpressions
+        <igx-combo-item *igxFor="let item of data | comboFiltering:searchValue:displayKey:filterable
         | comboGrouping:groupKey:valueKey;
         index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
-            [itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="rowIndex"
-            (onChunkPreload)="dataLoading($event)">
+            [itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="rowIndex">
             <ng-container *ngIf="item.isHeader">
                 <ng-container
                     *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
@@ -90,4 +88,4 @@
 </ng-template>
 <ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
     {{ item[key] }}
-</ng-template>
+</ng-template>

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -30,17 +30,15 @@ import { IgxDropDownModule } from '../drop-down/index';
 import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
-import { IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboSortingPipe } from './combo.pipes';
+import { IgxComboFilteringPipe, IgxComboGroupingPipe } from './combo.pipes';
 import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
 import { IgxComboAddItemComponent } from './combo-add-item.component';
 import { IgxComboAPIService } from './combo.api';
 import { EditorProvider } from '../core/edit-provider';
-import { take } from 'rxjs/operators';
 import { IgxInputState, IgxInputDirective } from '../directives/input/input.directive';
 
 /**
@@ -142,9 +140,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     public defaultFallbackGroup = 'Other';
     protected stringFilters = IgxStringFilteringOperand;
     protected booleanFilters = IgxBooleanFilteringOperand;
-    protected _filteringLogic = FilteringLogic.Or;
-    protected _filteringExpressions: IFilteringExpression[] = [];
-    protected _sortingExpressions: ISortingExpression[] = [];
     protected _groupKey = '';
     protected _displayKey: string;
     protected _prevInputValue = '';
@@ -763,9 +758,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     @Input()
     public set groupKey(val: string) {
-        this.clearSorting(this._groupKey);
         this._groupKey = val;
-        this.sort(this._groupKey);
     }
 
     /**
@@ -783,7 +776,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /**
      * An @Input property that enabled/disables filtering in the list. The default is `true`.
      * ```html
-     *<igx-combo [filterable]="'false'">
+     *<igx-combo [filterable]="false">
      * ```
      */
     @Input()
@@ -912,50 +905,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     set totalItemCount(count: number) {
         this.virtDir.totalItemCount = count;
-        this.cdr.detectChanges();
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public get filteringExpressions(): IFilteringExpression[] {
-        return this.filterable ? this._filteringExpressions : [];
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public set filteringExpressions(value: IFilteringExpression[]) {
-        this._filteringExpressions = value;
-        this.cdr.markForCheck();
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public get sortingExpressions(): ISortingExpression[] {
-        return this._sortingExpressions;
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public set sortingExpressions(value: ISortingExpression[]) {
-        this._sortingExpressions = value;
-        this.cdr.markForCheck();
-    }
-
-    protected clearSorting(field?: string | number) {
-        if (field === undefined || field === null) {
-            this.sortingExpressions = [];
-            return;
-        }
-        const currentState = cloneArray(this.sortingExpressions);
-        const index = currentState.findIndex((expr) => expr.fieldName === field);
-        if (index > -1) {
-            currentState.splice(index, 1);
-            this.sortingExpressions = currentState;
-        }
     }
 
     /**
@@ -1022,41 +971,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @hidden @internal
      */
     public handleInputChange(event?: string) {
-        this.onSearchInput.emit(event);
-        if (this.filterable) {
-            this.checkMatch();
-        }
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public sort(fieldName: string, dir: SortingDirection = SortingDirection.Asc, ignoreCase: boolean = true,
-        strategy: ISortingStrategy = DefaultSortingStrategy.instance()): void {
-        if (!fieldName) {
-            return;
-        }
-        const sortingState = cloneArray(this.sortingExpressions, true);
-
-        this.prepare_sorting_expression(sortingState, fieldName, dir, ignoreCase, strategy);
-        this.sortingExpressions = sortingState;
-    }
-
-    protected prepare_sorting_expression(state: ISortingExpression[], fieldName: string, dir: SortingDirection, ignoreCase: boolean,
-        strategy: ISortingStrategy) {
-
-        if (dir === SortingDirection.None) {
-            state.splice(state.findIndex((expr) => expr.fieldName === fieldName), 1);
-            return;
-        }
-
-        const expression = state.find((expr) => expr.fieldName === fieldName);
-
-        if (!expression) {
-            state.push({ fieldName, dir, ignoreCase, strategy });
-        } else {
-            Object.assign(expression, { fieldName, dir, ignoreCase });
+        if (event !== undefined) {
+            this.onSearchInput.emit(event);
         }
+        this.checkMatch();
     }
 
     /**
@@ -1235,6 +1153,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
             this.manageRequiredAsterisk();
             this.cdr.detectChanges();
         }
+        this.virtDir.onChunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
+            this.onDataPreLoad.emit(e);
+        });
     }
 
     /**
@@ -1247,13 +1168,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         this.selection.clear(this.id);
     }
 
-    /**
-     * @hidden @internal
-     */
-    public dataLoading(event) {
-        this.onDataPreLoad.emit(event);
-    }
-
     /**
      * @hidden @internal
      */
@@ -1556,7 +1470,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
  */
 @NgModule({
     declarations: [IgxComboComponent, IgxComboItemComponent, IgxComboGroupingPipe,
-        IgxComboFilteringPipe, IgxComboSortingPipe, IgxComboDropDownComponent, IgxComboAddItemComponent,
+        IgxComboFilteringPipe, IgxComboDropDownComponent, IgxComboAddItemComponent,
         IgxComboItemDirective,
         IgxComboEmptyDirective,
         IgxComboHeaderItemDirective,

projects/igniteui-angular/src/lib/combo/combo.pipes.ts

@@ -1,10 +1,9 @@
 import { Pipe, PipeTransform, Inject } from '@angular/core';
 import { cloneArray } from '../core/utils';
 import { DataUtil } from '../data-operations/data-util';
-import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
-import { ISortingExpression } from '../data-operations/sorting-expression.interface';
-import { FilteringStrategy } from '../data-operations/filtering-strategy';
+import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
+import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
 
 
 /**
@@ -14,49 +13,23 @@ import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
     name: 'comboFiltering'
 })
 export class IgxComboFilteringPipe implements PipeTransform {
-    public transform(collection: any[], searchValue: any, displayKey: any) {
+    public transform(collection: any[], searchValue: any, displayKey: any, shouldFilter: boolean) {
         if (!collection) {
             return [];
         }
-        if (!searchValue) {
+        if (!searchValue || !shouldFilter) {
             return collection;
         } else {
             const searchTerm = searchValue.toLowerCase().trim();
             if (displayKey != null) {
                 return collection.filter(e => e[displayKey].toLowerCase().includes(searchTerm));
             } else {
-                return collection.filter(e => e.includes(searchTerm));
+                return collection.filter(e => e.toLowerCase().includes(searchTerm));
             }
         }
     }
 }
 
-/** @hidden */
-export class SimpleFilteringStrategy extends FilteringStrategy {
-    public findMatchByExpression(rec: object, expr: IFilteringExpression): boolean {
-        const cond = expr.condition;
-        const val = expr.fieldName === undefined ? rec : rec[expr.fieldName];
-        return cond.logic(val, expr.searchVal, expr.ignoreCase);
-    }
-}
-
-/**
- * @hidden
- */
-@Pipe({
-    name: 'comboSorting',
-    pure: true
-})
-export class IgxComboSortingPipe implements PipeTransform {
-    public transform(collection: any[], expressions: ISortingExpression []) {
-        if (!expressions.length) {
-            return collection;
-        }
-        const result = DataUtil.sort(cloneArray(collection), expressions);
-        return result;
-    }
-}
-
 /**
  * @hidden
  */
@@ -72,13 +45,19 @@ export class IgxComboGroupingPipe implements PipeTransform {
         if ((!groupKey && groupKey !== 0) || !collection.length) {
             return collection;
         }
-        const data = cloneArray(collection);
+        const sorted = DataUtil.sort(cloneArray(collection), [{
+            fieldName: groupKey,
+            dir: SortingDirection.Asc,
+            ignoreCase: true,
+            strategy: DefaultSortingStrategy.instance()
+        }]);
+        const data = cloneArray(sorted);
         let inserts = 0;
         let currentHeader = null;
-        for (let i = 0; i < collection.length; i++) {
+        for (let i = 0; i < sorted.length; i++) {
             let insertFlag = 0;
-            if (currentHeader !== collection[i][groupKey]) {
-                currentHeader = collection[i][groupKey];
+            if (currentHeader !== sorted[i][groupKey]) {
+                currentHeader = sorted[i][groupKey];
                 insertFlag = 1;
             }
             if (insertFlag) {