diff --git a/ng2-components/ng2-alfresco-upload/README.md b/ng2-components/ng2-alfresco-upload/README.md index 144c414728..fae3b7bbe2 100644 --- a/ng2-components/ng2-alfresco-upload/README.md +++ b/ng2-components/ng2-alfresco-upload/README.md @@ -287,12 +287,14 @@ platformBrowserDynamic().bootstrapModule(AppModule); | --- | --- | | `onSuccess` | The event is emitted when the file is uploaded | -#### Propertoes +#### Properties | Name | Type | Default | Description | | --- | --- | --- | --- | +| `enabled` | *boolean* | true | Toggle component enabled state | | `showNotificationBar` | *boolean* | true | Hide/show notification bar | -| `currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded | +| `rootFolderId` | *string* | '-root-' | The ID of the root folder node. +| `currentFolderPath` | *string* | '/' | define the path where the files are uploaded | | `versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created | diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html index 5ae429edf2..682099393c 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html @@ -1,4 +1,4 @@ -
{ CoreModule.forRoot() ], declarations: [ + FileDraggableDirective, UploadDragAreaComponent ], providers: [ diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts index b8b6974162..576a954d3c 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts @@ -20,8 +20,6 @@ import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2 import { UploadService } from '../services/upload.service'; import { FileModel } from '../models/file.model'; -declare let componentHandler: any; - const ERROR_FOLDER_ALREADY_EXIST = 409; /** @@ -42,6 +40,9 @@ export class UploadDragAreaComponent { private static DEFAULT_ROOT_ID: string = '-root-'; + @Input() + enabled: boolean = true; + @Input() showNotificationBar: boolean = true; @@ -73,15 +74,16 @@ export class UploadDragAreaComponent { onUploadFiles(e: CustomEvent) { e.stopPropagation(); e.preventDefault(); - - let files: File[] = e.detail.files; - if (files && files.length > 0) { - const fileModels = files.map(f => new FileModel(f, { newVersion: this.versioning })); - if (e.detail.data.obj.entry.isFolder) { - let id = e.detail.data.obj.entry.id; - this.onFilesDropped(fileModels, id, '/'); - } else { - this.onFilesDropped(fileModels); + if (this.enabled) { + let files: File[] = e.detail.files; + if (files && files.length > 0) { + const fileModels = files.map(f => new FileModel(f, { newVersion: this.versioning })); + if (e.detail.data.obj.entry.isFolder) { + let id = e.detail.data.obj.entry.id; + this.onFilesDropped(fileModels, id, '/'); + } else { + this.onFilesDropped(fileModels); + } } } } @@ -92,7 +94,7 @@ export class UploadDragAreaComponent { * @param {File[]} files - files dropped in the drag area. */ onFilesDropped(files: FileModel[], rootId?: string, directory?: string): void { - if (files.length) { + if (this.enabled && files.length) { this.uploadService.addToQueue(...files); this.uploadService.uploadFilesInTheQueue(rootId || this.rootFolderId, directory || this.currentFolderPath, this.onSuccess); let latestFilesAdded = this.uploadService.getQueue(); @@ -107,13 +109,15 @@ export class UploadDragAreaComponent { * @param item - FileEntity */ onFilesEntityDropped(item: any): void { - item.file((file: File) => { - const fileModel = new FileModel(file, { newVersion: this.versioning }); - this.uploadService.addToQueue(fileModel); - let path = item.fullPath.replace(item.name, ''); - let filePath = this.currentFolderPath + path; - this.uploadService.uploadFilesInTheQueue(this.rootFolderId, filePath, this.onSuccess); - }); + if (this.enabled) { + item.file((file: File) => { + const fileModel = new FileModel(file, { newVersion: this.versioning }); + this.uploadService.addToQueue(fileModel); + let path = item.fullPath.replace(item.name, ''); + let filePath = this.currentFolderPath + path; + this.uploadService.uploadFilesInTheQueue(this.rootFolderId, filePath, this.onSuccess); + }); + } } /** @@ -121,7 +125,7 @@ export class UploadDragAreaComponent { * @param folder - name of the dropped folder */ onFolderEntityDropped(folder: any): void { - if (folder.isDirectory) { + if (this.enabled && folder.isDirectory) { let relativePath = folder.fullPath.replace(folder.name, ''); relativePath = this.currentFolderPath + relativePath; diff --git a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts index e2f99a082b..8aa8e4b371 100644 --- a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts +++ b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts @@ -15,6 +15,7 @@ * limitations under the License. */ +import { ElementRef } from '@angular/core'; import { FileDraggableDirective } from '../directives/file-draggable.directive'; describe('FileDraggableDirective', () => { @@ -22,7 +23,22 @@ describe('FileDraggableDirective', () => { let component: FileDraggableDirective; beforeEach( () => { - component = new FileDraggableDirective(null, null); + let el = new ElementRef(null); + component = new FileDraggableDirective(el, null); + }); + + it('should always be enabled by default', () => { + expect(component.enabled).toBeTruthy(); + }); + + it('should not allow drad and drop when disabled', () => { + component.enabled = false; + let event = new CustomEvent('custom-event'); + spyOn(event, 'preventDefault').and.stub(); + component.onDropFiles(event); + component.onDragEnter(event); + component.onDragLeave(event); + expect(event.preventDefault).not.toHaveBeenCalled(); }); /* diff --git a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts index 136d2f808a..f48dbf04a2 100644 --- a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts +++ b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Directive, EventEmitter, Output, OnInit, OnDestroy, ElementRef, NgZone } from '@angular/core'; +import { Directive, EventEmitter, Input, Output, OnInit, OnDestroy, ElementRef, NgZone } from '@angular/core'; /** * [file-draggable] @@ -35,6 +35,9 @@ export class FileDraggableDirective implements OnInit, OnDestroy { files: File []; + @Input('file-draggable') + enabled: boolean = true; + @Output() onFilesDropped: EventEmitter = new EventEmitter(); @@ -72,7 +75,7 @@ export class FileDraggableDirective implements OnInit, OnDestroy { * @param event DOM event. */ onDropFiles(event: any): void { - if (!event.defaultPrevented) { + if (this.enabled && !event.defaultPrevented) { this.preventDefault(event); let items = event.dataTransfer.items; @@ -120,7 +123,7 @@ export class FileDraggableDirective implements OnInit, OnDestroy { * @param {event} event - DOM event. */ onDragEnter(event: Event): void { - if (!event.defaultPrevented) { + if (this.enabled && !event.defaultPrevented) { this.preventDefault(event); this.element.classList.add(this.cssClassName); } @@ -132,7 +135,7 @@ export class FileDraggableDirective implements OnInit, OnDestroy { * @param {event} event - DOM event. */ onDragLeave(event: Event): void { - if (!event.defaultPrevented) { + if (this.enabled && !event.defaultPrevented) { this.preventDefault(event); this.element.classList.remove(this.cssClassName); } @@ -144,7 +147,7 @@ export class FileDraggableDirective implements OnInit, OnDestroy { * @param event */ onDragOver(event: Event): void { - if (!event.defaultPrevented) { + if (this.enabled && !event.defaultPrevented) { this.preventDefault(event); this.element.classList.add(this.cssClassName); }