[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
This commit is contained in:
Mykyta Maliarchuk
2023-12-21 13:25:16 +01:00
committed by GitHub
parent a900dd2551
commit c4d5f5dae1
6 changed files with 106 additions and 5 deletions

View File

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