mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Fix start process form (#4847)
This commit is contained in:
@@ -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);
|
||||||
|
@@ -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);
|
||||||
|
@@ -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': []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
@@ -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 {
|
||||||
|
@@ -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;
|
||||||
|
@@ -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': []
|
|
||||||
};
|
};
|
||||||
|
@@ -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 : {};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user