#105 Refactoring file dialog component

demo-shell-ng2/app/components/files/files.component.html

@@ -136,3 +136,4 @@
 <alfresco-viewer [urlFile]="(urlFile)" [overlayMode]="true" [hidden]="!fileShowed" >
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>
+<file-uploading-dialog></file-uploading-dialog>

ng2-components/ng2-alfresco-upload/ng2-alfresco-upload.ts

@@ -18,6 +18,7 @@
 import { UploadDragAreaComponent } from './src/components/upload-drag-area.component';
 import { FileDraggableDirective } from './src/directives/file-draggable.directive';
 import { UploadButtonComponent } from './src/components/upload-button.component';
+import { FileUploadingDialogComponent } from './src/components/file-uploading-dialog.component';
 import { UploadService } from './src/services/upload.service';
 
 /**
@@ -37,19 +38,21 @@ import { UploadService } from './src/services/upload.service';
  */
 
 export * from './src/components/upload-button.component';
+export * from './src/components/file-uploading-dialog.component';
 export * from './src/components/upload-drag-area.component';
 export * from './src/services/upload.service';
 export * from './src/directives/file-draggable.directive';
 
 export default {
-    components: [UploadDragAreaComponent, UploadButtonComponent],
+    components: [UploadDragAreaComponent, UploadButtonComponent, FileUploadingDialogComponent],
     providers: [FileDraggableDirective],
     directives: [UploadService]
 };
 
 export const ALFRESCO_ULPOAD_COMPONENTS: [any] = [
     UploadDragAreaComponent,
-    UploadButtonComponent
+    UploadButtonComponent,
+    FileUploadingDialogComponent
 ];
 
 export const ALFRESCO_ULPOAD_DIRECTIVES: [any] = [

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="file-dialog" [ngClass]="{show: _isDialogActive}">
+<div *ngIf="filesUploadingList" class="file-dialog" [ngClass]="{show: isDialogActive}">
     <div class="header">
         <div class="title">
             {{filesUploadingList.length}} {{'FILE_UPLOAD.MESSAGES.COMPLETED' | translate}}

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, Input } from 'angular2/core';
+import { Component } from 'angular2/core';
 import { FileModel } from '../models/file.model';
 import { FileUploadingListComponent } from './file-uploading-list.component';
 import { AlfrescoPipeTranslate } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
+import { UploadService } from '../services/upload.service';
 
 declare let __moduleName: string;
 
@@ -44,29 +45,28 @@ declare let __moduleName: string;
 })
 export class FileUploadingDialogComponent {
 
-    @Input()
+    isDialogActive: boolean = false;
-    filesUploadingList: FileModel [];
 
-    private _isDialogActive: boolean = false;
+    filesUploadingList: FileModel [];
 
     private _isDialogMinimized: boolean = false;
 
-    constructor(public el: ElementRef) {
+    constructor(private _uploaderService: UploadService) {}
-        console.log('FileUploadingDialogComponent constructor', el);
+
+    ngOnInit() {
+        this._uploaderService.filesUpload$.subscribe((fileList: FileModel[]) => {
+            this.filesUploadingList = fileList;
+            if (this.filesUploadingList.length > 0) {
+                this.isDialogActive = true;
+            }
+        });
     }
 
     /**
      * Display and hide the dialog component.
      */
     toggleShowDialog() {
-        this._isDialogActive = !this._isDialogActive;
+        this.isDialogActive = !this.isDialogActive;
-    }
-
-    /**
-     * Display the dialog if hidden.
-     */
-    showDialog() {
-        this._isDialogActive = true;
     }
 
     /**

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html

@@ -36,10 +36,6 @@
     </div>
 </form>
 
-<!--Upload Dialog-->
-<file-uploading-dialog [hidden]="showDialogUpload" [filesUploadingList]="filesUploadingList"
-                       #fileUploadingDialog></file-uploading-dialog>
-
 <!--Notification bar-->
 <div id="undo-notification-bar"  class="mdl-js-snackbar mdl-snackbar"
      #undoNotificationBar>

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts

@@ -19,7 +19,6 @@
 import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from 'angular2/core';
 import { UploadService } from '../services/upload.service';
 import { FileModel } from '../models/file.model';
-import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
 import { AlfrescoTranslationService, AlfrescoPipeTranslate } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 import 'rxjs/Rx';
 
@@ -50,7 +49,6 @@ declare let __moduleName: string;
 @Component({
     selector: 'alfresco-upload-button',
     moduleId: __moduleName,
-    directives: [FileUploadingDialogComponent],
     templateUrl: './upload-button.component.html',
     styleUrls: ['./upload-button.component.css'],
     pipes: [AlfrescoPipeTranslate]
@@ -60,9 +58,6 @@ export class UploadButtonComponent {
     @ViewChild('undoNotificationBar')
     undoNotificationBar: any;
 
-    @ViewChild('fileUploadingDialog')
-    fileUploadingDialogComponent: FileUploadingDialogComponent;
-
     @Input()
     showUploadDialog: boolean = true;
 
@@ -87,8 +82,6 @@ export class UploadButtonComponent {
     @Output()
     onSuccess = new EventEmitter();
 
-    filesUploadingList: FileModel [] = [];
-
     translate: AlfrescoTranslationService;
 
 
@@ -157,10 +150,6 @@ export class UploadButtonComponent {
         if (files.length) {
             let latestFilesAdded = this._uploaderService.addToQueue(files);
             this._uploaderService.uploadFilesInTheQueue(path, this.onSuccess);
-            this.filesUploadingList = this._uploaderService.getQueue();
-            if (this.showUploadDialog) {
-                this._showDialog();
-            }
             if (this.showUdoNotificationBar) {
                 this._showUndoNotificationBar(latestFilesAdded);
             }
@@ -239,13 +228,6 @@ export class UploadButtonComponent {
         });
     }
 
-    /**
-     * Show the upload dialog.
-     */
-    private _showDialog(): void {
-        this.fileUploadingDialogComponent.showDialog();
-    }
-
     /**
      * Return the site from the path
      * @returns {any}

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

@@ -4,6 +4,4 @@
      (onFolderEntityDropped)="onFolderEntityDropped($event)"
      dropzone="" webkitdropzone="*" #droparea>
     <ng-content></ng-content>
-</div>
+</div>
-<file-uploading-dialog [hidden]="showDialogUpload" [filesUploadingList]="filesUploadingList"
-                       #fileUploadingDialog></file-uploading-dialog>

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

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from 'angular2/core';
+import { Component, Input, Output, EventEmitter } from 'angular2/core';
 import { UploadService } from '../services/upload.service';
-import { FileModel } from '../models/file.model';
-import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
 import { FileDraggableDirective } from '../directives/file-draggable.directive';
 
 declare let __moduleName: string;
@@ -37,20 +35,12 @@ declare let __moduleName: string;
 @Component({
     selector: 'alfresco-upload-drag-area',
     moduleId: __moduleName,
-    directives: [FileDraggableDirective, FileUploadingDialogComponent],
+    directives: [FileDraggableDirective],
     templateUrl: './upload-drag-area.component.html',
     styleUrls: ['./upload-drag-area.component.css']
 })
 export class UploadDragAreaComponent {
 
-    @ViewChild('fileUploadingDialog')
-    fileUploadingDialogComponent: FileUploadingDialogComponent;
-
-    @Input()
-    showUploadDialog: boolean = true;
-
-    filesUploadingList: FileModel [] = [];
-
     @Input()
     uploaddirectory: string = '';
 
@@ -60,9 +50,7 @@ export class UploadDragAreaComponent {
     @Output()
     onSuccess = new EventEmitter();
 
-    constructor(public el: ElementRef,
+    constructor(private _uploaderService: UploadService) {
-                private _uploaderService: UploadService) {
-        console.log('UploadComponent constructor', el);
 
         let site = this.getSiteId();
         let container = this.getContainerId();
@@ -84,10 +72,6 @@ export class UploadDragAreaComponent {
         if (files.length) {
             this._uploaderService.addToQueue(files);
             this._uploaderService.uploadFilesInTheQueue(this.uploaddirectory, this.onSuccess);
-            this.filesUploadingList = this._uploaderService.getQueue();
-            if (this.showUploadDialog) {
-                this._showDialog();
-            }
         }
     }
 
@@ -102,10 +86,6 @@ export class UploadDragAreaComponent {
             let path = item.fullPath.replace(item.name, '');
             let filePath = self.uploaddirectory + path;
             self._uploaderService.uploadFilesInTheQueue(filePath, self.onSuccess);
-            self.filesUploadingList = self._uploaderService.getQueue();
-            if (self.showUploadDialog) {
-                self._showDialog();
-            }
         });
     }
 
@@ -153,13 +133,6 @@ export class UploadDragAreaComponent {
         }
     }
 
-    /**
-     * Show the upload dialog.
-     */
-    private _showDialog(): void {
-        this.fileUploadingDialogComponent.showDialog();
-    }
-
     /**
      * Return the site from the path
      * @returns {string}

ng2-components/ng2-alfresco-upload/src/services/upload.service.ts

@@ -19,6 +19,7 @@
 import { FileModel } from '../models/file.model';
 import { EventEmitter, Injectable } from 'angular2/core';
 import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
 import { Response } from 'angular2/http';
 import { AlfrescoSettingsService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 
@@ -42,11 +43,14 @@ export class UploadService {
 
     private _queue: FileModel[] = [];
 
+    filesUpload$: Observable<FileModel[]>;
+    private _filesUploadObserver: Observer<FileModel[]>;
+
     private _alfrescoClient: any;
 
     constructor(private settings: AlfrescoSettingsService) {
         console.log('UploadService constructor');
-
+        this.filesUpload$ = new Observable(observer =>  this._filesUploadObserver = observer).share();
         this._host = settings.host;
         this._alfrescoClient = this.getAlfrescoClient();
     }
@@ -134,6 +138,7 @@ export class UploadService {
                 let uploadingFileModel = new FileModel(file);
                 latestFilesAdded.push(uploadingFileModel);
                 this._queue.push(uploadingFileModel);
+                this._filesUploadObserver.next(this._queue);
             }
         }
         return latestFilesAdded;