[ADF-1117] Activiti Start Process - Migrate to MD (#2104)

* Removed conditional statement from HTML.
This commit is contained in:
siva kumar
2017-07-19 20:36:42 +05:30
committed by Eugenio Romano
parent 72926b220f
commit 1214c2ebab
3 changed files with 37 additions and 32 deletions

View File

@@ -1,33 +1,30 @@
<div class="adf-smoke-bg"> <div class="adf-smoke-bg">
<md-card> <md-card>
<md-card-title>{{'START_PROCESS.FORM.TITLE' | translate}} <md-card-title>{{'START_PROCESS.FORM.TITLE' | translate}}
</md-card-title> </md-card-title>
<md-card-content *ngIf="processDefinitions.length > 0 || errorMessageId"> <md-card-content *ngIf="isProcessDefinitionEmpty()">
<md-card-subtitle id="error-message" *ngIf="errorMessageId"> <md-card-subtitle id="error-message" *ngIf="errorMessageId">
{{errorMessageId|translate}} {{errorMessageId|translate}}
</md-card-subtitle> </md-card-subtitle>
<md-input-container> <md-input-container>
<input mdInput placeholder="{{'START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required /> <input mdInput placeholder="{{'START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
</md-input-container> </md-input-container>
<md-select placeholder="{{'START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required> <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>{{'START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</md-option>
<md-option *ngFor="let processDef of processDefinitions" [value]="processDef.id"> <md-option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
{{ processDef.name }} {{ processDef.name }}
</md-option> </md-option>
</md-select> </md-select>
<activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id" (outcomeClick)="onOutcomeClick($event)"> <activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id" (outcomeClick)="onOutcomeClick($event)"></activiti-start-form>
</activiti-start-form> </md-card-content>
</md-card-content> <md-card-content *ngIf="hasErrorMessage()">
<md-card-content *ngIf="processDefinitions.length === 0 && !errorMessageId"> <md-card-subtitle class="error-message" id="no-process-message">
<md-card-subtitle class="error-message" id="no-process-message">
{{'START_PROCESS.NO_PROCESS_DEFINITIONS' | translate}} {{'START_PROCESS.NO_PROCESS_DEFINITIONS' | translate}}
</md-card-subtitle> </md-card-subtitle>
</md-card-content> </md-card-content>
<md-card-actions *ngIf="processDefinitions.length > 0 || errorMessageId"> <md-card-actions *ngIf="isProcessDefinitionEmpty()">
<button md-button (click)="cancelStartProcess()" id="cancle_process" class="">{{'START_PROCESS.FORM.ACTION.CANCEL'| translate}} <button md-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
</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>
<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}} </md-card-actions>
</button> </md-card>
</md-card-actions>
</md-card>
</div> </div>

View File

@@ -21,7 +21,6 @@ import {
MdButtonModule, MdButtonModule,
MdCardModule, MdCardModule,
MdInputModule, MdInputModule,
MdProgressSpinnerModule,
MdSelectModule MdSelectModule
} from '@angular/material'; } from '@angular/material';
import { ActivitiFormModule, FormService } from 'ng2-activiti-form'; import { ActivitiFormModule, FormService } from 'ng2-activiti-form';
@@ -299,18 +298,19 @@ describe('StartProcessInstanceComponent', () => {
expect(startSpy).not.toHaveBeenCalled(); expect(startSpy).not.toHaveBeenCalled();
}); });
it('should true if form is valid', async(() => { it('should able to start the process when the required fields are filled up', async(() => {
component.currentProcessDef = testProcessDefRepr; let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
component.name = 'my:process1'; component.name = 'my:process1';
component.currentProcessDef.id = '1001'; component.onProcessDefChange('my:process1');
component.isStartFormMissingOrValid(); fixture.detectChanges();
component.validateForm();
fixture.whenStable().then(() => { 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.currentProcessDef = testProcessDefRepr;
component.name = 'my:process1'; component.name = 'my:process1';
component.currentProcessDef.hasStartForm = true; component.currentProcessDef.hasStartForm = true;

View File

@@ -122,6 +122,10 @@ export class StartProcessInstanceComponent implements OnChanges {
return this.currentProcessDef && this.currentProcessDef.hasStartForm; return this.currentProcessDef && this.currentProcessDef.hasStartForm;
} }
isProcessDefinitionEmpty() {
return this.processDefinitions ? (this.processDefinitions.length > 0 || this.errorMessageId) : this.errorMessageId;
}
isStartFormMissingOrValid() { isStartFormMissingOrValid() {
if (this.startForm) { if (this.startForm) {
return this.startForm.form && this.startForm.form.isValid; return this.startForm.form && this.startForm.form.isValid;
@@ -142,6 +146,10 @@ export class StartProcessInstanceComponent implements OnChanges {
this.errorMessageId = ''; this.errorMessageId = '';
} }
hasErrorMessage() {
return this.processDefinitions.length === 0 && !this.errorMessageId;
}
public onOutcomeClick(outcome: string) { public onOutcomeClick(outcome: string) {
this.startProcess(outcome); this.startProcess(outcome);
} }