mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
@@ -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}}
|
||||
|
@@ -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' }
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user