Skip to content

Commit

Permalink
[ACS-6325] emit document list columns configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikita-web-ua
nikita-web-ua committed Dec 14, 2023
1 parent 40a1b1d commit 3de40ac
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 28 deletions.
26 changes: 16 additions & 10 deletions docs/content-services/components/document-list.component.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,19 +93,25 @@ 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

| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the API fails to get the Document List data |
| filterSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch`](../../../lib/content-services/src/lib/search/models/filter-search.interface.ts)`[]>` | Emitted when a filter value is selected |
| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
| 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 |
| Name | Type | Description |
| ---- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the API fails to get the Document List data |
| filterSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch`](../../../lib/content-services/src/lib/search/models/filter-search.interface.ts)`[]>` | Emitted when a filter value is selected |
| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
| 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 | Emitted when the Document List has loaded all items and is ready for use |
| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: number } \| undefined>` | Emitted when columns width change | Emitted when the Document List has loaded all items and is ready for use |
| columnsOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< string[] \| undefined>` | Emitted when columns order change | Emitted when the Document List has loaded all items and is ready for use |

## Details

Expand Down
28 changes: 28 additions & 0 deletions lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, 'onColumnOrderChanged').and.callThrough();
documentList.dataTable.columnOrderChanged.emit(newColumnsOrder as DataColumn[]);

expect(documentList.onColumnOrderChanged).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, 'onColumnsWidthChanged').and.callThrough();
documentList.dataTable.columnsWidthChanged.emit(newColumnWidth as DataColumn[]);

expect(documentList.onColumnsWidthChanged).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();
Expand Down
47 changes: 29 additions & 18 deletions lib/content-services/src/lib/document-list/components/document-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -367,11 +385,17 @@ 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()
columnsWidthChanged = new EventEmitter<any>();
columnsVisibilityChanged = new EventEmitter<{ [columnId: string]: boolean } | undefined>();

/** Emitted when columns order change */
@Output()
columnsVisibilityChanged = new EventEmitter<any>();
columnsOrderChanged = new EventEmitter<string[] | undefined>();

@ViewChild('dataTable', { static: true })
dataTable: DataTableComponent;
Expand Down Expand Up @@ -795,20 +819,14 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
}, {});

this.createColumns();
// this.createDatatableSchema();
this.data.setColumns(this.columns);
this.columnsVisibilityChanged.emit(this.columnsVisibility);
}

setColumnsVisibility (columnsVisibility: any) {
this.columnsVisibility = columnsVisibility
console.log(columnsVisibility)
}

onColumnOrderChanged(columnsWithNewOrder: DataColumn[]) {
this.columnsOrder = columnsWithNewOrder.map((column) => column.id);
// this.createColumns();

this.createColumns();
this.columnsOrderChanged.emit(this.columnsOrder);
}

onColumnsWidthChanged(columns: DataColumn[]) {
Expand All @@ -820,15 +838,8 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
}, {});

this.columnsWidths = { ...this.columnsWidths, ...newColumnsWidths };
console.log(this.columnsWidths)

this.columnsWidthChanged.emit(this.columnsWidths);
this.createColumns();
}

setColumnsWidths (columnsWidths: any) {
this.columnsWidths = columnsWidths
console.log(columnsWidths)
this.columnsWidthChanged.emit(this.columnsWidths);
}

onNodeClick(nodeEntry: NodeEntry) {
Expand Down

0 comments on commit 3de40ac

Please sign in to comment.