[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

docs/content-services/components/document-list.component.md

@@ -93,6 +93,9 @@ Displays the documents from a repository.
 | thumbnails | `boolean` | false | Show document thumbnails rather than icons |
 | where | `string` |  | Filters the Node list using the _where_ condition of the REST API (for example, isFolder=true). See the REST API documentation for more information. |
 | rowFilter | [`RowFilter`](../../../lib/content-services/src/lib/document-list/data/row-filter.model.ts) |  | Custom function to choose whether to show or hide rows. See the [Row Filter Model](row-filter.model.md) page for more information. |
+| setColumnsVisibility | `{ [columnId: string]: boolean } \| undefined` |  | Sets columns visibility for DataTableSchema. |
+| setColumnsWidths | `{ [columnId: string]: number } \| undefined` |  | Sets columns width for DataTableSchema. |
+| setColumnsOrder | `string[] \| undefined` |  | Sets columns order for DataTableSchema. |
 
 ### Events
 
@@ -106,6 +109,9 @@ Displays the documents from a repository.
 | nodeSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]>` | Emitted when the node selection change |
 | preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
 | ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use |
+| columnsVisibilityChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: boolean } \| undefined>` | Emitted when columns visibility change |
+| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: number } \| undefined>` | Emitted when columns width change |
+| columnsOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< string[] \| undefined>` | Emitted when columns order change |
 
 ## Details
 

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: {

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -121,7 +121,7 @@
             <div
                 *ngIf="(actions && actionsPosition === 'right') ||
                        (mainActionTemplate && showMainDatatableActions)"
-                class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell"
+                class="adf-actions-column adf-datatable-actions-menu adf-datatable-cell-header adf-datatable__actions-cell"
             >
                 <ng-container *ngIf="mainActionTemplate">
                     <button
@@ -358,7 +358,7 @@
                         (actions && actionsPosition === 'right') ||
                         (mainActionTemplate && showMainDatatableActions)"
                      role="gridcell"
-                     class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie">
+                     class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
 
                     <ng-container *ngIf="(actions && actionsPosition === 'right')">
                         <button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -419,6 +419,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
         }
     }
 
+    .adf-datatable-actions-menu {
+        margin-left: auto;
+    }
+
     .adf-cell-value {
         display: flex;
         min-height: inherit;