diff --git a/ng2-components/ng2-alfresco-upload/README.md b/ng2-components/ng2-alfresco-upload/README.md index 589667e2ad..7941b66513 100644 --- a/ng2-components/ng2-alfresco-upload/README.md +++ b/ng2-components/ng2-alfresco-upload/README.md @@ -178,7 +178,7 @@ Attribute | Options | Default | Description | Mandatory `currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | 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 | `staticTitle` | *string* | 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' or 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' string in the JSON text file | define the text of the upload button| -`disableWithNoPermission` | *boolean* | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled | +`disableWithNoPermission` | *boolean* | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled | ### How to show notification message with no permission You can show a notification error when the user doesn't have the right permission to perform the action. 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 78f28aaa24..b39afd1b6b 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 @@ -1,6 +1,6 @@
-
+
file_upload @@ -11,7 +11,7 @@ (change)="onFilesAdded($event)" multiple="multiple" accept="{{acceptedFilesType}}" - [attr.disabled]="isDisabled()" + [attr.disabled]="isButtonDisabled()" #uploadFiles> @@ -22,13 +22,13 @@
-
+
file_upload @@ -36,7 +36,7 @@ (change)="onDirectoryAdded($event)" multiple="multiple" accept="{{acceptedFilesType}}" - [attr.disabled]="isDisabled()" + [attr.disabled]="isButtonDisabled()" webkitdirectory directory multiple #uploadFolders>
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts index 9c61bebc7a..717eab5a3a 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts @@ -17,7 +17,7 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { UploadButtonComponent } from './upload-button.component'; -import { DebugElement } from '@angular/core'; +import { DebugElement, SimpleChange } from '@angular/core'; import { CoreModule, AlfrescoTranslationService, NotificationService } from 'ng2-alfresco-core'; import { TranslationMock } from '../assets/translation.service.mock'; import { UploadService } from '../services/upload.service'; @@ -175,6 +175,7 @@ describe('UploadButtonComponent', () => { spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission)); + component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) }); component.onFilesAdded(fakeEvent); let compiled = fixture.debugElement.nativeElement; fixture.detectChanges(); @@ -188,6 +189,7 @@ describe('UploadButtonComponent', () => { spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission)); + component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) }); component.onFilesAdded(fakeEvent); let compiled = fixture.debugElement.nativeElement; fixture.detectChanges(); @@ -196,11 +198,13 @@ describe('UploadButtonComponent', () => { }); it('should call uploadFile with the default root folder', () => { + component.rootFolderId = '-root-'; component.currentFolderPath = '/root-fake-/sites-fake/folder-fake'; component.onSuccess = null; spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission)); + component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) }); uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue'); fixture.detectChanges(); @@ -215,6 +219,8 @@ describe('UploadButtonComponent', () => { component.onSuccess = null; spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission)); + component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) }); + uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue'); fixture.detectChanges(); @@ -224,12 +230,14 @@ describe('UploadButtonComponent', () => { }); it('should create a folder and emit an File uploaded event', (done) => { + component.rootFolderId = '-my-'; component.currentFolderPath = '/fake-root-path'; - fixture.detectChanges(); spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission)); spyOn(uploadService, 'callApiCreateFolder').and.returnValue(fakeResolvePromise); + component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) }); + fixture.detectChanges(); component.onSuccess.subscribe(e => { expect(e.value).toEqual('File uploaded'); done(); @@ -245,8 +253,12 @@ describe('UploadButtonComponent', () => { }); it('should emit an onError event when the folder already exist', (done) => { + component.rootFolderId = '-my-'; spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission)); spyOn(uploadService, 'callApiCreateFolder').and.returnValue(fakeRejectPromise); + + component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) }); + component.onError.subscribe(e => { expect(e.value).toEqual('FILE_UPLOAD.MESSAGES.FOLDER_ALREADY_EXIST'); done(); 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 e2c34807af..96a0c29d69 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 @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ElementRef, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core'; +import { Component, ElementRef, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import { Subject } from 'rxjs/Rx'; import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2-alfresco-core'; import { UploadService } from '../services/upload.service'; @@ -98,7 +98,8 @@ export class UploadButtonComponent implements OnInit, OnChanges { @Output() permissionEvent: EventEmitter = new EventEmitter(); - private disableButton: boolean = false; + private hasPermission: boolean = false; + private permissionValue: Subject = new Subject(); constructor(private el: ElementRef, @@ -111,26 +112,33 @@ export class UploadButtonComponent implements OnInit, OnChanges { } } - isDisabled(): boolean { - return this.disabled || this.disableButton; - } - ngOnInit() { - this.permissionValue.subscribe((hasPermission: boolean) => { - if (!hasPermission && this.disableWithNoPermission) { - this.disableButton = true; - } else { - this.disableButton = undefined; - } + this.permissionValue.subscribe((permission: boolean) => { + this.hasPermission = permission; }); } - ngOnChanges(changes) { - this.checkPermission(); + ngOnChanges(changes: SimpleChanges) { + let rootFolderId = changes['rootFolderId']; + if (rootFolderId && rootFolderId.currentValue) { + this.checkPermission(); + } let formFields = this.createFormFields(); this.uploadService.setOptions(formFields, this.versioning); } + isButtonDisabled(): boolean { + return this.isForceDisable() || this.isDisableWithNoPermission(); + } + + isForceDisable(): boolean { + return this.disabled ? true : undefined; + } + + isDisableWithNoPermission(): boolean { + return !this.hasPermission && this.disableWithNoPermission ? true : undefined; + } + /** * Method called when files are dropped in the drag area. * @@ -138,15 +146,12 @@ export class UploadButtonComponent implements OnInit, OnChanges { */ onFilesAdded($event: any): void { let files = $event.currentTarget.files; - this.permissionValue.subscribe((hasPermission: boolean) => { - if (hasPermission) { - this.uploadFiles(this.currentFolderPath, files); - } else { - this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'})); - } - }); - this.checkPermission(); + if (this.hasPermission) { + this.uploadFiles(this.currentFolderPath, files); + } else { + this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'})); + } // reset the value of the input file $event.target.value = ''; } @@ -158,39 +163,34 @@ export class UploadButtonComponent implements OnInit, OnChanges { */ onDirectoryAdded($event: any): void { let files = $event.currentTarget.files; - this.permissionValue.subscribe((hasPermission: boolean) => { - if (hasPermission) { - let hashMapDir = this.convertIntoHashMap(files); + if (this.hasPermission) { + let hashMapDir = this.convertIntoHashMap(files); - hashMapDir.forEach((filesDir, directoryPath) => { - let directoryName = this.getDirectoryName(directoryPath); - let absolutePath = this.currentFolderPath + this.getDirectoryPath(directoryPath); + hashMapDir.forEach((filesDir, directoryPath) => { + let directoryName = this.getDirectoryName(directoryPath); + let absolutePath = this.currentFolderPath + this.getDirectoryPath(directoryPath); - this.uploadService.createFolder(absolutePath, directoryName, this.rootFolderId) - .subscribe( - res => { - let relativeDir = this.currentFolderPath + '/' + directoryPath; - this.uploadFiles(relativeDir, filesDir); - }, - error => { - let errorMessagePlaceholder = this.getErrorMessage(error.response); - if (errorMessagePlaceholder) { - this.onError.emit({value: errorMessagePlaceholder}); - let errorMessage = this.formatString(errorMessagePlaceholder, [directoryName]); - if (errorMessage) { - this._showErrorNotificationBar(errorMessage); - } + this.uploadService.createFolder(absolutePath, directoryName, this.rootFolderId) + .subscribe( + res => { + let relativeDir = this.currentFolderPath + '/' + directoryPath; + this.uploadFiles(relativeDir, filesDir); + }, + error => { + let errorMessagePlaceholder = this.getErrorMessage(error.response); + if (errorMessagePlaceholder) { + this.onError.emit({value: errorMessagePlaceholder}); + let errorMessage = this.formatString(errorMessagePlaceholder, [directoryName]); + if (errorMessage) { + this._showErrorNotificationBar(errorMessage); } - this.logService.error(error); } - ); - }); - } else { - this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'})); - } - }); - - this.checkPermission(); + } + ); + }); + } else { + this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'})); + } // reset the value of the input file $event.target.value = ''; } @@ -320,11 +320,11 @@ export class UploadButtonComponent implements OnInit, OnChanges { checkPermission() { if (this.rootFolderId) { this.uploadService.getFolderNode(this.rootFolderId).subscribe( - res => { + (res) => { this.permissionValue.next(this.hasCreatePermission(res)); }, - error => { - this.logService.error(error); + (error) => { + this.onError.emit(error); } ); }