From 18951f31ec0727b28c55e92de0cae87dc0097ac9 Mon Sep 17 00:00:00 2001 From: adomi Date: Fri, 9 Apr 2021 17:11:26 +0100 Subject: [PATCH] [AAE-4483] Add empty list drag and drop template in upload from local tab --- .../content-node-selector.component.html | 12 ++++- .../content-node-selector.component.scss | 1 + .../content-node-selector.component.spec.ts | 44 ++++++++++++++++++- .../content-node-selector.component.ts | 7 +++ 4 files changed, 62 insertions(+), 2 deletions(-) diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html index c8cb3dc37cc..e26e0d66505 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html @@ -53,9 +53,19 @@

{{title}}

-
+
+ +
+
{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}
+
{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}
+ +
+ diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss index 23bcc9f2054..b6a7000464c 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss @@ -11,6 +11,7 @@ } .adf-upload-dialog { + box-shadow: none; &__content { max-height: 64%; diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts index bf809d86ebe..30775963515 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts @@ -21,7 +21,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ContentNodeSelectorComponent } from './content-node-selector.component'; import { Node, NodeEntry } from '@alfresco/js-api'; import { By } from '@angular/platform-browser'; -import { SitesService, ContentService } from '@alfresco/adf-core'; +import { SitesService, ContentService, UploadService, FileModel, FileUploadEvent } from '@alfresco/adf-core'; import { of } from 'rxjs'; import { ContentTestingModule } from '../testing/content.testing.module'; import { DocumentListService } from '../document-list/services/document-list.service'; @@ -35,6 +35,7 @@ describe('ContentNodeSelectorComponent', () => { let component: ContentNodeSelectorComponent; let fixture: ComponentFixture; let data: any; + let uploadService: UploadService; beforeEach(() => { data = { @@ -71,6 +72,7 @@ describe('ContentNodeSelectorComponent', () => { const documentListService = TestBed.inject(DocumentListService); const sitesService: SitesService = TestBed.inject(SitesService); + uploadService = TestBed.inject(UploadService); spyOn(documentListService, 'getFolder').and.callThrough(); spyOn(documentListService, 'getFolderNode').and.callThrough(); @@ -393,4 +395,44 @@ describe('ContentNodeSelectorComponent', () => { expect(tabGroup).toBe(undefined); }); }); + + describe('Drag and drop area', () => { + it('should uploadStarted be false by default', () => { + expect(component.uploadStarted).toBe(false); + }); + + it('should uploadStarted become true when the first upload gets started', () => { + const fileUploadEvent = new FileUploadEvent(new FileModel( { name: 'fake-name', size: 100 })); + uploadService.fileUploadStarting.next(fileUploadEvent); + + expect(component.uploadStarted).toBe(true); + }); + + it('should show drag and drop area with the empty list template when no upload has started', async () => { + enableLocalUpload(); + const uploadFromLocalTab = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1]; + uploadFromLocalTab.nativeElement.click(); + + fixture.detectChanges(); + await fixture.whenRenderingDone(); + const emptyListTemplate = fixture.nativeElement.querySelector('[data-automation-id="adf-empty-list"]'); + const dragAndDropArea = fixture.debugElement.query(By.css('.adf-upload-drag-area')); + + expect(emptyListTemplate).not.toBeNull(); + expect(dragAndDropArea).not.toBeNull(); + }); + + it('should not show the empty list template when an upload has started', async () => { + enableLocalUpload(); + const uploadFromLocalTab = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1]; + uploadFromLocalTab.nativeElement.click(); + + component.uploadStarted = true; + fixture.detectChanges(); + await fixture.whenRenderingDone(); + const emptyListTemplate = fixture.nativeElement.querySelector('[data-automation-id="adf-empty-list"]'); + + expect(emptyListTemplate).toBeNull(); + }); + }); }); diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts index affd22312b9..7d7f28eeec9 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts @@ -39,6 +39,9 @@ export class ContentNodeSelectorComponent implements OnInit { hasAllowableOperations = false; isLoading = true; selectedTabIndex: number = 0; + uploadStarted: boolean = false; + + emptyFolderImageUrl: string = '../assets/images/empty_doc_lib.svg'; breadcrumbFolderNode: Node; constructor(private translation: TranslationService, @@ -66,6 +69,10 @@ export class ContentNodeSelectorComponent implements OnInit { this.dialog.backdropClick().subscribe(() => { this.close(); }); + + this.uploadService.fileUploadStarting.subscribe(() => { + this.uploadStarted = true; + }); } close() {