[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

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
+        this.formService.getProcessVarablesById(processId)
-            .getStartFormInstance(processId)
+            .subscribe((processVariables: any) => {
-            .subscribe(
+                this.formService
-                form => {
+                    .getStartFormInstance(processId)
-                    this.formName = form.name;
+                    .subscribe(
-                    form.processDefinitionId = this.processDefinitionId;
+                    form => {
-                    this.form = this.parseForm(form);
+                        this.formName = form.name;
-                    this.form.readOnly = this.readOnlyForm;
+                        form.processVariables = processVariables;
-                    // this.form.processDefinitionId = this.processDefinitionId;
+                        this.form = this.parseForm(form);
-                    this.onFormLoaded(this.form);
+                        this.form.readOnly = this.readOnlyForm;
-                },
+                        this.onFormLoaded(this.form);
-                error => this.handleError(error)
+                    },
-            );
+                    error => this.handleError(error)
+                    );
+            });
     }
 
     getStartFormDefinition(processId: string) {

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) {
+                if (json.params && json.params.field) {
-                    const value = this.getVariablesValue(json.params.field.name, form);
+                    if (form.processVariables) {
-                    if (value) {
+                        const processVariable = this.getProcessVariableValue(json.params.field, form);
-                        this.value = value;
+                        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 = <number> json.numberOfColumns || 1;
 

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<TabModel> = {};
 
+            this.processVariables = json.processVariables;
+
             this.tabs = (json.tabs || []).map(t => {
                 let model = new TabModel(this, t);
                 tabCache[model.id] = model;

ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html

@@ -9,7 +9,7 @@
         <md-option *ngFor="let opt of field.options"
                    [value]="getOptionValue(opt, field.value)"
                    [id]="opt.id">{{opt.name}}</md-option>
-        <md-option id="readonlyOption" *ngIf="field.readOnly" [value]="field.value">{{field.value}}</md-option>
+        <md-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</md-option>
     </md-select>
     <error-widget [error]="field.validationSummary" ></error-widget>
     <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

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', () => {
+            it('should show the option value when the field is readonly', async(() => {
-                widget.field = new FormFieldModel(new FormModel({processDefinitionId: 'fake-process-id'}), {
+                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();
+                openSelect();
-                fixture.detectChanges();
+
                 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');
                     });
-            });
+            }));
         });
     });
 });

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;
+    }
+
 }

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html

@@ -15,12 +15,13 @@
                    placeholder="{{field.placeholder}}"
                    [mdAutocomplete]="auto">
             <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
-
                 <md-option *ngFor="let item of options" (click)="onItemClick(item, $event)"  [value]="item">
                     <span>{{item.name}}</span>
                 </md-option>
             </md-autocomplete>
-
+            <md-select class="adf-select" [id]="field.id" [(ngModel)]="field.value">
+                <md-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</md-option>
+            </md-select>
         </md-input-container>
 
         <error-widget [error]="field.validationSummary"></error-widget>

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 = <HTMLElement> document.body.querySelector('.mat-option');
+                    expect(optionElement.innerText).toEqual('FakeProcessValue');
+                });
+            }));
+
         });
 
         describe('and typeahead is populated via processDefinitionId', () => {

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;
+    }
+
 }

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<any[]> {
+        return Observable.fromPromise(this.processInstanceVariablesApi.getProcessInstanceVariables(processInstanceId))
+            .map(this.toJson)
+            .catch(err => this.handleError(err));
+    }
+
     /**
      * Get All the Tasks
      * @returns {Observable<any>}