Skip to content

Commit

Permalink
chore(filtering): Small refactoring (#2938)
Browse files Browse the repository at this point in the history
  • Loading branch information
Borislav Kulov committed Nov 14, 2018
1 parent 4daf8d8 commit 3e47a1a
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 40 deletions.
5 changes: 3 additions & 2 deletions projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@

<ng-template #defaultFilter>
<igx-chips-area #chipsArea class="igx-filtering-chips">
<ng-container *ngFor="let item of visibleExpressionsList; let last = last;" >
<ng-container *ngFor="let item of expressionsList; let last = last; let index = index;" >
<igx-chip
*ngIf="isChipVisible(index)"
[removable]="true"
[displayDensity]="'cosy'"
(click)="onChipClicked(item.expression)"
Expand All @@ -24,7 +25,7 @@
{{filteringService.getChipLabel(item.expression)}}
</span>
</igx-chip>
<span class="igx-filtering-chips__connector" *ngIf="!last">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
<span class="igx-filtering-chips__connector" *ngIf="!last && isChipVisible(index + 1)">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
</ng-container>
<div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()" (keydown)="onChipKeyDown($event)" tabindex="0">
<igx-icon>filter_list</igx-icon>
Expand Down
41 changes: 21 additions & 20 deletions projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ import {
} from '@angular/core';
import { IgxColumnComponent } from '../column.component';
import { IFilteringExpression } from '../../data-operations/filtering-expression.interface';
import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../chips';
import { IgxFilteringService, ExpressionUI } from './grid-filtering.service';
import { KEYS, cloneArray } from '../../core/utils';
import { KEYS } from '../../core/utils';
import { IgxGridNavigationService } from '../grid-navigation.service';
import { IgxGridGroupByRowComponent } from '../grid';

Expand All @@ -29,12 +28,10 @@ import { IgxGridGroupByRowComponent } from '../grid';
})
export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {

private rootExpressionsTree: FilteringExpressionsTree;
private expressionsList: ExpressionUI[];
private baseClass = 'igx-grid__filtering-cell-indicator';
private currentTemplate = null;

public visibleExpressionsList: ExpressionUI[];
public expressionsList: ExpressionUI[];
public moreFiltersCount = 0;

@Input()
Expand Down Expand Up @@ -89,6 +86,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
eventArgs.stopPropagation();
return;
}

if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) {
if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) {
if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
Expand All @@ -109,10 +107,9 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
@HostListener('keydown.shift.tab', ['$event'])
public onShiftTabKeyDown(eventArgs) {
if (this.isFirstElementFocused()) {
const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length;

if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
eventArgs.preventDefault();
const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length;
this.ScrollToChip(prevIndex, false);
} else if (this.column.visibleIndex === 0) {
eventArgs.preventDefault();
Expand All @@ -121,6 +118,14 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
eventArgs.stopPropagation();
}

/**
* Returns whether a chip with a given index is visible or not.
*/
public isChipVisible(index: number) {
const expression = this.expressionsList[index];
return !!(expression && expression.isVisible);
}

/**
* Updates the filtering cell area.
*/
Expand Down Expand Up @@ -233,35 +238,28 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
this.filteringService.removeExpression(this.column.field, indexToRemove);

this.updateVisibleFilters();
this.filter();
}

private filter(): void {
this.rootExpressionsTree = this.filteringService.createSimpleFilteringTree(this.column.field);

this.filteringService.filter(this.column.field, this.rootExpressionsTree);
this.filteringService.filter(this.column.field);
}

private isMoreIconHidden(): boolean {
return this.filteringService.columnToMoreIconHidden.get(this.column.field);
}

private updateVisibleFilters() {
this.visibleExpressionsList = cloneArray(this.expressionsList);

// TODO: revise the usage of this.cdr.detectChanges() here
this.cdr.detectChanges();
this.expressionsList.forEach((ex) => ex.isVisible = true);

if (this.moreIcon) {
this.filteringService.columnToMoreIconHidden.set(this.column.field, true);
}
this.cdr.detectChanges();

if (this.chipsArea && this.expressionsList.length > 1) {
const areaWidth = this.chipsArea.element.nativeElement.offsetWidth;
let viewWidth = 0;
const chipsAreaElements = this.chipsArea.element.nativeElement.children;
let visibleChipsCount = 0;
const moreIconWidth = this.moreIcon.nativeElement.offsetWidth -
parseInt(document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
parseInt(document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);

for (let index = 0; index < chipsAreaElements.length - 1; index++) {
if (viewWidth + chipsAreaElements[index].offsetWidth < areaWidth) {
Expand All @@ -280,10 +278,13 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
}
this.moreFiltersCount = this.expressionsList.length - visibleChipsCount;
this.filteringService.columnToMoreIconHidden.set(this.column.field, false);
this.visibleExpressionsList.splice(visibleChipsCount);
break;
}
}

for (let i = visibleChipsCount; i < this.expressionsList.length; i++) {
this.expressionsList[i].isVisible = false;
}
this.cdr.detectChanges();
}
}
Expand Down
9 changes: 3 additions & 6 deletions projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
positionStrategy: new ConnectedPositioningStrategy(this._positionSettings)
};

private rootExpressionsTree: FilteringExpressionsTree;
private chipsAreaWidth: number;
private chipAreaScrollOffset = 0;
private conditionChanged = new Subject();
Expand Down Expand Up @@ -352,8 +351,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
});
}

this.filteringService.updateFilteringCell(this.column.field);
this.filteringService.focusFilterCellChip(this.column.field, true);
this.filteringService.updateFilteringCell(this.column);
this.filteringService.focusFilterCellChip(this.column, true);

this.filteringService.isFilterRowVisible = false;
this.filteringService.filteredColumn = null;
Expand Down Expand Up @@ -641,8 +640,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
}

private filter() {
this.rootExpressionsTree = this.filteringService.createSimpleFilteringTree(this.column.field);

this.filteringService.filter(this.column.field, this.rootExpressionsTree);
this.filteringService.filter(this.column.field);
}
}
23 changes: 13 additions & 10 deletions projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { takeUntil } from 'rxjs/operators';
import { IForOfState } from '../../directives/for-of/for_of.directive';
import { IgxGridFilterConditionPipe } from '../grid-common.pipes';
import { TitleCasePipe, DatePipe } from '@angular/common';
import { IgxColumnComponent } from '../grid';

const FILTERING_ICONS_FONT_SET = 'filtering-icons';

Expand All @@ -21,6 +22,7 @@ export class ExpressionUI {
public beforeOperator: FilteringLogic;
public afterOperator: FilteringLogic;
public isSelected = false;
public isVisible = true;
}

/**
Expand All @@ -41,9 +43,9 @@ export class IgxFilteringService implements OnDestroy {

public gridId: string;
public isFilterRowVisible = false;
public filteredColumn = null;
public filteredColumn: IgxColumnComponent = null;
public selectedExpression: IFilteringExpression = null;
public columnToFocus = null;
public columnToFocus: IgxColumnComponent = null;
public shouldFocusNext = false;
public columnToMoreIconHidden = new Map<string, boolean>();

Expand All @@ -66,7 +68,7 @@ export class IgxFilteringService implements OnDestroy {
this.areEventsSubscribed = true;

this.grid.onColumnResized.pipe(takeUntil(this.destroy$)).subscribe((eventArgs: IColumnResizeEventArgs) => {
this.updateFilteringCell(eventArgs.column.field);
this.updateFilteringCell(eventArgs.column);
});

this.grid.parentVirtDir.onChunkLoad.pipe(takeUntil(this.destroy$)).subscribe((eventArgs: IForOfState) => {
Expand All @@ -77,7 +79,7 @@ export class IgxFilteringService implements OnDestroy {
});
}
if (this.columnToFocus) {
this.focusFilterCellChip(this.columnToFocus.field, false);
this.focusFilterCellChip(this.columnToFocus, false);
this.columnToFocus = null;
}
});
Expand All @@ -93,9 +95,10 @@ export class IgxFilteringService implements OnDestroy {
/**
* Execute filtering on the grid.
*/
public filter(field: string, expressionsTree: FilteringExpressionsTree): void {
public filter(field: string): void {
this.isFiltering = true;

const expressionsTree = this.createSimpleFilteringTree(field);
this.grid.filter(field, null, expressionsTree);

// Wait for the change detection to update filtered data through the pipes and then emit the event.
Expand Down Expand Up @@ -169,7 +172,7 @@ export class IgxFilteringService implements OnDestroy {
this.columnsWithComplexFilter.add(key);
}

this.updateFilteringCell(key);
this.updateFilteringCell(column);
});
}
}
Expand Down Expand Up @@ -272,8 +275,8 @@ export class IgxFilteringService implements OnDestroy {
/**
* Updates the content of a filterCell.
*/
public updateFilteringCell(columnId: string) {
const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId);
public updateFilteringCell(column: IgxColumnComponent) {
const filterCell = column.filterCell;
if (filterCell) {
filterCell.updateFilterCellArea();
}
Expand All @@ -282,8 +285,8 @@ export class IgxFilteringService implements OnDestroy {
/**
* Focus a chip in a filterCell.
*/
public focusFilterCellChip(columnId: string, focusFirst: boolean) {
const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId);
public focusFilterCellChip(column: IgxColumnComponent, focusFirst: boolean) {
const filterCell = column.filterCell;
if (filterCell) {
filterCell.focusChip(focusFirst);
}
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/grid-base.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements

this.filteringService.refreshExpressions();
this.clearSummaryCache();
this.cdr.markForCheck();
this.markForCheck();
}
}

Expand Down
3 changes: 2 additions & 1 deletion projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,8 @@ export class IgxGridNavigationService {
this.grid.rowList.find(row => row instanceof IgxGridRowComponent).cells.first._clearCellSelection();
const visColLength = this.grid.unpinnedColumns.length;
if (this.isColumnFullyVisible(visColLength - 1)) {
this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList[this.grid.filterCellList.length-1].column.field, false);
const lastFilterCell = this.grid.filterCellList[this.grid.filterCellList.length-1];
lastFilterCell.focusChip(false);
} else {
this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1];
this.grid.filteringService.shouldFocusNext = false;
Expand Down

0 comments on commit 3e47a1a

Please sign in to comment.