inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#105 Refactoring file dialog component

Browse Source
This commit is contained in:
mauriziovitale84
2016-06-02 09:43:34 +01:00
parent 8f1659fca1
commit 58ceebe53a
9 changed files with 31 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ng2-components/ng2-alfresco-upload/ng2-alfresco-upload.ts
View File

@@ -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] = [

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

@@ -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}}

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

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

4
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html
View File

@@ -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>

18
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
View File

@@ -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}

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

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

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

@@ -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}

7
ng2-components/ng2-alfresco-upload/src/services/upload.service.ts
View File

@@ -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;