[ADF-573] support for toggling enabled state (#1912)

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  | 
 
 

ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html

@@ -1,4 +1,4 @@
-<div file-draggable id="UploadBorder" class="upload-border"
+<div [file-draggable]="enabled" id="UploadBorder" class="upload-border"
      (onFilesDropped)="onFilesDropped($event)"
      (onFilesEntityDropped)="onFilesEntityDropped($event)"
      (onFolderEntityDropped)="onFolderEntityDropped($event)"

ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts

@@ -20,6 +20,7 @@ import { EventEmitter, DebugElement } from '@angular/core';
 import { AlfrescoTranslationService, CoreModule, LogService, LogServiceMock, NotificationService } from 'ng2-alfresco-core';
 
 import { UploadDragAreaComponent } from './upload-drag-area.component';
+import { FileDraggableDirective } from '../directives/file-draggable.directive';
 import { TranslationMock } from '../assets/translation.service.mock';
 import { UploadService } from '../services/upload.service';
 import { FileModel } from '../models/file.model';
@@ -39,6 +40,7 @@ describe('UploadDragAreaComponent', () => {
                 CoreModule.forRoot()
             ],
             declarations: [
+                FileDraggableDirective,
                 UploadDragAreaComponent
             ],
             providers: [

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();
-
+        if (this.enabled) {
-        let files: File[] = e.detail.files;
+            let files: File[] = e.detail.files;
-        if (files && files.length > 0) {
+            if (files && files.length > 0) {
-            const fileModels = files.map(f => new FileModel(f, { newVersion: this.versioning }));
+                const fileModels = files.map(f => new FileModel(f, { newVersion: this.versioning }));
-            if (e.detail.data.obj.entry.isFolder) {
+                if (e.detail.data.obj.entry.isFolder) {
-                let id = e.detail.data.obj.entry.id;
+                    let id = e.detail.data.obj.entry.id;
-                this.onFilesDropped(fileModels, id, '/');
+                    this.onFilesDropped(fileModels, id, '/');
-            } else {
+                } else {
-                this.onFilesDropped(fileModels);
+                    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) => {
+        if (this.enabled) {
-            const fileModel = new FileModel(file, { newVersion: this.versioning });
+            item.file((file: File) => {
-            this.uploadService.addToQueue(fileModel);
+                const fileModel = new FileModel(file, { newVersion: this.versioning });
-            let path = item.fullPath.replace(item.name, '');
+                this.uploadService.addToQueue(fileModel);
-            let filePath = this.currentFolderPath + path;
+                let path = item.fullPath.replace(item.name, '');
-            this.uploadService.uploadFilesInTheQueue(this.rootFolderId, filePath, this.onSuccess);
+                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;
 

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();
     });
 
     /*

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<any> = 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);
         }