diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts index 8df663cdb0..51243a1c4f 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts @@ -714,8 +714,8 @@ describe('FormFieldModel', () => { ] }); field.updateForm(); - expect(form.values['dropdown_field']['fake-id-property']).toEqual('opt1'); - expect(form.values['dropdown_field']['fake-label-property']).toEqual('Option 1'); + expect(form.values['dropdown_field'].id).toEqual('opt1'); + expect(form.values['dropdown_field'].name).toEqual('Option 1'); }); it('dropdown field type should be formatted on id and name properties if rest properties are not set', () => { @@ -760,8 +760,8 @@ describe('FormFieldModel', () => { ] }); field.updateForm(); - expect(form.values['radio_bananan_field']['banana']).toEqual('opt1'); - expect(form.values['radio_bananan_field']['banLabel']).toEqual('Option 1'); + expect(form.values['radio_bananan_field'].id).toEqual('opt1'); + expect(form.values['radio_bananan_field'].name).toEqual('Option 1'); }); it('radio button field rest type should appear with id / name properties when rest properties are not configured', () => { diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts index a66193ea7f..424751efef 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts @@ -384,14 +384,14 @@ export class FormFieldModel extends FormWidgetModel { const entry: FormFieldOption[] = this.options.filter((opt) => opt.id === this.value); if (entry.length > 0) { - this.setFormFieldValueOption(entry[0]); + this.form.values[this.id] = entry[0]; } } break; case FormFieldTypes.RADIO_BUTTONS: const radioButton: FormFieldOption[] = this.options.filter((opt) => opt.id === this.value); if (radioButton.length > 0) { - this.setFormFieldValueOption(radioButton[0]); + this.form.values[this.id] = radioButton[0]; } break; case FormFieldTypes.UPLOAD: @@ -500,17 +500,4 @@ export class FormFieldModel extends FormWidgetModel { json.type === FormFieldTypes.BOOLEAN; } - private setFormFieldValueOption(option: FormFieldOption ) { - if (this.optionType === 'rest' && !!this.restUrl) { - const restEntry = {}; - const restIdProperty = this.restIdProperty || 'id'; - const restLabelProperty = this.restLabelProperty || 'name'; - restEntry[restIdProperty] = option.id; - restEntry[restLabelProperty] = option.name; - this.form.values[this.id] = restEntry; - } else { - this.form.values[this.id] = option; - } - } - } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts index 5c81906bd5..a35160ac0d 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts @@ -465,6 +465,96 @@ describe('DropdownCloudWidgetComponent', () => { { id: 'opt_2', name: 'option_2' } ]); }); + + it('should show preselected option for rest options', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'dropdown-id', + name: 'date-name', + type: 'dropdown', + readOnly: 'false', + restUrl: 'https://fake-rest-url', + optionType : 'rest', + selectionType: 'multiple', + value: [ + { id: 'opt_3', name: 'option_3' }, + { id: 'opt_4', name: 'option_4' } + ] + }); + spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ + { + id: 'opt_1', + name: 'option_1' + }, + { + id: 'opt_2', + name: 'option_2' + }, + { + id: 'opt_3', + name: 'option_3' + }, + { + id: 'opt_4', + name: 'option_4' + } + ] as any)); + + fixture.detectChanges(); + await fixture.whenStable(); + fixture.detectChanges(); + + const selectedPlaceHolder = fixture.debugElement.query(By.css('.mat-select-value-text span')); + expect(selectedPlaceHolder.nativeElement.getInnerHTML()).toEqual('option_3, option_4'); + + await openSelect('#dropdown-id'); + + const options = fixture.debugElement.queryAll(By.css('.mat-selected span')); + expect(Array.from(options).map(({ nativeElement }) => nativeElement.getInnerHTML().trim())) + .toEqual(['option_3', 'option_4']); + }); + + it('should support multiple options for rest options', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'dropdown-id', + name: 'date-name', + type: 'dropdown', + readOnly: 'false', + restUrl: 'https://fake-rest-url', + optionType : 'rest', + selectionType: 'multiple' + }); + + spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ + { + id: 'opt_1', + name: 'option_1' + }, + { + id: 'opt_2', + name: 'option_2' + }, + { + id: 'opt_3', + name: 'option_3' + }, + { + id: 'opt_4', + name: 'option_4' + } + ] as any)); + + fixture.detectChanges(); + await openSelect('#dropdown-id'); + + const optionOne = fixture.debugElement.query(By.css('[id="opt_2"]')); + const optionTwo = fixture.debugElement.query(By.css('[id="opt_4"]')); + optionOne.triggerEventHandler('click', null); + optionTwo.triggerEventHandler('click', null); + expect(widget.field.value).toEqual([ + { id: 'opt_2', name: 'option_2' }, + { id: 'opt_4', name: 'option_4' } + ]); + }); }); describe('Linked Dropdown', () => { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts index 96319038fb..98ed493ca4 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts @@ -185,7 +185,13 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI } private isSelectedValueInOptions(): boolean { - return [...this.field.options].map(option => option.id).includes(this.fieldValue); + if (Array.isArray(this.fieldValue)) { + const optionIdList = [...this.field.options].map(option => option.id); + const fieldValueIds = this.fieldValue.map(valueOption => valueOption.id); + return fieldValueIds.every(valueOptionId => optionIdList.includes(valueOptionId)); + } else { + return [...this.field.options].map(option => option.id).includes(this.fieldValue); + } } get fieldValue(): string { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts index 7d5093bd5b..0328749c69 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts @@ -85,13 +85,7 @@ export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements isChecked(option: FormFieldOption): boolean { if (this.field.value && typeof this.field.value === 'object') { - let id = 'id'; - let name = 'name'; - if (this.field.restUrl) { - id = this.field.restIdProperty ?? 'id'; - name = this.field.restLabelProperty ?? 'name'; - } - return this.field.value[id] === option.id || this.field.value[name] === option.name; + return this.field.value['id'] === option.id || this.field.value['name'] === option.name; } return this.field.value === option.id; }