AAE-12578 added fn to save col width with preferences (#8296)

* AAE-12578 added fn to save col width with preferences Resolved Conflict

* AAE-12578 fixed formatting issues

* Empty-Commit

* AAE-12578 added resizing column feature to process list

* AAE-12578: Removed duplicate component entry

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>

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')">
                     </span>
                 </div>
-                <div 
+                <div
                     *ngIf="isResizingEnabled"
                     adf-resize-handle
                     class="adf-datatable__resize-handle"

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -1982,4 +1982,28 @@ describe('Column Resizing', () => {
         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();
+
+    });
+
 });

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<DataColumn[]>();
 
+    @Output()
+    columnsWidthChanged = new EventEmitter<DataColumn[]>();
+
     /** 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 {

lib/core/src/lib/datatable/data/data-table.schema.ts

@@ -39,6 +39,7 @@ export abstract class DataTableSchema<T = unknown> {
     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<T = unknown> {
 
     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<T = unknown> {
 
         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;
+    }
 }

lib/core/src/lib/datatable/data/object-datacolumn.model.ts

@@ -36,6 +36,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     draggable: boolean;
     isHidden: boolean;
     customData?: T;
+    width?: number;
 
     constructor(input: any) {
         this.id = input.id ?? '';
@@ -54,5 +55,6 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
         this.draggable = input.draggable ?? false;
         this.isHidden = input.isHidden ?? false;
         this.customData = input.customData;
+        this.width = input.width;
     }
 }

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)"
+        >
         <adf-loading-content-template>
             <ng-template>
                 <mat-progress-spinner

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts

@@ -238,14 +238,16 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
                     const preferencesList = preferences?.list?.entries ?? [];
                     const columnsOrder = preferencesList.find(preference => 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<ProcessListDataCo
                     this.columnsOrder = columnsOrder;
                 }
 
+
+                if (columnsWidths) {
+                    this.columnsWidths = columnsWidths;
+                }
+
                 this.createDatatableSchema();
             });
     }
@@ -385,6 +392,23 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
         }
     }
 
+    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,
+                ProcessListCloudPreferences.columnsWidths,
+                this.columnsWidths
+            );
+        }
+    }
+
     onRowClick(item: DataRowEvent) {
         this.currentInstanceId = item.value.getValue('id');
         this.rowClick.emit(this.currentInstanceId);

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'
 }

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)"
+            >
             <adf-loading-content-template>
                 <ng-template>
                     <!-- Add your custom loading template here -->

lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts

@@ -130,10 +130,10 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
     private onDestroy$ = new Subject<boolean>();
 
     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<T = unknown> 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;
-                }
+        ).subscribe(({ columnsOrder, columnsVisibility, columnsWidths }) => {
+            if (columnsOrder) {
+                this.columnsOrder = columnsOrder;
+            }
 
-                if (columnsVisibility) {
-                    this.columnsVisibility = columnsVisibility;
-                }
+            if (columnsVisibility) {
+                this.columnsVisibility = columnsVisibility;
+            }
 
-                this.createDatatableSchema();
+            if (columnsWidths) {
+                this.columnsWidths = columnsWidths;
             }
+
+            this.createDatatableSchema();
+        }
         );
     }
 
@@ -266,7 +272,7 @@ export abstract class BaseTaskListCloudComponent<T = unknown> 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<T = unknown> 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<T = unknown> 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);
     }
 

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'
 }