From ee3f1cdf55084a2bdc9e3b84990df692991a72e2 Mon Sep 17 00:00:00 2001 From: Ehsan Rezaei Date: Thu, 20 Apr 2023 09:43:19 +0200 Subject: [PATCH] AAE-13310: update and preserve column width preferences only on visible columns (#8488) * AAE-13310: update and preserve column width preferences only on visible columns * AAE-13310: Fixing lint issues --- .../datatable/datatable.component.spec.ts | 32 +++++++++++ .../datatable/datatable.component.ts | 2 +- .../process-list-cloud.component.spec.ts | 54 +++++++++++++++++-- .../process-list-cloud.component.ts | 4 +- .../base-task-list-cloud.component.ts | 4 +- .../task-list-cloud.component.spec.ts | 51 +++++++++++++++++- 6 files changed, 139 insertions(+), 8 deletions(-) diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts index 5234ca6994..4869c90d00 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts @@ -1968,6 +1968,38 @@ describe('Column Resizing', () => { expect(adapter.setColumns).toHaveBeenCalledWith(columns); })); + it('should set column widths while resizing ONLY on visible columns', fakeAsync(() => { + const adapter = dataTable.data; + spyOn(adapter, 'getColumns').and.returnValue([ + { + key: 'name', + type: 'text', + width: 110, + isHidden: true + }, + { + key: 'status', + type: 'text', + width: 120, + isHidden: false + }, + { + key: 'created', + type: 'text', + width: 150 + } + ]); + spyOn(adapter, 'setColumns').and.callThrough(); + + dataTable.onResizing({ rectangle: { top: 0, bottom: 10, left: 0, right: 20, width: 65 } }, 0); + tick(); + + expect(adapter.setColumns).toHaveBeenCalledWith([ + { key: 'status', type: 'text', width: 65, isHidden: false }, + { key: 'created', type: 'text', width: 150 } + ]); + })); + it('should set the column header style on resizing', fakeAsync(() => { dataTable.onResizing({ rectangle: { top: 0, bottom: 10, left: 0, right: 20, width: 125 } }, 0); tick(); diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts index 7d16bc22af..5406049d45 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts @@ -950,7 +950,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, onResizing({ rectangle: { width } }: ResizeEvent, colIndex: number): void { const timeoutId = setTimeout(() => { - const allColumns = this.data.getColumns(); + const allColumns = this.data.getColumns().filter(column => !column.isHidden); allColumns[colIndex].width = width; this.data.setColumns(allColumns); diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts index 6dca2f4fbd..a0b88990b5 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts @@ -38,12 +38,12 @@ import { ProcessServiceCloudTestingModule } from '../../../testing/process-servi import { TranslateModule } from '@ngx-translate/core'; import { ProcessListCloudSortingModel } from '../models/process-list-sorting.model'; import { PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN } from '../../../services/cloud-token.service'; -import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service'; import { ProcessListCloudPreferences } from '../models/process-cloud-preferences'; import { PROCESS_LIST_CUSTOM_VARIABLE_COLUMN } from '../../../models/data-column-custom-data'; import { HttpClientModule } from '@angular/common/http'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { PreferenceCloudServiceInterface } from '@alfresco/adf-process-services-cloud'; @Component({ template: ` @@ -69,7 +69,7 @@ describe('ProcessListCloudComponent', () => { let fixture: ComponentFixture; let appConfig: AppConfigService; let processListCloudService: ProcessListCloudService; - let preferencesService: LocalPreferenceCloudService; + let preferencesService: PreferenceCloudServiceInterface; const fakeCustomSchemaName = 'fakeCustomSchema'; const schemaWithVariable = 'schemaWithVariableId'; @@ -83,7 +83,7 @@ describe('ProcessListCloudComponent', () => { beforeEach(() => { appConfig = TestBed.inject(AppConfigService); processListCloudService = TestBed.inject(ProcessListCloudService); - preferencesService = TestBed.inject(PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN); + preferencesService = TestBed.inject(PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN); fixture = TestBed.createComponent(ProcessListCloudComponent); component = fixture.componentInstance; appConfig.config = Object.assign(appConfig.config, { @@ -378,6 +378,48 @@ describe('ProcessListCloudComponent', () => { expect(component.columns[0].width).toBe(120); }); + it('should update columns widths when a column width gets changed', () => { + spyOn(preferencesService, 'updatePreference').and.returnValue(of({})); + component.appName = 'fake-app-name'; + component.reload(); + fixture.detectChanges(); + + const newColumns = [...component.columns]; + newColumns[0].width = 120; + component.onColumnsWidthChanged(newColumns); + + expect(component.columns[0].width).toBe(120); + expect(preferencesService.updatePreference).toHaveBeenCalledWith('fake-app-name', 'processes-cloud-columns-widths', { + id: 120 + }); + }); + + it('should update columns widths while preserving previously saved widths when a column width gets changed', () => { + spyOn(preferencesService, 'updatePreference').and.returnValue(of({})); + component.appName = 'fake-app-name'; + component.reload(); + fixture.detectChanges(); + + const newColumns = [...component.columns]; + newColumns[0].width = 120; + component.onColumnsWidthChanged(newColumns); + + expect(component.columns[0].width).toBe(120); + expect(preferencesService.updatePreference).toHaveBeenCalledWith('fake-app-name', 'processes-cloud-columns-widths', { + id: 120 + }); + + newColumns[1].width = 150; + component.onColumnsWidthChanged(newColumns); + + expect(component.columns[0].width).toBe(120); + expect(component.columns[1].width).toBe(150); + expect(preferencesService.updatePreference).toHaveBeenCalledWith('fake-app-name', 'processes-cloud-columns-widths', { + id: 120, + startDate: 150 + }); + }); + it('should re-create columns when a column order gets changed', () => { component.appName = 'FAKE-APP-NAME'; @@ -566,6 +608,10 @@ describe('ProcessListCloudComponent', () => { } let fixtureEmpty: ComponentFixture; + preferencesService = jasmine.createSpyObj('preferencesService', { + getPreferences: of({}), + updatePreference: of({}) + }); setupTestBed({ imports: [ @@ -575,7 +621,7 @@ describe('ProcessListCloudComponent', () => { DataTableModule, MatProgressSpinnerModule ], - providers: [{ provide: PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN, useExisting: LocalPreferenceCloudService }], + providers: [{ provide: PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN, useValue: preferencesService }], declarations: [EmptyTemplateComponent, ProcessListCloudComponent, CustomEmptyContentTemplateDirective] }); diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts index 5306922190..ab177fbfbe 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts @@ -398,13 +398,15 @@ export class ProcessListCloudComponent extends DataTableSchema { + const newColumnsWidths = columns.reduce((widthsColumnsMap, column) => { if (column.width) { widthsColumnsMap[column.id] = Math.ceil(column.width); } return widthsColumnsMap; }, {}); + this.columnsWidths = {...this.columnsWidths, ...newColumnsWidths}; + this.createColumns(); if (this.appName) { diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts index bcf69addcb..d2cdf51076 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts @@ -316,13 +316,15 @@ export abstract class BaseTaskListCloudComponent extends DataTableS } onColumnsWidthChanged(columns: DataColumn[]): void { - this.columnsWidths = columns.reduce((widthsColumnsMap, column) => { + const newColumnsWidths = columns.reduce((widthsColumnsMap, column) => { if (column.width) { widthsColumnsMap[column.id] = Math.ceil(column.width); } return widthsColumnsMap; }, {}); + this.columnsWidths = {...this.columnsWidths, ...newColumnsWidths}; + this.createColumns(); if (this.appName) { diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts index 67047fb4f4..e0efb529d7 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts @@ -39,10 +39,11 @@ import { TranslateModule } from '@ngx-translate/core'; import { TaskListCloudSortingModel } from '../../../models/task-list-sorting.model'; import { shareReplay, skip } from 'rxjs/operators'; import { TaskListCloudServiceInterface } from '../../../services/task-list-cloud.service.interface'; -import { TASK_LIST_CLOUD_TOKEN } from '../../../services/cloud-token.service'; +import { TASK_LIST_CLOUD_TOKEN, TASK_LIST_PREFERENCES_SERVICE_TOKEN } from '../../../services/cloud-token.service'; import { TaskListCloudModule } from '../task-list-cloud.module'; import { HttpClientModule } from '@angular/common/http'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface'; @Component({ template: ` @@ -96,6 +97,10 @@ describe('TaskListCloudComponent', () => { let fixture: ComponentFixture; let appConfig: AppConfigService; let taskListCloudService: TaskListCloudServiceInterface; + const preferencesService: PreferenceCloudServiceInterface = jasmine.createSpyObj('preferencesService', { + getPreferences: of({}), + updatePreference: of({}) + }); setupTestBed({ imports: [ @@ -106,6 +111,10 @@ describe('TaskListCloudComponent', () => { { provide: TASK_LIST_CLOUD_TOKEN, useClass: TaskListCloudService + }, + { + provide: TASK_LIST_PREFERENCES_SERVICE_TOKEN, + useValue: preferencesService } ] }); @@ -304,6 +313,46 @@ describe('TaskListCloudComponent', () => { expect(component.columns[0].width).toBe(120); }); + it('should update columns widths when a column width gets changed', () => { + component.appName = 'fake-app-name'; + component.reload(); + fixture.detectChanges(); + + const newColumns = [...component.columns]; + newColumns[0].width = 120; + component.onColumnsWidthChanged(newColumns); + + expect(component.columns[0].width).toBe(120); + expect(preferencesService.updatePreference).toHaveBeenCalledWith('fake-app-name', 'tasks-list-cloud-columns-widths', { + name: 120 + }); + }); + + it('should update columns widths while preserving previously saved widths when a column width gets changed', () => { + component.appName = 'fake-app-name'; + component.reload(); + fixture.detectChanges(); + + const newColumns = [...component.columns]; + newColumns[0].width = 120; + component.onColumnsWidthChanged(newColumns); + + expect(component.columns[0].width).toBe(120); + expect(preferencesService.updatePreference).toHaveBeenCalledWith('fake-app-name', 'tasks-list-cloud-columns-widths', { + name: 120 + }); + + newColumns[1].width = 150; + component.onColumnsWidthChanged(newColumns); + + expect(component.columns[0].width).toBe(120); + expect(component.columns[1].width).toBe(150); + expect(preferencesService.updatePreference).toHaveBeenCalledWith('fake-app-name', 'tasks-list-cloud-columns-widths', { + name: 120, + created: 150 + }); + }); + it('should re-create columns when a column order gets changed', () => { component.reload(); fixture.detectChanges();