From c43c0aa9a06cf00d9f3038e92708b911cd14e648 Mon Sep 17 00:00:00 2001 From: Pablo Martinez Date: Thu, 1 Aug 2024 15:11:45 +0200 Subject: [PATCH] [ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#9861) (#9911) Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com> --- .../components/breadcrumb.component.md | 19 ++--- .../components/document-list.component.md | 28 +++---- docs/core/components/datatable.component.md | 20 ++--- .../lib/breadcrumb/breadcrumb.component.html | 2 +- .../breadcrumb/breadcrumb.component.spec.ts | 25 +++++++ .../lib/breadcrumb/breadcrumb.component.ts | 4 + .../components/document-list.component.html | 2 + .../document-list.component.spec.ts | 6 ++ .../components/document-list.component.ts | 12 +++ lib/content-services/src/lib/i18n/en.json | 3 + .../datatable/datatable.component.html | 5 +- .../datatable/datatable.component.scss | 26 +++++-- .../datatable/datatable.component.spec.ts | 56 +++++++++++++- .../datatable/datatable.component.ts | 74 ++++++++++++------- 14 files changed, 214 insertions(+), 68 deletions(-) diff --git a/docs/content-services/components/breadcrumb.component.md b/docs/content-services/components/breadcrumb.component.md index 7da0417bd4..4c0e81974d 100644 --- a/docs/content-services/components/breadcrumb.component.md +++ b/docs/content-services/components/breadcrumb.component.md @@ -23,15 +23,16 @@ Indicates the current position within a navigation hierarchy. ### Properties -| Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| folderNode | `Node` | null | Active node, builds UI based on folderNode.path.elements collection. | -| maxItems | `number` | | Maximum number of nodes to display before wrapping them with a dropdown element. | -| readOnly | `boolean` | false | If true, prevents the user from navigating away from the active node. | -| root | `string` | null | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. | -| rootId | `string` | null | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. | -| target | [`DocumentListComponent`](../../content-services/components/document-list.component.md) | | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. | -| transform | `Function` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. | +| Name | Type | Default value | Description | +|-----------------------|-----------------------------------------------------------------------------------------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| folderNode | `Node` | null | Active node, builds UI based on folderNode.path.elements collection. | +| maxItems | `number` | | Maximum number of nodes to display before wrapping them with a dropdown element. | +| readOnly | `boolean` | false | If true, prevents the user from navigating away from the active node. | +| root | `string` | null | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. | +| rootId | `string` | null | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. | +| target | [`DocumentListComponent`](../../content-services/components/document-list.component.md) | | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. | +| transform | `Function` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. | +| selectedRowItemsCount | `number` | 0 | Number of table rows that are currently selected. | ### Events diff --git a/docs/content-services/components/document-list.component.md b/docs/content-services/components/document-list.component.md index f333e847e0..83ffaced9c 100644 --- a/docs/content-services/components/document-list.component.md +++ b/docs/content-services/components/document-list.component.md @@ -66,6 +66,7 @@ Displays the documents from a repository. | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". | | contextMenuActions | `boolean` | false | Toggles context menus for each row | | currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources | +| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. | | emptyFolderImageUrl | `string` | | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' | | filterValue | `any` | | Initial value for filter. | | headerFilters | `boolean` | false | Toggles the header filters mode. | @@ -98,19 +99,20 @@ Displays the documents from a repository. ### Events -| Name | Type | Description | -| ---- | ---- | ----------- | -| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | 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 | -| 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 | +| Name | Type | Description | +|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | 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 | +| 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 | +| selectedItemsCountChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< number \| undefined>` | Emitted when items row count change | ## Details diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md index 44e146cfcf..ff26458ff4 100644 --- a/docs/core/components/datatable.component.md +++ b/docs/core/components/datatable.component.md @@ -429,6 +429,7 @@ Learn more about styling your datatable: [Customizing the component's styles](#c | columns | `any[]` | \[] | The columns that the datatable will show. | | contextMenu | `boolean` | false | Toggles custom context menu for the component. | | data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table | +| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. | | fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. | | isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. | | loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). | @@ -448,15 +449,16 @@ Learn more about styling your datatable: [Customizing the component's styles](#c ### Events -| Name | Type | Description | -|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------| -| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. | -| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. | -| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. | -| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. | -| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. | -| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. | -| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. | +| Name | Type | Description | +|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------| +| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. | +| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. | +| selectedItemsCountChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the item row count is changed. | +| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. | +| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. | +| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. | +| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. | +| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. | ## Details diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html index f6b6ac7247..5b4fabdf08 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html @@ -57,7 +57,7 @@
- {{ item.name | translate }} + {{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts index 932a028410..9e3c73a6a3 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts @@ -33,6 +33,9 @@ describe('Breadcrumb', () => { }); let documentListComponent: DocumentListComponent; + const getBreadcrumbActionText = (): string => + fixture.debugElement.nativeElement.querySelector('.adf-breadcrumb-item-current').textContent.trim(); + beforeEach(() => { TestBed.configureTestingModule({ imports: [ContentTestingModule], @@ -300,4 +303,26 @@ describe('Breadcrumb', () => { expect(component.route[3].id).toBe('test-id'); expect(component.route[3].name).toBe('test-name'); }); + + it('should set title based on selectedRowItemsCount', () => { + component.transform = (transformNode) => { + transformNode.id = 'test-id'; + transformNode.name = 'test-name'; + return transformNode; + }; + + component.folderNode = { + path: { elements: [{ id: 'element-1-id', name: 'element-1-name' }] } + } as Node; + + component.ngOnChanges(); + fixture.detectChanges(); + + expect(getBreadcrumbActionText()).toEqual('test-name'); + + component.selectedRowItemsCount = 2; + fixture.detectChanges(); + + expect(getBreadcrumbActionText()).toEqual('BREADCRUMB.HEADER.SELECTED'); + }); }); diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts index 28e4783834..949d679a7b 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts @@ -77,6 +77,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy { @Input() maxItems: number; + /** Number of table rows that are currently selected. */ + @Input() + selectedRowItemsCount = 0; + previousNodes: PathElement[]; lastNodes: PathElement[]; 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 ddf4c35d29..c22c63077b 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 @@ -17,11 +17,13 @@ [allowFiltering]="allowFiltering" [isResizingEnabled]="isResizingEnabled" [blurOnResize]="blurOnResize" + [displayCheckboxesOnHover]="displayCheckboxesOnHover" (showRowContextMenu)="onShowRowContextMenu($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)" (columnsWidthChanged)="onColumnsWidthChange($event)" (columnOrderChanged)="onColumnOrderChange($event)" + (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)" (rowClick)="onNodeClick($event.value?.node)" (rowDblClick)="onNodeDblClick($event.value?.node)" (row-select)="onNodeSelect($any($event).detail)" diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts index 43847c0931..2e7b5fb918 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts +++ b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts @@ -1467,6 +1467,12 @@ describe('DocumentList', () => { expect(documentList.reload).not.toHaveBeenCalled(); }); + it('should emit custom date range on date picker closed', () => { + const selectedItemsCountChangedSpy = spyOn(documentList.selectedItemsCountChanged, 'emit'); + documentList.onSelectedItemsCountChanged(1); + expect(selectedItemsCountChangedSpy).toHaveBeenCalledWith(1); + }); + it('should add includeFields in the server request when present', () => { documentList.includeFields = ['test-include']; documentList.currentFolderId = 'fake-id'; 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 e5ec7a51b6..5c159cad41 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 @@ -340,6 +340,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On @Input() blurOnResize = true; + /** Display checkboxes in datatable rows on hover only */ + @Input() + displayCheckboxesOnHover = false; + /** Emitted when the user clicks a list node */ @Output() nodeClick = new EventEmitter(); @@ -388,6 +392,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On @Output() columnsOrderChanged = new EventEmitter(); + /** Emitted when the selected row items count in the table changed. */ + @Output() + selectedItemsCountChanged = new EventEmitter(); + @ViewChild('dataTable', { static: true }) dataTable: DataTableComponent; @@ -832,6 +840,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On this.columnsWidthChanged.emit(this.columnsWidths); } + onSelectedItemsCountChanged(count: number) { + this.selectedItemsCountChanged.emit(count); + } + onNodeClick(nodeEntry: NodeEntry) { const domEvent = new CustomEvent('node-click', { detail: { diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index 29b1d70ffd..6ae29d89f1 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -656,6 +656,9 @@ "ARIA-LABEL": { "BREADCRUMB": "Breadcrumb", "DROPDOWN": "Dropdown" + }, + "HEADER": { + "SELECTED": "Selected ({{ count }})" } }, "NAME_COLUMN_LINK": { 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 2af6051845..d4a46a8bdf 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -182,11 +182,14 @@ -