From e3ab50b4a1cd4fced58ca9768786026435a3c57f Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Thu, 28 Sep 2017 15:22:26 +0100 Subject: [PATCH] [ADF-1595] Typeahead - Fetch the value from the process variables (#2388) * Get the typeahead value from the process variables. We should not use the processDefinition to get again all the values * Improve the dropdown widget --- .../src/components/start-form.component.ts | 28 ++++++------ .../widgets/core/form-field.model.ts | 45 +++++++++++++++++-- .../src/components/widgets/core/form.model.ts | 3 ++ .../widgets/dropdown/dropdown.widget.html | 2 +- .../widgets/dropdown/dropdown.widget.spec.ts | 17 +++---- .../widgets/dropdown/dropdown.widget.ts | 4 ++ .../widgets/typeahead/typeahead.widget.html | 5 ++- .../typeahead/typeahead.widget.spec.ts | 20 +++++++++ .../widgets/typeahead/typeahead.widget.ts | 6 ++- .../src/services/form.service.ts | 10 +++++ 10 files changed, 111 insertions(+), 29 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/start-form.component.ts b/ng2-components/ng2-activiti-form/src/components/start-form.component.ts index 081f7022d2..f85c9a98f8 100644 --- a/ng2-components/ng2-activiti-form/src/components/start-form.component.ts +++ b/ng2-components/ng2-activiti-form/src/components/start-form.component.ts @@ -102,19 +102,21 @@ export class StartFormComponent extends FormComponent implements OnChanges, OnIn } loadStartForm(processId: string) { - this.formService - .getStartFormInstance(processId) - .subscribe( - form => { - this.formName = form.name; - form.processDefinitionId = this.processDefinitionId; - this.form = this.parseForm(form); - this.form.readOnly = this.readOnlyForm; - // this.form.processDefinitionId = this.processDefinitionId; - this.onFormLoaded(this.form); - }, - error => this.handleError(error) - ); + this.formService.getProcessVarablesById(processId) + .subscribe((processVariables: any) => { + this.formService + .getStartFormInstance(processId) + .subscribe( + form => { + this.formName = form.name; + form.processVariables = processVariables; + this.form = this.parseForm(form); + this.form.readOnly = this.readOnlyForm; + this.onFormLoaded(this.form); + }, + error => this.handleError(error) + ); + }); } getStartFormDefinition(processId: string) { diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts index 7ea6452b5d..8bb1a5a411 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts @@ -167,10 +167,17 @@ export class FormFieldModel extends FormWidgetModel { } if (FormFieldTypes.isReadOnlyType(json.type)) { - if (json.params && json.params.field && json.params.field.responseVariable) { - const value = this.getVariablesValue(json.params.field.name, form); - if (value) { - this.value = value; + if (json.params && json.params.field) { + if (form.processVariables) { + const processVariable = this.getProcessVariableValue(json.params.field, form); + if (processVariable) { + this.value = processVariable; + } + } else if (json.params.field.responseVariable) { + const formVariable = this.getVariablesValue(json.params.field.name, form); + if (formVariable) { + this.value = formVariable; + } } } } @@ -187,6 +194,22 @@ export class FormFieldModel extends FormWidgetModel { this.updateForm(); } + private isTypeaHeadFieldType(type: string): boolean { + return type === 'typeahead' ? true : false; + } + + private getFieldNameWithLabel(name: string): string { + return name += '_LABEL'; + } + + private getProcessVariableValue(field: any, form: FormModel) { + let fieldName = field.name; + if (this.isTypeaHeadFieldType(field.type)) { + fieldName = this.getFieldNameWithLabel(field.name); + } + return this.findProcessVariableValue(fieldName, form); + } + private getVariablesValue(variableName: string, form: FormModel) { let variable = form.json.variables.find((currentVariable) => { return currentVariable.name === variableName; @@ -203,6 +226,20 @@ export class FormFieldModel extends FormWidgetModel { return null; } + private findProcessVariableValue(variableName: string, form: FormModel) { + if (form.processVariables) { + const variable = form.processVariables.find((currentVariable) => { + return currentVariable.name === variableName; + }); + + if (variable) { + return variable.type === 'boolean' ? JSON.parse(variable.value) : variable.value; + } + } + + return undefined; + } + private containerFactory(json: any, form: FormModel): void { this.numberOfColumns = json.numberOfColumns || 1; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts index f55fb0363c..4bf98f656a 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts @@ -62,6 +62,7 @@ export class FormModel { readonly selectedOutcome: string; values: FormValues = {}; + processVariables: any; readonly json: any; @@ -94,6 +95,8 @@ export class FormModel { let tabCache: FormWidgetModelCache = {}; + this.processVariables = json.processVariables; + this.tabs = (json.tabs || []).map(t => { let model = new TabModel(this, t); tabCache[model.id] = model; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html index b383483cec..18ffbea93d 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html @@ -9,7 +9,7 @@ {{opt.name}} - {{field.value}} + {{field.value}} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts index 8d2fba569b..97434b6922 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts @@ -289,17 +289,18 @@ describe('DropdownWidgetComponent', () => { }); })); - it('should show the option value when the field is readonly', () => { - widget.field = new FormFieldModel(new FormModel({processDefinitionId: 'fake-process-id'}), { + it('should show the option value when the field is readonly', async(() => { + widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), { id: 'dropdown-id', name: 'date-name', - type: 'dropdown', + type: 'readonly', value: 'FakeValue', - readOnly: true + readOnly: true, + params: { field: { name: 'date-name', type: 'dropdown' } } }); - const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - trigger.click(); - fixture.detectChanges(); + + openSelect(); + fixture.whenStable() .then(() => { fixture.detectChanges(); @@ -307,7 +308,7 @@ describe('DropdownWidgetComponent', () => { const option = fixture.debugElement.query(By.css('.mat-option')).nativeElement; expect(option.innerText).toEqual('FakeValue'); }); - }); + })); }); }); }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts index f5c1a7d108..50e0f54ee5 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts @@ -105,4 +105,8 @@ export class DropdownWidgetComponent extends WidgetComponent implements OnInit { this.logService.error(error); } + isReadOnlyType(): boolean { + return this.field.type === 'readonly' ? true : false; + } + } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html index bbcceb6185..c5eea0646e 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html @@ -15,12 +15,13 @@ placeholder="{{field.placeholder}}" [mdAutocomplete]="auto"> - {{item.name}} - + + {{field.value}} + diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts index 728207d258..8450b97a4a 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts @@ -363,6 +363,26 @@ describe('TypeaheadWidgetComponent', () => { }); })); + it('should show typeahead value when the type is readonly', async(() => { + typeaheadWidgetComponent.field = new FormFieldModel( + new FormModel({ taskId: 'fake-task-id', processVariables: [{ name: 'typeahead-name_LABEL', value: 'FakeProcessValue' }] }), { + id: 'typeahead-id', + name: 'typeahead-name', + type: 'readonly', + value: '9', + params: { field: { name: 'typeahead-name', type: 'typeahead' } } + }); + fixture.detectChanges(); + const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; + trigger.click(); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(element.querySelector('#typeahead-id')).not.toBeNull(); + let optionElement: HTMLElement = document.body.querySelector('.mat-option'); + expect(optionElement.innerText).toEqual('FakeProcessValue'); + }); + })); + }); describe('and typeahead is populated via processDefinitionId', () => { diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts index 1a666ae27e..1d10fca7d5 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts @@ -48,7 +48,7 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit ngOnInit() { if (this.field.form.taskId) { this.getValuesByTaskId(); - } else { + } else if (this.field.form.processDefinitionId) { this.getValuesByProcessDefinitionId(); } } @@ -165,4 +165,8 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit this.visibilityService.refreshVisibility(this.field.form); } + isReadOnlyType(): boolean { + return this.field.type === 'readonly' ? true : false; + } + } diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.ts b/ng2-components/ng2-activiti-form/src/services/form.service.ts index 2f28a99838..93354784e4 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.ts +++ b/ng2-components/ng2-activiti-form/src/services/form.service.ts @@ -76,6 +76,10 @@ export class FormService { return this.apiService.getInstance().activiti.processApi; } + private get processInstanceVariablesApi(): any { + return this.apiService.getInstance().activiti.processInstanceVariablesApi; + } + private get usersWorkflowApi(): any { return this.apiService.getInstance().activiti.usersWorkflowApi; } @@ -200,6 +204,12 @@ export class FormService { .catch(err => this.handleError(err)); } + getProcessVarablesById(processInstanceId: string): Observable { + return Observable.fromPromise(this.processInstanceVariablesApi.getProcessInstanceVariables(processInstanceId)) + .map(this.toJson) + .catch(err => this.handleError(err)); + } + /** * Get All the Tasks * @returns {Observable}