Skip to content

Commit

Permalink
Merge remote-tracking branch 'remotes/origin/master' into mvenkov/tre…
Browse files Browse the repository at this point in the history 
…e-grid-batch-update
  • Loading branch information
@wnvko
wnvko committed Nov 12, 2018
2 parents 0028d86 + e100e62 commit be64953
Show file tree
Hide file tree
Showing 12 changed files with 219 additions and 95 deletions.
14 changes: 7 additions & 7 deletions ROADMAP.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
## Milestone 5 (by November 30th, 2018)

1. Hierarchical Grid POC (Proof of concept) [issue](https://github.com/IgniteUI/igniteui-angular/issues/827)
2. Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530)
2. **[Done]**Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530)
3. Implement number-of-records-based rendering for igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2384)
4. Advanced Filtering Dialog
5. Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542)
6. Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307)
7. Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079)
8. Typography Updates
9. Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710)
5. **[Done]**Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542)
6. **[Done]**Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307)
7. **[Done]**Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079)
8. **[Done]**Typography Updates
9. **[Done]**Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710)
10. **[Removed]** Vertical Tabs - material doesn't define vertical tabs
11. Row Editing with transactions [issue](https://github.com/IgniteUI/igniteui-angular/issues/566)
11. **[Done]** Row Editing with transactions (Batch editing) [issue](https://github.com/IgniteUI/igniteui-angular/issues/566)
12. **[Done]** Adding Disabled Dates and Special Dates options in igxCalander [issue](https://github.com/IgniteUI/igniteui-angular/issues/1980)
13. **[Done]** Drag and Drop Directive
14. Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672)
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -26,7 +26,7 @@
</igx-chip>
<span class="igx-filtering-chips__connector" *ngIf="!last">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
</ng-container>
<div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()" tabindex="0">
<div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()" (keydown)="onChipKeyDown($event)" tabindex="0">
<igx-icon>filter_list</igx-icon>
<igx-badge [value]="moreFiltersCount"></igx-badge>
</div>
Expand Down
120 changes: 87 additions & 33 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 @@ -17,6 +17,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
import { IgxFilteringService, ExpressionUI } from './grid-filtering.service';
import { KEYS, cloneArray } from '../../core/utils';
import { IgxGridNavigationService } from '../grid-navigation.service';
import { IgxGridGroupByRowComponent } from '../grid';

/**
* @hidden
Expand Down Expand Up @@ -96,52 +97,56 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
}

ngOnInit(): void {
this.filteringService.columnToChipToFocus.set(this.column.field, false);
this.filteringService.columnToMoreIconHidden.set(this.column.field, true);
}

ngAfterViewInit(): void {
this.updateFilterCellArea();
}

@HostListener('keydown.shift.tab', ['$event'])
@HostListener('keydown.tab', ['$event'])
public onTabKeyDown(eventArgs) {
if (eventArgs.shiftKey) {
if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
eventArgs.preventDefault();
this.filteringService.grid.headerContainer.scrollTo(this.column.visibleIndex - 1);
} else if (this.column.visibleIndex === 0) {
eventArgs.preventDefault();
const pinnedColumns = this.filteringService.grid.pinnedColumns;
const nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length;

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);
eventArgs.stopPropagation();
return;
}
} else {
if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) {
if (this.currentTemplate === this.defaultFilter) {
if (this.isMoreIconVisible() === false) {
if (this.moreIcon.nativeElement === document.activeElement) {
this.navService.goToFirstCell();
}
} else if (this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__item`) ===
document.activeElement) {
this.navService.goToFirstCell();
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();
return;
}
} else {
this.navService.goToFirstCell();
}
} else if (!this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
eventArgs.preventDefault();
this.filteringService.grid.headerContainer.scrollTo(this.column.visibleIndex + 1);
} else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
eventArgs.preventDefault();
this.ScrollToChip(nextIndex, true);
}
}

eventArgs.stopPropagation();
}

/**
* Returns the chip to be focused.
*/
public getChipToFocus() {
return this.filteringService.columnToChipToFocus.get(this.column.field);
@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();
this.ScrollToChip(prevIndex, false);
} else if (this.column.visibleIndex === 0) {
eventArgs.preventDefault();
}
}
eventArgs.stopPropagation();
}

/**
Expand Down Expand Up @@ -199,6 +204,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
public onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void {
const indexToRemove = this.expressionsList.indexOf(item);
this.removeExpression(indexToRemove);
this.focusChip();
}

/**
Expand All @@ -224,20 +230,20 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
*/
public filteringIndicatorClass() {
return {
[this.baseClass]: !this.isMoreIconVisible(),
[`${this.baseClass}--hidden`]: this.isMoreIconVisible()
[this.baseClass]: !this.isMoreIconHidden(),
[`${this.baseClass}--hidden`]: this.isMoreIconHidden()
};
}

/**
* Focus a chip depending on the current visible template.
*/
public focusChip() {
public focusChip(focusFirst: boolean = false) {
if (this.currentTemplate === this.defaultFilter) {
if (this.isMoreIconVisible() === false) {
this.moreIcon.nativeElement.focus();
if (focusFirst) {
this.focusFirstElement();
} else {
this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
this.focusElement();
}
} else if (this.currentTemplate === this.emptyFilter) {
this.ghostChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
Expand All @@ -264,7 +270,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
this.filteringService.filter(this.column.field, this.rootExpressionsTree);
}

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

Expand Down Expand Up @@ -309,4 +315,52 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
this.cdr.detectChanges();
}
}

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);
}

private isLastElementFocused(): boolean {
if (this.chipsArea) {
if (this.isMoreIconHidden() && this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`) !==
document.activeElement) {
return false;
} else if (!this.isMoreIconHidden() && this.moreIcon.nativeElement !== document.activeElement) {
return false;
}
}
return true;
}

private focusFirstElement(): void {
if (this.chipsArea.chipsList.length > 0) {
this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
} else {
this.moreIcon.nativeElement.focus();
}
}

private focusElement(): void {
if (this.filteringService.shouldFocusNext) {
if (!this.isMoreIconHidden() && this.chipsArea.chipsList.length === 0) {
this.moreIcon.nativeElement.focus();
} else {
this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
}
} else {
if (!this.isMoreIconHidden()) {
this.moreIcon.nativeElement.focus();
} else {
this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`).focus();
}
}
}
}
8 changes: 4 additions & 4 deletions projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@
<input #input
igxInput
tabindex="0"
(click)="openDialog()"
[placeholder]="placeholder"
autocomplete="off"
(click)="openDatePicker(openDialog)"
[placeholder]="placeholder"
autocomplete="off"
[value]="displayData | date"
[readonly]="true"
(keydown)="onInputKeyDown($event)"/>
Expand Down Expand Up @@ -108,6 +108,6 @@
</button>

<div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
<button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled">Reset</button>
<button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">Reset</button>
<button #closeButton igxButton igxRipple (click)="close()">Close</button>
</div>
16 changes: 16 additions & 0 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 @@ -163,6 +163,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
this.unaryConditionChanged.unsubscribe();
}

@HostListener('keydown.shift.tab', ['$event'])
@HostListener('keydown.tab', ['$event'])
public onTabKeydown(event) {
event.stopPropagation();
Expand Down Expand Up @@ -299,6 +300,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
public clearFiltering() {
this.filteringService.clearFilter(this.column.field);
this.resetExpression();
if (this.input) {
this.input.nativeElement.focus();
}
this.cdr.detectChanges();

this.chipAreaScrollOffset = 0;
Expand Down Expand Up @@ -338,6 +342,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
});
}

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

this.filteringService.isFilterRowVisible = false;
this.filteringService.filteredColumn = null;
this.filteringService.selectedExpression = null;
Expand All @@ -347,6 +354,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
this.transform(this.chipAreaScrollOffset);
}

/*
* Opens date-picker if condition is not unary
*/
public openDatePicker(openDialog: Function) {
if (!this.expression.condition.isUnary) {
openDialog();
}
}

/**
* Opens the conditions dropdown.
*/
Expand Down
36 changes: 29 additions & 7 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 @@ -37,14 +37,15 @@ export class IgxFilteringService implements OnDestroy {
private filterPipe = new IgxGridFilterConditionPipe();
private titlecasePipe = new TitleCasePipe();
private datePipe = new DatePipe(window.navigator.language);
private columnStartIndex = -1;

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

constructor(private gridAPI: GridBaseAPIService<IgxGridBaseComponent>, private iconService: IgxIconService) {}

Expand Down Expand Up @@ -73,12 +74,12 @@ export class IgxFilteringService implements OnDestroy {
this.columnStartIndex = eventArgs.startIndex;
this.grid.filterCellList.forEach((filterCell) => {
filterCell.updateFilterCellArea();
if (filterCell.getChipToFocus()) {
this.columnToChipToFocus.set(filterCell.column.field, false);
filterCell.focusChip();
}
});
}
if (this.columnToFocus) {
this.focusFilterCellChip(this.columnToFocus.field, false);
this.columnToFocus = null;
}
});

this.grid.onColumnMovingEnd.pipe(takeUntil(this.destroy$)).subscribe((event) => {
Expand Down Expand Up @@ -204,6 +205,14 @@ export class IgxFilteringService implements OnDestroy {
for (let i = 0; i < expressionsList.length; i++) {
currExpressionUI = expressionsList[i];

if (!currExpressionUI.expression.condition.isUnary && currExpressionUI.expression.searchVal === null) {
if (currExpressionUI.afterOperator === FilteringLogic.And && !currAndBranch) {
currAndBranch = new FilteringExpressionsTree(FilteringLogic.And, columnId);
expressionsTree.filteringOperands.push(currAndBranch);
}
continue;
}

if ((currExpressionUI.beforeOperator === undefined || currExpressionUI.beforeOperator === null ||
currExpressionUI.beforeOperator === FilteringLogic.Or) &&
currExpressionUI.afterOperator === FilteringLogic.And) {
Expand Down Expand Up @@ -260,13 +269,26 @@ export class IgxFilteringService implements OnDestroy {
}
}

private updateFilteringCell(columnId: string) {
/**
* Updates the content of a filterCell.
*/
public updateFilteringCell(columnId: string) {
const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId);
if (filterCell) {
filterCell.updateFilterCellArea();
}
}

/**
* Focus a chip in a filterCell.
*/
public focusFilterCellChip(columnId: string, focusFirst: boolean) {
const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId);
if (filterCell) {
filterCell.focusChip(focusFirst);
}
}

private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean {
if (!expressions) {
return false;
Expand Down
Loading

0 comments on commit be64953

Please sign in to comment.