fix(grid): react to ngIf-ed columns

Author: toxik

projects/angular/components/ui-grid/src/managers/sort-manager.ts

@@ -39,7 +39,12 @@ export class SortManager<T> {
 
         const sortedColumn = columns.find(column => column.sort !== '');
 
-        if (!sortedColumn) { return; }
+        if (!sortedColumn) {
+            if (!isEqual(this.sort$.getValue(), {})) {
+                this.sort$.next({} as ISortModel<T>);
+            }
+            return;
+        }
 
         this._emitSort(sortedColumn);
     }
@@ -51,7 +56,7 @@ export class SortManager<T> {
             .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);
     }

projects/angular/components/ui-grid/src/ui-grid.component.spec.ts

@@ -58,9 +58,14 @@ describe('Component: UiGrid', () => {
                                 width="25%">
                 </ui-grid-column>
 
-                <ui-grid-column [property]="'myObj.myObjString'"
+                <ui-grid-column *ngIf="isColumnVisible"
+                                [property]="'myObj.myObjString'"
                                 title="Nested String Header"
                                 width="25%">
+                        <ui-grid-dropdown-filter [items]="someFilter"
+                                                 [showAllOption]="true"
+                                                 method="ge">
+                        </ui-grid-dropdown-filter>
                 </ui-grid-column>
 
                 <ui-grid-column [property]="'myObj.myObjDate'"
@@ -77,6 +82,8 @@ describe('Component: UiGrid', () => {
         public grid!: UiGridComponent<ITestEntity>;
 
         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();
+                        });
                 });
             });
         });

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<T extends IGridDataEntry> extends ResizableGrid<T>
 
             this.rendered.next();
         });
+
+        this.columns.changes
+            .pipe(
+                takeUntil(this._destroyed$),
+            ).subscribe(
+                () => this._configure$.next(),
+            );
     }
 
     /**