cancellable events for DataTable and DocumentList (#1682)

* cancellable events for DataTable and DocumentList

* more typed events and code fixes

* code fixes

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts

@@ -18,7 +18,7 @@
 import { Component, DebugElement, EventEmitter, Input, Output, OnInit, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
 
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
-import { ObjectDataTableAdapter, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
+import { ObjectDataTableAdapter, DataTableAdapter, ObjectDataRow, DataCellEvent } from 'ng2-alfresco-datatable';
 import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
 import { ActivitiProcessService } from './../services/activiti-process.service';
 
@@ -265,13 +265,10 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
         }
     }
 
-    onShowRowActionsMenu(event) {
+    onShowRowActionsMenu(event: DataCellEvent) {
-        event.args.actions = [{
+        event.value.actions = [
-            id: 'delete',
+            { id: 'delete', title: 'Delete' },
-            title: 'Delete'
+            { id: 'edit', title: 'Edit' }
-        }, {
+        ];
-            id: 'edit',
-            title: 'Edit'
-        }];
     }
 }

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts

@@ -265,7 +265,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
         let row = new ObjectDataRow({
             id: 999
         });
-        let rowEvent = <DataRowEvent> {value: row};
+        let rowEvent = new DataRowEvent(row, null);
 
         component.rowClick.subscribe(taskId => {
             expect(taskId).toEqual(999);

ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts

@@ -203,7 +203,7 @@ describe('ActivitiTaskList', () => {
         let row = new ObjectDataRow({
             id: 999
         });
-        let rowEvent = <DataRowEvent> {value: row};
+        let rowEvent = new DataRowEvent(row, null);
 
         component.rowClick.subscribe(taskId => {
             expect(taskId).toEqual(999);

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

@@ -45,6 +45,8 @@ import { CONTEXT_MENU_PROVIDERS, CONTEXT_MENU_DIRECTIVES } from './src/component
 export * from './src/services/index';
 export * from './src/components/index';
 export * from './src/utils/index';
+export * from './src/events/base.event';
+export * from './src/events/base-ui.event';
 
 export const ALFRESCO_CORE_PROVIDERS: any[] = [
     NotificationService,

ng2-components/ng2-alfresco-core/src/events/base-ui.event.ts

@@ -0,0 +1,25 @@
+/*!
+ * @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 { BaseEvent } from './base.event';
+
+/** Base container for any event which takes place in the DOM  */
+export class BaseUIEvent<T> extends BaseEvent<T> {
+
+    /** Original DOM event */
+    event: Event;
+}

ng2-components/ng2-alfresco-core/src/events/base.event.ts

@@ -0,0 +1,32 @@
+/*!
+ * @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.
+ */
+
+/** Base cancellable event implementation */
+export class BaseEvent<T> {
+
+    private isDefaultPrevented: boolean = false;
+
+    value: T;
+
+    get defaultPrevented() {
+        return this.isDefaultPrevented;
+    }
+
+    preventDefault() {
+        this.isDefaultPrevented = true;
+    }
+}

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

@@ -21,6 +21,8 @@ import { CoreModule } from 'ng2-alfresco-core';
 export * from './src/data/index';
 export * from './src/components/index';
 export * from './src/components/pagination/index';
+export * from './src/components/datatable/data-cell.event';
+export * from './src/components/datatable/data-row-action.event';
 
 import { DataTableComponent } from './src/components/datatable/datatable.component';
 import { NoContentTemplateComponent } from './src/components/datatable/no-content-template.component';

ng2-components/ng2-alfresco-datatable/src/components/datatable/data-cell.event.ts

@@ -0,0 +1,42 @@
+/*!
+ * @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 { BaseEvent } from 'ng2-alfresco-core';
+import { DataColumn, DataRow } from '../../data/datatable-adapter';
+
+export class DataCellEvent extends BaseEvent<DataCellEventModel> {
+
+    constructor(row: DataRow, col: DataColumn, actions: any[]) {
+        super();
+        this.value = new DataCellEventModel(row, col, actions);
+    }
+
+}
+
+export class DataCellEventModel {
+
+    readonly row: DataRow;
+    readonly col: DataColumn;
+    actions: any[];
+
+    constructor(row: DataRow, col: DataColumn, actions: any[]) {
+        this.row = row;
+        this.col = col;
+        this.actions = actions || [];
+    }
+
+}

ng2-components/ng2-alfresco-datatable/src/components/datatable/data-row-action.event.ts

@@ -0,0 +1,39 @@
+/*!
+ * @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 { BaseEvent } from 'ng2-alfresco-core';
+import { DataRow } from '../../data/datatable-adapter';
+
+export class DataRowActionEvent extends BaseEvent<DataRowActionModel> {
+
+    constructor(row: DataRow, action: any) {
+        super();
+        this.value = new DataRowActionModel(row, action);
+    }
+
+}
+
+export class DataRowActionModel {
+
+    row: DataRow;
+    action: any;
+
+    constructor(row: DataRow, action: any) {
+        this.row = row;
+        this.action = action;
+    }
+}

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

@@ -16,14 +16,9 @@
  */
 
 import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
-import {
+import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index';
-    DataTableAdapter,
+import { DataCellEvent } from './data-cell.event';
-    DataRow,
+import { DataRowActionEvent } from './data-row-action.event';
-    DataColumn,
-    DataSorting,
-    DataRowEvent,
-    ObjectDataTableAdapter
-} from '../../data/index';
 
 declare var componentHandler;
 
@@ -57,13 +52,13 @@ export class DataTableComponent implements OnInit {
     rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 
     @Output()
-    showRowContextMenu: EventEmitter<any> = new EventEmitter();
+    showRowContextMenu: EventEmitter<DataCellEvent> = new EventEmitter<DataCellEvent>();
 
     @Output()
-    showRowActionsMenu: EventEmitter<any> = new EventEmitter();
+    showRowActionsMenu: EventEmitter<DataCellEvent> = new EventEmitter<DataCellEvent>();
 
     @Output()
-    executeRowAction: EventEmitter<any> = new EventEmitter();
+    executeRowAction: EventEmitter<DataRowActionEvent> = new EventEmitter<DataRowActionEvent>();
 
     noContentTemplate: TemplateRef<any>;
     isSelectAllChecked: boolean = false;
@@ -92,10 +87,7 @@ export class DataTableComponent implements OnInit {
             this.data.selectedRow = row;
         }
 
-        this.rowClick.emit({
+        this.rowClick.emit(new DataRowEvent(row, e));
-            value: row,
-            event: e
-        });
     }
 
     onRowDblClick(row: DataRow, e?: Event) {
@@ -103,10 +95,7 @@ export class DataTableComponent implements OnInit {
             e.preventDefault();
         }
 
-        this.rowDblClick.emit({
+        this.rowDblClick.emit(new DataRowEvent(row, e));
-            value: row,
-            event: e
-        });
     }
 
     onColumnHeaderClick(column: DataColumn) {
@@ -150,7 +139,7 @@ export class DataTableComponent implements OnInit {
         }
     }
 
-    isIconValue(row: DataRow, col: DataColumn) {
+    isIconValue(row: DataRow, col: DataColumn): boolean {
         if (row && col) {
             let value = row.getValue(col.key);
             return value && value.startsWith('material-icons://');
@@ -158,7 +147,7 @@ export class DataTableComponent implements OnInit {
         return false;
     }
 
-    asIconValue(row: DataRow, col: DataColumn) {
+    asIconValue(row: DataRow, col: DataColumn): string {
         if (this.isIconValue(row, col)) {
             let value = row.getValue(col.key) || '';
             return value.replace('material-icons://', '');
@@ -166,11 +155,11 @@ export class DataTableComponent implements OnInit {
         return null;
     }
 
-    iconAltTextKey(value: string) {
+    iconAltTextKey(value: string): string {
         return 'ICONS.' + value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '');
     }
 
-    isColumnSorted(col: DataColumn, direction: string) {
+    isColumnSorted(col: DataColumn, direction: string): boolean {
         if (col && direction) {
             let sorting = this.data.getSorting();
             return sorting && sorting.key === col.key && sorting.direction === direction;
@@ -178,20 +167,19 @@ export class DataTableComponent implements OnInit {
         return false;
     }
 
-    getContextMenuActions(row: DataRow, col: DataColumn) {
+    getContextMenuActions(row: DataRow, col: DataColumn): any[] {
-        let args = { row: row, col: col, actions: [] };
+        let event = new DataCellEvent(row, col, []);
-        this.showRowContextMenu.emit({ args: args });
+        this.showRowContextMenu.emit(event);
-        return args.actions;
+        return event.value.actions;
     }
 
-    getRowActions(row: DataRow, col: DataColumn) {
+    getRowActions(row: DataRow, col: DataColumn): any[] {
-        let args = { row: row, col: col, actions: [] };
+        let event = new DataCellEvent(row, col, []);
-        this.showRowActionsMenu.emit({ args: args });
+        this.showRowActionsMenu.emit(event);
-        return args.actions;
+        return event.value.actions;
     }
 
     onExecuteRowAction(row: DataRow, action: any) {
-        let args = { row: row, action: action };
+        this.executeRowAction.emit(new DataRowActionEvent(row, action));
-        this.executeRowAction.emit({ args: args });
     }
 }

ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts

@@ -16,6 +16,7 @@
  */
 
 import { TemplateRef } from '@angular/core';
+import { BaseUIEvent } from 'ng2-alfresco-core';
 
 export interface DataTableAdapter {
     selectedRow: DataRow;
@@ -53,7 +54,12 @@ export class DataSorting {
     }
 }
 
-export interface DataRowEvent {
+export class DataRowEvent extends BaseUIEvent<DataRow> {
-    value?: DataRow;
+
-    event?: Event;
+    constructor(value: DataRow, domEvent: Event) {
+        super();
+        this.value = value;
+        this.event = domEvent;
+    }
+
 }

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

@@ -34,6 +34,7 @@ import { DocumentListService } from './src/services/document-list.service';
 
 // components
 export * from './src/components/document-list.component';
+export * from './src/components/node.event';
 export * from './src/components/content-column/content-column.component';
 export * from './src/components/content-column/content-column-list.component';
 export * from './src/components/content-action/content-action.component';

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

@@ -464,7 +464,7 @@ describe('DocumentList', () => {
     it('should emit [nodeClick] event on row click', () => {
         let node = new NodeMinimalEntry();
         let row = new ShareDataRow(node);
-        let event = <DataRowEvent> {value: row};
+        let event = new DataRowEvent(row, null);
 
         spyOn(documentList, 'onNodeClick').and.callThrough();
         documentList.onRowClick(event);
@@ -474,7 +474,7 @@ describe('DocumentList', () => {
     it('should emit [nodeDblClick] event on row double-click', () => {
         let node = new NodeMinimalEntry();
         let row = new ShareDataRow(node);
-        let event = <DataRowEvent> {value: row};
+        let event = new DataRowEvent(row, null);
 
         spyOn(documentList, 'onNodeDblClick').and.callThrough();
         documentList.onRowDblClick(event);

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

@@ -32,10 +32,11 @@ import {
 import { Subject } from 'rxjs/Rx';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, NodePaging, Pagination } from 'alfresco-js-api';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
-import { DataRowEvent, DataTableComponent, ObjectDataColumn } from 'ng2-alfresco-datatable';
+import { DataRowEvent, DataTableComponent, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
 import { DocumentListService } from './../services/document-list.service';
 import { ContentActionModel } from './../models/content-action.model';
 import { ShareDataTableAdapter, ShareDataRow, RowFilter, ImageResolver } from './../data/share-datatable-adapter';
+import { NodeEntityEvent, NodeEntryEvent } from './node.event';
 
 declare var module: any;
 
@@ -116,16 +117,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     node: NodePaging = null;
 
     @Output()
-    nodeClick: EventEmitter<any> = new EventEmitter();
+    nodeClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
     @Output()
-    nodeDblClick: EventEmitter<any> = new EventEmitter();
+    nodeDblClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
     @Output()
-    folderChange: EventEmitter<any> = new EventEmitter();
+    folderChange: EventEmitter<NodeEntryEvent> = new EventEmitter<NodeEntryEvent>();
 
     @Output()
-    preview: EventEmitter<any> = new EventEmitter();
+    preview: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
     @Output()
     success: EventEmitter<any> = new EventEmitter();
@@ -231,7 +232,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         });
     }
 
-    isEmptyTemplateDefined() {
+    isEmptyTemplateDefined(): boolean {
         if (this.dataTable) {
             if (this.emptyFolderTemplate) {
                 return true;
@@ -278,12 +279,10 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
 
     performNavigation(node: MinimalNodeEntity): boolean {
         if (node && node.entry && node.entry.isFolder) {
-
             this.currentFolderId = node.entry.id;
             this.folderNode = node.entry;
-
             this.loadFolder();
-            this.folderChange.emit({node: node.entry});
+            this.folderChange.emit(new NodeEntryEvent(node.entry));
             return true;
         }
         return false;
@@ -365,25 +364,24 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
 
     onPreviewFile(node: MinimalNodeEntity) {
         if (node) {
-            this.preview.emit({
+            this.preview.emit(new NodeEntityEvent(node));
-                value: node
-            });
         }
     }
 
     onNodeClick(node: MinimalNodeEntity) {
-        this.nodeClick.emit({
+        let event = new NodeEntityEvent(node);
-            value: node
+        this.nodeClick.emit(event);
-        });
 
-        if (this.navigate && this.navigationMode === DocumentListComponent.SINGLE_CLICK_NAVIGATION) {
+        if (!event.defaultPrevented) {
-            if (node && node.entry) {
+            if (this.navigate && this.navigationMode === DocumentListComponent.SINGLE_CLICK_NAVIGATION) {
-                if (node.entry.isFile) {
+                if (node && node.entry) {
-                    this.onPreviewFile(node);
+                    if (node.entry.isFile) {
-                }
+                        this.onPreviewFile(node);
+                    }
 
-                if (node.entry.isFolder) {
+                    if (node.entry.isFolder) {
-                    this.performNavigation(node);
+                        this.performNavigation(node);
+                    }
                 }
             }
         }
@@ -395,18 +393,19 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     }
 
     onNodeDblClick(node: MinimalNodeEntity) {
-        this.nodeDblClick.emit({
+        let event = new NodeEntityEvent(node);
-            value: node
+        this.nodeDblClick.emit(event);
-        });
 
-        if (this.navigate && this.navigationMode === DocumentListComponent.DOUBLE_CLICK_NAVIGATION) {
+        if (!event.defaultPrevented) {
-            if (node && node.entry) {
+            if (this.navigate && this.navigationMode === DocumentListComponent.DOUBLE_CLICK_NAVIGATION) {
-                if (node.entry.isFile) {
+                if (node && node.entry) {
-                    this.onPreviewFile(node);
+                    if (node.entry.isFile) {
-                }
+                        this.onPreviewFile(node);
+                    }
 
-                if (node.entry.isFolder) {
+                    if (node.entry.isFolder) {
-                    this.performNavigation(node);
+                        this.performNavigation(node);
+                    }
                 }
             }
         }
@@ -417,9 +416,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         this.onNodeDblClick(item);
     }
 
-    onShowRowContextMenu(event) {
+    onShowRowContextMenu(event: DataCellEvent) {
         if (this.contextMenuActions) {
-            let args = event.args;
+            let args = event.value;
             let node = (<ShareDataRow> args.row).node;
             if (node) {
                 args.actions = this.getContextActions(node) || [];
@@ -427,9 +426,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         }
     }
 
-    onShowRowActionsMenu(event) {
+    onShowRowActionsMenu(event: DataCellEvent) {
         if (this.contentActions) {
-            let args = event.args;
+            let args = event.value;
             let node = (<ShareDataRow> args.row).node;
             if (node) {
                 args.actions = this.getNodeActions(node) || [];
@@ -437,9 +436,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         }
     }
 
-    onExecuteRowAction(event) {
+    onExecuteRowAction(event: DataRowActionEvent) {
         if (this.contentActions) {
-            let args = event.args;
+            let args = event.value;
             let node = (<ShareDataRow> args.row).node;
             let action = (<ContentActionModel> args.action);
             this.executeContentAction(node, action);
@@ -455,17 +454,17 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         this.success.emit(event);
     }
 
-    public onChangePageSize(event: Pagination): void {
+    onChangePageSize(event: Pagination): void {
         this.pageSize = event.maxItems;
         this.reload();
     }
 
-    public onNextPage(event: Pagination): void {
+    onNextPage(event: Pagination): void {
         this.skipCount = event.skipCount;
         this.reload();
     }
 
-    public onPrevPage(event: Pagination): void {
+    onPrevPage(event: Pagination): void {
         this.skipCount = event.skipCount;
         this.reload();
     }

ng2-components/ng2-alfresco-documentlist/src/components/node.event.ts

@@ -0,0 +1,33 @@
+/*!
+ * @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 { BaseEvent } from 'ng2-alfresco-core';
+import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+export class NodeEntityEvent extends BaseEvent<MinimalNodeEntity> {
+    constructor(entity: MinimalNodeEntity) {
+        super();
+        this.value = entity;
+    }
+}
+
+export class NodeEntryEvent extends BaseEvent<MinimalNodeEntryEntity> {
+    constructor(entity: MinimalNodeEntryEntity) {
+        super();
+        this.value = entity;
+    }
+}