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 af9dc81a53..cda467329a 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 @@ -370,6 +370,47 @@ describe('ProcessListCloudComponent', () => { component.onRowClick(rowEvent); }); + it('should re-create columns when a column width gets changed', () => { + component.isResizingEnabled = true; + component.appName = 'FAKE-APP-NAME'; + spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList)); + + fixture.detectChanges(); + component.reload(); + fixture.detectChanges(); + + const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle'); + + resizeHandle.dispatchEvent(new MouseEvent('mousedown')); + resizeHandle.dispatchEvent(new MouseEvent('mousemove')); + resizeHandle.dispatchEvent(new MouseEvent('mouseup')); + + const firstColumnInitialWidth = component.columns[0].width ?? 0; + + resizeHandle.dispatchEvent(new MouseEvent('mousedown')); + resizeHandle.dispatchEvent(new MouseEvent('mousemove', { clientX: 25 })); + resizeHandle.dispatchEvent(new MouseEvent('mouseup')); + + expect(component.columns[0].width).toBe(firstColumnInitialWidth + 25); + }); + + it('should re-create columns when a column order gets changed', () => { + component.appName = 'FAKE-APP-NAME'; + + fixture.detectChanges(); + component.reload(); + fixture.detectChanges(); + + expect(component.columns[0].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.NAME'); + expect(component.columns[1].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.START_DATE'); + + component.onColumnOrderChanged([component.columns[1], ...component.columns]); + fixture.detectChanges(); + + expect(component.columns[0].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.START_DATE'); + expect(component.columns[1].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.NAME'); + }); + describe('component changes', () => { beforeEach(() => { 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 52d4f1d6e3..56407de188 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 @@ -361,6 +361,7 @@ export class ProcessListCloudComponent extends DataTableSchema column.id); + this.createColumns(); if (this.appName) { this.cloudPreferenceService.updatePreference( @@ -400,6 +401,8 @@ export class ProcessListCloudComponent extends DataTableSchema extends DataTableS onColumnOrderChanged(columnsWithNewOrder: DataColumn[]): void { this.columnsOrder = columnsWithNewOrder.map(column => column.id); + this.createColumns(); if (this.appName) { this.cloudPreferenceService.updatePreference( @@ -310,6 +311,8 @@ export abstract class BaseTaskListCloudComponent extends DataTableS return widthsColumnsMap; }, {}); + this.createColumns(); + if (this.appName) { this.cloudPreferenceService.updatePreference( 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 988206d3ec..ccf27e948f 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 @@ -286,6 +286,44 @@ describe('TaskListCloudComponent', () => { component.onRowClick(rowEvent); }); + it('should re-create columns when a column width gets changed', () => { + component.isResizingEnabled = true; + spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTasks)); + + component.reload(); + fixture.detectChanges(); + + const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle'); + + resizeHandle.dispatchEvent(new MouseEvent('mousedown')); + resizeHandle.dispatchEvent(new MouseEvent('mousemove')); + resizeHandle.dispatchEvent(new MouseEvent('mouseup')); + + const firstColumnInitialWidth = component.columns[0].width ?? 0; + + resizeHandle.dispatchEvent(new MouseEvent('mousedown')); + resizeHandle.dispatchEvent(new MouseEvent('mousemove', { clientX: 25 })); + resizeHandle.dispatchEvent(new MouseEvent('mouseup')); + + expect(component.columns[0].width).toBe(firstColumnInitialWidth + 25); + }); + + it('should re-create columns when a column order gets changed', () => { + component.reload(); + fixture.detectChanges(); + + expect(component.columns[0].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.NAME'); + expect(component.columns[1].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.CREATED'); + expect(component.columns[2].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.ASSIGNEE'); + + component.onColumnOrderChanged([component.columns[1], ...component.columns]); + fixture.detectChanges(); + + expect(component.columns[0].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.CREATED'); + expect(component.columns[1].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.NAME'); + expect(component.columns[2].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.ASSIGNEE'); + }); + describe('component changes', () => { beforeEach(() => {