inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4631] Start Process Cloud - Add the start form as part of a process (#4820)

Browse Source 
* Add the start form as part of a process
Ability to pre-fill a form with values
Ability to send variables

* Fix unit test

* remove empty before each
This commit is contained in:
Maurizio Vitale 2019-06-11 12:02:26 +01:00 committed by Eugenio Romano
parent 7497822a46
commit 7b191d37eb
11 changed files with 257 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell/src/app.config.json
View File

@ -744,6 +744,9 @@
"name": "My Default Name",
"processDefinitionName": "My default process def name"
},
"adf-cloud-start-process": {
"name": "My Default Cloud Name"
},
"adf-process-list": {
"presets": {
"default": [

2
demo-shell/src/app/components/cloud/start-process-cloud-demo.component.html
View File

@ -1,6 +1,8 @@
<adf-cloud-start-process
[appName]="appName"
[name]="processName"
[values]="formValues"
[variables]="variables"
(error)="openSnackMessage($event)"
(success)="onStartProcessSuccess()"
(cancel)="onCancelStartProcess()">

6
demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
View File

@ -28,6 +28,8 @@ export class StartProcessCloudDemoComponent implements OnInit {
appName;
processName: string;
formValues: string;
variables: any;
constructor(private appConfig: AppConfigService,
private cloudLayoutService: CloudLayoutService,
@ -41,7 +43,9 @@ export class StartProcessCloudDemoComponent implements OnInit {
this.appName = params.appName;
});
this.processName = this.appConfig.get<string>('adf-start-process.name');
this.processName = this.appConfig.get<string>('adf-cloud-start-process.name');
this.formValues = this.appConfig.get<string>('adf-cloud-start-process.values');
this.variables = this.appConfig.get<string>('adf-cloud-start-process.variables');
}
onStartProcessSuccess() {

22
docs/process-services-cloud/components/start-process-cloud.component.md
View File

@ -30,7 +30,8 @@ Starts a process.
| name | `string` | "" | Name of the process. |
| processDefinitionName | `string` | | Name of the process definition. |
| showSelectProcessDropdown | `boolean` | true | Show/hide the process dropdown list. |
| variables | `Map<string, object>[]` | | Variables to attach to the payload. |
| variables | `Object` | | Variables to attach to the payload. |
| values | `TaskVariableCloud` | | Values to attach to a form. |
### Events
@ -55,3 +56,22 @@ Starts a process.
You can use the `processDefinitionName` property to select which process will be selected by default on the dropdown (when there is more than one process to choose from). Use the `name` property to set the name shown on the dropdown item.
If the app contains only one process definition, this process definition will be selected by default
### Starting a process with variables
```html
<adf-cloud-start-process
[appId]="YOUR_APP_ID"
[variables]="{ 'my-key1' : 'myvalue', 'my-key2' : 'myvalue2'}">
</adf-cloud-start-process>
```
### Starting a process with values passed to the form
```html
<adf-cloud-start-process
[appId]="YOUR_APP_ID"
[values]="[{'name': 'firstName', 'value': 'MyName'}, {'name': 'lastName', 'value': 'MyLastName'}]">
</adf-cloud-start-process>
```

37
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
View File

@ -46,8 +46,30 @@
</mat-error>
</mat-form-field>
</form>
<ng-container *ngIf="hasForm() else taskFormCloudButtons">
<adf-cloud-form *ngIf="hasForm()" [appName]="appName" [data]="values" [formId]="processDefinitionCurrent.formKey"
[showSaveButton]="false" [showCompleteButton]="false" [showRefreshButton]="false" [showValidationIcon]="false"
[showTitle]="false" #formCloud>
<adf-cloud-form-custom-outcomes>
<ng-template [ngTemplateOutlet]="taskFormCloudButtons">
</ng-template>
</adf-cloud-form-custom-outcomes>
</adf-cloud-form>
</ng-container>
</mat-card-content>
<ng-template #taskFormCloudButtons>
<button mat-button (click)="cancelStartProcess()" id="cancel_process">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
</button>
<button color="primary" mat-button [disabled]="!processForm.valid || isLoading" (click)="startProcess()"
data-automation-id="btn-start" id="button-start" class="btn-start">
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
</button>
</ng-template>
<ng-template #emptyProcessDefinitionsList>
<mat-card-content>
<mat-card-subtitle class="error-message" id="no-process-message">
@ -55,19 +77,4 @@
</mat-card-subtitle>
</mat-card-content>
</ng-template>
<mat-card-actions>
<button mat-button (click)="cancelStartProcess()" id="cancel_process">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
</button>
<button
color="primary"
mat-button
[disabled]="!processForm.valid || isLoading"
(click)="startProcess()"
data-automation-id="btn-start"
id="button-start" class="btn-start">
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
</button>
</mat-card-actions>
</mat-card>

112
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts
View File

@ -20,18 +20,19 @@ import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core
import { setupTestBed } from '@alfresco/adf-core';
import { of, throwError } from 'rxjs';
import { StartProcessCloudService } from '../services/start-process-cloud.service';
import { FormCloudService } from '../../../form/services/form-cloud.service';
import { StartProcessCloudComponent } from './start-process-cloud.component';
import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
import { ProcessCloudModule } from '../../process-cloud.module';
import { fakeProcessDefinitions, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
import { By } from '@angular/platform-browser';
import { fakeProcessDefinitions, fakeStartForm, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
describe('StartProcessCloudComponent', () => {
let component: StartProcessCloudComponent;
let fixture: ComponentFixture<StartProcessCloudComponent>;
let processService: StartProcessCloudService;
let formCloudService: FormCloudService;
let getDefinitionsSpy: jasmine.Spy;
let startProcessSpy: jasmine.Spy;
@ -44,6 +45,7 @@ describe('StartProcessCloudComponent', () => {
beforeEach(() => {
processService = TestBed.get(StartProcessCloudService);
formCloudService = TestBed.get(FormCloudService);
fixture = TestBed.createComponent(StartProcessCloudComponent);
component = fixture.componentInstance;
@ -60,23 +62,15 @@ describe('StartProcessCloudComponent', () => {
expect(fixture.componentInstance instanceof StartProcessCloudComponent).toBe(true, 'should create StartProcessInstanceComponent');
});
describe('first step', () => {
describe('without start form', () => {
beforeEach(() => {
fixture.detectChanges();
component.name = 'My new process';
component.appName = 'myApp';
fixture.detectChanges();
});
describe('start a process without start form', () => {
it('should enable start button when name and process filled out', async(() => {
spyOn(component, 'loadProcessDefinitions').and.callThrough();
component.processDefinitionList = fakeProcessDefinitions;
component.processForm.controls['processInstanceName'].setValue('My Process 1');
component.processForm.controls['processDefinition'].setValue('NewProcess 1');
component.name = 'My new process';
component.processDefinitionName = 'processwithoutform2';
fixture.detectChanges();
const change = new SimpleChange(null, 'MyApp', true);
component.ngOnChanges({ 'appName': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
@ -86,10 +80,14 @@ describe('StartProcessCloudComponent', () => {
}));
it('should have start button disabled when name not filled out', async(() => {
spyOn(component, 'loadProcessDefinitions').and.callThrough();
component.processForm.controls['processInstanceName'].setValue('');
component.processForm.controls['processDefinition'].setValue(fakeProcessInstance.name);
component.name = '';
component.processDefinitionName = 'processwithoutform2';
fixture.detectChanges();
const change = new SimpleChange(null, 'MyApp', true);
component.ngOnChanges({ 'appName': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
const startBtn = fixture.nativeElement.querySelector('#button-start');
expect(startBtn.disabled).toBe(true);
@ -97,14 +95,67 @@ describe('StartProcessCloudComponent', () => {
}));
it('should have start button disabled when no process is selected', async(() => {
component.processPayloadCloud.processDefinitionKey = null;
component.name = '';
component.processDefinitionName = '';
fixture.detectChanges();
const change = new SimpleChange(null, 'MyApp', true);
component.ngOnChanges({ 'appName': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
const startBtn = fixture.nativeElement.querySelector('#button-start');
expect(startBtn.disabled).toBe(true);
});
}));
});
describe('start a process with start form', () => {
beforeEach(() => {
component.name = 'My new process with form';
});
it('should show a form if the process definition has one', async(() => {
component.processDefinitionName = 'processwithform';
fixture.detectChanges();
getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartForm));
const change = new SimpleChange(null, 'MyApp', true);
component.ngOnChanges({ 'appName': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
const firstNameEl = fixture.nativeElement.querySelector('#firstName');
expect(firstNameEl).toBeDefined();
const lastNameEl = fixture.nativeElement.querySelector('#lastName');
expect(lastNameEl).toBeDefined();
const startBtn = fixture.nativeElement.querySelector('#button-start');
expect(startBtn.disabled).toBe(false);
});
}));
it('should show a prefilled form if the values are passed as input', async(() => {
component.processDefinitionName = 'processwithform';
component.values = [{'name': 'firstName', 'value': 'FakeName'}, {'name': 'lastName', 'value': 'FakeLastName'}];
fixture.detectChanges();
getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartForm));
const change = new SimpleChange(null, 'MyApp', true);
component.ngOnChanges({ 'appName': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
const firstNameEl = fixture.nativeElement.querySelector('#firstName');
expect(firstNameEl).toBeDefined();
expect(firstNameEl.value).toEqual('FakeName');
const lastNameEl = fixture.nativeElement.querySelector('#lastName');
expect(lastNameEl).toBeDefined();
expect(lastNameEl.value).toEqual('FakeLastName');
const startBtn = fixture.nativeElement.querySelector('#button-start');
expect(startBtn.disabled).toBe(false);
});
}));
});
describe('process definitions list', () => {
@ -185,12 +236,16 @@ describe('StartProcessCloudComponent', () => {
}));
it('should select processDefinition based on processDefinition input', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
component.processForm.controls['processInstanceName'].setValue('NewProcess 1');
component.processForm.controls['processDefinition'].setValue('NewProcess 1');
component.name = 'My new process';
component.processDefinitionName = 'processwithoutform1';
fixture.detectChanges();
const change = new SimpleChange(null, 'MyApp', true);
component.ngOnChanges({ 'appName': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.processPayloadCloud.processDefinitionKey).toBe(JSON.parse(JSON.stringify(fakeProcessDefinitions[0])).name);
expect(component.processPayloadCloud.processDefinitionKey).toBe(JSON.parse(JSON.stringify(fakeProcessDefinitions[0])).key);
});
}));
@ -320,15 +375,6 @@ describe('StartProcessCloudComponent', () => {
});
}));
it('should avoid calling service to start process if required fields NOT provided', async(() => {
component.processForm.controls['processInstanceName'].setValue('');
component.processForm.controls['processDefinition'].setValue('');
fixture.whenStable().then(() => {
const startProcessButton = fixture.debugElement.query(By.css('[data-automation-id="btn-start"]'));
expect(startProcessButton.nativeElement.disabled).toBeTruthy();
});
}));
it('should call service to start process with the correct parameters', async(() => {
component.processPayloadCloud = fakeProcessPayload;
component.startProcess();

29
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
View File

@ -28,6 +28,8 @@ import { ProcessPayloadCloud } from '../models/process-payload-cloud.model';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model';
import { Subject } from 'rxjs';
import { FormCloudComponent } from '../../../form/components/form-cloud.component';
import { TaskVariableCloud } from '../../../form/models/task-variable-cloud.model';
@Component({
selector: 'adf-cloud-start-process',
@ -42,6 +44,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
@ViewChild(MatAutocompleteTrigger)
inputAutocomplete: MatAutocompleteTrigger;
@ViewChild(FormCloudComponent)
formCloud: FormCloudComponent;
/** (required) Name of the app. */
@Input()
appName: string;
@ -60,7 +65,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
/** Variables to attach to the payload. */
@Input()
variables: Map<string, object>[];
variables: {};
/** Parameter to pass form field values in the start form if one is associated. */
@Input()
values: TaskVariableCloud[];
/** Show/hide the process dropdown list. */
@Input()
@ -79,6 +88,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
error: EventEmitter<ProcessInstanceCloud> = new EventEmitter<ProcessInstanceCloud>();
processDefinitionList: ProcessDefinitionCloud[] = [];
processDefinitionCurrent: ProcessDefinitionCloud;
errorMessageId: string = '';
processForm: FormGroup;
processPayloadCloud = new ProcessPayloadCloud();
@ -92,7 +102,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
ngOnInit() {
this.processForm = this.formBuilder.group({
processInstanceName: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength()), this.whitespaceValidator]),
processDefinition: new FormControl('', [Validators.required, this.processDefinitionNameValidator()])
processDefinition: new FormControl(this.processDefinitionName, [Validators.required, this.processDefinitionNameValidator()])
});
this.processDefinition.valueChanges
@ -115,6 +125,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
}
}
hasForm(): boolean {
return this.processDefinitionCurrent && !!this.processDefinitionCurrent.formKey;
}
private getMaxNameLength(): number {
return this.maxNameLength > StartProcessCloudComponent.MAX_NAME_LENGTH ?
StartProcessCloudComponent.MAX_NAME_LENGTH : this.maxNameLength;
@ -149,7 +163,8 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
private selectDefaultProcessDefinition() {
const selectedProcess = this.getProcessDefinitionByName(this.processDefinitionName);
if (selectedProcess) {
this.processForm.controls['processDefinition'].setValue(selectedProcess.name);
this.processDefinitionCurrent = selectedProcess;
this.processDefinition.setValue(selectedProcess.name);
this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
}
}
@ -176,7 +191,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
private getProcessDefinition(option: ProcessDefinitionCloud, processDefinition: string): boolean {
return (this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinition.toLowerCase())) ||
(option.key.toLowerCase().includes(processDefinition.toLowerCase()));
(option.key && option.key.toLowerCase().includes(processDefinition.toLowerCase()));
}
isProcessDefinitionsEmpty(): boolean {
@ -191,6 +206,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
this.processPayloadCloud.variables = this.variables;
}
if (this.hasForm()) {
this.processPayloadCloud.variables = Object.assign(this.processPayloadCloud.variables, this.formCloud.form.values);
}
this.startProcessCloudService.startProcess(this.appName, this.processPayloadCloud).subscribe(
(res) => {
this.success.emit(res);
@ -213,7 +232,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
}
private resetProcessDefinitionList() {
this.processForm.controls['processDefinition'].setValue('');
this.processDefinition.setValue('');
this.filteredProcesses = this.processDefinitionList;
}

81
lib/process-services-cloud/src/lib/process/start-process/mock/start-process.component.mock.ts
View File

@ -36,15 +36,24 @@ export let fakeProcessDefinitions: ProcessDefinitionCloud[] = [
appName: 'myApp',
appVersion: 0,
id: 'NewProcess:1',
key: 'NewProcess 1',
name: 'NewProcess 1'
name: 'processwithoutform1',
key: 'process-12345-f992-4ee6-9742-3a04617469fe',
formKey: ''
}),
new ProcessDefinitionCloud({
appName: 'myApp',
appVersion: 0,
id: 'NewProcess:2',
key: 'NewProcess 2',
name: 'NewProcess 2'
name: 'processwithoutform2',
key: 'process-5151ad1d-f992-4ee6-9742-3a04617469fe',
formKey: ''
}),
new ProcessDefinitionCloud({
appName: 'startformwithoutupload',
formKey: 'form-a5d50817-5183-4850-802d-17af54b2632f',
id: 'd00c0237-8772-11e9-859a-428f83d5904f',
key: 'process-5151ad1d-f992-4ee6-9742-3a04617469fe',
name: 'processwithform'
})
];
@ -70,3 +79,67 @@ export let fakeProcessPayload = new ProcessPayloadCloud({
name: 'NewProcess 1',
payloadType: 'string'
});
export let fakeStartForm = {
'formRepresentation': {
'id': 'form-a5d50817-5183-4850-802d-17af54b2632f',
'name': 'simpleform',
'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': []
}
}
};

2
lib/process-services-cloud/src/lib/process/start-process/models/process-definition-cloud.model.ts
View File

@ -19,6 +19,7 @@ export class ProcessDefinitionCloud {
id: string;
appName: string;
key: string;
formKey?: string;
appVersion: number;
version: number;
name: string;
@ -28,6 +29,7 @@ export class ProcessDefinitionCloud {
this.name = obj && obj.name || null;
this.appName = obj && obj.appName || null;
this.key = obj && obj.key || null;
this.formKey = obj && obj.formKey || null;
this.version = obj && obj.version || 0;
this.appVersion = obj && obj.appVersion || 0;
}

2
lib/process-services-cloud/src/lib/process/start-process/models/process-payload-cloud.model.ts
View File

@ -19,7 +19,7 @@ export class ProcessPayloadCloud {
processDefinitionKey: string;
name: string;
businessKey: string;
variables: Map<string, object>[];
variables: {};
payloadType: string = 'StartProcessPayload';
constructor(obj?: any) {

2
lib/process-services-cloud/src/lib/process/start-process/start-process-cloud.module.ts
View File

@ -20,12 +20,14 @@ import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '../../material.module';
import { FormCloudModule } from '../../form/form-cloud.module';
import { StartProcessCloudComponent } from './components/start-process-cloud.component';
import { CoreModule } from '@alfresco/adf-core';
@NgModule({
imports: [
FormsModule,
CommonModule,
FormCloudModule,
MaterialModule,
FlexLayoutModule,
ReactiveFormsModule,