Skip to content

Commit

Permalink
AAE-13310: update and preserve column width preferences only on visib…
Browse files Browse the repository at this point in the history 
…le columns (#8488)

* AAE-13310: update and preserve column width preferences only on visible columns

* AAE-13310: Fixing lint issues
  • Loading branch information
@ehsan-2019
ehsan-2019 authored Apr 20, 2023
1 parent 98c0a3c commit ee3f1cd
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 8 deletions.
32 changes: 32 additions & 0 deletions lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
54 changes: 50 additions & 4 deletions ...rvices-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
Expand All @@ -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';

Expand All @@ -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, {
Expand Down Expand Up @@ -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';

Expand Down Expand Up @@ -566,6 +608,10 @@ describe('ProcessListCloudComponent', () => {
}

let fixtureEmpty: ComponentFixture<EmptyTemplateComponent>;
preferencesService = jasmine.createSpyObj('preferencesService', {
getPreferences: of({}),
updatePreference: of({})
});

setupTestBed({
imports: [
Expand All @@ -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]
});

Expand Down
4 changes: 3 additions & 1 deletion ...ss-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
4 changes: 3 additions & 1 deletion ...rocess-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
51 changes: 50 additions & 1 deletion ...rocess-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
Expand Down Expand Up @@ -96,6 +97,10 @@ describe('TaskListCloudComponent', () => {
let fixture: ComponentFixture<TaskListCloudComponent>;
let appConfig: AppConfigService;
let taskListCloudService: TaskListCloudServiceInterface;
const preferencesService: PreferenceCloudServiceInterface = jasmine.createSpyObj('preferencesService', {

This comment has been minimized.

Sign in to view

Copy link
@mauriziovitale

mauriziovitale Apr 20, 2023

Contributor

this strategy is not the best, you can easily have the mock and interface out of sync. i.e. if we rename getPreferences this unit won't complain ..
getPreferences: of({}),
updatePreference: of({})
});

setupTestBed({
imports: [
Expand All @@ -106,6 +111,10 @@ describe('TaskListCloudComponent', () => {
{
provide: TASK_LIST_CLOUD_TOKEN,
useClass: TaskListCloudService
},
{
provide: TASK_LIST_PREFERENCES_SERVICE_TOKEN,
useValue: preferencesService
}
]
});
Expand Down Expand Up @@ -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();

This comment has been minimized.

Sign in to view

Copy link
@mauriziovitale

mauriziovitale Apr 20, 2023

Contributor

why do we need to reload it manually ? this won't happen in the normal component lifecycle
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();
Expand Down

0 comments on commit ee3f1cd

Please sign in to comment.