#1058 fix start process dialog

ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts

@@ -84,6 +84,9 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     static COMPLETE_OUTCOME_ID: string = '$complete';
     static CUSTOM_OUTCOME_ID: string = '$custom';
 
+    @Input()
+    processId: string;
+
     @Input()
     taskId: string;
 
@@ -193,6 +196,11 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     }
 
     ngOnInit() {
+        if (this.processId) {
+            this.loadStartForm(this.processId);
+            return;
+        }
+
         if (this.nodeId) {
             this.loadFormForEcmNode();
         } else {
@@ -222,6 +230,12 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
             this.getFormDefinitionByFormName(formName.currentValue);
             return;
         }
+
+        let processId = changes['processId'];
+        if (processId  && processId.currentValue) {
+            this.loadStartForm(processId.currentValue);
+            return;
+        }
     }
 
     /**
@@ -316,6 +330,21 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
             );
     }
 
+    loadStartForm(processId: string) {
+        this.formService
+            .getStartFormInstance(processId)
+            .subscribe(
+                form => {
+                    this.formName = form.name;
+                    this.form = this.parseForm(form);
+                    this.formLoaded.emit(this.form);
+                },
+                (error) => {
+                    this.handleError(error);
+                }
+            );
+    }
+
     getFormDefinitionByFormId(formId: string) {
         this.formService
             .getFormDefinitionById(formId)

ng2-components/ng2-activiti-form/src/services/form.service.ts

@@ -206,6 +206,18 @@ export class FormService {
             .catch(this.handleError);
     }
 
+    /**
+     * Get start form instance for a given processId
+     * @param processId Process definition ID
+     * @returns {Observable<any>}
+     */
+    getStartFormInstance(processId: string): Observable<any> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processApi.getProcessInstanceStartForm(processId))
+            .map(this.toJson)
+            .catch(this.handleError);
+    }
+
     /**
      * Get start form definition for a given process
      * @param processId Process definition ID

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.html

@@ -32,34 +32,18 @@
     <span class="activiti-label">{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>
 
     <!--IF START TASK COMPLETED -->
-    <div class="menu-container" *ngIf="completedTasks?.length > 0">
+    <div class="menu-container">
         <ul class='mdl-list'>
             <li class="mdl-list__item mdl-list__item--two-line">
-                <span class="mdl-list__item-primary-content" (click)="clickTask($event, completedTasks[0])">
+                <span class="mdl-list__item-primary-content" (click)="clickStartTask($event)">
                     <i class="material-icons mdl-list__item-icon">assignment</i>
                     <span>{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>
-                    <span class="mdl-list__item-sub-title">{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:
+
-                        getUserFullName(completedTasks[0].assignee), created: getFormatDate(completedTasks[0].created, 'mediumDate') }
-                        }}</span>
                 </span>
             </li>
         </ul>
     </div>
 
-    <!--IF START TASK NOT COMPLETED YET-->
-    <div class="menu-container" *ngIf="completedTasks?.length == 0 && activeTasks?.length > 0">
-        <ul class='mdl-list'>
-            <li class="mdl-list__item mdl-list__item--two-line">
-                <span class="mdl-list__item-primary-content" (click)="clickTask($event, activeTasks[0])">
-                    <i class="material-icons mdl-list__item-icon">assignment</i>
-                    <span>{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>
-                    <span class="mdl-list__item-sub-title">{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:
-                        getUserFullName(activeTasks[0].assignee), created: getFormatDate(activeTasks[0].created, 'mediumDate') }
-                        }}</span>
-                </span>
-            </li>
-        </ul>
-    </div>
 </div>
 
 <!-- COMPLETED FORM -->
@@ -89,6 +73,18 @@
         <activiti-task-details [taskId]="selectedTaskId" (formCompleted)="taskFormCompleted()" #taskdetails></activiti-task-details>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" (click)="cancelDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
+        <button type="button" (click)="closeDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
+    </div>
+</dialog>
+
+<dialog class="mdl-dialog task-details-dialog" #startDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
+    <div class="mdl-dialog__content">
+        <activiti-form [processId]="processId" [showSaveButton]="false" [showCompleteButton]="false" [showDebugButton]="false"
+                       [showRefreshButton]="false">
+        </activiti-form>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="closeSartDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
     </div>
 </dialog>

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

@@ -55,9 +55,14 @@ export class ActivitiProcessInstanceTasks implements OnInit {
 
     selectedTaskId: string;
 
+    processId: string;
+
     @ViewChild('dialog')
     dialog: any;
 
+    @ViewChild('startDialog')
+    startDialog: any;
+
     @ViewChild('taskdetails')
     taskdetails: any;
 
@@ -67,8 +72,8 @@ export class ActivitiProcessInstanceTasks implements OnInit {
             translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src');
         }
 
-        this.task$ = new Observable<TaskDetailsModel>(observer =>  this.taskObserver = observer).share();
+        this.task$ = new Observable<TaskDetailsModel>(observer => this.taskObserver = observer).share();
-        this.completedTask$ = new Observable<TaskDetailsModel>(observer =>  this.completedTaskObserver = observer).share();
+        this.completedTask$ = new Observable<TaskDetailsModel>(observer => this.completedTaskObserver = observer).share();
     }
 
     ngOnInit() {
@@ -149,14 +154,27 @@ export class ActivitiProcessInstanceTasks implements OnInit {
         this.showDialog();
     }
 
+    public clickStartTask() {
+        this.processId = this.processInstanceDetails.id;
+        this.showStartDialog();
+    }
+
+    public showStartDialog() {
+        if (this.startDialog) {
+            this.startDialog.nativeElement.showModal();
+        }
+    }
+
     public showDialog() {
         if (this.dialog) {
             this.dialog.nativeElement.showModal();
         }
     }
 
-    public cancelDialog() {
+    public closeSartDialog() {
-        this.closeDialog();
+        if (this.startDialog) {
+            this.startDialog.nativeElement.close();
+        }
     }
 
     private closeDialog() {