#340 Empty content template and context menu for datatable

ng2-components/ng2-alfresco-datatable/index.ts

@@ -16,14 +16,17 @@
  */
 
 import { DataTableComponent } from './src/components/datatable.component';
+import { NoContentTemplateComponent } from './src/components/no-content-template.component';
 
 // components
 export * from './src/components/datatable.component';
+export * from './src/components/no-content-template.component';
 
 // data
 export * from './src/data/datatable-adapter';
 export * from './src/data/object-datatable-adapter';
 
 export const ALFRESCO_DATATABLE_DIRECTIVES: [any] = [
-    DataTableComponent
+    DataTableComponent,
+    NoContentTemplateComponent
 ];

ng2-components/ng2-alfresco-datatable/package.json

@@ -66,7 +66,8 @@
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
-    "rimraf": "2.5.2"
+    "rimraf": "2.5.2",
+    "ng2-alfresco-core": "^0.1.35"
   },
   "peerDependencies": {
     "material-design-icons": "^2.2.3",

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

@@ -42,7 +42,8 @@
         <td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
             class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)"
-            (dblclick)="onRowDblClick(row, $event)">
+            (dblclick)="onRowDblClick(row, $event)"
+            [context-menu]="getContextActions(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)}}">
@@ -62,5 +63,14 @@
         <td *ngIf="actions"><!-- todo: actions --></td>
 
     </tr>
+    <tr *ngIf="data.getRows().length === 0">
+        <td class="mdl-data-table__cell--non-numeric empty-folder-content"
+            [attr.colspan]="1 + data.getColumns().length">
+            <template *ngIf="noContentTemplate"
+                      ngFor [ngForOf]="[data]"
+                      [ngForTemplate]="noContentTemplate">
+            </template>
+        </td>
+    </tr>
     </tbody>
 </table>

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

@@ -22,9 +22,13 @@ import {
     Input,
     Output,
     EventEmitter,
-    AfterViewChecked
+    AfterViewChecked,
+    TemplateRef
 } from '@angular/core';
 
+// import { Subject } from 'rxjs/Rx';
+import { CONTEXT_MENU_DIRECTIVES } from 'ng2-alfresco-core';
+
 import {
     DataTableAdapter,
     DataRow,
@@ -41,7 +45,8 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'alfresco-datatable',
     styleUrls: ['./datatable.component.css'],
-    templateUrl: './datatable.component.html'
+    templateUrl: './datatable.component.html',
+    directives: [CONTEXT_MENU_DIRECTIVES]
 })
 export class DataTableComponent implements OnInit, AfterViewChecked {
 
@@ -55,13 +60,18 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
     actions: boolean = false;
 
     @Output()
-    rowClick: EventEmitter<DataRowEvent> = new EventEmitter();
+    rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 
     @Output()
-    rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter();
+    rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
+
+    noContentTemplate: TemplateRef<any>;
 
     isSelectAllChecked: boolean = false;
 
+    @Output()
+    showContextMenu: EventEmitter<any> = new EventEmitter();
+
     // TODO: left for reference, will be removed during future revisions
     constructor(/*private _ngZone?: NgZone*/) {
     }
@@ -158,4 +168,10 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         }
         return false;
     }
+
+    getContextActions(row: DataRow, col: DataColumn) {
+        let args = { row: row, col: col, actions: [] };
+        this.showContextMenu.emit({ args: args });
+        return args.actions;
+    }
 }

ng2-components/ng2-alfresco-datatable/src/components/no-content-template.component.ts

@@ -0,0 +1,41 @@
+/*!
+ * @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 {
+    Directive,
+    ContentChild,
+    TemplateRef,
+    AfterContentInit
+} from '@angular/core';
+import { DataTableComponent } from './datatable.component';
+
+@Directive({
+    selector: 'no-content-template'
+})
+export class NoContentTemplateComponent implements AfterContentInit {
+
+    @ContentChild(TemplateRef)
+    template: any;
+
+    constructor(
+        private dataTable: DataTableComponent) {
+    }
+
+    ngAfterContentInit() {
+        this.dataTable.noContentTemplate = this.template;
+    }
+}