support for toggling custom context menu (#1683)

* support for toggling custom context menu

* fix unit tests

ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu.directive.spec.ts

@@ -26,6 +26,7 @@ describe('ContextMenuDirective', () => {
     beforeEach(() => {
         contextMenuService = new ContextMenuService();
         directive = new ContextMenuDirective(contextMenuService);
+        directive.enabled = true;
     });
 
     it('should show menu via service', (done) => {

ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu.directive.ts

@@ -25,11 +25,15 @@ export class ContextMenuDirective {
     @Input('context-menu')
     links: any[];
 
+    @Input('context-menu-enabled')
+    enabled: boolean = false;
+
     constructor(private _contextMenuService: ContextMenuService) {
     }
 
     @HostListener('contextmenu', ['$event'])
     onShowContextMenu(event?: MouseEvent) {
+        if (this.enabled) {
             if (event) {
                 event.preventDefault();
             }
@@ -40,4 +44,5 @@ export class ContextMenuDirective {
                 }
             }
         }
+    }
 }

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

@@ -103,7 +103,6 @@ Usage example of this component :
 **my.component.ts**
 
 ```ts
-
 import { NgModule, Component } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -155,17 +154,14 @@ export class DataTableDemo {
     imports: [
         BrowserModule,
         CoreModule.forRoot(),
-        DataTableModule
+        DataTableModule.forRoot()
     ],
     declarations: [DataTableDemo],
     bootstrap: [DataTableDemo]
 })
-export class AppModule {
+export class AppModule {}
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-
-
 ```
 
 ![DataTable demo](docs/assets/datatable-demo.png)
@@ -179,6 +175,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `actions` | boolean | false | Toggles data actions column |
 | `actionsPosition` | string (left\|right) | right | Position of the actions dropdown menu. | 
 | `fallbackThumbnail` | string |  | Fallback image for row ehre thubnail is missing|
+| `contextMenu` | boolean | false | Toggles custom context menu for the component |
 
 ### Events
 

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

@@ -67,7 +67,8 @@
             class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)"
             (dblclick)="onRowDblClick(row, $event)"
-            [context-menu]="getContextMenuActions(row, col)">
+            [context-menu]="getContextMenuActions(row, col)"
+            [context-menu-enabled]="contextMenu">
             <div *ngIf="!col.template">
                 <div *ngSwitchCase="'image'" class="cell-value">
                     <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>

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

@@ -45,6 +45,9 @@ export class DataTableComponent implements OnInit {
     @Input()
     fallbackThumbnail: string;
 
+    @Input()
+    contextMenu: boolean = false;
+
     @Output()
     rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 

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

@@ -10,6 +10,7 @@
     [actionsPosition]="contentActionsPosition"
     [multiselect]="multiselect"
     [fallbackThumbnail]="fallbackThumbnail"
+    [contextMenu]="contextMenuActions"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

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

@@ -217,11 +217,19 @@ describe('DocumentList', () => {
     });
 
     it('should suppress default context menu', () => {
+        documentList.contextMenuActions = true;
         spyOn(eventMock, 'preventDefault').and.stub();
         documentList.onShowContextMenu(eventMock);
         expect(eventMock.preventDefault).toHaveBeenCalled();
     });
 
+    it('should not suppress default context menu', () => {
+        documentList.contextMenuActions = false;
+        spyOn(eventMock, 'preventDefault').and.stub();
+        documentList.onShowContextMenu(eventMock);
+        expect(eventMock.preventDefault).not.toHaveBeenCalled();
+    });
+
     it('should emit file preview event on single click', (done) => {
         let file = new FileNode();
         documentList.preview.subscribe(e => {

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

@@ -272,7 +272,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
 
     @HostListener('contextmenu', ['$event'])
     onShowContextMenu(e?: Event) {
-        if (e) {
+        if (e && this.contextMenuActions) {
             e.preventDefault();
         }
     }