From b96dcb7bb0d1508a4366e25405e7a409ab3e1819 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Tue, 26 Jul 2016 10:36:19 +0100 Subject: [PATCH] Basic single page with activiti task list and form render --- .../app/components/tasks/activiti.service.ts | 85 -------------- .../tasks/tasks-demo.component.html | 24 ++++ .../components/tasks/tasks-demo.component.ts | 66 +++++++++-- .../ng2-activiti-tasklist/i18n/en.json | 17 +++ .../ng2-activiti-tasklist/i18n/it.json | 17 +++ ng2-components/ng2-activiti-tasklist/index.ts | 4 +- .../ng2-activiti-tasklist/package.json | 3 +- .../activiti-task-details.component.css | 3 + .../activiti-task-details.component.html | 13 +++ .../activiti-task-details.component.ts | 92 +++++++++++++++ .../activiti-tasklist.component.html | 25 +++-- .../components/activiti-tasklist.component.ts | 17 ++- .../src/models/task-details.model.ts | 105 ++++++++++++++++++ .../src/services/activiti-tasklist.service.ts | 55 ++++++++- 14 files changed, 416 insertions(+), 110 deletions(-) delete mode 100644 demo-shell-ng2/app/components/tasks/activiti.service.ts create mode 100644 demo-shell-ng2/app/components/tasks/tasks-demo.component.html create mode 100644 ng2-components/ng2-activiti-tasklist/i18n/en.json create mode 100644 ng2-components/ng2-activiti-tasklist/i18n/it.json create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts create mode 100644 ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts diff --git a/demo-shell-ng2/app/components/tasks/activiti.service.ts b/demo-shell-ng2/app/components/tasks/activiti.service.ts deleted file mode 100644 index 9b8b5d95dc..0000000000 --- a/demo-shell-ng2/app/components/tasks/activiti.service.ts +++ /dev/null @@ -1,85 +0,0 @@ -/*! - * @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 { Injectable } from '@angular/core'; -import { Http, Headers, RequestOptions, Response } from '@angular/http'; -// import { Observable } from 'rxjs/Rx'; - -@Injectable() -export class ActivitiService { - - constructor(private http: Http) {} - - login(username: string, password: string) { - let url = 'http://localhost:9999/activiti-app/app/authentication'; - let headers = new Headers({ - 'Content-Type': 'application/x-www-form-urlencoded', - 'Cache-Control': 'no-cache' - }); - let options = new RequestOptions({ headers: headers }); - let data = 'j_username=' - + encodeURIComponent(username) - + '&j_password=' - + encodeURIComponent(password) - + '&_spring_security_remember_me=true&submit=Login'; - - return this.http - .post(url, data, options) - .toPromise() - // .then(res => console.log(res)) - .catch(this.handleError); - } - - getTasks() { - // emulate filter value - let data = JSON.stringify({ - 'page': 0, - 'filterId': 3, - 'filter': { - 'sort': 'created-desc', - 'name': '', - 'state': 'open', - 'assignment': 'involved' - }, - 'appDefinitionId': null - }); - - let url = 'http://localhost:9999/activiti-app/app/rest/filter/tasks'; - let headers = new Headers({ - 'Content-Type': 'application/json', - 'Cache-Control': 'no-cache' - }); - let options = new RequestOptions({ headers: headers }); - - return this.http - .post(url, data, options) - .toPromise() - .then(this.parseJSON) - .catch(this.handleError); - } - - private parseJSON(res: Response) { - let body = res.json(); - return body.data || { }; - } - - private handleError(error: any) { - console.error('An error occurred', error); - return Promise.reject(error.message || error); - } - -} diff --git a/demo-shell-ng2/app/components/tasks/tasks-demo.component.html b/demo-shell-ng2/app/components/tasks/tasks-demo.component.html new file mode 100644 index 0000000000..87fa1b0ab7 --- /dev/null +++ b/demo-shell-ng2/app/components/tasks/tasks-demo.component.html @@ -0,0 +1,24 @@ +
+
+
    +
  • + + + +
    • +
  • + +
    • +
+
+
+ +
+
Task Details
+
\ No newline at end of file diff --git a/demo-shell-ng2/app/components/tasks/tasks-demo.component.ts b/demo-shell-ng2/app/components/tasks/tasks-demo.component.ts index 2d608bc846..f5063fd608 100644 --- a/demo-shell-ng2/app/components/tasks/tasks-demo.component.ts +++ b/demo-shell-ng2/app/components/tasks/tasks-demo.component.ts @@ -16,36 +16,84 @@ */ import { Component, OnInit } from '@angular/core'; -import { ActivitiTaskList } from 'ng2-activiti-tasklist'; +import { ALFRESCO_TASKLIST_DIRECTIVES } from 'ng2-activiti-tasklist'; +import { ActivitiForm } from 'ng2-activiti-form'; + import { ObjectDataTableAdapter, ObjectDataColumn } from 'ng2-alfresco-datatable'; @Component({ selector: 'tasks-demo', template: ` -
- -
+
+
+
    +
  • + + + +
    • +
  • + +
    • +
+
+
+ +
+
+ +
+
+ `, - directives: [ActivitiTaskList], + directives: [ALFRESCO_TASKLIST_DIRECTIVES, ActivitiForm], styles: [':host > .container { padding: 10px; }'] }) export class TasksDemoComponent implements OnInit { + currentChoice: string = 'task-list'; + + currentTaskId: string; + data: ObjectDataTableAdapter; constructor() { this.data = new ObjectDataTableAdapter([], []); } + setChoice($event) { + this.currentChoice = $event.target.value; + } + + isProcessListSelected() { + return this.currentChoice === 'process-list'; + } + + isTaskListSelected() { + return this.currentChoice === 'task-list'; + } + ngOnInit() { let schema = [ - {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} + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true} ]; let columns = schema.map(col => new ObjectDataColumn(col)); this.data.setColumns(columns); } + onRowClick(taskId) { + this.currentTaskId = taskId; + } + } diff --git a/ng2-components/ng2-activiti-tasklist/i18n/en.json b/ng2-components/ng2-activiti-tasklist/i18n/en.json new file mode 100644 index 0000000000..1333cd2e5d --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/i18n/en.json @@ -0,0 +1,17 @@ +{ + "TASK_LIST": { + "MESSAGES": { + "NONE": "No tasks list found." + } + }, + "TASK_DETAILS": { + "MESSAGES": { + "NONE": "No task details found." + } + }, + "TASK_FILTERS": { + "MESSAGES": { + "NONE": "No task filter selected." + } + } +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/i18n/it.json b/ng2-components/ng2-activiti-tasklist/i18n/it.json new file mode 100644 index 0000000000..d7fd51d6d0 --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/i18n/it.json @@ -0,0 +1,17 @@ +{ + "TASK_LIST": { + "MESSAGES": { + "NONE": "Nessuna lista tasks trovata." + } + }, + "TASK_DETAILS": { + "MESSAGES": { + "NONE": "Nessun dettaglio task trovato." + } + }, + "TASK_FILTERS": { + "MESSAGES": { + "NONE": "Nessun filtro task selezionato." + } + } +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts index f9c4e4a420..b2dd93d5a1 100644 --- a/ng2-components/ng2-activiti-tasklist/index.ts +++ b/ng2-components/ng2-activiti-tasklist/index.ts @@ -16,7 +16,9 @@ */ import { ActivitiTaskList } from './src/components/activiti-tasklist.component'; +import { ActivitiTaskDetails } from './src/components/activiti-task-details.component'; + export * from './src/components/activiti-tasklist.component'; -export const ALFRESCO_TASKLIST_DIRECTIVES: [any] = [ActivitiTaskList]; +export const ALFRESCO_TASKLIST_DIRECTIVES: [any] = [ActivitiTaskList, ActivitiTaskDetails]; diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json index 8e172fb1d6..dda05ee92a 100644 --- a/ng2-components/ng2-activiti-tasklist/package.json +++ b/ng2-components/ng2-activiti-tasklist/package.json @@ -70,7 +70,8 @@ "zone.js": "0.6.12", "ng2-translate": "2.2.2", "ng2-alfresco-core": "0.2.0", - "ng2-alfresco-datatable": "0.2.0", + "ng2-alfresco-datatable": "0.2.0", + "ng2-activiti-form": "0.2.0", "alfresco-js-api": "^0.1.0" }, "peerDependencies": { diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css new file mode 100644 index 0000000000..07eaf92d80 --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css @@ -0,0 +1,3 @@ +:host { + width: 100%; +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html new file mode 100644 index 0000000000..b415d64a64 --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html @@ -0,0 +1,13 @@ +
+

{{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}

+
+
+

{{taskDetails.name}}

+
+
Email: {{taskDetails.assignee.email}}
+
FirstName: {{taskDetails.assignee.firstName}}
+
LastName: {{taskDetails.assignee.lastName}}
+
+ + +
\ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts new file mode 100644 index 0000000000..7bacb64ec3 --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts @@ -0,0 +1,92 @@ +/*! + * @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 { Component, Input, OnInit, OnChanges } from '@angular/core'; +import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoPipeTranslate } from 'ng2-alfresco-core'; +import { ActivitiTaskListService } from './../services/activiti-tasklist.service'; +import { TaskDetailsModel } from '../models/task-details.model'; +import { ActivitiForm } from 'ng2-activiti-form'; + + +declare let componentHandler: any; +declare let __moduleName: string; + +@Component({ + selector: 'activiti-task-details', + moduleId: __moduleName, + templateUrl: './activiti-task-details.component.html', + styleUrls: ['./activiti-task-details.component.css'], + providers: [ActivitiTaskListService], + directives: [ActivitiForm], + pipes: [ AlfrescoPipeTranslate ] + +}) +export class ActivitiTaskDetails implements OnInit, OnChanges { + + @Input() + taskId: string; + + taskDetails: TaskDetailsModel; + + /** + * Constructor + * @param auth + * @param translate + */ + constructor(private auth: AlfrescoAuthenticationService, + private translate: AlfrescoTranslationService, + public activiti: ActivitiTaskListService) { + + if (translate) { + translate.addTranslationFolder('node_modules/ng2-activiti-tasklist'); + } + } + + ngOnInit() { + if (this.taskId) { + this.activiti.getTaskDetails(this.taskId).subscribe( + (res: TaskDetailsModel) => { + this.taskDetails = res; + console.log(this.taskDetails); + } + ); + } + } + + ngOnChanges(change) { + this.loadDetails(this.taskId); + } + + loadDetails(id: string) { + if (id) { + this.activiti.getTaskDetails(id).subscribe( + (res: TaskDetailsModel) => { + this.taskDetails = res; + console.log(this.taskDetails); + } + ); + } + } + + onComplete() { + this.activiti.completeTask(this.taskId).subscribe( + (res) => { + console.log(res); + } + ); + } +} 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 d3d2c96d0c..3176503aee 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 @@ -1,12 +1,23 @@ -
-