[AAE-5971] [Form] Support for multi select drop down (#7321)

* [AAE-5971] [ADF][Form-cloud] Support for multi select drop down

* * fix drop down validation

* * minor changes

* * fix tests

* * minor changes

* * fix comments

* * fix e2e
This commit is contained in:
Dharan
2021-10-27 13:45:28 +05:30
committed by GitHub
parent 35ab83e929
commit b9997be4ab
11 changed files with 201 additions and 19 deletions

View File

@@ -10,7 +10,8 @@
(ngModelChange)="onFieldChanged(field)"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
matTooltipShowDelay="1000"
[multiple]="field.hasMultipleValues">
<mat-option *ngFor="let opt of field.options"
[value]="getOptionValue(opt, field.value)"
[id]="opt.id">{{opt.name}}

View File

@@ -380,4 +380,60 @@ describe('DropdownCloudWidgetComponent', () => {
});
});
});
describe('multiple selection', () => {
it('should show preselected option', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'dropdown-id',
name: 'date-name',
type: 'dropdown-cloud',
readOnly: 'false',
options: fakeOptionList,
selectionType: 'multiple',
value: [
{ id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2' }
]
});
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_1, option_2');
openSelect('#dropdown-id');
await fixture.whenStable();
fixture.detectChanges();
const options = fixture.debugElement.queryAll(By.css('.mat-selected span'));
expect(Array.from(options).map(({ nativeElement }) => nativeElement.getInnerHTML().trim()))
.toEqual(['option_1', 'option_2']);
});
it('should support multiple options', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'dropdown-id',
name: 'date-name',
type: 'dropdown-cloud',
readOnly: 'false',
selectionType: 'multiple',
options: fakeOptionList
});
fixture.detectChanges();
openSelect('#dropdown-id');
await fixture.whenStable();
fixture.detectChanges();
const optionOne = fixture.debugElement.query(By.css('[id="opt_1"]'));
const optionTwo = fixture.debugElement.query(By.css('[id="opt_2"]'));
optionOne.triggerEventHandler('click', null);
optionTwo.triggerEventHandler('click', null);
expect(widget.field.value).toEqual([
{ id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2' }
]);
});
});
});

View File

@@ -80,11 +80,31 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
});
}
compareDropdownValues(opt1: string, opt2: FormFieldOption | string): boolean {
return opt1 && opt2 && typeof opt2 !== 'string' ? (opt1 === opt2.id || opt1 === opt2.name) : opt1 === opt2;
compareDropdownValues(opt1: FormFieldOption | string, opt2: FormFieldOption | string): boolean {
if (!opt1 || !opt2) {
return false;
}
if (typeof opt1 === 'string' && typeof opt2 === 'object') {
return opt1 === opt2.id || opt1 === opt2.name;
}
if (typeof opt1 === 'object' && typeof opt2 === 'string') {
return opt1.id === opt2 || opt1.name === opt2;
}
if (typeof opt1 === 'object' && typeof opt2 === 'object') {
return opt1.id === opt2.id && opt1.name === opt2.name;
}
return opt1 === opt2;
}
getOptionValue(option: FormFieldOption, fieldValue: string): string {
getOptionValue(option: FormFieldOption, fieldValue: string): string | FormFieldOption {
if (this.field.hasMultipleValues) {
return option;
}
let optionValue: string = '';
if (option.id === 'empty' || option.name !== fieldValue) {
optionValue = option.id;