Process start form validates submit state of start process form

Refs #730

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.css

@@ -9,3 +9,7 @@
 .material-icons:hover {
     color: rgb(255, 152, 0);
 }
+
+.mdl-dialog {
+    width: 400px;
+}

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html

@@ -15,20 +15,16 @@
             <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" />
             <label class="mdl-textfield__label" for="processName">{{'START_PROCESS.DIALOG.LABEL.NAME'|translate}}</label>
         </div>
-        <activiti-start-form *ngIf="hasFormKey()" [processId]="processDefinitionId"
+        <activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="processDefinitionId"
                        (formSaved)='onFormSaved($event)'
                        (formCompleted)='onFormCompleted($event)'
                        (formLoaded)='onFormLoaded($event)'
                        (onError)='onFormError($event)'
-                       (executeOutcome)='onExecuteOutcome($event)'
                        #startForm>
         </activiti-start-form>
-        <button type="button" class="mdl-button" *ngIf="!hasFormKey()" (click)="onFormCompleted()">
-            {{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
-        </button>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" (click)="startProcess()" class="mdl-button">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>
+        <button type="button" [disabled]="!validateForm()" (click)="startProcess()" class="mdl-button">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>
         <button type="button" (click)="cancel()" class="mdl-button close">{{'START_PROCESS.DIALOG.ACTION.CANCEL'|translate}}</button>
     </div>
 </dialog>

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { ActivitiStartForm } from 'ng2-activiti-form';
 import { ActivitiProcessService } from './../services/activiti-process.service';
@@ -28,7 +28,7 @@ declare let componentHandler: any;
     templateUrl: './activiti-start-process.component.html',
     styleUrls: ['./activiti-start-process.component.css']
 })
-export class ActivitiStartProcessButton implements OnInit, OnChanges {
+export class ActivitiStartProcessButton implements OnInit {
 
     @Input()
     appId: string;
@@ -56,10 +56,6 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
         this.load(this.appId);
     }
 
-    ngOnChanges(changes: SimpleChanges) {
-        console.log('changes', changes);
-    }
-
     public load(appId: string) {
         this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
             (res: any[]) => {
@@ -79,7 +75,8 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
 
     public startProcess() {
         if (this.processDefinitionId && this.name) {
-            this.activitiProcess.startProcess(this.processDefinitionId, this.name).subscribe(
+            let formValues = this.startForm ? this.startForm.form.values : undefined;
+            this.activitiProcess.startProcess(this.processDefinitionId, this.name, formValues).subscribe(
                 (res: any) => {
                     this.cancel();
                 },
@@ -96,30 +93,22 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
         }
     }
 
-    hasFormKey() {
-        return true;
+    private getSelectedProcess(): any {
+        return this.processDefinitions.filter((processDefinition) => {
+            return processDefinition.id === this.processDefinitionId;
+        })[0];
     }
 
-    onFormSaved($event: Event) {
-        $event.preventDefault();
-        console.log('form saved');
+    hasStartForm() {
+        let selectedProcessDefinition = this.getSelectedProcess();
+        return selectedProcessDefinition && selectedProcessDefinition.hasStartForm;
     }
 
-    onFormCompleted($event: Event) {
-        $event.preventDefault();
-        console.log('form saved');
+    isStartFormMissingOrValid() {
+        return !this.startForm || this.startForm.form.isValid;
     }
 
-    onExecuteOutcome($event: Event) {
-        $event.preventDefault();
-        console.log('form outcome executed');
-    }
-
-    onFormLoaded($event: Event) {
-        console.log('form loaded', $event);
-    }
-
-    onFormError($event: Event) {
-        console.log('form error', $event);
+    validateForm() {
+        return this.processDefinitionId && this.name && this.isStartFormMissingOrValid();
     }
 }

ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts

@@ -226,10 +226,14 @@ export class ActivitiProcessService {
             .catch(this.handleError);
     }
 
-    startProcess(processDefinitionId: string, name: string) {
-        let startRequest: any = {};
-        startRequest.name = name;
-        startRequest.processDefinitionId = processDefinitionId;
+    startProcess(processDefinitionId: string, name: string, startFormValues?: any) {
+        let startRequest: any = {
+            name: name,
+            processDefinitionId: processDefinitionId
+        };
+        if (startFormValues) {
+            startRequest.values = startFormValues;
+        }
         return Observable.fromPromise(
             this.authService.getAlfrescoApi().activiti.processApi.startNewProcessInstance(startRequest)
             )