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

[ADF-2020]The upload button is not disabled when the 'enable upload' checkbox is not checked (#2720)

Browse Source 
remove deprecated properties
This commit is contained in:
Eugenio Romano
2017-11-23 19:41:28 +00:00
committed by GitHub
parent bed33a6bef
commit 440759c66b
5 changed files with 17 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo-shell/src/app/components/files/files.component.html
View File

@@ -9,7 +9,7 @@
[parentId]="getDocumentListCurrentFolderId()"
[versioning]="versioning"
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()">
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
<div *ngIf="errorMessage" class="error-message">
<button (click)="resetError()" mat-icon-button>
<mat-icon>highlight_off</mat-icon>
@@ -394,7 +394,7 @@
(error)="handleUploadError($event)"
[versioning]="versioning"
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()"
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>
@@ -411,7 +411,7 @@
[versioning]="versioning"
(error)="handleUploadError($event)"
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()"
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>

22
docs/upload-button.component.md
View File

@@ -9,7 +9,6 @@
* [Events](#events)
- [Details](#details)
* [How to show notification message with no permission](#how-to-show-notification-message-with-no-permission)
* [How to disable the button when the delete permission is missing](#how-to-disable-the-button-when-the-delete-permission-is-missing)
<!-- tocstop -->
@@ -34,17 +33,13 @@
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Toggle component disabled state if there is no node permission checking |
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| uploadFolders | boolean | false | Allow/disallow upload folders (only for Chrome) |
| multipleFiles | boolean | false | Allow/disallow multiple files |
| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
| maxFilesSize | number | | if defined allow to upload files only with this max file size. the size of a file is in bytes |
| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node. **Deprecated in 1.6.2: use parentId instead.** |
| parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| staticTitle | string | (predefined) | define the text of the upload button |
| **(deprecated)** disableWithNoPermission ***use node permission directive from core instead*** | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
| tooltip | string | | Custom tooltip |
### Events
@@ -52,6 +47,7 @@
| Name | Description |
| --- | --- |
| success | Raised when the file is uploaded |
| permissionEvent | permissionEvent that is raised when the delete permission is missing |
## Details
@@ -63,7 +59,7 @@ You can subscribe to this event from your component and use the NotificationServ
```html
<adf-upload-button
[rootFolderId]="currentFolderId"
[parentId]="currentFolderId"
(permissionEvent)="onUploadPermissionFailed($event)">
</adf-upload-button>
```
@@ -81,17 +77,3 @@ export class MyComponent {
```
![Upload notification message](docassets/images/upload-notification-message.png)
### How to disable the button when the delete permission is missing
You can easily disable the button when the user doesn't have the permission to perform the action.
The UploadButtonComponent provides the property disableWithNoPermission that can be true. In this way the button should be disabled if the delete permission is missing for the node.
```html
<adf-upload-button
[rootFolderId]="currentFolderId"
[disableWithNoPermission]="true">
</adf-upload-button>
```
![Upload disable button](docassets/images/upload-disable-button.png)

1
lib/content-services/upload/components/upload-button.component.html
View File

@@ -1,4 +1,5 @@
<form class="adf-upload-button-file-container">
isButtonDisabled {{ isButtonDisabled}}
<!--Files Upload-->
<a *ngIf="!uploadFolders"
[disabled]="isButtonDisabled()"

94
lib/content-services/upload/components/upload-button.component.spec.ts
View File

@@ -25,21 +25,12 @@ import { TranslationMock } from '@alfresco/adf-core';
describe('UploadButtonComponent', () => {
let file = {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'};
let file = { name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json' };
let fakeEvent = {
currentTarget: {
files: [file]
},
target: {value: 'fake-name-1'}
};
let fakeFolderNodeWithoutPermission = {
allowableOperations: [
'update'
],
isFolder: true,
name: 'Folder Fake Name',
nodeType: 'cm:folder'
target: { value: 'fake-name-1' }
};
let fakeFolderNodeWithPermission = {
@@ -67,7 +58,7 @@ describe('UploadButtonComponent', () => {
],
providers: [
UploadService,
{provide: TranslationService, useClass: TranslationMock}
{ provide: TranslationService, useClass: TranslationMock }
]
}).compileComponents();
}));
@@ -107,74 +98,13 @@ describe('UploadButtonComponent', () => {
expect(compiled.querySelector('#uploadFolder')).toBeDefined();
});
it('should emit the permissionEvent, without permission and disableWithNoPermission false', (done) => {
component.rootFolderId = '-my-';
component.disableWithNoPermission = false;
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithoutPermission));
fixture.detectChanges();
component.permissionEvent.subscribe(permission => {
expect(permission).toBeDefined();
expect(permission.type).toEqual('content');
expect(permission.action).toEqual('upload');
expect(permission.permission).toEqual('create');
done();
});
component.onFilesAdded(fakeEvent);
});
it('should show the disabled button, without permission and disableWithNoPermission true', () => {
component.rootFolderId = '-my-';
component.disableWithNoPermission = true;
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithoutPermission));
component.onFilesAdded(fakeEvent);
let compiled = fixture.debugElement.nativeElement;
fixture.detectChanges();
expect(compiled.querySelector('#upload-single-file')).toBeDefined();
expect(compiled.querySelector('#upload-single-file').disabled).toBe(true);
});
it('should show the enabled button with permission and disableWithNoPermission true', () => {
component.rootFolderId = '-my-';
component.disableWithNoPermission = true;
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
component.onFilesAdded(fakeEvent);
let compiled = fixture.debugElement.nativeElement;
fixture.detectChanges();
expect(compiled.querySelector('#upload-single-file')).toBeDefined();
expect(compiled.querySelector('#upload-single-file').disabled).toBe(false);
});
it('should show the enabled button with permission and disableWithNoPermission false', () => {
component.rootFolderId = '-my-';
component.disableWithNoPermission = false;
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
component.onFilesAdded(fakeEvent);
let compiled = fixture.debugElement.nativeElement;
fixture.detectChanges();
expect(compiled.querySelector('#upload-single-file')).toBeDefined();
expect(compiled.querySelector('#upload-single-file').disabled).toBe(false);
});
it('should call uploadFile with the default root folder', () => {
component.rootFolderId = '-root-';
component.currentFolderPath = '/root-fake-/sites-fake/folder-fake';
component.success = null;
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
fixture.detectChanges();
@@ -184,12 +114,11 @@ describe('UploadButtonComponent', () => {
});
it('should call uploadFile with a custom root folder', () => {
component.currentFolderPath = '/root-fake-/sites-fake/folder-fake';
component.rootFolderId = '-my-';
component.success = null;
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
@@ -201,12 +130,11 @@ describe('UploadButtonComponent', () => {
it('should create a folder and emit an File uploaded event', (done) => {
component.rootFolderId = '-my-';
component.currentFolderPath = '/fake-root-path';
spyOn(contentService, 'createFolder').and.returnValue(Observable.of(true));
spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
fixture.detectChanges();
component.success.subscribe(e => {
@@ -260,8 +188,8 @@ describe('UploadButtonComponent', () => {
describe('filesize', () => {
const files: File[] = [
<File> {name: 'bigFile.png', size: 1000},
<File> {name: 'smallFile.png', size: 10}
<File> { name: 'bigFile.png', size: 1000 },
<File> { name: 'smallFile.png', size: 10 }
];
let addToQueueSpy;
@@ -319,9 +247,9 @@ describe('UploadButtonComponent', () => {
describe('uploadFiles', () => {
const files: File[] = [
<File> {name: 'phobos.jpg'},
<File> {name: 'deimos.png'},
<File> {name: 'ganymede.bmp'}
<File> { name: 'phobos.jpg' },
<File> { name: 'deimos.png' },
<File> { name: 'ganymede.bmp' }
];
let addToQueueSpy;

41
lib/content-services/upload/components/upload-button.component.ts
View File

@@ -22,7 +22,6 @@ import {
FileUtils,
LogService,
NodePermissionSubject,
NotificationService,
TranslationService,
UploadService
} from '@alfresco/adf-core';
@@ -54,18 +53,6 @@ import 'rxjs/add/observable/throw';
})
export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionSubject {
/** @deprecated Deprecated in 1.6.0, you can use UploadService events and NotificationService api instead. */
@Input()
showNotificationBar: boolean = true;
/** @deprecated Deprecated in 1.6.0, this property is not used for couple of releases already. */
@Input()
currentFolderPath: string = '/';
/** @deprecated Deprecated in 1.8.0, use the button with combination of adf-node-permission directive */
@Input()
disableWithNoPermission: boolean = false;
@Input()
disabled: boolean = false;
@@ -112,7 +99,6 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
constructor(private uploadService: UploadService,
private translateService: TranslationService,
private logService: LogService,
private notificationService: NotificationService,
private apiService: AlfrescoApiService) {
}
@@ -130,18 +116,9 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
}
isButtonDisabled(): boolean {
return this.isForceDisable() || this.isDisableWithNoPermission();
}
isForceDisable(): boolean {
return this.disabled ? true : undefined;
}
/** @deprecated Deprecated in 1.8.0, use the button with combination of adf-node-permission directive */
isDisableWithNoPermission(): boolean {
return !this.hasPermission && this.disableWithNoPermission ? true : undefined;
}
onFilesAdded($event: any): void {
let files: File[] = FileUtils.toFileArray($event.currentTarget.files);
@@ -179,9 +156,6 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
if (latestFilesAdded.length > 0) {
this.uploadService.addToQueue(...latestFilesAdded);
this.uploadService.uploadFilesInTheQueue(this.success);
if (this.showNotificationBar) {
this.showUndoNotificationBar(latestFilesAdded);
}
}
}
@@ -238,21 +212,6 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
return acceptableSize;
}
/**
* Show undo notification bar.
*
* @param {FileModel[]} latestFilesAdded - files in the upload queue enriched with status flag and xhr object.
*/
private showUndoNotificationBar(latestFilesAdded: FileModel[]): void {
let messageTranslate: any, actionTranslate: any;
messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');
this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).onAction().subscribe(() => {
this.uploadService.cancelUpload(...latestFilesAdded);
});
}
checkPermission() {
if (this.rootFolderId) {
this.getFolderNode(this.rootFolderId).subscribe(