mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
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:
@@ -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]
|
||||
});
|
||||
|
||||
|
@@ -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) {
|
||||
|
@@ -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) {
|
||||
|
@@ -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();
|
||||
|
Reference in New Issue
Block a user