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
This commit is contained in:
Ehsan Rezaei
2023-04-20 09:43:19 +02:00
committed by GitHub
parent 98c0a3c7be
commit ee3f1cdf55
6 changed files with 139 additions and 8 deletions

View File

@@ -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<ProcessListCloudComponent>;
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<LocalPreferenceCloudService>(PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN);
preferencesService = TestBed.inject<PreferenceCloudServiceInterface>(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<EmptyTemplateComponent>;
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]
});

View File

@@ -398,13 +398,15 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
}
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) {

View File

@@ -316,13 +316,15 @@ export abstract class BaseTaskListCloudComponent<T = unknown> 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) {

View File

@@ -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<TaskListCloudComponent>;
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();