diff --git a/docs/content-services/components/document-list.component.md b/docs/content-services/components/document-list.component.md index 867cc759f4..e6897f3f7e 100644 --- a/docs/content-services/components/document-list.component.md +++ b/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 diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html index 3961944cb2..c19c66a860 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.html +++ b/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 @@ { 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(); diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.ts b/lib/content-services/src/lib/document-list/components/document-list.component.ts index 8f94cd59ba..18319ec43d 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.ts +++ b/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(); + /** 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(); + @ViewChild('dataTable', { static: true }) dataTable: DataTableComponent; @@ -778,9 +808,40 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On } } } - onColumnsVisibilityChange(updatedColumns: Array): 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: { diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index a97c642779..2ff665667e 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -121,7 +121,7 @@