From 1214c2ebab1aa4d77e5f4eb68db11f188e0da685 Mon Sep 17 00:00:00 2001
From: siva kumar <siva.kumar@muraai.com>
Date: Wed, 19 Jul 2017 20:36:42 +0530
Subject: [PATCH] [ADF-1117] Activiti Start Process - Migrate to MD (#2104)

* Removed conditional statement from HTML.
---
 .../components/start-process.component.html   | 45 +++++++++----------
 .../start-process.component.spec.ts           | 16 +++----
 .../src/components/start-process.component.ts |  8 ++++
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/start-process.component.html b/ng2-components/ng2-activiti-processlist/src/components/start-process.component.html
index 3f56b10f0a..4d7d1d491b 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/start-process.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/start-process.component.html
@@ -1,33 +1,30 @@
 <div class="adf-smoke-bg">
-    <md-card>
-        <md-card-title>{{'START_PROCESS.FORM.TITLE' | translate}}
+	<md-card>
+		<md-card-title>{{'START_PROCESS.FORM.TITLE' | translate}}
         </md-card-title>
-        <md-card-content *ngIf="processDefinitions.length > 0 || errorMessageId">
-            <md-card-subtitle id="error-message" *ngIf="errorMessageId">
+		<md-card-content *ngIf="isProcessDefinitionEmpty()">
+			<md-card-subtitle id="error-message" *ngIf="errorMessageId">
                 {{errorMessageId|translate}}
             </md-card-subtitle>
-            <md-input-container>
-                <input mdInput placeholder="{{'START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
-            </md-input-container>
-            <md-select placeholder="{{'START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required>
-                <md-option>{{'START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</md-option>
-                <md-option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
+			<md-input-container>
+				<input mdInput placeholder="{{'START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
+			</md-input-container>
+			<md-select placeholder="{{'START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required>
+				<md-option>{{'START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</md-option>
+				<md-option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
                     {{ processDef.name }}
                 </md-option>
-            </md-select>
-            <activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id" (outcomeClick)="onOutcomeClick($event)">
-            </activiti-start-form>
-        </md-card-content>
-        <md-card-content *ngIf="processDefinitions.length === 0 && !errorMessageId">
-            <md-card-subtitle class="error-message" id="no-process-message">
+			</md-select>
+			<activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id" (outcomeClick)="onOutcomeClick($event)"></activiti-start-form>
+		</md-card-content>
+		<md-card-content *ngIf="hasErrorMessage()">
+			<md-card-subtitle class="error-message" id="no-process-message">
                 {{'START_PROCESS.NO_PROCESS_DEFINITIONS' | translate}}
             </md-card-subtitle>
-        </md-card-content>
-        <md-card-actions *ngIf="processDefinitions.length > 0 || errorMessageId">
-            <button md-button (click)="cancelStartProcess()" id="cancle_process" class="">{{'START_PROCESS.FORM.ACTION.CANCEL'| translate}}
-      </button>
-            <button md-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'START_PROCESS.FORM.ACTION.START' | translate}} 
-      </button>
-        </md-card-actions>
-    </md-card>
+		</md-card-content>
+		<md-card-actions *ngIf="isProcessDefinitionEmpty()">
+			<button md-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
+			<button md-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'START_PROCESS.FORM.ACTION.START' | translate}} </button>
+		</md-card-actions>
+	</md-card>
 </div>
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-processlist/src/components/start-process.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/start-process.component.spec.ts
index a87a78644e..b95511be24 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/start-process.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/start-process.component.spec.ts
@@ -21,7 +21,6 @@ import {
     MdButtonModule,
     MdCardModule,
     MdInputModule,
-    MdProgressSpinnerModule,
     MdSelectModule
 } from '@angular/material';
 import { ActivitiFormModule, FormService } from 'ng2-activiti-form';
@@ -299,18 +298,19 @@ describe('StartProcessInstanceComponent', () => {
             expect(startSpy).not.toHaveBeenCalled();
         });
 
-        it('should true if form is valid', async(() => {
-            component.currentProcessDef = testProcessDefRepr;
+        it('should able to start the process when the required fields are filled up', async(() => {
+            let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
             component.name = 'my:process1';
-            component.currentProcessDef.id = '1001';
-            component.isStartFormMissingOrValid();
-            component.validateForm();
+            component.onProcessDefChange('my:process1');
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
-                expect(component.validateForm()).toBe(true);
+                let startButton = fixture.nativeElement.querySelector('#button-start');
+                startButton.click();
+                expect(startSpy).toHaveBeenCalled();
             });
         }));
 
-        it('should true if startFrom defined', async(() => {
+        it('should return true if startFrom defined', async(() => {
             component.currentProcessDef = testProcessDefRepr;
             component.name = 'my:process1';
             component.currentProcessDef.hasStartForm = true;
diff --git a/ng2-components/ng2-activiti-processlist/src/components/start-process.component.ts b/ng2-components/ng2-activiti-processlist/src/components/start-process.component.ts
index f99f45284f..eaedc127d0 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/start-process.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/start-process.component.ts
@@ -122,6 +122,10 @@ export class StartProcessInstanceComponent implements OnChanges {
         return this.currentProcessDef && this.currentProcessDef.hasStartForm;
     }
 
+    isProcessDefinitionEmpty() {
+        return this.processDefinitions ? (this.processDefinitions.length > 0 || this.errorMessageId) : this.errorMessageId;
+    }
+
     isStartFormMissingOrValid() {
         if (this.startForm) {
             return this.startForm.form && this.startForm.form.isValid;
@@ -142,6 +146,10 @@ export class StartProcessInstanceComponent implements OnChanges {
         this.errorMessageId = '';
     }
 
+    hasErrorMessage() {
+        return this.processDefinitions.length === 0 && !this.errorMessageId;
+    }
+
     public onOutcomeClick(outcome: string) {
         this.startProcess(outcome);
     }