Fix start process form (#4847)

This commit is contained in:
Maurizio Vitale
2019-06-13 18:21:33 +01:00
committed by GitHub
parent c44c2eae77
commit 819ed9ae6a
7 changed files with 206 additions and 129 deletions

View File

@@ -27,7 +27,7 @@ import { ProcessServiceCloudTestingModule } from '../../testing/process-service-
import { FormCloudService } from '../services/form-cloud.service'; import { FormCloudService } from '../services/form-cloud.service';
import { FormCloudComponent } from './form-cloud.component'; import { FormCloudComponent } from './form-cloud.component';
import { FormCloud } from '../models/form-cloud.model'; import { FormCloud } from '../models/form-cloud.model';
import { cloudFormMock } from '../mocks/cloud-form.mock'; import { cloudFormMock, fakeCloudForm } from '../mocks/cloud-form.mock';
import { FormCloudRepresentation } from '../models/form-cloud-representation.model'; import { FormCloudRepresentation } from '../models/form-cloud-representation.model';
describe('FormCloudComponent', () => { describe('FormCloudComponent', () => {
@@ -422,15 +422,10 @@ describe('FormCloudComponent', () => {
}); });
it('should fetch and parse form definition by id', (done) => { it('should fetch and parse form definition by id', (done) => {
spyOn(formCloudService, 'getForm').and.callFake((currentAppName, currentFormId) => { spyOn(formCloudService, 'getForm').and.returnValue(of(fakeCloudForm));
return new Observable((observer) => {
observer.next({ id: currentFormId });
observer.complete();
});
});
const appName = 'test-app'; const appName = 'test-app';
const formId = '456'; const formId = 'form-de8895be-d0d7-4434-beef-559b15305d72';
formComponent.formLoaded.subscribe(() => { formComponent.formLoaded.subscribe(() => {
expect(formComponent.form).toBeDefined(); expect(formComponent.form).toBeDefined();
expect(formComponent.form.id).toBe(formId); expect(formComponent.form.id).toBe(formId);

View File

@@ -20,7 +20,7 @@ import {
Output, SimpleChanges, OnDestroy Output, SimpleChanges, OnDestroy
} from '@angular/core'; } from '@angular/core';
import { Observable, of, forkJoin, Subject } from 'rxjs'; import { Observable, of, forkJoin, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators'; import { switchMap, takeUntil, map } from 'rxjs/operators';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { import {
FormBaseComponent, FormBaseComponent,
@@ -206,7 +206,13 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
getFormById(appName: string, formId: string) { getFormById(appName: string, formId: string) {
this.formCloudService this.formCloudService
.getForm(appName, formId) .getForm(appName, formId)
.pipe(takeUntil(this.onDestroy$)) .pipe(
map((form: any) => {
const flattenForm = {...form.formRepresentation, ...form.formRepresentation.formDefinition};
delete flattenForm.formDefinition;
return flattenForm;
}),
takeUntil(this.onDestroy$))
.subscribe( .subscribe(
(form) => { (form) => {
const parsedForm = this.parseForm(form); const parsedForm = this.parseForm(form);

View File

@@ -675,3 +675,67 @@ export const cloudFormMock = {
} }
] ]
}; };
export let fakeCloudForm = {
'formRepresentation': {
'id': 'form-de8895be-d0d7-4434-beef-559b15305d72',
'name': 'StartEventForm',
'description': '',
'version': 0,
'formDefinition': {
'tabs': [],
'fields': [
{
'type': 'container',
'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
'name': 'Label',
'tab': null,
'fields': {
'1': [
{
'type': 'text',
'id': 'firstName',
'name': 'firstName',
'colspan': 1,
'params': {
'existingColspan': 1,
'maxColspan': 2
},
'visibilityCondition': null,
'placeholder': null,
'value': null,
'required': false,
'minLength': 0,
'maxLength': 0,
'regexPattern': null
}
],
'2': [
{
'type': 'text',
'id': 'lastName',
'name': 'lastName',
'colspan': 1,
'params': {
'existingColspan': 1,
'maxColspan': 2
},
'visibilityCondition': null,
'placeholder': null,
'value': null,
'required': false,
'minLength': 0,
'maxLength': 0,
'regexPattern': null
}
]
},
'numberOfColumns': 2
}
],
'outcomes': [],
'metadata': {},
'variables': []
}
}
};

View File

@@ -211,11 +211,11 @@ export class FormCloudService extends BaseCloudService {
/** /**
* Gets a form definition. * Gets a form definition.
* @param appName Name of the app * @param appName Name of the app
* @param taskId ID of the target task * @param formKey key of the target task
* @returns Form definition * @returns Form definition
*/ */
getForm(appName: string, taskId: string): Observable<any> { getForm(appName: string, formKey: string): Observable<any> {
const apiUrl = this.buildGetFormUrl(appName, taskId); const apiUrl = this.buildGetFormUrl(appName, formKey);
const bodyParam = {}, pathParams = {}, queryParams = {}, headerParams = {}, const bodyParam = {}, pathParams = {}, queryParams = {}, headerParams = {},
formParams = {}; formParams = {};
@@ -282,8 +282,8 @@ export class FormCloudService extends BaseCloudService {
return `${this.getBasePath(appName)}/query/v1/tasks/${taskId}`; return `${this.getBasePath(appName)}/query/v1/tasks/${taskId}`;
} }
private buildGetFormUrl(appName: string, formId: string): string { private buildGetFormUrl(appName: string, formKey: string): string {
return `${this.getBasePath(appName)}/form/v1/forms/${formId}`; return `${this.getBasePath(appName)}/form/v1/forms/${formKey}`;
} }
private buildSaveFormUrl(appName: string, formId: string): string { private buildSaveFormUrl(appName: string, formId: string): string {

View File

@@ -91,6 +91,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
processPayloadCloud = new ProcessPayloadCloud(); processPayloadCloud = new ProcessPayloadCloud();
filteredProcesses: ProcessDefinitionCloud[] = []; filteredProcesses: ProcessDefinitionCloud[] = [];
isLoading = false; isLoading = false;
isFormCloudLoaded = false;
formCloud: FormCloud; formCloud: FormCloud;
protected onDestroy$ = new Subject<boolean>(); protected onDestroy$ = new Subject<boolean>();
constructor(private startProcessCloudService: StartProcessCloudService, constructor(private startProcessCloudService: StartProcessCloudService,
@@ -128,6 +129,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
} }
onFormLoaded(form: FormCloud) { onFormLoaded(form: FormCloud) {
this.isFormCloudLoaded = true;
this.formCloud = form; this.formCloud = form;
} }
@@ -140,6 +142,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
this.filteredProcesses = this.getProcessDefinitionList(processDefinition); this.filteredProcesses = this.getProcessDefinitionList(processDefinition);
const selectedProcess = this.getProcessIfExists(processDefinition); const selectedProcess = this.getProcessIfExists(processDefinition);
this.processDefinitionCurrent = selectedProcess; this.processDefinitionCurrent = selectedProcess;
this.isFormCloudLoaded = false;
this.processPayloadCloud.processDefinitionKey = selectedProcess.key; this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
} }
@@ -167,6 +170,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
const selectedProcess = this.getProcessDefinitionByName(this.processDefinitionName); const selectedProcess = this.getProcessDefinitionByName(this.processDefinitionName);
if (selectedProcess) { if (selectedProcess) {
this.processDefinitionCurrent = selectedProcess; this.processDefinitionCurrent = selectedProcess;
this.isFormCloudLoaded = false;
this.processDefinition.setValue(selectedProcess.name); this.processDefinition.setValue(selectedProcess.name);
this.processPayloadCloud.processDefinitionKey = selectedProcess.key; this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
} }
@@ -193,7 +197,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
} }
isProcessFormValid(): boolean { isProcessFormValid(): boolean {
if (this.hasForm()) { if (this.hasForm() && this.isFormCloudLoaded) {
return this.formCloud.isValid || this.isLoading; return this.formCloud.isValid || this.isLoading;
} else { } else {
return this.processForm.valid || this.isLoading; return this.processForm.valid || this.isLoading;

View File

@@ -81,121 +81,129 @@ export let fakeProcessPayload = new ProcessPayloadCloud({
}); });
export let fakeStartForm = { export let fakeStartForm = {
'id': 'form-a5d50817-5183-4850-802d-17af54b2632f', 'formRepresentation': {
'name': 'simpleform', 'id': 'form-de8895be-d0d7-4434-beef-559b15305d72',
'description': '', 'name': 'StartEventForm',
'version': 0, 'description': '',
'tabs': [], 'version': 0,
'fields': [ 'formDefinition': {
{ 'tabs': [],
'type': 'container', 'fields': [
'id': '5a6b24c1-db2b-45e9-9aff-142395433d23', {
'name': 'Label', 'type': 'container',
'tab': null, 'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
'fields': { 'name': 'Label',
'1': [ 'tab': null,
{ 'fields': {
'type': 'text', '1': [
'id': 'firstName', {
'name': 'firstName', 'type': 'text',
'colspan': 1, 'id': 'firstName',
'params': { 'name': 'firstName',
'existingColspan': 1, 'colspan': 1,
'maxColspan': 2 'params': {
}, 'existingColspan': 1,
'visibilityCondition': null, 'maxColspan': 2
'placeholder': null, },
'value': null, 'visibilityCondition': null,
'required': false, 'placeholder': null,
'minLength': 0, 'value': null,
'maxLength': 0, 'required': false,
'regexPattern': null 'minLength': 0,
} 'maxLength': 0,
], 'regexPattern': null
'2': [ }
{ ],
'type': 'text', '2': [
'id': 'lastName', {
'name': 'lastName', 'type': 'text',
'colspan': 1, 'id': 'lastName',
'params': { 'name': 'lastName',
'existingColspan': 1, 'colspan': 1,
'maxColspan': 2 'params': {
}, 'existingColspan': 1,
'visibilityCondition': null, 'maxColspan': 2
'placeholder': null, },
'value': null, 'visibilityCondition': null,
'required': false, 'placeholder': null,
'minLength': 0, 'value': null,
'maxLength': 0, 'required': false,
'regexPattern': null 'minLength': 0,
} 'maxLength': 0,
] 'regexPattern': null
}, }
'numberOfColumns': 2 ]
},
'numberOfColumns': 2
}
],
'outcomes': [],
'metadata': {},
'variables': []
} }
], }
'outcomes': [],
'metadata': {},
'variables': []
}; };
export let fakeStartFormNotValid = { export let fakeStartFormNotValid = {
'id': 'form-a5d50817-5183-4850-802d-17af54b2632f', 'formRepresentation': {
'name': 'simpleform', 'id': 'form-a5d50817-5183-4850-802d-17af54b2632f',
'description': '', 'name': 'simpleform',
'version': 0, 'description': '',
'tabs': [], 'version': 0,
'fields': [ 'formDefinition': {
{ 'tabs': [],
'type': 'container', 'fields': [
'id': '5a6b24c1-db2b-45e9-9aff-142395433d23', {
'name': 'Label', 'type': 'container',
'tab': null, 'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
'fields': { 'name': 'Label',
'1': [ 'tab': null,
{ 'fields': {
'type': 'text', '1': [
'id': 'firstName', {
'name': 'firstName', 'type': 'text',
'colspan': 1, 'id': 'firstName',
'params': { 'name': 'firstName',
'existingColspan': 1, 'colspan': 1,
'maxColspan': 2 'params': {
}, 'existingColspan': 1,
'visibilityCondition': null, 'maxColspan': 2
'placeholder': null, },
'value': null, 'visibilityCondition': null,
'required': true, 'placeholder': null,
'minLength': 15, 'value': null,
'maxLength': 0, 'required': true,
'regexPattern': null 'minLength': 15,
} 'maxLength': 0,
], 'regexPattern': null
'2': [ }
{ ],
'type': 'text', '2': [
'id': 'lastName', {
'name': 'lastName', 'type': 'text',
'colspan': 1, 'id': 'lastName',
'params': { 'name': 'lastName',
'existingColspan': 1, 'colspan': 1,
'maxColspan': 2 'params': {
}, 'existingColspan': 1,
'visibilityCondition': null, 'maxColspan': 2
'placeholder': null, },
'value': null, 'visibilityCondition': null,
'required': false, 'placeholder': null,
'minLength': 0, 'value': null,
'maxLength': 0, 'required': false,
'regexPattern': null 'minLength': 0,
} 'maxLength': 0,
] 'regexPattern': null
}, }
'numberOfColumns': 2 ]
},
'numberOfColumns': 2
}
],
'outcomes': [],
'metadata': {},
'variables': []
} }
], }
'outcomes': [],
'metadata': {},
'variables': []
}; };

View File

@@ -26,6 +26,6 @@ export class ProcessPayloadCloud {
this.processDefinitionKey = obj && obj.processDefinitionKey ? obj.processDefinitionKey : null; this.processDefinitionKey = obj && obj.processDefinitionKey ? obj.processDefinitionKey : null;
this.name = obj && obj.name ? obj.name : null; this.name = obj && obj.name ? obj.name : null;
this.businessKey = obj && obj.businessKey ? obj.businessKey : null; this.businessKey = obj && obj.businessKey ? obj.businessKey : null;
this.variables = obj && obj.variables ? obj.variables : null; this.variables = obj && obj.variables ? obj.variables : {};
} }
} }