inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-12065] add optional isDefault flag to formOptions interface

Browse Source
This commit is contained in:
Diogo Bastos
2023-07-24 16:16:11 +01:00
parent 89ab0ca5b2
commit 6eacb40320
4 changed files with 70 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/widgets/core/form-field-option.ts
+1
View File
@@ -20,4 +20,5 @@
export interface FormFieldOption { export interface FormFieldOption {
id: string; id: string;
name: string; name: string;
isDefault?: boolean;
} }
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
+27 -40
View File
@@ -18,6 +18,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { of, throwError } from 'rxjs'; import { of, throwError } from 'rxjs';
import { DropdownCloudWidgetComponent } from './dropdown-cloud.widget';
import { import {
FormFieldModel, FormFieldModel,
FormModel, FormModel,
@@ -26,7 +27,6 @@ import {
FormFieldTypes, FormFieldTypes,
LogService LogService
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
import { DropdownCloudWidgetComponent, DropdownFormFieldOption } from './dropdown-cloud.widget';
import { FormCloudService } from '../../../services/form-cloud.service'; import { FormCloudService } from '../../../services/form-cloud.service';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@@ -91,7 +91,7 @@ describe('DropdownCloudWidgetComponent', () => {
readOnly: false, readOnly: false,
restUrl: 'https://fake-rest-url' restUrl: 'https://fake-rest-url'
}); });
widget.field.emptyOption = { id: 'empty', name: 'Choose one...', isDefault: true } as DropdownFormFieldOption; widget.field.emptyOption = { id: 'empty', name: 'Choose one...' };
widget.field.isVisible = true; widget.field.isVisible = true;
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -184,20 +184,17 @@ describe('DropdownCloudWidgetComponent', () => {
widget.field.optionType = 'rest'; widget.field.optionType = 'rest';
widget.field.value = { widget.field.value = {
id: 'opt1', id: 'opt1',
name: 'default1_value', name: 'default1_value'
isDefault: false
}; };
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
{ {
id: 'opt1', id: 'opt1',
name: 'default1_value', name: 'default1_value'
isDefault: false
}, },
{ {
id: 2, id: 2,
name: 'default2_value', name: 'default2_value'
isDefault: false
} }
] as any)); ] as any));
@@ -218,13 +215,11 @@ describe('DropdownCloudWidgetComponent', () => {
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
{ {
id: 'opt1', id: 'opt1',
name: 'default1_value', name: 'default1_value'
isDefault: false
}, },
{ {
id: 2, id: 2,
name: 'default2_value', name: 'default2_value'
isDefault: false
} }
] as any)); ] as any));
@@ -234,12 +229,12 @@ describe('DropdownCloudWidgetComponent', () => {
await openSelect(); await openSelect();
const options = fixture.debugElement.queryAll(By.css('.mat-option-text')); const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
expect(options[0].nativeElement.innerText).toBe('default1_value'); expect(options[0].nativeElement.innerText).toBe('default1_value');
expect(widget.field.form.values['dropdown-id']).toEqual({ id: 'opt1', name: 'default1_value', isDefault: false }); expect(widget.field.form.values['dropdown-id']).toEqual({ id: 'opt1', name: 'default1_value' });
}); });
it('should not display required error for a non required dropdown when selecting the none option', async () => { it('should not display required error for a non required dropdown when selecting the none option', async () => {
widget.field.options = [ widget.field.options = [
{ id: 'empty', name: 'Choose empty', isDefault: true }, { id: 'empty', name: 'Choose empty' },
...fakeOptionList ...fakeOptionList
]; ];
@@ -259,7 +254,7 @@ describe('DropdownCloudWidgetComponent', () => {
it('should not display required error when selecting a valid option for a required dropdown', async () => { it('should not display required error when selecting a valid option for a required dropdown', async () => {
widget.field.required = true; widget.field.required = true;
widget.field.options = [ widget.field.options = [
{ id: 'empty', name: 'Choose empty', isDefault: true }, { id: 'empty', name: 'Choose empty' },
...fakeOptionList ...fakeOptionList
]; ];
@@ -278,7 +273,7 @@ describe('DropdownCloudWidgetComponent', () => {
it('should not have a value when switching from an available option to the None option', async () => { it('should not have a value when switching from an available option to the None option', async () => {
widget.field.options = [ widget.field.options = [
{ id: 'empty', name: 'This is a mock none option', isDefault: true }, { id: 'empty', name: 'This is a mock none option' },
...fakeOptionList ...fakeOptionList
]; ];
@@ -444,8 +439,8 @@ describe('DropdownCloudWidgetComponent', () => {
options: fakeOptionList, options: fakeOptionList,
selectionType: 'multiple', selectionType: 'multiple',
value: [ value: [
{ id: 'opt_1', name: 'option_1', isDefault: false }, { id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2', isDefault: false } { id: 'opt_2', name: 'option_2' }
] ]
}); });
fixture.detectChanges(); fixture.detectChanges();
@@ -479,8 +474,8 @@ describe('DropdownCloudWidgetComponent', () => {
optionOne.triggerEventHandler('click', null); optionOne.triggerEventHandler('click', null);
optionTwo.triggerEventHandler('click', null); optionTwo.triggerEventHandler('click', null);
expect(widget.field.value).toEqual([ expect(widget.field.value).toEqual([
{ id: 'opt_1', name: 'option_1', isDefault: false }, { id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2', isDefault: false } { id: 'opt_2', name: 'option_2' }
]); ]);
}); });
@@ -494,30 +489,26 @@ describe('DropdownCloudWidgetComponent', () => {
optionType : 'rest', optionType : 'rest',
selectionType: 'multiple', selectionType: 'multiple',
value: [ value: [
{ id: 'opt_3', name: 'option_3', isDefault: false }, { id: 'opt_3', name: 'option_3' },
{ id: 'opt_4', name: 'option_4', isDefault: false } { id: 'opt_4', name: 'option_4' }
] ]
}); });
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
{ {
id: 'opt_1', id: 'opt_1',
name: 'option_1', name: 'option_1'
isDefault: false
}, },
{ {
id: 'opt_2', id: 'opt_2',
name: 'option_2', name: 'option_2'
isDefault: false
}, },
{ {
id: 'opt_3', id: 'opt_3',
name: 'option_3', name: 'option_3'
isDefault: false
}, },
{ {
id: 'opt_4', id: 'opt_4',
name: 'option_4', name: 'option_4'
isDefault: false
} }
] as any)); ] as any));
@@ -549,23 +540,19 @@ describe('DropdownCloudWidgetComponent', () => {
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
{ {
id: 'opt_1', id: 'opt_1',
name: 'option_1', name: 'option_1'
isDefault: false
}, },
{ {
id: 'opt_2', id: 'opt_2',
name: 'option_2', name: 'option_2'
isDefault: false
}, },
{ {
id: 'opt_3', id: 'opt_3',
name: 'option_3', name: 'option_3'
isDefault: false
}, },
{ {
id: 'opt_4', id: 'opt_4',
name: 'option_4', name: 'option_4'
isDefault: false
} }
] as any)); ] as any));
@@ -577,8 +564,8 @@ describe('DropdownCloudWidgetComponent', () => {
optionOne.triggerEventHandler('click', null); optionOne.triggerEventHandler('click', null);
optionTwo.triggerEventHandler('click', null); optionTwo.triggerEventHandler('click', null);
expect(widget.field.value).toEqual([ expect(widget.field.value).toEqual([
{ id: 'opt_2', name: 'option_2', isDefault: false }, { id: 'opt_2', name: 'option_2' },
{ id: 'opt_4', name: 'option_4', isDefault: false } { id: 'opt_4', name: 'option_4' }
]); ]);
}); });
}); });
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
+7 -11
View File
@@ -38,10 +38,6 @@ export const DEFAULT_OPTION = {
}; };
export const HIDE_FILTER_LIMIT = 5; export const HIDE_FILTER_LIMIT = 5;
export interface DropdownFormFieldOption extends FormFieldOption {
isDefault: boolean;
}
/* eslint-disable @angular-eslint/component-selector */ /* eslint-disable @angular-eslint/component-selector */
@Component({ @Component({
@@ -68,7 +64,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
variableOptionsFailed = false; variableOptionsFailed = false;
previewState = false; previewState = false;
restApiHostName: string; restApiHostName: string;
list$: Observable<DropdownFormFieldOption[]>; list$: Observable<FormFieldOption[]>;
filter$ = new BehaviorSubject<string>(''); filter$ = new BehaviorSubject<string>('');
private readonly defaultVariableOptionId = 'id'; private readonly defaultVariableOptionId = 'id';
@@ -199,7 +195,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
const bodyParam = this.buildBodyParam(); const bodyParam = this.buildBodyParam();
this.formCloudService.getRestWidgetData(this.field.form.id, this.field.id, bodyParam) this.formCloudService.getRestWidgetData(this.field.form.id, this.field.id, bodyParam)
.pipe(takeUntil(this.onDestroy$)) .pipe(takeUntil(this.onDestroy$))
.subscribe((result: DropdownFormFieldOption[]) => { .subscribe((result: FormFieldOption[]) => {
this.resetRestApiErrorMessage(); this.resetRestApiErrorMessage();
this.field.options = result; this.field.options = result;
this.updateOptions(); this.updateOptions();
@@ -338,7 +334,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
return this.field?.rule?.ruleOn; return this.field?.rule?.ruleOn;
} }
compareDropdownValues(opt1: DropdownFormFieldOption | string, opt2: DropdownFormFieldOption | string): boolean { compareDropdownValues(opt1: FormFieldOption | string, opt2: FormFieldOption | string): boolean {
if (!opt1 || !opt2) { if (!opt1 || !opt2) {
return false; return false;
} }
@@ -358,7 +354,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
return opt1 === opt2; return opt1 === opt2;
} }
getOptionValue(option: DropdownFormFieldOption, fieldValue: string): string | DropdownFormFieldOption { getOptionValue(option: FormFieldOption, fieldValue: string): string | FormFieldOption {
if (this.field.hasMultipleValues) { if (this.field.hasMultipleValues) {
return option; return option;
} }
@@ -399,7 +395,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
updateOptions(): void { updateOptions(): void {
this.showInputFilter = this.field.options.length > this.appConfig.get<number>('form.dropDownFilterLimit', HIDE_FILTER_LIMIT); this.showInputFilter = this.field.options.length > this.appConfig.get<number>('form.dropDownFilterLimit', HIDE_FILTER_LIMIT);
this.list$ = combineLatest([of(this.field.options as DropdownFormFieldOption[]), this.filter$]) this.list$ = combineLatest([of(this.field.options), this.filter$])
.pipe( .pipe(
map(([items, search]) => { map(([items, search]) => {
if (!search) { if (!search) {
@@ -438,7 +434,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
!this.variableOptionsFailed; !this.variableOptionsFailed;
} }
getDefaultOption(options: DropdownFormFieldOption[]): DropdownFormFieldOption { getDefaultOption(options: FormFieldOption[]): FormFieldOption {
return options.find((option: DropdownFormFieldOption) => option.isDefault); return options.find((option: FormFieldOption) => option.isDefault === undefined ? option.id === DEFAULT_OPTION.id : option.isDefault);
} }
} }
lib/process-services-cloud/src/lib/form/mocks/dropdown.mock.ts
+35 -52
View File
@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { DropdownFormFieldOption } from '../components/widgets/dropdown/dropdown-cloud.widget'; import { FormFieldOption } from '@alfresco/adf-core';
import { TaskVariableCloud } from '../models/task-variable-cloud.model'; import { TaskVariableCloud } from '../models/task-variable-cloud.model';
export const mockConditionalEntries = [ export const mockConditionalEntries = [
@@ -24,18 +24,15 @@ export const mockConditionalEntries = [
options: [ options: [
{ {
id: 'empty', id: 'empty',
name: 'Choose one...', name: 'Choose one...'
isDefault: true
}, },
{ {
id: 'ATH', id: 'ATH',
name: 'Athens', name: 'Athens'
isDefault: false
}, },
{ {
id: 'SKG', id: 'SKG',
name: 'Thessaloniki', name: 'Thessaloniki'
isDefault: false
} }
] ]
}, },
@@ -44,18 +41,15 @@ export const mockConditionalEntries = [
options: [ options: [
{ {
id: 'empty', id: 'empty',
name: 'Choose one...', name: 'Choose one...'
isDefault: true
}, },
{ {
id: 'MI', id: 'MI',
name: 'MILAN', name: 'MILAN'
isDefault: false
}, },
{ {
id: 'RM', id: 'RM',
name: 'ROME', name: 'ROME'
isDefault: false
} }
] ]
}, },
@@ -64,56 +58,51 @@ export const mockConditionalEntries = [
options: [ options: [
{ {
id: 'empty', id: 'empty',
name: 'Choose one...', name: 'Choose one...'
isDefault: true
}, },
{ {
id: 'LDN', id: 'LDN',
name: 'London', name: 'London'
isDefault: false
}, },
{ {
id: 'MAN', id: 'MAN',
name: 'Manchester', name: 'Manchester'
isDefault: false
}, },
{ {
id: 'SHE', id: 'SHE',
name: 'Sheffield', name: 'Sheffield'
isDefault: false
}, },
{ {
id: 'LEE', id: 'LEE',
name: 'Leeds', name: 'Leeds'
isDefault: false
} }
] ]
} }
]; ];
export const mockRestDropdownOptions: DropdownFormFieldOption[] = [ export const mockRestDropdownOptions: FormFieldOption[] = [
{ id: 'LO', name: 'LONDON', isDefault: false }, { id: 'LO', name: 'LONDON' },
{ id: 'MA', name: 'MANCHESTER', isDefault: false } { id: 'MA', name: 'MANCHESTER' }
]; ];
export const mockSecondRestDropdownOptions: DropdownFormFieldOption[] = [ export const mockSecondRestDropdownOptions: FormFieldOption[] = [
{ id: 'MI', name: 'MILAN', isDefault: false }, { id: 'MI', name: 'MILAN' },
{ id: 'RM', name: 'ROME', isDefault: false } { id: 'RM', name: 'ROME' }
]; ];
export const fakeOptionList: DropdownFormFieldOption[] = [ export const fakeOptionList: FormFieldOption[] = [
{ id: 'opt_1', name: 'option_1', isDefault: false }, { id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2', isDefault: false }, { id: 'opt_2', name: 'option_2' },
{ id: 'opt_3', name: 'option_3', isDefault: false } { id: 'opt_3', name: 'option_3' }
]; ];
export const filterOptionList: DropdownFormFieldOption[] = [ export const filterOptionList = [
{ id: 'opt_1', name: 'option_1', isDefault: false }, { id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2', isDefault: false }, { id: 'opt_2', name: 'option_2' },
{ id: 'opt_3', name: 'option_3', isDefault: false }, { id: 'opt_3', name: 'option_3' },
{ id: 'opt_4', name: 'option_4', isDefault: false }, { id: 'opt_4', name: 'option_4' },
{ id: 'opt_5', name: 'option_5', isDefault: false }, { id: 'opt_5', name: 'option_5' },
{ id: 'opt_6', name: 'option_6', isDefault: false } { id: 'opt_6', name: 'option_6' }
]; ];
export const mockPlayersResponse = { export const mockPlayersResponse = {
@@ -149,18 +138,15 @@ export const mockDefaultResponse = {
[ [
{ {
id: 'default-pet-1', id: 'default-pet-1',
name: 'Dog', name: 'Dog'
isDefault: false
}, },
{ {
id: 'default-pet-2', id: 'default-pet-2',
name: 'Cat', name: 'Cat'
isDefault: false
}, },
{ {
id: 'default-pet-3', id: 'default-pet-3',
name: 'Parrot', name: 'Parrot'
isDefault: false
} }
] ]
}; };
@@ -169,18 +155,15 @@ export const mockCountriesResponse = {
countries: [ countries: [
{ {
id: 'PL', id: 'PL',
name: 'Poland', name: 'Poland'
isDefault: false
}, },
{ {
id: 'UK', id: 'UK',
name: 'United Kingdom', name: 'United Kingdom'
isDefault: false
}, },
{ {
id: 'GR', id: 'GR',
name: 'Greece', name: 'Greece'
isDefault: false
} }
] ]
}; };