diff --git a/docs/content-services/components/document-list.component.md b/docs/content-services/components/document-list.component.md index 51d619e2a4..c15407bb24 100644 --- a/docs/content-services/components/document-list.component.md +++ b/docs/content-services/components/document-list.component.md @@ -67,6 +67,7 @@ Displays the documents from a repository. | 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. | +| displayDragAndDropHint | `boolean` | true | Display drag and drop hint. | | 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. | 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 e63bdae3cf..8a62465786 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 @@ -43,8 +43,10 @@
{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}
-
{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}
-
{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}
+ +
{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}
+
{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}
+
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 f6afd868ea..3657be6b90 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 @@ -25,21 +25,13 @@ import { DataTableComponent, ObjectDataTableAdapter, ShowHeaderMode, - ThumbnailService + ThumbnailService, + UnitTestingUtils } from '@alfresco/adf-core'; import { FavoritePaging, FavoritePagingList, Node, NodeEntry, NodePaging } from '@alfresco/js-api'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; -import { - Component, - CUSTOM_ELEMENTS_SCHEMA, - Injector, - QueryList, - runInInjectionContext, - SimpleChange, - SimpleChanges, - ViewChild -} from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, Injector, QueryList, runInInjectionContext, SimpleChange, SimpleChanges, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing'; import { By } from '@angular/platform-browser'; @@ -94,6 +86,12 @@ describe('DocumentList', () => { let spyFolderNode: any; let authenticationService: AuthenticationService; let injector: Injector; + let unitTestingUtils: UnitTestingUtils; + + const getEmptyFolderDragDropTitle = (): string => unitTestingUtils.getByCSS('.adf-empty-folder-drag-drop')?.nativeElement?.textContent; + + const getEmptyFolderDragDropSubtitle = (): string => + unitTestingUtils.getByCSS('.adf-empty-folder-any-files-here-to-add')?.nativeElement?.textContent; beforeEach(() => { TestBed.configureTestingModule({ @@ -109,6 +107,7 @@ describe('DocumentList', () => { element = fixture.nativeElement; documentList = fixture.componentInstance; + unitTestingUtils = new UnitTestingUtils(fixture.debugElement); documentListService = TestBed.inject(DocumentListService); customResourcesService = TestBed.inject(CustomResourcesService); @@ -1139,7 +1138,7 @@ describe('DocumentList', () => { fixture.detectChanges(); runInInjectionContext(injector, () => { documentList.dataTable = new DataTableComponent(null, null, matIconRegistryMock, domSanitizerMock); - }) + }); expect(documentList.dataTable).toBeDefined(); expect(fixture.debugElement.query(By.css('adf-empty-list'))).not.toBeNull(); }); @@ -1160,7 +1159,7 @@ describe('DocumentList', () => { it('should empty folder NOT show the pagination', () => { runInInjectionContext(injector, () => { documentList.dataTable = new DataTableComponent(null, null, matIconRegistryMock, domSanitizerMock); - }) + }); expect(documentList.isEmpty()).toBeTruthy(); expect(element.querySelector('alfresco-pagination')).toBe(null); @@ -1651,6 +1650,44 @@ describe('DocumentList', () => { expect(dialog.open).toHaveBeenCalledWith(FileAutoDownloadComponent, { disableClose: true, data: node }); }); + it('should display drag and drop title by default', () => { + fixture.detectChanges(); + expect(getEmptyFolderDragDropTitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE'); + }); + + it('should display drag and drop title if displayDragAndDropHint is set to true', () => { + documentList.displayDragAndDropHint = true; + + fixture.detectChanges(); + expect(getEmptyFolderDragDropTitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE'); + }); + + it('should not display drag and drop title if displayDragAndDropHint is set to false', () => { + documentList.displayDragAndDropHint = false; + + fixture.detectChanges(); + expect(getEmptyFolderDragDropTitle()).toBeUndefined(); + }); + + it('should display drag and drop subtitle by default', () => { + fixture.detectChanges(); + expect(getEmptyFolderDragDropSubtitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE'); + }); + + it('should display drag and drop subtitle if displayDragAndDropHint is set to true', () => { + documentList.displayDragAndDropHint = true; + + fixture.detectChanges(); + expect(getEmptyFolderDragDropSubtitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE'); + }); + + it('should not display drag and drop subtitle if displayDragAndDropHint is set to false', () => { + documentList.displayDragAndDropHint = false; + + fixture.detectChanges(); + expect(getEmptyFolderDragDropSubtitle()).toBeUndefined(); + }); + describe('Preselect nodes', () => { beforeEach(() => { spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_created.svg`); 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 2cfdba7c7a..222c5a901a 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 @@ -371,6 +371,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On @Input() displayCheckboxesOnHover = false; + /** Display drag and drop hint. */ + @Input() + displayDragAndDropHint = true; + /** Emitted when the user clicks a list node */ @Output() nodeClick = new EventEmitter();