diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index 6fe0ea69e4..120b13774c 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -31,7 +31,7 @@ let col of (data.getColumns() | filterOutEvery:'isHidden':true); let columnIndex = index" [attr.data-automation-id]="'auto_id_' + col.key" - [ngClass]="{ + [ngClass]="{ 'adf-sortable': col.sortable, 'adf-datatable__cursor--pointer': !isResizing, 'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'), @@ -58,7 +58,7 @@ #resizableElement="adf-resizable" (resizing)="onResizing($event, columnIndex)" (resizeStart)="isResizing = true" - (resizeEnd)="isResizing = false" + (resizeEnd)="onResizingEnd()" [attr.data-automation-id]="'auto_header_content_id_' + col.key" class="adf-datatable-cell-header-content" [ngClass]="{ 'adf-datatable-cell-header-content--hovered': @@ -93,7 +93,7 @@ [class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')"> -
{ expect(dataTable.isResizing).toBeFalse(); expect(tableBody.classList).not.toContain('adf-blur-datatable-body'); }); + + it('should emit on columns width change when resizing ends', () => { + spyOn(dataTable.columnsWidthChanged,'emit'); + + dataTable.isResizingEnabled = true; + fixture.detectChanges(); + + const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle'); + resizeHandle.dispatchEvent(new MouseEvent('mousedown')); + fixture.detectChanges(); + + expect(dataTable.isResizing).toBeTrue(); + + resizeHandle.dispatchEvent(new MouseEvent('mousemove')); + fixture.detectChanges(); + + resizeHandle.dispatchEvent(new MouseEvent('mouseup')); + fixture.detectChanges(); + + expect(dataTable.isResizing).toBeFalse(); + expect(dataTable.columnsWidthChanged.emit).toHaveBeenCalled(); + + }); + }); 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 9656c4cc25..f15625e116 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts @@ -175,6 +175,9 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, @Output() columnOrderChanged = new EventEmitter(); + @Output() + columnsWidthChanged = new EventEmitter(); + /** Flag that indicates if the datatable is in loading state and needs to show the * loading template (see the docs to learn how to configure a loading template). */ @@ -935,6 +938,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, allColumns[colIndex].width = width; this.data.setColumns(allColumns); } + + onResizingEnd(): void { + this.isResizing = false; + const allColumns = this.data.getColumns(); + this.columnsWidthChanged.emit(allColumns); + } } export interface DataTableDropEvent { diff --git a/lib/core/src/lib/datatable/data/data-table.schema.ts b/lib/core/src/lib/datatable/data/data-table.schema.ts index 263038d8e6..6bc6fc146a 100644 --- a/lib/core/src/lib/datatable/data/data-table.schema.ts +++ b/lib/core/src/lib/datatable/data/data-table.schema.ts @@ -39,6 +39,7 @@ export abstract class DataTableSchema { protected columnsOrderedByKey: string = 'id'; protected columnsVisibility: { [columnId: string]: boolean } | undefined; + protected columnsWidths: { [columnId: string]: number} | undefined; private layoutPresets = {}; @@ -62,7 +63,8 @@ export abstract class DataTableSchema { public createColumns(): void { const allColumns = this.mergeJsonAndHtmlSchema(); - const columns = this.setHiddenColumns(allColumns); + const allColumnsWithWidth = this.setColumnsWidth(allColumns); + const columns = this.setHiddenColumns(allColumnsWithWidth); this.columns = this.sortColumnsByKey(columns); } @@ -144,4 +146,14 @@ export abstract class DataTableSchema { return columns; } + + private setColumnsWidth(columns: DataColumn[]): DataColumn[] { + if(this.columnsWidths) { + return columns.map(column => { + const columnWidth = this.columnsWidths[column.id]; + return columnWidth === undefined ? column : {...column, width:columnWidth}; + }); + } + return columns; + } } diff --git a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts index afcbc34d32..66332cbc47 100644 --- a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts +++ b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts @@ -36,6 +36,7 @@ export class ObjectDataColumn implements DataColumn { draggable: boolean; isHidden: boolean; customData?: T; + width?: number; constructor(input: any) { this.id = input.id ?? ''; @@ -54,5 +55,6 @@ export class ObjectDataColumn implements DataColumn { this.draggable = input.draggable ?? false; this.isHidden = input.isHidden ?? false; this.customData = input.customData; + this.width = input.width; } } diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html index e479b832ab..5b1bb46276 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html @@ -20,7 +20,9 @@ (row-unselect)="onRowUnselect($any($event))" (row-keyup)="onRowKeyUp($any($event))" (sorting-changed)="onSortingChanged($any($event))" - (columnOrderChanged)="onColumnOrderChanged($event)"> + (columnOrderChanged)="onColumnOrderChanged($event)" + (columnsWidthChanged)="onColumnsWidthChanged($event)" + > preference.entry.key === ProcessListCloudPreferences.columnOrder); const columnsVisibility = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnsVisibility); + const columnsWidths = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnsWidths); return { columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined, - columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : this.columnsVisibility + columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : this.columnsVisibility, + columnsWidths: columnsWidths ? JSON.parse(columnsWidths.entry.value) : undefined }; })) ) - .subscribe(({ columnsOrder, columnsVisibility }) => { + .subscribe(({ columnsOrder, columnsVisibility, columnsWidths }) => { if (columnsVisibility) { this.columnsVisibility = columnsVisibility; } @@ -254,6 +256,11 @@ export class ProcessListCloudComponent extends DataTableSchema { + if (column.width) { + widthsColumnsMap[column.id] = Math.ceil(column.width); + } + return widthsColumnsMap; + }, {}); + + if (this.appName) { + this.cloudPreferenceService.updatePreference( + this.appName, + ProcessListCloudPreferences.columnsWidths, + this.columnsWidths + ); + } + } + onRowClick(item: DataRowEvent) { this.currentInstanceId = item.value.getValue('id'); this.rowClick.emit(this.currentInstanceId); diff --git a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts index fcab1e819a..0b752d8cc0 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts @@ -18,5 +18,6 @@ // eslint-disable-next-line no-shadow export enum ProcessListCloudPreferences { columnOrder = 'processes-cloud-list-columns-order', - columnsVisibility = 'processes-cloud-columns-visibility' + columnsVisibility = 'processes-cloud-columns-visibility', + columnsWidths = 'processes-cloud-columns-widths' } diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html index 919eca0713..388f4e69d5 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html @@ -23,7 +23,9 @@ (rowClick)="onRowClick($any($event))" (row-keyup)="onRowKeyUp($any($event))" (sorting-changed)="onSortingChanged($any($event))" - (columnOrderChanged)="onColumnOrderChanged($event)"> + (columnOrderChanged)="onColumnOrderChanged($event)" + (columnsWidthChanged)="onColumnsWidthChanged($event)" + > 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 26a813f6c0..5c0fe29ebb 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 @@ -130,10 +130,10 @@ export abstract class BaseTaskListCloudComponent extends DataTableS private onDestroy$ = new Subject(); constructor(appConfigService: AppConfigService, - private taskCloudService: TaskCloudService, - private userPreferences: UserPreferencesService, - presetKey: string, - private cloudPreferenceService: PreferenceCloudServiceInterface) { + private taskCloudService: TaskCloudService, + private userPreferences: UserPreferencesService, + presetKey: string, + private cloudPreferenceService: PreferenceCloudServiceInterface) { super(appConfigService, presetKey, taskPresetsCloudDefaultModel); this.size = userPreferences.paginationSize; @@ -172,23 +172,29 @@ export abstract class BaseTaskListCloudComponent extends DataTableS const preferencesList = preferences?.list?.entries ?? []; const columnsOrder = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnOrder); const columnsVisibility = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnsVisibility); + const columnsWidths = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnsWidths); return { columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined, - columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : undefined + columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : undefined, + columnsWidths: columnsWidths ? JSON.parse(columnsWidths.entry.value) : undefined }; })) - ).subscribe(({ columnsOrder, columnsVisibility }) => { - if (columnsOrder) { - this.columnsOrder = columnsOrder; - } - - if (columnsVisibility) { - this.columnsVisibility = columnsVisibility; - } - - this.createDatatableSchema(); + ).subscribe(({ columnsOrder, columnsVisibility, columnsWidths }) => { + if (columnsOrder) { + this.columnsOrder = columnsOrder; } + + if (columnsVisibility) { + this.columnsVisibility = columnsVisibility; + } + + if (columnsWidths) { + this.columnsWidths = columnsWidths; + } + + this.createDatatableSchema(); + } ); } @@ -266,7 +272,7 @@ export abstract class BaseTaskListCloudComponent extends DataTableS this.columnsOrder = columnsWithNewOrder.map(column => column.id); if (this.appName) { - this.cloudPreferenceService.updatePreference( + this.cloudPreferenceService.updatePreference( this.appName, TasksListCloudPreferences.columnOrder, this.columnsOrder @@ -296,6 +302,23 @@ export abstract class BaseTaskListCloudComponent extends DataTableS this.reload(); } + onColumnsWidthChanged(columns: DataColumn[]): void { + this.columnsWidths = columns.reduce((widthsColumnsMap, column) => { + if (column.width) { + widthsColumnsMap[column.id] = Math.ceil(column.width); + } + return widthsColumnsMap; + }, {}); + + if (this.appName) { + this.cloudPreferenceService.updatePreference( + this.appName, + TasksListCloudPreferences.columnsWidths, + this.columnsWidths + ); + } + } + setSorting(sortDetail) { const sorting = sortDetail ? { orderBy: sortDetail.key, @@ -317,10 +340,10 @@ export abstract class BaseTaskListCloudComponent extends DataTableS replacePriorityValues(row: DataRow, column: DataColumn) { return column.key.split('.').reduce((source, key) => { - if (key === 'priority' && source && typeof(source[key]) === 'number') { + if (key === 'priority' && source && typeof (source[key]) === 'number') { return source[key] = this.taskCloudService.getPriorityLabel(source[key]); } - return source && typeof(source) === 'object' ? source[key] : undefined; + return source && typeof (source) === 'object' ? source[key] : undefined; }, row.obj); } diff --git a/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts b/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts index 94f34d1cb5..cf23bcf9e9 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts @@ -18,5 +18,6 @@ // eslint-disable-next-line no-shadow export enum TasksListCloudPreferences { columnOrder = 'tasks-list-cloud-columns-order', - columnsVisibility = 'tasks-list-cloud-columns-visibility' + columnsVisibility = 'tasks-list-cloud-columns-visibility', + columnsWidths = 'tasks-list-cloud-columns-widths' }