diff --git a/.editorconfig b/.editorconfig index e89330a61..b585a7616 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,7 +4,7 @@ root = true [*] charset = utf-8 indent_style = space -indent_size = 2 +indent_size = 4 insert_final_newline = true trim_trailing_whitespace = true diff --git a/projects/angular/components/ui-grid/src/managers/sort-manager.ts b/projects/angular/components/ui-grid/src/managers/sort-manager.ts index ee8e91f7b..8650c7e5f 100644 --- a/projects/angular/components/ui-grid/src/managers/sort-manager.ts +++ b/projects/angular/components/ui-grid/src/managers/sort-manager.ts @@ -39,7 +39,12 @@ export class SortManager { const sortedColumn = columns.find(column => column.sort !== ''); - if (!sortedColumn) { return; } + if (!sortedColumn) { + if (!isEqual(this.sort$.getValue(), {})) { + this.sort$.next({} as ISortModel); + } + return; + } this._emitSort(sortedColumn); } @@ -51,7 +56,7 @@ export class SortManager { .filter(c => c.sortable && c.property !== column.property) .forEach(c => c.sort = ''); - column.sort = SORT_CYCLE_MAP[column.sort] as SortDirection; + column.sort = SORT_CYCLE_MAP[column.sort]; this._emitSort(column); } diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts index f0d789784..f687056c8 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts +++ b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts @@ -58,9 +58,14 @@ describe('Component: UiGrid', () => { width="25%"> - + + { public grid!: UiGridComponent; public data: ITestEntity[] = []; + public someFilter = []; + public isColumnVisible = true; public selectable?: boolean; public refreshable?: boolean; } @@ -149,6 +156,22 @@ describe('Component: UiGrid', () => { expect(headerCells.length).toEqual(0); }); + + it('should hide the ngIf-ed column and its filter', () => { + let headers = fixture.debugElement.queryAll(By.css('.ui-grid-header-cell')); + const getDropdownFilter = () => fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); + + expect(headers).toBeDefined(); + expect(headers.length).toEqual(4); + expect(getDropdownFilter()).toBeTruthy(); + + fixture.componentInstance.isColumnVisible = false; + fixture.detectChanges(); + + headers = fixture.debugElement.queryAll(By.css('.ui-grid-header-cell')); + expect(headers.length).toEqual(3); + expect(getDropdownFilter()).toBeFalsy(); + }); }); describe('State: populated', () => { @@ -1063,32 +1086,9 @@ describe('Component: UiGrid', () => { SORT_TRANSITIONS.forEach(sortTransition => { it(`should emit sort event when clicked ('${ sortTransition.from}' to '${sortTransition.to}')`, (done) => { - const sortableHeader = fixture.debugElement.query(By.css('.ui-grid-header-cell-sortable')); - const headerTitle = sortableHeader.query(By.css('.ui-grid-header-title')); - - const [column] = grid.columns.toArray(); - - column.sort = ''; - fixture.detectChanges(); - - grid.sortChange - .pipe( - take(1), - finalize(done), - ).subscribe(sort => { - expect(sort.direction).toBe('asc'); - expect(sort.direction).toBe(column.sort); - expect(sort.field).toBe(column.property!); - }); - - headerTitle.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - }); - - SORT_KEY_EVENTS.forEach(ev => { - it(`should emit sort event when key '${ev.key}' is pressed ('${ - sortTransition.from}' to '${sortTransition.to}')`, (done) => { const sortableHeader = fixture.debugElement.query(By.css('.ui-grid-header-cell-sortable')); + const headerTitle = sortableHeader.query(By.css('.ui-grid-header-title')); + const [column] = grid.columns.toArray(); column.sort = ''; @@ -1104,9 +1104,32 @@ describe('Component: UiGrid', () => { expect(sort.field).toBe(column.property!); }); - sortableHeader.nativeElement.dispatchEvent(ev); + headerTitle.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); }); + + SORT_KEY_EVENTS.forEach(ev => { + it(`should emit sort event when key '${ev.key}' is pressed ('${ + sortTransition.from}' to '${sortTransition.to}')`, (done) => { + const sortableHeader = fixture.debugElement.query(By.css('.ui-grid-header-cell-sortable')); + const [column] = grid.columns.toArray(); + + column.sort = ''; + fixture.detectChanges(); + + grid.sortChange + .pipe( + take(1), + finalize(done), + ).subscribe(sort => { + expect(sort.direction).toBe('asc'); + expect(sort.direction).toBe(column.sort); + expect(sort.field).toBe(column.property!); + }); + + sortableHeader.nativeElement.dispatchEvent(ev); + fixture.detectChanges(); + }); }); }); }); diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.ts b/projects/angular/components/ui-grid/src/ui-grid.component.ts index 940df2658..d5225de01 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.ts +++ b/projects/angular/components/ui-grid/src/ui-grid.component.ts @@ -1,42 +1,42 @@ import { - AfterContentInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChild, - ContentChildren, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Input, - NgZone, - OnChanges, - OnDestroy, - Optional, - Output, - QueryList, - SimpleChanges, - ViewEncapsulation, + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChild, + ContentChildren, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + NgZone, + OnChanges, + OnDestroy, + Optional, + Output, + QueryList, + SimpleChanges, + ViewEncapsulation, } from '@angular/core'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { QueuedAnnouncer } from '@uipath/angular/a11y'; import range from 'lodash-es/range'; import { - BehaviorSubject, - merge, - Observable, - Subject, + BehaviorSubject, + merge, + Observable, + Subject, } from 'rxjs'; import { - debounceTime, - map, - skip, - switchMap, - take, - takeUntil, - tap, + debounceTime, + map, + skip, + switchMap, + take, + takeUntil, + tap, } from 'rxjs/operators'; import { UiGridColumnDirective } from './body/ui-grid-column.directive'; @@ -46,20 +46,20 @@ import { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive'; import { UiGridFooterDirective } from './footer/ui-grid-footer.directive'; import { UiGridHeaderDirective } from './header/ui-grid-header.directive'; import { - DataManager, - FilterManager, - LiveAnnouncerManager, - PerformanceMonitor, - ResizeManager, - ResizeManagerFactory, - ResizeStrategy, - SelectionManager, - SortManager, + DataManager, + FilterManager, + LiveAnnouncerManager, + PerformanceMonitor, + ResizeManager, + ResizeManagerFactory, + ResizeStrategy, + SelectionManager, + SortManager, } from './managers'; import { ResizableGrid } from './managers/resize/types'; import { - IGridDataEntry, - ISortModel, + IGridDataEntry, + ISortModel, } from './models'; import { UiGridIntl } from './ui-grid.intl'; @@ -468,6 +468,13 @@ export class UiGridComponent extends ResizableGrid this.rendered.next(); }); + + this.columns.changes + .pipe( + takeUntil(this._destroyed$), + ).subscribe( + () => this._configure$.next(), + ); } /**