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

upload button enhancements (#1835)

Browse Source 
- add support for [disabled] attribute
- move to angular/material icons
- improve demo shell layout (files.component)
This commit is contained in:
Denys Vuika
2017-04-21 15:55:45 +01:00
committed by Mario Romano
parent 39ffd515d9
commit 95711616ca
5 changed files with 83 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo-shell-ng2/app/components/files/files.component.css
View File

@@ -15,8 +15,3 @@
.error-message--text { .error-message--text {
color: #d50000; color: #d50000;
} }
.options-container {
width: 250px;
margin: 20px;
}

116
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -121,75 +121,65 @@
<context-menu-holder></context-menu-holder> <context-menu-holder></context-menu-holder>
<p class="options-container"> <div class="container">
<label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <section>
<input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" > <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
<span class="mdl-switch__label">Multiple File Upload</span> </section>
</label>
</p>
<section>
<md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
</section>
<p class="options-container"> <section>
<label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
<input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()"> </section>
<span class="mdl-switch__label">Folder Upload</span>
</label>
</p>
<p class="options-container"> <section>
<label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
<input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()"> </section>
<span class="mdl-switch__label">Filter extension</span>
</label>
</p>
<p style="width:250px;margin: 20px;"> <section>
<label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable when user has no permissions</md-slide-toggle>
<input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()"> </section>
<span class="mdl-switch__label">Versioning</span>
</label>
</p>
<p class="options-container"> <h5>Upload</h5>
<label for="switch-disableWithNoPermission" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <section *ngIf="acceptedFilesTypeShow">
<input type="checkbox" id="switch-disableWithNoPermission" class="mdl-switch__input" (change)="toggleDisableWithNoPermission()" > <md-input-container>
<span class="mdl-switch__label">Disable upload</span> <input md-input placeholder="Extension accepted" [(ngModel)]="acceptedFilesType" data-automation-id="accepted-files-type">
</label> </md-input-container>
</p> </section>
<div *ngIf="!acceptedFilesTypeShow">
<h5>Upload</h5> <alfresco-upload-button
<br> #uploadButton
<div *ngIf="acceptedFilesTypeShow"> [disabled]="!enableUpload"
<label class="mdl-input__label">Extension accepted data-automation-id="multiple-file-upload"
<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType"> [rootFolderId]="documentList.currentFolderId"
</label> [multipleFiles]="multipleFileUpload"
<br/> [uploadFolders]="folderUpload"
</div> [versioning]="versioning"
<div *ngIf="!acceptedFilesTypeShow"> [disableWithNoPermission]="disableWithNoPermission"
<alfresco-upload-button #uploadButton (permissionEvent)="onUploadPermissionFailed($event)">
data-automation-id="multiple-file-upload" </alfresco-upload-button>
[rootFolderId]="documentList.currentFolderId" </div>
[multipleFiles]="multipleFileUpload" <div *ngIf="acceptedFilesTypeShow">
[uploadFolders]="folderUpload" <alfresco-upload-button
[versioning] = "versioning" #uploadButton
[disableWithNoPermission]="disableWithNoPermission" [disabled]="!enableUpload"
(permissionEvent)="onUploadPermissionFailed($event)"> data-automation-id="multiple-file-upload"
<div class="mdl-spinner mdl-js-spinner is-active"></div> [rootFolderId]="documentList.currentFolderId"
</alfresco-upload-button> [acceptedFilesType]="acceptedFilesType"
</div> [multipleFiles]="multipleFileUpload"
<div *ngIf="acceptedFilesTypeShow"> [uploadFolders]="folderUpload"
<alfresco-upload-button #uploadButton [versioning]="versioning"
data-automation-id="multiple-file-upload" [disableWithNoPermission]="disableWithNoPermission"
[rootFolderId]="documentList.currentFolderId" (permissionEvent)="onUploadPermissionFailed($event)">
[acceptedFilesType]="acceptedFilesType" </alfresco-upload-button>
[multipleFiles]="multipleFileUpload" </div>
[uploadFolders]="folderUpload" <section>
[versioning] = "versioning" <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state)</md-checkbox>
[disableWithNoPermission]="disableWithNoPermission" </section>
(permissionEvent)="onUploadPermissionFailed($event)">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div> </div>
<file-uploading-dialog #fileDialog></file-uploading-dialog> <file-uploading-dialog #fileDialog></file-uploading-dialog>
<div *ngIf="fileShowed"> <div *ngIf="fileShowed">

37
demo-shell-ng2/app/components/files/files.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core'; import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
import { AlfrescoAuthenticationService, LogService, NotificationService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService, LogService, NotificationService } from 'ng2-alfresco-core';
import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist'; import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
@@ -34,13 +34,28 @@ export class FilesComponent implements OnInit, AfterViewInit {
errorMessage: string = null; errorMessage: string = null;
fileNodeId: any; fileNodeId: any;
fileShowed: boolean = false; fileShowed: boolean = false;
@Input()
multipleFileUpload: boolean = false; multipleFileUpload: boolean = false;
@Input()
disableWithNoPermission: boolean = false; disableWithNoPermission: boolean = false;
@Input()
folderUpload: boolean = false; folderUpload: boolean = false;
@Input()
acceptedFilesTypeShow: boolean = false; acceptedFilesTypeShow: boolean = false;
@Input()
versioning: boolean = false; versioning: boolean = false;
@Input()
acceptedFilesType: string = '.jpg,.pdf,.js'; acceptedFilesType: string = '.jpg,.pdf,.js';
@Input()
enableUpload: boolean = true;
@ViewChild(DocumentListComponent) @ViewChild(DocumentListComponent)
documentList: DocumentListComponent; documentList: DocumentListComponent;
@@ -82,32 +97,12 @@ export class FilesComponent implements OnInit, AfterViewInit {
} }
} }
toggleMultipleFileUpload() {
this.multipleFileUpload = !this.multipleFileUpload;
return this.multipleFileUpload;
}
toggleDisableWithNoPermission() {
this.disableWithNoPermission = !this.disableWithNoPermission;
return this.disableWithNoPermission;
}
toggleFolder() { toggleFolder() {
this.multipleFileUpload = false; this.multipleFileUpload = false;
this.folderUpload = !this.folderUpload; this.folderUpload = !this.folderUpload;
return this.folderUpload; return this.folderUpload;
} }
toggleAcceptedFilesType() {
this.acceptedFilesTypeShow = !this.acceptedFilesTypeShow;
return this.acceptedFilesTypeShow;
}
toggleVersioning() {
this.versioning = !this.versioning;
return this.versioning;
}
ngOnInit() { ngOnInit() {
if (this.route) { if (this.route) {
this.route.params.forEach((params: Params) => { this.route.params.forEach((params: Params) => {

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

@@ -1,7 +1,7 @@
<form> <form>
<!--Files Upload--> <!--Files Upload-->
<div *ngIf="!uploadFolders" [class.mdl-button--file--disabled]="disableButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file"> <div *ngIf="!uploadFolders" [class.mdl-button--file--disabled]="isDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<i class="material-icons">file_upload</i> <md-icon>file_upload</md-icon>
<!--Multiple Files Upload--> <!--Multiple Files Upload-->
<span *ngIf="multipleFiles"> <span *ngIf="multipleFiles">
@@ -11,7 +11,7 @@
(change)="onFilesAdded($event)" (change)="onFilesAdded($event)"
multiple="multiple" multiple="multiple"
accept="{{acceptedFilesType}}" accept="{{acceptedFilesType}}"
[attr.disabled]="disableButton" [attr.disabled]="isDisabled()"
#uploadFiles> #uploadFiles>
</span> </span>
@@ -22,21 +22,21 @@
<input id="upload-single-file" data-automation-id="upload-single-file" type="file" name="uploadFiles" <input id="upload-single-file" data-automation-id="upload-single-file" type="file" name="uploadFiles"
(change)="onFilesAdded($event)" (change)="onFilesAdded($event)"
accept="{{acceptedFilesType}}" accept="{{acceptedFilesType}}"
[attr.disabled]="disableButton" [attr.disabled]="isDisabled()"
#uploadFiles> #uploadFiles>
</span> </span>
</div> </div>
<!--Folders Upload--> <!--Folders Upload-->
<div *ngIf="uploadFolders" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file"> <div *ngIf="uploadFolders" [class.mdl-button--file--disabled]="isDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<i class="material-icons">file_upload</i> <md-icon>file_upload</md-icon>
<label id="uploadFolder-label" *ngIf="!staticTitle" for="uploadFolder">{{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}</label> <label id="uploadFolder-label" *ngIf="!staticTitle" for="uploadFolder">{{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}</label>
<label id="uploadFolder-label-static" *ngIf="staticTitle" for="uploadFolder">{{staticTitle}}</label> <label id="uploadFolder-label-static" *ngIf="staticTitle" for="uploadFolder">{{staticTitle}}</label>
<input id="uploadFolder" data-automation-id="uploadFolder" type="file" name="uploadFiles" <input id="uploadFolder" data-automation-id="uploadFolder" type="file" name="uploadFiles"
(change)="onDirectoryAdded($event)" (change)="onDirectoryAdded($event)"
multiple="multiple" multiple="multiple"
accept="{{acceptedFilesType}}" accept="{{acceptedFilesType}}"
[attr.disabled]="disableButton" [attr.disabled]="isDisabled()"
webkitdirectory directory webkitdirectory directory
multiple #uploadFolders> multiple #uploadFolders>
</div> </div>

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

@@ -56,6 +56,9 @@ export class UploadButtonComponent implements OnInit, OnChanges {
private static DEFAULT_ROOT_ID: string = '-root-'; private static DEFAULT_ROOT_ID: string = '-root-';
@Input()
disabled: boolean = false;
@Input() @Input()
showNotificationBar: boolean = true; showNotificationBar: boolean = true;
@@ -96,7 +99,6 @@ export class UploadButtonComponent implements OnInit, OnChanges {
permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>(); permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>();
private disableButton: boolean = false; private disableButton: boolean = false;
private permissionValue: Subject<boolean> = new Subject<boolean>(); private permissionValue: Subject<boolean> = new Subject<boolean>();
constructor(private el: ElementRef, constructor(private el: ElementRef,
@@ -109,6 +111,10 @@ export class UploadButtonComponent implements OnInit, OnChanges {
} }
} }
isDisabled(): boolean {
return this.disabled || this.disableButton;
}
ngOnInit() { ngOnInit() {
this.permissionValue.subscribe((hasPermission: boolean) => { this.permissionValue.subscribe((hasPermission: boolean) => {
if (!hasPermission && this.disableWithNoPermission) { if (!hasPermission && this.disableWithNoPermission) {