cancellable events for DataTable and DocumentList (#1682)

* cancellable events for DataTable and DocumentList

* more typed events and code fixes

* code fixes
This commit is contained in:
Denys Vuika
2017-03-02 14:49:55 +00:00
committed by Mario Romano
parent 418ac90ae9
commit 0f718a56d7
15 changed files with 256 additions and 90 deletions

View File

@@ -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) {
event.args.actions = [{
id: 'delete',
title: 'Delete'
}, {
id: 'edit',
title: 'Edit'
}];
onShowRowActionsMenu(event: DataCellEvent) {
event.value.actions = [
{ id: 'delete', title: 'Delete' },
{ id: 'edit', title: 'Edit' }
];
}
}

View File

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

View File

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

View File

@@ -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,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -16,14 +16,9 @@
*/
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
import {
DataTableAdapter,
DataRow,
DataColumn,
DataSorting,
DataRowEvent,
ObjectDataTableAdapter
} from '../../data/index';
import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index';
import { DataCellEvent } from './data-cell.event';
import { DataRowActionEvent } from './data-row-action.event';
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({
value: row,
event: e
});
this.rowClick.emit(new DataRowEvent(row, e));
}
onRowDblClick(row: DataRow, e?: Event) {
@@ -103,10 +95,7 @@ export class DataTableComponent implements OnInit {
e.preventDefault();
}
this.rowDblClick.emit({
value: row,
event: e
});
this.rowDblClick.emit(new DataRowEvent(row, 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) {
let args = { row: row, col: col, actions: [] };
this.showRowContextMenu.emit({ args: args });
return args.actions;
getContextMenuActions(row: DataRow, col: DataColumn): any[] {
let event = new DataCellEvent(row, col, []);
this.showRowContextMenu.emit(event);
return event.value.actions;
}
getRowActions(row: DataRow, col: DataColumn) {
let args = { row: row, col: col, actions: [] };
this.showRowActionsMenu.emit({ args: args });
return args.actions;
getRowActions(row: DataRow, col: DataColumn): any[] {
let event = new DataCellEvent(row, col, []);
this.showRowActionsMenu.emit(event);
return event.value.actions;
}
onExecuteRowAction(row: DataRow, action: any) {
let args = { row: row, action: action };
this.executeRowAction.emit({ args: args });
this.executeRowAction.emit(new DataRowActionEvent(row, action));
}
}

View File

@@ -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 {
value?: DataRow;
event?: Event;
export class DataRowEvent extends BaseUIEvent<DataRow> {
constructor(value: DataRow, domEvent: Event) {
super();
this.value = value;
this.event = domEvent;
}
}

View File

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

View File

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

View File

@@ -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({
value: node
});
this.preview.emit(new NodeEntityEvent(node));
}
}
onNodeClick(node: MinimalNodeEntity) {
this.nodeClick.emit({
value: node
});
let event = new NodeEntityEvent(node);
this.nodeClick.emit(event);
if (this.navigate && this.navigationMode === DocumentListComponent.SINGLE_CLICK_NAVIGATION) {
if (node && node.entry) {
if (node.entry.isFile) {
this.onPreviewFile(node);
}
if (!event.defaultPrevented) {
if (this.navigate && this.navigationMode === DocumentListComponent.SINGLE_CLICK_NAVIGATION) {
if (node && node.entry) {
if (node.entry.isFile) {
this.onPreviewFile(node);
}
if (node.entry.isFolder) {
this.performNavigation(node);
if (node.entry.isFolder) {
this.performNavigation(node);
}
}
}
}
@@ -395,18 +393,19 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
onNodeDblClick(node: MinimalNodeEntity) {
this.nodeDblClick.emit({
value: node
});
let event = new NodeEntityEvent(node);
this.nodeDblClick.emit(event);
if (this.navigate && this.navigationMode === DocumentListComponent.DOUBLE_CLICK_NAVIGATION) {
if (node && node.entry) {
if (node.entry.isFile) {
this.onPreviewFile(node);
}
if (!event.defaultPrevented) {
if (this.navigate && this.navigationMode === DocumentListComponent.DOUBLE_CLICK_NAVIGATION) {
if (node && node.entry) {
if (node.entry.isFile) {
this.onPreviewFile(node);
}
if (node.entry.isFolder) {
this.performNavigation(node);
if (node.entry.isFolder) {
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();
}

View File

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