inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

#384 Provide Create Folder button

Browse Source
This commit is contained in:
mauriziovitale84
2016-12-06 16:55:58 +00:00
parent 73b6e1b846
commit 8775ec7c31
8 changed files with 393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
View File

@@ -1,3 +1,7 @@
<alfresco-document-menu-action *ngIf="contentMenuActions"
[currentFolderPath]="currentFolderPath"
(onSuccess)="reload()">
</alfresco-document-menu-action>
<alfresco-datatable
[data]="data"
[actions]="contentActions"

3
ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
View File

@@ -86,6 +86,9 @@ export class DocumentList implements OnInit, AfterContentInit {
@Input()
contentActions: boolean = false;
@Input()
contentMenuActions: boolean = true;
@Input()
contextMenuActions: boolean = false;

74
ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.css Normal file
View File

@@ -0,0 +1,74 @@
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
background-color: #fafafa;
border-bottom: 1px solid transparent;
border-top: 1px solid #e5e5e5;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
height: 53px;
position: relative;
-webkit-transition: height .35s cubic-bezier(0.4,0.0,1,1),border-color .4s;
transition: height .35s cubic-bezier(0.4,0.0,1,1),border-color .4s;
z-index: 5;
}
.action {
max-width: 394px;
min-width: 150px;
}
.action {
-webkit-align-items: flex-end;
align-items: flex-end;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 13px 0 11px 30px;
-webkit-transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
}
.mdl-menu__item-primary-content {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.mdl-menu__item-primary-content {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
text-decoration: none;
}
.mdl-menu__item-primary-content {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.mdl-menu__item-icon {
margin-right: 32px;
}

36
ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.html Normal file
View File

@@ -0,0 +1,36 @@
<div class="container">
<div class="action">
<button id="actions" class="mdl-button mdl-js-button mdl-button--raised">
<i class="material-icons">add</i> Create...
</button>
<ul alfresco-mdl-menu class="mdl-menu--bottom-left"
[attr.for]="'actions'">
<li class="mdl-menu__item"
(click)="showDialog()" >
<i class="material-icons mdl-menu__item-icon">folder</i>
New Folder
</li>
</ul>
</div>
<div>{{message}}</div>
</div>
<dialog class="mdl-dialog" #dialog>
<h4 class="mdl-dialog__title">New folder</h4>
<div class="mdl-dialog__content">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input
type="text"
class="mdl-textfield__input"
id="name"
required
value="Untitled folder"
data-automation-id="name"
autocapitalize="none" #name/>
</div>
</div>
<div class="mdl-dialog__actions">
<button type="button" (click)="createFolder(name.value)" class="mdl-button">Create</button>
<button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
</div>
</dialog>

130
ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.ts Normal file
View File

@@ -0,0 +1,130 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
Component,
OnInit,
Input,
Output,
EventEmitter,
ViewChild
} from '@angular/core';
import { DocumentListService } from './../services/document-list.service';
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
import { ContentActionModel } from './../models/content-action.model';
declare let dialogPolyfill: any;
const ERROR_FOLDER_ALREADY_EXIST = 409;
@Component({
moduleId: module.id,
selector: 'alfresco-document-menu-action',
styleUrls: ['./document-menu-action.css'],
templateUrl: './document-menu-action.html'
})
export class DocumentMenuAction implements OnInit {
@Input()
currentFolderPath: string;
@Output()
onSuccess = new EventEmitter();
@Output()
onError = new EventEmitter();
@ViewChild('dialog')
dialog: any;
actions: ContentActionModel[] = [];
message: string;
constructor(
private documentListService: DocumentListService,
private translate: AlfrescoTranslationService) {
if (translate) {
translate.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/dist/src');
}
}
ngOnInit() {}
public createFolder(name: string) {
this.cancel();
this.documentListService.createFolder(name, this.currentFolderPath)
.subscribe(
res => {
let relativeDir = this.currentFolderPath;
console.log(relativeDir);
this.onSuccess.emit({value: relativeDir});
},
error => {
let errorMessagePlaceholder = this.getErrorMessage(error.response);
if (errorMessagePlaceholder) {
this.onError.emit({value: errorMessagePlaceholder});
this.message = this.formatString(errorMessagePlaceholder, [name]);
console.log(this.message);
} else {
console.log(error);
}
}
);
}
public showDialog() {
if (!this.dialog.nativeElement.showModal) {
dialogPolyfill.registerDialog(this.dialog.nativeElement);
}
this.dialog.nativeElement.showModal();
}
public cancel() {
if (this.dialog) {
this.dialog.nativeElement.close();
}
}
/**
* Retrive the error message using the error status code
* @param response - object that contain the HTTP response
* @returns {string}
*/
private getErrorMessage(response: any): string {
if (response.body && response.body.error.statusCode === ERROR_FOLDER_ALREADY_EXIST) {
let errorMessage: any;
errorMessage = this.translate.get('FILE_UPLOAD.MESSAGES.FOLDER_ALREADY_EXIST');
return errorMessage.value;
}
}
/**
* Replace a placeholder {0} in a message with the input keys
* @param message - the message that conains the placeholder
* @param keys - array of value
* @returns {string} - The message without placeholder
*/
private formatString(message: string, keys: any []) {
let i = keys.length;
while (i--) {
message = message.replace(new RegExp('\\{' + i + '\\}', 'gm'), keys[i]);
}
return message;
}
}