[ACS-6325] Persisting configuration of document list columns size, visibility and order (#9170)

* [ACS-6325] save datatable columns configuration for width & visibility

* [ACS-6325] emit document list columns configuration

* [ACS-6325] linting fixes

* [ACS-6340] some fixes for actions menu

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -21,6 +21,8 @@
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"
+    (columnsWidthChanged)="onColumnsWidthChange($event)"
+    (columnOrderChanged)="onColumnOrderChange($event)"
     (rowClick)="onNodeClick($event.value?.node)"
     (rowDblClick)="onNodeDblClick($event.value?.node)"
     (row-select)="onNodeSelect($any($event).detail)"
@@ -78,7 +80,7 @@
     <adf-main-menu-datatable-template>
         <ng-template let-mainMenuTrigger>
             <adf-datatable-column-selector
-              [columns]="data.getColumns()"
+              [columns]="columns"
               [mainMenuTrigger]="mainMenuTrigger"
               [columnsSorting]="false"
               [maxColumnsVisible]="maxColumnsVisible"

lib/content-services/src/lib/document-list/components/document-list.component.spec.ts

@@ -895,6 +895,34 @@ describe('DocumentList', () => {
         documentList.onNodeDblClick(file);
     });
 
+    it('should emit new columns order on columnOrderChanged', () => {
+        const newColumnsOrder = [{key: 'key', type: 'text', id: 'tag'}, {key: 'key1', type: 'text', id: 'name'}];
+        spyOn(documentList.columnsOrderChanged, 'emit');
+        spyOn(documentList, 'onColumnOrderChange').and.callThrough();
+        documentList.dataTable.columnOrderChanged.emit(newColumnsOrder as DataColumn[]);
+
+        expect(documentList.onColumnOrderChange).toHaveBeenCalledWith(newColumnsOrder);
+        expect(documentList.columnsOrderChanged.emit).toHaveBeenCalledWith(['tag', 'name']);
+    });
+
+    it('should emit new columns width on columnsWidthChanged', () => {
+        const newColumnWidth = [{key: 'key', type: 'text', id: 'tag', width: 65}, {key: 'key1', type: 'text', id: 'name', width: 77}];
+        spyOn(documentList.columnsWidthChanged, 'emit');
+        spyOn(documentList, 'onColumnsWidthChange').and.callThrough();
+        documentList.dataTable.columnsWidthChanged.emit(newColumnWidth as DataColumn[]);
+
+        expect(documentList.onColumnsWidthChange).toHaveBeenCalledWith(newColumnWidth);
+        expect(documentList.columnsWidthChanged.emit).toHaveBeenCalledWith({'tag': 65, 'name': 77});
+    });
+
+    it('should emit new columns visibility', () => {
+        const newColumnsVisisbility = [{key: 'key', type: 'text', id: 'tag', isHidden: true}, {key: 'key1', type: 'text', id: 'name'}];
+        spyOn(documentList.columnsVisibilityChanged, 'emit');
+        documentList.onColumnsVisibilityChange(newColumnsVisisbility as DataColumn[]);
+
+        expect(documentList.columnsVisibilityChanged.emit).toHaveBeenCalledWith({'tag': false});
+    });
+
     it('should perform folder navigation on single click', () => {
         const folder = new FolderNode();
         spyOn(documentList, 'navigateTo').and.stub();

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -319,6 +319,24 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     columnsPresetKey?: string;
 
+    /** Sets columns visibility for DataTableSchema */
+    @Input()
+    set setColumnsVisibility(columnsVisibility: { [columnId: string]: boolean } | undefined) {
+        this.columnsVisibility = columnsVisibility;
+    }
+
+    /** Sets columns width for DataTableSchema */
+    @Input()
+    set setColumnsWidths(columnsWidths: { [columnId: string]: number } | undefined) {
+        this.columnsWidths = columnsWidths;
+    }
+
+    /** Sets columns order for DataTableSchema */
+    @Input()
+    set setColumnsOrder(columnsOrder: string[] | undefined) {
+        this.columnsOrder = columnsOrder;
+    }
+
     /** Limit of possible visible columns, including "$thumbnail" column if provided */
     @Input()
     maxColumnsVisible?: number;
@@ -367,6 +385,18 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Output()
     filterSelection = new EventEmitter<FilterSearch[]>();
 
+    /** Emitted when column widths change */
+    @Output()
+    columnsWidthChanged = new EventEmitter<{ [columnId: string]: number } | undefined>();
+
+    /** Emitted when columns visibility change */
+    @Output()
+    columnsVisibilityChanged = new EventEmitter<{ [columnId: string]: boolean } | undefined>();
+
+    /** Emitted when columns order change */
+    @Output()
+    columnsOrderChanged = new EventEmitter<string[] | undefined>();
+
     @ViewChild('dataTable', { static: true })
     dataTable: DataTableComponent;
 
@@ -778,9 +808,40 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
             }
         }
     }
-    onColumnsVisibilityChange(updatedColumns: Array<DataColumn>): void {
-        this.data.setColumns(updatedColumns);
+
+    onColumnsVisibilityChange(columns: DataColumn[]) {
+        this.columnsVisibility = columns.reduce((visibleColumnsMap, column) => {
+            if (column.isHidden !== undefined) {
+                visibleColumnsMap[column.id] = !column.isHidden;
+            }
+
+            return visibleColumnsMap;
+        }, {});
+
+        this.createColumns();
+        this.data.setColumns(this.columns);
+        this.columnsVisibilityChanged.emit(this.columnsVisibility);
     }
+
+    onColumnOrderChange(columnsWithNewOrder: DataColumn[]) {
+        this.columnsOrder = columnsWithNewOrder.map((column) => column.id);
+        this.createColumns();
+        this.columnsOrderChanged.emit(this.columnsOrder);
+    }
+
+    onColumnsWidthChange(columns: DataColumn[]) {
+        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();
+        this.columnsWidthChanged.emit(this.columnsWidths);
+    }
+
     onNodeClick(nodeEntry: NodeEntry) {
         const domEvent = new CustomEvent('node-click', {
             detail: {