diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index a65af26b20..4b8361fc9b 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -136,3 +136,4 @@ + \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-upload/ng2-alfresco-upload.ts b/ng2-components/ng2-alfresco-upload/ng2-alfresco-upload.ts index 19bca39f12..3c83f3a629 100644 --- a/ng2-components/ng2-alfresco-upload/ng2-alfresco-upload.ts +++ b/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] = [ diff --git a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html index e6ae76dcb7..8ca4031676 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html +++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html @@ -1,4 +1,4 @@ -
+
{{filesUploadingList.length}} {{'FILE_UPLOAD.MESSAGES.COMPLETED' | translate}} diff --git a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts index 294d0541a4..63f689d3e2 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts +++ b/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() - filesUploadingList: FileModel []; + isDialogActive: boolean = false; - private _isDialogActive: boolean = false; + filesUploadingList: FileModel []; private _isDialogMinimized: boolean = false; - constructor(public el: ElementRef) { - console.log('FileUploadingDialogComponent constructor', el); + constructor(private _uploaderService: UploadService) {} + + 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; - } - - /** - * Display the dialog if hidden. - */ - showDialog() { - this._isDialogActive = true; + this.isDialogActive = !this.isDialogActive; } /** diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html index 6cbd731776..0dea421cff 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html @@ -36,10 +36,6 @@
- - -
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts index f877f983ee..951a4d7ceb 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts +++ b/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} 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 59e660ae70..e534092cb9 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 @@ -4,6 +4,4 @@ (onFolderEntityDropped)="onFolderEntityDropped($event)" dropzone="" webkitdropzone="*" #droparea> -
- +
\ No newline at end of file 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 947d08f235..a59c2b8898 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 @@ -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, - private _uploaderService: UploadService) { - console.log('UploadComponent constructor', el); + constructor(private _uploaderService: UploadService) { 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} diff --git a/ng2-components/ng2-alfresco-upload/src/services/upload.service.ts b/ng2-components/ng2-alfresco-upload/src/services/upload.service.ts index de04b87de8..95ef3bfa70 100644 --- a/ng2-components/ng2-alfresco-upload/src/services/upload.service.ts +++ b/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; + private _filesUploadObserver: Observer; + 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;