Skip to content

Commit

Permalink
Merge branch '7.0.x' into column-header-fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kdinev
kdinev authored Dec 4, 2018
2 parents 9d66a28 + 115d84a commit 00effb8
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 31 deletions.
2 changes: 1 addition & 1 deletion projects/igniteui-angular/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"@angular/forms": "^7.0.3",
"web-animations-js": "^2.3.1"
},
"optionalDependencies": {
"devDependencies": {
"igniteui-cli": "~3.1.0"
},
"ng-update": {
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/schematics/ng-add/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function addDependencies(options: Options): Rule {
}
});

addPackageToJsonDevDependency(tree, 'igniteui-cli', pkgJson.optionalDependencies['igniteui-cli']);
addPackageToJsonDevDependency(tree, 'igniteui-cli', pkgJson.devDependencies['igniteui-cli']);
return tree;
};
}
Expand Down
69 changes: 48 additions & 21 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,7 +12,7 @@ import {
ChangeDetectionStrategy,
DoCheck
} from '@angular/core';
import { IgxColumnComponent } from '../column.component';
import { IgxColumnComponent, IgxColumnGroupComponent } from '../column.component';
import { IFilteringExpression } from '../../data-operations/filtering-expression.interface';
import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../chips';
import { IgxFilteringService, ExpressionUI } from './grid-filtering.service';
Expand Down Expand Up @@ -82,19 +82,17 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC

@HostListener('keydown.tab', ['$event'])
public onTabKeyDown(eventArgs) {
const pinnedColumns = this.filteringService.grid.pinnedColumns;
const nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length;
const nextIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) + 1;

if (this.isLastElementFocused()) {
if (nextIndex < this.filteringService.grid.unpinnedColumns.length &&
pinnedColumns.indexOf(this.column) === pinnedColumns.length - 1 &&
!this.navService.isColumnLeftFullyVisible(this.column.visibleIndex + 1)) {
this.ScrollToChip(0, true);
if (this.column === this.getLastPinnedFilterableColumn() &&
(!this.isColumnLeftVisible(nextIndex) || !this.isColumnRightVisible(nextIndex))) {
this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], false);
eventArgs.stopPropagation();
return;
}

if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) {
if (nextIndex >= this.filteringService.unpinnedFilterableColumns.length) {
if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) {
if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
eventArgs.stopPropagation();
Expand All @@ -103,9 +101,9 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
this.navService.goToFirstCell();
}
eventArgs.preventDefault();
} else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
} else if (!this.column.pinned && !this.isColumnRightVisible(nextIndex)) {
eventArgs.preventDefault();
this.ScrollToChip(nextIndex, true);
this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], true);
}
}
eventArgs.stopPropagation();
Expand All @@ -114,11 +112,14 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
@HostListener('keydown.shift.tab', ['$event'])
public onShiftTabKeyDown(eventArgs) {
if (this.isFirstElementFocused()) {
if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
const prevIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) - 1;

if (prevIndex >= 0 && this.column.visibleIndex > 0 && !this.isColumnLeftVisible(prevIndex) && !this.column.pinned) {
eventArgs.preventDefault();
const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length;
this.ScrollToChip(prevIndex, false);
} else if (this.column.visibleIndex === 0) {
this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[prevIndex], false);
} else if (this.column.visibleIndex === 0 ||
(prevIndex < 0 && !this.getFirstPinnedFilterableColumn()) ||
this.column === this.getFirstPinnedFilterableColumn()) {
eventArgs.preventDefault();
}
}
Expand Down Expand Up @@ -296,13 +297,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
}
}

private ScrollToChip(columnIndex: number, shouldFocusNext: boolean) {
this.filteringService.grid.nativeElement.focus({preventScroll: true});
this.filteringService.columnToFocus = this.filteringService.grid.unpinnedColumns[columnIndex];
this.filteringService.shouldFocusNext = shouldFocusNext;
this.filteringService.grid.headerContainer.scrollTo(columnIndex);
}

private isFirstElementFocused(): boolean {
return !(this.chipsArea && this.chipsArea.chipsList.length > 0 &&
this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`) !== document.activeElement);
Expand Down Expand Up @@ -343,4 +337,37 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
}
}
}

private getLastPinnedFilterableColumn(): IgxColumnComponent {
const pinnedFilterableColums =
this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
return pinnedFilterableColums[pinnedFilterableColums.length - 1];
}

private getFirstPinnedFilterableColumn(): IgxColumnComponent {
return this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable)[0];
}

private isColumnRightVisible(columnIndex: number): boolean {
let currentColumnRight = 0;
for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) {
currentColumnRight += parseInt(this.filteringService.unpinnedColumns[index].width, 10);
if (this.filteringService.unpinnedColumns[index] === this.filteringService.unpinnedFilterableColumns[columnIndex]) {
break;
}
}
const width = this.filteringService.displayContainerWidth + this.filteringService.displayContainerScrollLeft;
return currentColumnRight <= width && this.isColumnLeftVisible(columnIndex);
}

private isColumnLeftVisible(columnIndex: number): boolean {
let currentColumnLeft = 0;
for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) {
if (this.filteringService.unpinnedColumns[index] === this.filteringService.unpinnedFilterableColumns[columnIndex]) {
break;
}
currentColumnLeft += parseInt(this.filteringService.unpinnedColumns[index].width, 10);
}
return currentColumnLeft >= this.filteringService.displayContainerScrollLeft;
}
}
45 changes: 44 additions & 1 deletion 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,7 +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';
import { IgxColumnComponent, IgxColumnGroupComponent } from '../grid';

const FILTERING_ICONS_FONT_SET = 'filtering-icons';

Expand Down Expand Up @@ -56,6 +56,22 @@ export class IgxFilteringService implements OnDestroy {
this.destroy$.complete();
}

public get displayContainerWidth() {
return parseInt(this.grid.parentVirtDir.dc.instance._viewContainer.element.nativeElement.offsetWidth, 10);
}

public get displayContainerScrollLeft() {
return parseInt(this.grid.parentVirtDir.getHorizontalScroll().scrollLeft, 10);
}

public get unpinnedFilterableColumns() {
return this.grid.unpinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
}

public get unpinnedColumns() {
return this.grid.unpinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent));
}

public get grid(): IgxGridBaseComponent {
return this.gridAPI.get(this.gridId);
}
Expand Down Expand Up @@ -296,6 +312,33 @@ export class IgxFilteringService implements OnDestroy {
}
}

/**
* Scrolls to a filterCell.
*/
public scrollToFilterCell(column: IgxColumnComponent, shouldFocusNext: boolean) {
this.grid.nativeElement.focus({preventScroll: true});
this.columnToFocus = column;
this.shouldFocusNext = shouldFocusNext;

let currentColumnRight = 0;
let currentColumnLeft = 0;
for (let index = 0; index < this.unpinnedColumns.length; index++) {
currentColumnRight += parseInt(this.unpinnedColumns[index].width, 10);
if (this.unpinnedColumns[index] === column) {
currentColumnLeft = currentColumnRight - parseInt(this.unpinnedColumns[index].width, 10);
break;
}
}

const forOfDir = this.grid.headerContainer;
const width = this.displayContainerWidth + this.displayContainerScrollLeft;
if (shouldFocusNext) {
forOfDir.getHorizontalScroll().scrollLeft += currentColumnRight - width;
} else {
forOfDir.getHorizontalScroll().scrollLeft = currentColumnLeft;
}
}

private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean {
if (!expressions) {
return false;
Expand Down
11 changes: 4 additions & 7 deletions projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,14 +417,11 @@ export class IgxGridNavigationService {

public moveFocusToFilterCell() {
this.grid.rowList.find(row => row instanceof IgxGridRowComponent).cells.first._clearCellSelection();
const visColLength = this.grid.unpinnedColumns.length;
if (this.isColumnFullyVisible(visColLength - 1)) {
const lastFilterCellIndex = this.grid.filterCellList.length - 1;
this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList[lastFilterCellIndex].column, false);
const columns = this.grid.filteringService.unpinnedFilterableColumns;
if (this.isColumnFullyVisible(columns.length - 1)) {
this.grid.filteringService.focusFilterCellChip(columns[columns.length - 1], false);
} else {
this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1];
this.grid.filteringService.shouldFocusNext = false;
this.grid.headerContainer.scrollTo(visColLength - 1);
this.grid.filteringService.scrollToFilterCell(columns[columns.length - 1], false);
}
}

Expand Down

0 comments on commit 00effb8

Please sign in to comment.