mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-08 14:51:32 +00:00
[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
This commit is contained in:
committed by
Popovics András
parent
9673772f50
commit
e3ab50b4a1
@@ -102,19 +102,21 @@ export class StartFormComponent extends FormComponent implements OnChanges, OnIn
|
||||
}
|
||||
|
||||
loadStartForm(processId: string) {
|
||||
this.formService.getProcessVarablesById(processId)
|
||||
.subscribe((processVariables: any) => {
|
||||
this.formService
|
||||
.getStartFormInstance(processId)
|
||||
.subscribe(
|
||||
form => {
|
||||
this.formName = form.name;
|
||||
form.processDefinitionId = this.processDefinitionId;
|
||||
form.processVariables = processVariables;
|
||||
this.form = this.parseForm(form);
|
||||
this.form.readOnly = this.readOnlyForm;
|
||||
// this.form.processDefinitionId = this.processDefinitionId;
|
||||
this.onFormLoaded(this.form);
|
||||
},
|
||||
error => this.handleError(error)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
getStartFormDefinition(processId: string) {
|
||||
|
@@ -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 = <number> json.numberOfColumns || 1;
|
||||
|
||||
|
@@ -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;
|
||||
|
@@ -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>
|
||||
|
@@ -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' }), {
|
||||
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');
|
||||
});
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -105,4 +105,8 @@ export class DropdownWidgetComponent extends WidgetComponent implements OnInit {
|
||||
this.logService.error(error);
|
||||
}
|
||||
|
||||
isReadOnlyType(): boolean {
|
||||
return this.field.type === 'readonly' ? true : false;
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -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', () => {
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -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>}
|
||||
|
Reference in New Issue
Block a user