diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index d326066c7c..382a4ec4cf 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -24,7 +24,7 @@
Task List -
@@ -49,7 +49,7 @@
Process List -
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts index 202cf792d5..08e487dabd 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts @@ -26,6 +26,10 @@ import { ACTIVITI_PROCESSLIST_DIRECTIVES } from 'ng2-activiti-processlist'; import { ActivitiForm } from 'ng2-activiti-form'; import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs/Rx'; +import { + ObjectDataTableAdapter, + DataSorting +} from 'ng2-alfresco-datatable'; declare let __moduleName: string; declare var componentHandler; @@ -74,6 +78,9 @@ export class ActivitiDemoComponent implements AfterViewChecked { sub: Subscription; + dataTasks: ObjectDataTableAdapter; + dataProcesses: ObjectDataTableAdapter; + @Input() appId: number; @@ -90,13 +97,23 @@ export class ActivitiDemoComponent implements AfterViewChecked { } constructor(private route: ActivatedRoute) { - this.taskSchemaColumns = [ - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true} - // {type: 'text', key: 'created', title: 'Created', sortable: true} - ]; - this.processSchemaColumns = [ - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true} - ]; + this.dataTasks = new ObjectDataTableAdapter( + [], + [ + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, + {type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true} + ] + ); + this.dataTasks.setSorting(new DataSorting('created', 'desc')); + + this.dataProcesses = new ObjectDataTableAdapter( + [], + [ + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, + {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true} + ] + ); + this.dataProcesses.setSorting(new DataSorting('started', 'desc')); } ngOnInit() { diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts index 65480a39fc..881393b70c 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts @@ -17,7 +17,7 @@ import {Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; import { AlfrescoTranslationService, CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core'; -import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter, DataRowEvent } from 'ng2-alfresco-datatable'; +import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter, DataRowEvent, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable'; import { ActivitiProcessService } from '../services/activiti-process.service'; import { UserProcessInstanceFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model'; @@ -39,20 +39,11 @@ declare let __moduleName: string; }) export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { - errorMessage: string; - data: ObjectDataTableAdapter; - currentProcessInstanceId: string; - @Input() filter: UserProcessInstanceFilterRepresentationModel; @Input() - schemaColumn: any[] = [ - {type: 'text', key: 'id', title: 'Id', sortable: true}, - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, - {type: 'text', key: 'started', title: 'Started', sortable: true}, - {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true} - ]; + data: DataTableAdapter; @Output() rowClick: EventEmitter = new EventEmitter(); @@ -63,6 +54,16 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { @Output() onError: EventEmitter = new EventEmitter(); + errorMessage: string; + currentProcessInstanceId: string; + + private defaultSchemaColumn: any[] = [ + {type: 'text', key: 'id', title: 'Id', sortable: true}, + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, + {type: 'text', key: 'started', title: 'Started', sortable: true}, + {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true} + ]; + constructor (private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) { if (translate !== null) { translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src'); @@ -70,10 +71,9 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { } ngOnInit() { - this.data = new ObjectDataTableAdapter( - [], - this.schemaColumn - ); + if (!this.data) { + this.data = this.initDefaultSchemaColumns(); + } if (this.filter) { let requestNode = this.convertProcessInstanceToTaskQuery(this.filter); this.load(requestNode); @@ -89,11 +89,23 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { } } + /** + * Return an initDefaultSchemaColumns instance with the default Schema Column + * @returns {ObjectDataTableAdapter} + */ + initDefaultSchemaColumns(): ObjectDataTableAdapter { + return new ObjectDataTableAdapter( + [], + this.defaultSchemaColumn + ); + } + load(requestNode: TaskQueryRequestRepresentationModel) { this.processService.getProcessInstances(requestNode) .subscribe( (processInstances) => { - this.renderProcessInstances(processInstances); + let processRow = this.createDataRow(processInstances); + this.renderProcessInstances(processRow); this.selectFirstProcess(); this.onSuccess.emit(processInstances); }, @@ -103,6 +115,23 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { }); } + /** + * Create an array of ObjectDataRow + * @param processes + * @returns {ObjectDataRow[]} + */ + private createDataRow(processes: any[]): ObjectDataRow[] { + let processRows: ObjectDataRow[] = []; + processes.forEach((row) => { + processRows.push(new ObjectDataRow({ + id: row.id, + name: row.name, + started: row.started + })); + }); + return processRows; + } + /** * Render the process list * @@ -110,10 +139,7 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { */ private renderProcessInstances(processInstances: any[]) { processInstances = this.optimizeProcessNames(processInstances); - this.data = new ObjectDataTableAdapter( - processInstances, - this.schemaColumn - ); + this.data.setRows(processInstances); } /** @@ -161,9 +187,9 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { */ private optimizeProcessNames(tasks: any[]) { tasks = tasks.map(t => { - t.name = t.name || 'No name'; - if (t.name.length > 50) { - t.name = t.name.substring(0, 50) + '...'; + t.obj.name = t.obj.name || 'No name'; + if (t.obj.name.length > 50) { + t.obj.name = t.obj.name.substring(0, 50) + '...'; } return t; }); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html index 4f932db173..9dbfa195b6 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html @@ -2,7 +2,7 @@
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts index 46f8c24000..bea68053ea 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts @@ -26,7 +26,7 @@ import { ActivitiTaskList } from './activiti-tasklist.component'; import { ActivitiTaskListService } from '../services/activiti-tasklist.service'; import { UserTaskFilterRepresentationModel } from '../models/filter.model'; import { Observable } from 'rxjs/Rx'; -import { ObjectDataRow, DataRowEvent } from 'ng2-alfresco-datatable'; +import { ObjectDataRow, DataRowEvent, ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; describe('ActivitiTaskList', () => { @@ -79,23 +79,26 @@ describe('ActivitiTaskList', () => { it('should use the default schemaColumn as default', () => { taskList.ngOnInit(); - expect(taskList.schemaColumn).toBeDefined(); - expect(taskList.schemaColumn.length).toEqual(4); + expect(taskList.data.getColumns()).toBeDefined(); + expect(taskList.data.getColumns().length).toEqual(4); }); it('should use the schemaColumn passed in input', () => { - taskList.schemaColumn = [ - {type: 'text', key: 'fake-id', title: 'Name'} - ]; + taskList.data = new ObjectDataTableAdapter( + [], + [ + {type: 'text', key: 'fake-id', title: 'Name'} + ] + ); taskList.ngOnInit(); - expect(taskList.schemaColumn).toBeDefined(); - expect(taskList.schemaColumn.length).toEqual(1); + expect(taskList.data.getColumns()).toBeDefined(); + expect(taskList.data.getColumns().length).toEqual(1); }); it('should return an empty task list when the taskFilter is not passed', () => { taskList.ngOnInit(); - expect(taskList.tasks).toBeUndefined(); + expect(taskList.data).toBeDefined(); expect(taskList.isTaskListEmpty()).toBeTruthy(); }); @@ -106,11 +109,11 @@ describe('ActivitiTaskList', () => { taskList.onSuccess.subscribe( (res) => { expect(res).toBeDefined(); - expect(taskList.tasks).toBeDefined(); + expect(taskList.data).toBeDefined(); expect(taskList.isTaskListEmpty()).not.toBeTruthy(); - expect(taskList.tasks.getRows().length).toEqual(2); - expect(taskList.tasks.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); - expect(taskList.tasks.getRows()[1].getValue('name')).toEqual('Nameless task'); + expect(taskList.data.getRows().length).toEqual(2); + expect(taskList.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); + expect(taskList.data.getRows()[1].getValue('name')).toEqual('Nameless task'); done(); }); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts index 73126c33e7..ae8da9b896 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts @@ -17,7 +17,7 @@ import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core'; -import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter, DataTableAdapter, DataRowEvent } from 'ng2-alfresco-datatable'; +import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow } from 'ng2-alfresco-datatable'; import { ActivitiTaskListService } from './../services/activiti-tasklist.service'; import { UserTaskFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model'; @@ -38,12 +38,7 @@ export class ActivitiTaskList implements OnInit, OnChanges { taskFilter: UserTaskFilterRepresentationModel; @Input() - schemaColumn: any[] = [ - {type: 'text', key: 'id', title: 'Id'}, - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, - {type: 'text', key: 'formKey', title: 'Form Key', sortable: true}, - {type: 'text', key: 'created', title: 'Created', sortable: true} - ]; + data: DataTableAdapter; @Output() rowClick: EventEmitter = new EventEmitter(); @@ -54,12 +49,15 @@ export class ActivitiTaskList implements OnInit, OnChanges { @Output() onError: EventEmitter = new EventEmitter(); - data: DataTableAdapter; - - tasks: ObjectDataTableAdapter; - currentTaskId: string; + private defaultSchemaColumn: any[] = [ + {type: 'text', key: 'id', title: 'Id'}, + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, + {type: 'text', key: 'formKey', title: 'Form Key', sortable: true}, + {type: 'text', key: 'created', title: 'Created', sortable: true} + ]; + /** * Constructor * @param auth @@ -76,10 +74,12 @@ export class ActivitiTaskList implements OnInit, OnChanges { } ngOnInit() { - this.data = new ObjectDataTableAdapter( - [], - this.schemaColumn - ); + if (!this.data) { + this.data = new ObjectDataTableAdapter( + [], + this.defaultSchemaColumn + ); + } if (this.taskFilter) { let requestNode = this.convertTaskUserToTaskQuery(this.taskFilter); @@ -102,7 +102,8 @@ export class ActivitiTaskList implements OnInit, OnChanges { requestNode.size = res.total; this.activiti.getTasks(requestNode).subscribe( (response) => { - this.renderTasks(response.data); + let taskRow = this.createDataRow(response.data); + this.renderTasks(taskRow); this.selectFirstTask(); this.onSuccess.emit(response); }, (error) => { @@ -115,13 +116,31 @@ export class ActivitiTaskList implements OnInit, OnChanges { }); } + /** + * Create an array of ObjectDataRow + * @param tasks + * @returns {ObjectDataRow[]} + */ + private createDataRow(tasks: any[]): ObjectDataRow[] { + let taskRows: ObjectDataRow[] = []; + tasks.forEach((row) => { + taskRows.push(new ObjectDataRow({ + id: row.id, + name: row.name, + created: row.created + })); + }); + return taskRows; + } + + /** * The method call the adapter data table component for render the task list * @param tasks */ private renderTasks(tasks: any[]) { tasks = this.optimizeTaskName(tasks); - this.tasks = new ObjectDataTableAdapter(tasks, this.data.getColumns()); + this.data.setRows(tasks); } /** @@ -129,7 +148,7 @@ export class ActivitiTaskList implements OnInit, OnChanges { */ private selectFirstTask() { if (!this.isTaskListEmpty()) { - this.currentTaskId = this.tasks.getRows()[0].getValue('id'); + this.currentTaskId = this.data.getRows()[0].getValue('id'); } else { this.currentTaskId = null; } @@ -148,7 +167,7 @@ export class ActivitiTaskList implements OnInit, OnChanges { * @returns {ObjectDataTableAdapter|boolean} */ isTaskListEmpty(): boolean { - return this.tasks === undefined || (this.tasks && this.tasks.getRows() && this.tasks.getRows().length === 0); + return this.data === undefined || (this.data && this.data.getRows() && this.data.getRows().length === 0); } /** @@ -168,9 +187,9 @@ export class ActivitiTaskList implements OnInit, OnChanges { */ private optimizeTaskName(tasks: any[]) { tasks = tasks.map(t => { - t.name = t.name || 'Nameless task'; - if (t.name.length > 50) { - t.name = t.name.substring(0, 50) + '...'; + t.obj.name = t.obj.name || 'Nameless task'; + if (t.obj.name.length > 50) { + t.obj.name = t.obj.name.substring(0, 50) + '...'; } return t; }); diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css index 5fce123381..edc97ce169 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css @@ -87,6 +87,10 @@ border: 0; } +.hidden { + display: none; +} + /* small desktop */ @media all and (max-width: 1200px) {}