From d55a5d70fec5cfd966451a91c2ce418be6590c71 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Thu, 14 Sep 2023 16:41:28 -0700 Subject: [PATCH 1/3] fix: table component should emit column change when columns are updated --- projects/components/src/table/table.component.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts index b20c3314e..a5d9180fa 100644 --- a/projects/components/src/table/table.component.ts +++ b/projects/components/src/table/table.component.ts @@ -2,8 +2,8 @@ /* eslint-disable @angular-eslint/component-max-inline-declarations */ import { ModalService } from '../modal/modal.service'; import { - TableEditColumnsModalConfig, - TableEditColumnsModalComponent + TableEditColumnsModalComponent, + TableEditColumnsModalConfig } from './columns/table-edit-columns-modal.component'; import { CdkHeaderRow } from '@angular/cdk/table'; import { @@ -35,7 +35,7 @@ import { } from '@hypertrace/common'; import { isNil, without } from 'lodash-es'; import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs'; -import { switchMap, take, filter, map } from 'rxjs/operators'; +import { filter, map, switchMap, take } from 'rxjs/operators'; import { FilterAttribute } from '../filtering/filter/filter-attribute'; import { LoadAsyncConfig } from '../load-async/load-async.service'; import { PageEvent } from '../paginator/page.event'; @@ -720,6 +720,7 @@ export class TableComponent this.updateVisibleColumns(visibleColumns); this.columnConfigsSubject.next(columnConfigurations); + this.columnConfigsChange.next(columnConfigurations); } private checkColumnWidthCompatibilityOrThrow(width?: TableColumnWidth): void { @@ -824,6 +825,7 @@ export class TableComponent this.updateVisibleColumns(updatedColumns.filter(c => c.visible)); this.distributeWidthToColumns(TableColumnWidthUtil.getColWidthInPx(column.width)); this.columnConfigsSubject.next(updatedColumns); + this.columnConfigsChange.next(updatedColumns); } public showEditColumnsModal(): void { From d3186245398061c676d389f9fbcfc9a27352cea8 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Thu, 14 Sep 2023 16:46:03 -0700 Subject: [PATCH 2/3] fix: minor refactor --- projects/components/src/table/table.component.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts index a5d9180fa..356c60aa3 100644 --- a/projects/components/src/table/table.component.ts +++ b/projects/components/src/table/table.component.ts @@ -719,8 +719,7 @@ export class TableComponent this.initialColumnConfigIdWidthMap = new Map(visibleColumns.map(column => [column.id, column.width ?? -1])); this.updateVisibleColumns(visibleColumns); - this.columnConfigsSubject.next(columnConfigurations); - this.columnConfigsChange.next(columnConfigurations); + this.propagateUpdatedColumns(columnConfigurations); } private checkColumnWidthCompatibilityOrThrow(width?: TableColumnWidth): void { @@ -824,8 +823,7 @@ export class TableComponent const updatedColumns = this.columnConfigsSubject.value; this.updateVisibleColumns(updatedColumns.filter(c => c.visible)); this.distributeWidthToColumns(TableColumnWidthUtil.getColWidthInPx(column.width)); - this.columnConfigsSubject.next(updatedColumns); - this.columnConfigsChange.next(updatedColumns); + this.propagateUpdatedColumns(updatedColumns); } public showEditColumnsModal(): void { @@ -911,6 +909,11 @@ export class TableComponent return this.hasExpandableRows() ? index - 1 : index; } + private propagateUpdatedColumns(updatedColumns: TableColumnConfigExtended[]): void { + this.columnConfigsSubject.next(updatedColumns); + this.columnConfigsChange.next(updatedColumns); + } + private buildColumnConfigExtendeds(columnConfigs: TableColumnConfig[]): TableColumnConfigExtended[] { const stateColumns = []; From 98dbe0b752693aaa633d11a5ed9601285c9a4fd8 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Thu, 14 Sep 2023 16:58:57 -0700 Subject: [PATCH 3/3] fix: adding a test --- .../src/table/table.component.test.ts | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/projects/components/src/table/table.component.test.ts b/projects/components/src/table/table.component.test.ts index a99b7a62c..919ea6c7a 100644 --- a/projects/components/src/table/table.component.test.ts +++ b/projects/components/src/table/table.component.test.ts @@ -445,6 +445,34 @@ describe('Table component', () => { flush(); })); + test('should emit correctly on column changes', fakeAsync(() => { + const mockColumnConfigsChange = jest.fn(); + const columns = buildColumns(); + const spectator = createHost( + ``, + { + hostProps: { + columnConfigs: columns, + data: buildData(), + selectionMode: TableSelectionMode.Multiple, + mode: TableMode.Flat, + mockColumnConfigsChange: mockColumnConfigsChange + } + } + ); + + // Hiding a column + spectator.component.onHideColumn(columns[0]); + expect(mockColumnConfigsChange).toHaveBeenLastCalledWith( + expect.arrayContaining([ + expect.objectContaining({ ...columns[0], visible: false }), + expect.objectContaining({ ...columns[1] }) + ]) + ); + flush(); + })); + test('should select only selected rows', fakeAsync(() => { const columns = buildColumns(); const rows = buildData();