#340 document list now wraps and extends datatable

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.css

@@ -14,9 +14,25 @@
 :host .data-cell {
     cursor: default;
 }
+:host .cell-value {}
 
 :host .column-header {
     cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* IE/Edge */
+    -webkit-touch-callout: none; /* iOS Safari */
+}
+
+/* Empty folder */
+
+:host .no-content-container {
+    padding: 0 !important;
+}
+
+:host .no-content-container > img {
+    width: 100%;
 }
 
 /* Utils */

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html

@@ -15,6 +15,7 @@
         </th>
         <th class="mdl-data-table__cell--non-numeric non-selectable {{col.cssClass}}"
             *ngFor="let col of data.getColumns()"
+            [attr.data-automation-id]="'auto_id_' + col.key"
             [class.column-header]="col.title"
             [class.mdl-data-table__header--sorted-ascending]="isColumnSorted(col, 'asc')"
             [class.mdl-data-table__header--sorted-descending]="isColumnSorted(col, 'desc')"
@@ -43,7 +44,7 @@
             class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)"
             (dblclick)="onRowDblClick(row, $event)"
-            [context-menu]="getContextActions(row, col)">
+            [context-menu]="getContextMenuActions(row, col)">
             <div *ngSwitchCase="'image'" class="cell-value">
                 <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
                 <img *ngIf="!isIconValue(row, col)" class="image-cell" alt="" src="{{data.getValue(row, col)}}">
@@ -60,11 +61,25 @@
 
         </td>
 
-        <td *ngIf="actions"><!-- todo: actions --></td>
+        <td *ngIf="actions">
+            <!-- action menu -->
+            <button [id]="'action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                [attr.for]="'action_menu_' + idx">
+                <li class="mdl-menu__item"
+                    [attr.data-automation-id]="action.title"
+                    *ngFor="let action of getRowActions(row)"
+                    (click)="onExecuteRowAction(row, action)">
+                    {{action.title}}
+                </li>
+            </ul>
+        </td>
 
     </tr>
     <tr *ngIf="data.getRows().length === 0">
-        <td class="mdl-data-table__cell--non-numeric empty-folder-content"
+        <td class="mdl-data-table__cell--non-numeric no-content-container"
             [attr.colspan]="1 + data.getColumns().length">
             <template *ngIf="noContentTemplate"
                       ngFor [ngForOf]="[data]"

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts

@@ -26,7 +26,6 @@ import {
     TemplateRef
 } from '@angular/core';
 
-// import { Subject } from 'rxjs/Rx';
 import { CONTEXT_MENU_DIRECTIVES } from 'ng2-alfresco-core';
 
 import {
@@ -70,7 +69,13 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
     isSelectAllChecked: boolean = false;
 
     @Output()
-    showContextMenu: EventEmitter<any> = new EventEmitter();
+    showRowContextMenu: EventEmitter<any> = new EventEmitter();
+
+    @Output()
+    showRowActionsMenu: EventEmitter<any> = new EventEmitter();
+
+    @Output()
+    executeRowAction: EventEmitter<any> = new EventEmitter();
 
     // TODO: left for reference, will be removed during future revisions
     constructor(/*private _ngZone?: NgZone*/) {
@@ -169,9 +174,20 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         return false;
     }
 
-    getContextActions(row: DataRow, col: DataColumn) {
+    getContextMenuActions(row: DataRow, col: DataColumn) {
         let args = { row: row, col: col, actions: [] };
-        this.showContextMenu.emit({ args: args });
+        this.showRowContextMenu.emit({ args: args });
         return args.actions;
     }
+
+    getRowActions(row: DataRow, col: DataColumn) {
+        let args = { row: row, col: col, actions: [] };
+        this.showRowActionsMenu.emit({ args: args });
+        return args.actions;
+    }
+
+    onExecuteRowAction(row: DataRow, action: any) {
+        let args = { row: row, action: action };
+        this.executeRowAction.emit({ args: args });
+    }
 }