Merge pull request #1208 from Alfresco/dev-mvitale-384-style

Document list - Create Folder Docs

demo-shell-ng2/app/components/files/files.component.html

@@ -21,6 +21,7 @@
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 (error)="onNavigationError($event)"
+                (success)="resetError()"
                 (preview)="showFile($event)"
                 (folderChange)="onFolderChanged($event)">
             <!--

ng2-components/ng2-alfresco-documentlist/README.md

@@ -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>
+```
+
+![Creation Menu Action](docs/assets/document-list-creation-menu-actions-1.png)
+
+When the "New Folder" button is pressed the dialog appears.
+
+![Creation Menu Action](docs/assets/document-list-creation-menu-actions-2.png)
+
+
 ### Custom columns
 
 It is possible to reorder, extend or completely redefine data columns displayed by the component.

ng2-components/ng2-alfresco-documentlist/demo/src/main.ts

@@ -48,6 +48,7 @@ import {
                 [currentFolderPath]="currentPath"
                 [contextMenuActions]="true"
                 [contentActions]="true"
+                [creationMenuActions]="true"
                 (folderChange)="onFolderChanged($event)">
             <!--
             <empty-folder-content>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -1,6 +1,7 @@
-<alfresco-document-menu-action *ngIf="contentMenuActions"
+<alfresco-document-menu-action *ngIf="creationMenuActions"
-        [currentFolderPath]="currentFolderPath"
+                               [currentFolderPath]="currentFolderPath"
-        (onSuccess)="reload()">
+                               (success)="onActionMenuSuccess($event)"
+                               (error)="onActionMenuError($event)">
 </alfresco-document-menu-action>
 <alfresco-datatable
     [data]="data"

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -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);
+    }
 }

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.css

@@ -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;
 }

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.html

@@ -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)="createFolder(name.value)" class="mdl-button">{{ 'BUTTON.CREATE' | translate }}</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'BUTTON.CANCEL' | translate }}</button>
     </div>
 </dialog>

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.ts

@@ -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);
                     }
                 }

ng2-components/ng2-alfresco-documentlist/src/i18n/en.json

@@ -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"
     }
 }