mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +00:00
Merge pull request #1208 from Alfresco/dev-mvitale-384-style
Document list - Create Folder Docs
This commit is contained in:
Mario Romano
GitHub
commit
e1824238f9
@ -21,6 +21,7 @@
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
(error)="onNavigationError($event)"
|
||||
(success)="resetError()"
|
||||
(preview)="showFile($event)"
|
||||
(folderChange)="onFolderChanged($event)">
|
||||
<!--
|
||||
|
||||
@ -100,6 +100,7 @@ Follow the 3 steps below:
|
||||
[currentFolderPath]="currentPath"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[creationMenuActions]="true"
|
||||
[multiselect]="true"
|
||||
(folderChange)="onFolderChanged($event)">
|
||||
</alfresco-document-list>
|
||||
@ -124,6 +125,7 @@ import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfr
|
||||
[currentFolderPath]="'/'"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[creationMenuActions]="true"
|
||||
[multiselect]="true">
|
||||
</alfresco-document-list>`
|
||||
})
|
||||
@ -178,6 +180,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
| `multiselect` | boolean | false | Toggles multiselect mode |
|
||||
| `contentActions` | boolean | false | Toggles content actions for each row |
|
||||
| `contextMenuActions` | boolean | false | Toggles context menus for each row |
|
||||
| `creationMenuActions` | boolean | true | Toggles the creation menu actions|
|
||||
| `rowFilter` | `RowFilter` | | Custom row filter, [see more](#custom-row-filter).
|
||||
| `imageResolver` | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver).
|
||||
|
||||
@ -209,6 +212,23 @@ DocumentList provides simple breadcrumb element to indicate the current position
|
||||
|
||||
Parent folder button is not displayed when breadcrumb is enabled.
|
||||
|
||||
### Creation Menu Action
|
||||
|
||||
DocumentList provides simple creation menu actions that provide the action to create a new folder.
|
||||
|
||||
```html
|
||||
<alfresco-document-menu-action
|
||||
[currentFolderPath]="currentFolderPath">
|
||||
</alfresco-document-menu-action>
|
||||
```
|
||||
|
||||
|
||||
|
||||
When the "New Folder" button is pressed the dialog appears.
|
||||
|
||||
|
||||
|
||||
|
||||
### Custom columns
|
||||
|
||||
It is possible to reorder, extend or completely redefine data columns displayed by the component.
|
||||
|
||||
@ -48,6 +48,7 @@ import {
|
||||
[currentFolderPath]="currentPath"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[creationMenuActions]="true"
|
||||
(folderChange)="onFolderChanged($event)">
|
||||
<!--
|
||||
<empty-folder-content>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
@ -1,6 +1,7 @@
|
||||
<alfresco-document-menu-action *ngIf="contentMenuActions"
|
||||
[currentFolderPath]="currentFolderPath"
|
||||
(onSuccess)="reload()">
|
||||
<alfresco-document-menu-action *ngIf="creationMenuActions"
|
||||
[currentFolderPath]="currentFolderPath"
|
||||
(success)="onActionMenuSuccess($event)"
|
||||
(error)="onActionMenuError($event)">
|
||||
</alfresco-document-menu-action>
|
||||
<alfresco-datatable
|
||||
[data]="data"
|
||||
|
||||
@ -92,10 +92,10 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
|
||||
contentActions: boolean = false;
|
||||
|
||||
@Input()
|
||||
contentMenuActions: boolean = true;
|
||||
contextMenuActions: boolean = false;
|
||||
|
||||
@Input()
|
||||
contextMenuActions: boolean = false;
|
||||
creationMenuActions: boolean = true;
|
||||
|
||||
@Input()
|
||||
pageSize: number = DocumentList.DEFAULT_PAGE_SIZE;
|
||||
@ -126,6 +126,9 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
|
||||
@Output()
|
||||
preview: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
success: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
error: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
@ -472,4 +475,13 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
|
||||
this.executeContentAction(node, action);
|
||||
}
|
||||
}
|
||||
|
||||
onActionMenuError(event) {
|
||||
this.error.emit(event);
|
||||
}
|
||||
|
||||
onActionMenuSuccess(event) {
|
||||
this.reload();
|
||||
this.success.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,4 +71,15 @@
|
||||
|
||||
.mdl-menu__item-icon {
|
||||
margin-right: 32px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mdl-menu--bottom-left {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mdl-menu__text {
|
||||
float: right;
|
||||
margin-right: 22px;
|
||||
}
|
||||
@ -1,22 +1,21 @@
|
||||
<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...
|
||||
<i class="material-icons">add</i> {{ 'BUTTON.ACTION_CREATE' | translate }}
|
||||
</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
|
||||
<span class="mdl-menu__text">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>{{message}}</div>
|
||||
</div>
|
||||
|
||||
<dialog class="mdl-dialog" #dialog>
|
||||
<h4 class="mdl-dialog__title">New folder</h4>
|
||||
<h4 class="mdl-dialog__title">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
|
||||
<div class="mdl-dialog__content">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input
|
||||
@ -30,7 +29,7 @@
|
||||
</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>
|
||||
<button type="button" (click)="createFolder(name.value)" class="mdl-button">{{ 'BUTTON.CREATE' | translate }}</button>
|
||||
<button type="button" (click)="cancel()" class="mdl-button close">{{ 'BUTTON.CANCEL' | translate }}</button>
|
||||
</div>
|
||||
</dialog>
|
||||
@ -43,10 +43,10 @@ export class DocumentMenuAction implements OnInit {
|
||||
currentFolderPath: string;
|
||||
|
||||
@Output()
|
||||
onSuccess = new EventEmitter();
|
||||
success = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
onError = new EventEmitter();
|
||||
error = new EventEmitter();
|
||||
|
||||
@ViewChild('dialog')
|
||||
dialog: any;
|
||||
@ -73,15 +73,16 @@ export class DocumentMenuAction implements OnInit {
|
||||
res => {
|
||||
let relativeDir = this.currentFolderPath;
|
||||
console.log(relativeDir);
|
||||
this.onSuccess.emit({value: relativeDir});
|
||||
this.success.emit({value: relativeDir});
|
||||
},
|
||||
error => {
|
||||
let errorMessagePlaceholder = this.getErrorMessage(error.response);
|
||||
if (errorMessagePlaceholder) {
|
||||
this.onError.emit({value: errorMessagePlaceholder});
|
||||
this.message = this.formatString(errorMessagePlaceholder, [name]);
|
||||
this.error.emit({message: this.message});
|
||||
console.log(this.message);
|
||||
} else {
|
||||
this.error.emit(error);
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,5 +12,11 @@
|
||||
"ft_ic_archive": "Archive file",
|
||||
"ft_ic_presentation": "Presentation file",
|
||||
"ft_ic_spreadsheet": "Spreadsheet file"
|
||||
},
|
||||
"BUTTON": {
|
||||
"ACTION_CREATE": "Create...",
|
||||
"ACTION_NEW_FOLDER": "New Folder",
|
||||
"CREATE": "Create",
|
||||
"CANCEL": "Cancel"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user