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