#805 display form name in task header

- add support for displaying form name in task header (only when form
loaded)
- fix live reload for task-details component (demo shell)
- code improvements (including type-safe events)

demo-shell-ng2/wsrv-config.json

@@ -8,6 +8,7 @@
         "node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
         "node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
         "node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
-        "node_modules/ng2-activiti-form/dist/**/*.{html,css,js}"
+        "node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
+        "node_modules/ng2-activiti-tasklist/dist/**/*.{html,css,js}"
     ]
 }

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html

@@ -9,7 +9,7 @@
 </div>
 <div *ngIf="taskDetails">
     <h2 class="mdl-card__title-text">{{taskDetails.name}}</h2>
-    <activiti-task-header [taskDetails]="taskDetails" #activitiheader></activiti-task-header>
+    <activiti-task-header [taskDetails]="taskDetails" [formName]="taskFormName" #activitiheader></activiti-task-header>
     <div class="mdl-grid">
         <div class="mdl-cell mdl-cell--4-col">
             <activiti-people [people]="taskPeople" [readOnly]="readOnlyForm"
@@ -30,11 +30,11 @@
                    [showCompleteButton]="showFormCompleteButton"
                    [showSaveButton]="showFormSaveButton"
                    [readOnly]="readOnlyForm"
-                   (formSaved)='formSavedEmitter($event)'
+                   (formSaved)='onFormSaved($event)'
-                   (formCompleted)='formCompletedEmitter($event)'
+                   (formCompleted)='onFormCompleted($event)'
-                   (formLoaded)='formLoadedEmitter($event)'
+                   (formLoaded)='onFormLoaded($event)'
-                   (onError)='onErrorEmitter($event)'
+                   (onError)='onFormError($event)'
-                   (executeOutcome)='executeOutcomeEmitter($event)'
+                   (executeOutcome)='onExecuteFormOutcome($event)'
                    #activitiForm>
     </activiti-form>
     <button type="button" class="mdl-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts

@@ -20,11 +20,9 @@ import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-a
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { TaskDetailsModel } from '../models/task-details.model';
 import { User } from '../models/user.model';
-import { FormModel, FormService } from 'ng2-activiti-form';
+import { FormService, FormModel, FormOutcomeEvent } from 'ng2-activiti-form';
 import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
-declare let componentHandler: any;
-
 @Component({
     selector: 'activiti-task-details',
     moduleId: module.id,
@@ -61,23 +59,22 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
     showFormRefreshButton: boolean = true;
 
     @Output()
-    formSaved = new EventEmitter();
+    formSaved: EventEmitter<FormModel> = new EventEmitter<FormModel>();
 
     @Output()
-    formCompleted = new EventEmitter();
+    formCompleted: EventEmitter<FormModel> = new EventEmitter<FormModel>();
 
     @Output()
-    formLoaded = new EventEmitter();
+    formLoaded: EventEmitter<FormModel> = new EventEmitter<FormModel>();
 
     @Output()
-    onError = new EventEmitter();
+    onError: EventEmitter<any> = new EventEmitter<any>();
 
     @Output()
-    executeOutcome = new EventEmitter();
+    executeOutcome: EventEmitter<FormOutcomeEvent> = new EventEmitter<FormOutcomeEvent>();
 
     taskDetails: TaskDetailsModel;
-
+    taskFormName: string = null;
-    taskForm: FormModel;
 
     taskPeople: User[] = [];
 
@@ -142,8 +139,8 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
      * @param taskId
      */
     loadDetails(taskId: string) {
-        this.taskForm = null;
         this.taskPeople = [];
+        this.taskFormName = null;
         if (taskId) {
             this.activitiTaskList.getTaskDetails(taskId).subscribe(
                 (res: TaskDetailsModel) => {
@@ -194,61 +191,34 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
      */
     onComplete() {
         this.activitiTaskList.completeTask(this.taskId).subscribe(
-            (res) => {
+            (res) => this.formCompleted.emit(null)
-                console.log(res);
-                this.formCompleted.emit(res);
-            }
         );
     }
 
-    /**
+    onFormSaved(form: FormModel) {
-     * Emit the form saved event
+        this.formSaved.emit(form);
-     * @param data
-     */
-    formSavedEmitter(data: any) {
-        this.formSaved.emit(data);
     }
 
-    /**
+    onFormCompleted(form: FormModel) {
-     * Emit the form completed event
+        this.formCompleted.emit(form);
-     * @param data
+        if (this.showNextTask) {
-     */
-    formCompletedEmitter(data: any) {
-        this.formCompleted.emit(data);
-        if (this.isShowNextTask()) {
             this.loadNextTask(this.taskDetails.processInstanceId, this.taskDetails.processDefinitionId);
         }
     }
 
-    /**
+    onFormLoaded(form: FormModel) {
-     * Emit the form loaded event
+        this.taskFormName = null;
-     * @param data
+        if (form && form.name) {
-     */
+            this.taskFormName = form.name;
-    formLoadedEmitter(data: any) {
+        }
-        this.formLoaded.emit(data);
+        this.formLoaded.emit(form);
     }
 
-    /**
+    onFormError(error: any) {
-     * Emit the error event of the form
+        this.onError.emit(error);
-     * @param data
-     */
-    onErrorEmitter(err: any) {
-        this.onError.emit(err);
     }
 
-    /**
+    onExecuteFormOutcome(event: FormOutcomeEvent) {
-     * Emit the execute outcome of the form
+        this.executeOutcome.emit(event);
-     * @param data
-     */
-    executeOutcomeEmitter(data: any) {
-        this.executeOutcome.emit(data);
-    }
-
-    /**
-     * Return the showNexTask value
-     * @returns {boolean}
-     */
-    isShowNextTask(): boolean {
-        return this.showNextTask;
     }
 }

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.css

@@ -2,6 +2,10 @@
     width: 100%;
 }
 
-.activiti-label {
+.activiti-task-header__label {
-    font-weight: bolder;
+     font-weight: bold;
+}
+
+.activiti-task-header__value {
+    color: rgb(68,138,255);
 }

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.html

@@ -1,14 +1,16 @@
 <div *ngIf="taskDetails">
     <div class="mdl-grid">
         <div class="mdl-cell mdl-cell--4-col">
-            <span class="activiti-label">{{ 'TASK_DETAILS.LABELS.ASSIGNEE' | translate }}</span>:
+            <span class="activiti-task-header__label">{{ 'TASK_DETAILS.LABELS.ASSIGNEE' | translate }}: </span>
-            {{taskDetails.assignee.lastName }}
+            <span class="activiti-task-header__value">{{taskDetails.assignee.lastName }}</span>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
-            <span class="activiti-label">
+            <span class="activiti-task-header__label">{{ 'TASK_DETAILS.LABELS.DUE' | translate }}: </span>
-                {{ 'TASK_DETAILS.LABELS.DUE' | translate }}</span>:
+            <span class="activiti-task-header__value">{{taskDetails?.dueDate ? taskDetails.dueDate : ('TASK_DETAILS.DUE.NONE' |translate) }}</span>
-            {{taskDetails?.dueDate ? taskDetails.dueDate : ('TASK_DETAILS.DUE.NONE' |translate) }}
+        </div>
-
+        <div *ngIf="formName" class="mdl-cell mdl-cell--4-col">
+            <span class="activiti-task-header__label">{{ 'TASK_DETAILS.LABELS.FORM' | translate }}: </span>
+            <span class="activiti-task-header__value">{{formName}}</span>
         </div>
     </div>
 </div>

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts

@@ -19,8 +19,6 @@ import { Component, Input } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { TaskDetailsModel } from '../models/task-details.model';
 
-declare let componentHandler: any;
-
 @Component({
     selector: 'activiti-task-header',
     moduleId: module.id,
@@ -29,19 +27,15 @@ declare let componentHandler: any;
 })
 export class ActivitiTaskHeader {
 
+    @Input()
+    formName: string = 'No form';
+
     @Input()
     taskDetails: TaskDetailsModel;
 
-    /**
-     * Constructor
-     * @param auth
-     * @param translate
-     */
     constructor(private translate: AlfrescoTranslationService) {
-
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-tasklist/src');
         }
     }
-
 }