diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts index 171ad69f64..e4e6ac6e90 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts @@ -49,10 +49,10 @@ import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-gro import { DynamicLookupModel } from './models/lookup/dynamic-lookup.model'; import { DynamicScrollableDropdownModel } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model'; import { DynamicTagModel } from './models/tag/dynamic-tag.model'; -import { DynamicTypeaheadModel } from './models/typeahead/dynamic-typeahead.model'; +import { DynamicOneboxModel } from './models/onebox/dynamic-onebox.model'; import { DynamicQualdropModel } from './models/ds-dynamic-qualdrop.model'; import { DynamicLookupNameModel } from './models/lookup/dynamic-lookup-name.model'; -import { DsDynamicTypeaheadComponent } from './models/typeahead/dynamic-typeahead.component'; +import { DsDynamicOneboxComponent } from './models/onebox/dynamic-onebox.component'; import { DsDynamicScrollableDropdownComponent } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.component'; import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component'; import { DsDynamicListComponent } from './models/list/dynamic-list.component'; @@ -101,7 +101,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => { new DynamicSwitchModel({ id: 'switch' }), new DynamicTextAreaModel({ id: 'textarea' }), new DynamicTimePickerModel({ id: 'timepicker' }), - new DynamicTypeaheadModel({ id: 'typeahead', metadataFields: [], repeatable: false, submissionId: '1234' }), + new DynamicOneboxModel({ id: 'onebox', metadataFields: [], repeatable: false, submissionId: '1234' }), new DynamicScrollableDropdownModel({ id: 'scrollableDropdown', vocabularyOptions: vocabularyOptions, @@ -312,7 +312,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => { expect(testFn(formModel[13])).toBeNull(); expect(testFn(formModel[14])).toEqual(DynamicNGBootstrapTextAreaComponent); expect(testFn(formModel[15])).toEqual(DynamicNGBootstrapTimePickerComponent); - expect(testFn(formModel[16])).toEqual(DsDynamicTypeaheadComponent); + expect(testFn(formModel[16])).toEqual(DsDynamicOneboxComponent); expect(testFn(formModel[17])).toEqual(DsDynamicScrollableDropdownComponent); expect(testFn(formModel[18])).toEqual(DsDynamicTagComponent); expect(testFn(formModel[19])).toEqual(DsDynamicListComponent); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts index 2089ce8bca..3eaca6a67a 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts @@ -1,5 +1,6 @@ import { - ChangeDetectionStrategy, ChangeDetectorRef, + ChangeDetectionStrategy, + ChangeDetectorRef, Component, ComponentFactoryResolver, ContentChildren, @@ -29,13 +30,15 @@ import { DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER, - DynamicDatePickerModel, DynamicFormComponentService, + DynamicDatePickerModel, + DynamicFormComponentService, DynamicFormControl, DynamicFormControlContainerComponent, DynamicFormControlEvent, DynamicFormControlModel, DynamicFormLayout, - DynamicFormLayoutService, DynamicFormRelationService, + DynamicFormLayoutService, + DynamicFormRelationService, DynamicFormValidationService, DynamicTemplateDirective, } from '@ng-dynamic-forms/core'; @@ -56,7 +59,7 @@ import { ReorderableRelationship } from './existing-metadata-list-element/existing-metadata-list-element.component'; -import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model'; +import { DYNAMIC_FORM_CONTROL_TYPE_ONEBOX } from './models/onebox/dynamic-onebox.model'; import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model'; import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './models/tag/dynamic-tag.model'; import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/date-picker.model'; @@ -68,7 +71,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME } from './models/lookup/dynamic-l import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component'; import { DsDatePickerComponent } from './models/date-picker/date-picker.component'; import { DsDynamicListComponent } from './models/list/dynamic-list.component'; -import { DsDynamicTypeaheadComponent } from './models/typeahead/dynamic-typeahead.component'; +import { DsDynamicOneboxComponent } from './models/onebox/dynamic-onebox.component'; import { DsDynamicScrollableDropdownComponent } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.component'; import { DsDynamicLookupComponent } from './models/lookup/dynamic-lookup.component'; import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component'; @@ -78,7 +81,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-grou import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component'; import { DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH } from './models/custom-switch/custom-switch.model'; import { CustomSwitchComponent } from './models/custom-switch/custom-switch.component'; -import { map, startWith, switchMap, find } from 'rxjs/operators'; +import { map, startWith, switchMap } from 'rxjs/operators'; import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs'; import { SearchResult } from '../../../search/search-result.model'; import { DSpaceObject } from '../../../../core/shared/dspace-object.model'; @@ -88,7 +91,11 @@ import { SelectableListService } from '../../../object-list/selectable-list/sele import { DsDynamicDisabledComponent } from './models/disabled/dynamic-disabled.component'; import { DYNAMIC_FORM_CONTROL_TYPE_DISABLED } from './models/disabled/dynamic-disabled.model'; import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component'; -import { getAllSucceededRemoteData, getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators'; +import { + getAllSucceededRemoteData, + getRemoteDataPayload, + getSucceededRemoteData +} from '../../../../core/shared/operators'; import { RemoteData } from '../../../../core/data/remote-data'; import { Item } from '../../../../core/shared/item.model'; import { ItemDataService } from '../../../../core/data/item-data.service'; @@ -136,8 +143,8 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type< case DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER: return DynamicNGBootstrapTimePickerComponent; - case DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD: - return DsDynamicTypeaheadComponent; + case DYNAMIC_FORM_CONTROL_TYPE_ONEBOX: + return DsDynamicOneboxComponent; case DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN: return DsDynamicScrollableDropdownComponent; diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts index b723f7aa40..90c26b69cf 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts @@ -41,7 +41,7 @@ export class DsDynamicInputModel extends DynamicInputModel { this.language = config.language; if (!this.language) { - // TypeAhead + // Onebox if (config.value instanceof FormFieldMetadataValueObject) { this.language = config.value.language; } else if (Array.isArray(config.value)) { diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html similarity index 100% rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss similarity index 100% rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.spec.ts similarity index 50% rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.spec.ts index d837af5402..3982f659af 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.spec.ts @@ -13,8 +13,8 @@ import { TranslateModule } from '@ngx-translate/core'; import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; import { VocabularyServiceStub } from '../../../../../testing/vocabulary-service.stub'; -import { DsDynamicTypeaheadComponent } from './dynamic-typeahead.component'; -import { DynamicTypeaheadModel } from './dynamic-typeahead.model'; +import { DsDynamicOneboxComponent } from './dynamic-onebox.component'; +import { DynamicOneboxModel } from './dynamic-onebox.model'; import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; import { createTestComponent } from '../../../../../testing/utils.test'; import { AuthorityConfidenceStateDirective } from '../../../../../authority-confidence/authority-confidence-state.directive'; @@ -26,27 +26,27 @@ import { CdkTreeModule } from '@angular/cdk/tree'; import { TestScheduler } from 'rxjs/testing'; import { getTestScheduler } from 'jasmine-marbles'; -export let TYPEAHEAD_TEST_GROUP; +export let ONEBOX_TEST_GROUP; -export let TYPEAHEAD_TEST_MODEL_CONFIG; +export let ONEBOX_TEST_MODEL_CONFIG; function init() { - TYPEAHEAD_TEST_GROUP = new FormGroup({ - typeahead: new FormControl(), + ONEBOX_TEST_GROUP = new FormGroup({ + onebox: new FormControl(), }); - TYPEAHEAD_TEST_MODEL_CONFIG = { + ONEBOX_TEST_MODEL_CONFIG = { vocabularyOptions: { closed: false, - metadata: 'typeahead', + metadata: 'onebox', name: 'vocabulary', scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23' } as VocabularyOptions, disabled: false, - id: 'typeahead', + id: 'onebox', label: 'Conference', minChars: 3, - name: 'typeahead', + name: 'onebox', placeholder: 'Conference', readOnly: false, required: false, @@ -55,13 +55,13 @@ function init() { }; } -describe('DsDynamicTypeaheadComponent test suite', () => { +describe('DsDynamicOneboxComponent test suite', () => { let scheduler: TestScheduler; let testComp: TestComponent; - let typeaheadComp: DsDynamicTypeaheadComponent; + let oneboxComponent: DsDynamicOneboxComponent; let testFixture: ComponentFixture; - let typeaheadFixture: ComponentFixture; + let oneboxCompFixture: ComponentFixture; let vocabularyServiceStub: any; let html; let modal; @@ -122,7 +122,7 @@ describe('DsDynamicTypeaheadComponent test suite', () => { CdkTreeModule ], declarations: [ - DsDynamicTypeaheadComponent, + DsDynamicOneboxComponent, TestComponent, AuthorityConfidenceStateDirective, ObjNgFor, @@ -130,7 +130,7 @@ describe('DsDynamicTypeaheadComponent test suite', () => { ], // declare the test component providers: [ ChangeDetectorRef, - DsDynamicTypeaheadComponent, + DsDynamicOneboxComponent, { provide: VocabularyService, useValue: vocabularyServiceStub }, { provide: DynamicFormLayoutService, useValue: {} }, { provide: DynamicFormValidationService, useValue: {} }, @@ -145,12 +145,12 @@ describe('DsDynamicTypeaheadComponent test suite', () => { // synchronous beforeEach beforeEach(() => { html = ` - `; + (focus)="onFocus($event)">`; spyOn(vocabularyServiceStub, 'findVocabularyById').and.returnValue(createSuccessfulRemoteDataObject$(vocabulary)); testFixture = createTestComponent(html, TestComponent) as ComponentFixture; @@ -160,7 +160,7 @@ describe('DsDynamicTypeaheadComponent test suite', () => { afterEach(() => { testFixture.destroy(); }); - it('should create DsDynamicTypeaheadComponent', inject([DsDynamicTypeaheadComponent], (app: DsDynamicTypeaheadComponent) => { + it('should create DsDynamicOneboxComponent', inject([DsDynamicOneboxComponent], (app: DsDynamicOneboxComponent) => { expect(app).toBeDefined(); })); }); @@ -173,190 +173,190 @@ describe('DsDynamicTypeaheadComponent test suite', () => { describe('when init model value is empty', () => { beforeEach(() => { - typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent); - typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance - typeaheadComp.group = TYPEAHEAD_TEST_GROUP; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); - typeaheadFixture.detectChanges(); + oneboxCompFixture = TestBed.createComponent(DsDynamicOneboxComponent); + oneboxComponent = oneboxCompFixture.componentInstance; // FormComponent test instance + oneboxComponent.group = ONEBOX_TEST_GROUP; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); + oneboxCompFixture.detectChanges(); }); afterEach(() => { - typeaheadFixture.destroy(); - typeaheadComp = null; + oneboxCompFixture.destroy(); + oneboxComponent = null; }); it('should init component properly', () => { - expect(typeaheadComp.currentValue).not.toBeDefined(); + expect(oneboxComponent.currentValue).not.toBeDefined(); }); it('should search when 3+ characters typed', fakeAsync(() => { - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntriesByValue').and.callThrough(); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntriesByValue').and.callThrough(); - typeaheadComp.search(observableOf('test')).subscribe(); + oneboxComponent.search(observableOf('test')).subscribe(); tick(300); - typeaheadFixture.detectChanges(); + oneboxCompFixture.detectChanges(); - expect((typeaheadComp as any).vocabularyService.getVocabularyEntriesByValue).toHaveBeenCalled(); + expect((oneboxComponent as any).vocabularyService.getVocabularyEntriesByValue).toHaveBeenCalled(); })); it('should set model.value on input type when VocabularyOptions.closed is false', () => { - const inputDe = typeaheadFixture.debugElement.query(By.css('input.form-control')); + const inputDe = oneboxCompFixture.debugElement.query(By.css('input.form-control')); const inputElement = inputDe.nativeElement; inputElement.value = 'test value'; inputElement.dispatchEvent(new Event('input')); - expect(typeaheadComp.inputValue).toEqual(new FormFieldMetadataValueObject('test value')) + expect(oneboxComponent.inputValue).toEqual(new FormFieldMetadataValueObject('test value')) }); it('should not set model.value on input type when VocabularyOptions.closed is true', () => { - typeaheadComp.model.vocabularyOptions.closed = true; - typeaheadFixture.detectChanges(); - const inputDe = typeaheadFixture.debugElement.query(By.css('input.form-control')); + oneboxComponent.model.vocabularyOptions.closed = true; + oneboxCompFixture.detectChanges(); + const inputDe = oneboxCompFixture.debugElement.query(By.css('input.form-control')); const inputElement = inputDe.nativeElement; inputElement.value = 'test value'; inputElement.dispatchEvent(new Event('input')); - expect(typeaheadComp.model.value).not.toBeDefined(); + expect(oneboxComponent.model.value).not.toBeDefined(); }); it('should emit blur Event onBlur when popup is closed', () => { - spyOn(typeaheadComp.blur, 'emit'); - spyOn(typeaheadComp.instance, 'isPopupOpen').and.returnValue(false); - typeaheadComp.onBlur(new Event('blur')); - expect(typeaheadComp.blur.emit).toHaveBeenCalled(); + spyOn(oneboxComponent.blur, 'emit'); + spyOn(oneboxComponent.instance, 'isPopupOpen').and.returnValue(false); + oneboxComponent.onBlur(new Event('blur')); + expect(oneboxComponent.blur.emit).toHaveBeenCalled(); }); it('should not emit blur Event onBlur when popup is opened', () => { - spyOn(typeaheadComp.blur, 'emit'); - spyOn(typeaheadComp.instance, 'isPopupOpen').and.returnValue(true); - const input = typeaheadFixture.debugElement.query(By.css('input')); + spyOn(oneboxComponent.blur, 'emit'); + spyOn(oneboxComponent.instance, 'isPopupOpen').and.returnValue(true); + const input = oneboxCompFixture.debugElement.query(By.css('input')); input.nativeElement.blur(); - expect(typeaheadComp.blur.emit).not.toHaveBeenCalled(); + expect(oneboxComponent.blur.emit).not.toHaveBeenCalled(); }); it('should emit change Event onBlur when VocabularyOptions.closed is false and inputValue is changed', () => { - typeaheadComp.inputValue = 'test value'; - typeaheadFixture.detectChanges(); - spyOn(typeaheadComp.blur, 'emit'); - spyOn(typeaheadComp.change, 'emit'); - spyOn(typeaheadComp.instance, 'isPopupOpen').and.returnValue(false); - typeaheadComp.onBlur(new Event('blur',)); - expect(typeaheadComp.change.emit).toHaveBeenCalled(); - expect(typeaheadComp.blur.emit).toHaveBeenCalled(); + oneboxComponent.inputValue = 'test value'; + oneboxCompFixture.detectChanges(); + spyOn(oneboxComponent.blur, 'emit'); + spyOn(oneboxComponent.change, 'emit'); + spyOn(oneboxComponent.instance, 'isPopupOpen').and.returnValue(false); + oneboxComponent.onBlur(new Event('blur',)); + expect(oneboxComponent.change.emit).toHaveBeenCalled(); + expect(oneboxComponent.blur.emit).toHaveBeenCalled(); }); it('should not emit change Event onBlur when VocabularyOptions.closed is false and inputValue is not changed', () => { - typeaheadComp.inputValue = 'test value'; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); - (typeaheadComp.model as any).value = 'test value'; - typeaheadFixture.detectChanges(); - spyOn(typeaheadComp.blur, 'emit'); - spyOn(typeaheadComp.change, 'emit'); - spyOn(typeaheadComp.instance, 'isPopupOpen').and.returnValue(false); - typeaheadComp.onBlur(new Event('blur',)); - expect(typeaheadComp.change.emit).not.toHaveBeenCalled(); - expect(typeaheadComp.blur.emit).toHaveBeenCalled(); + oneboxComponent.inputValue = 'test value'; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); + (oneboxComponent.model as any).value = 'test value'; + oneboxCompFixture.detectChanges(); + spyOn(oneboxComponent.blur, 'emit'); + spyOn(oneboxComponent.change, 'emit'); + spyOn(oneboxComponent.instance, 'isPopupOpen').and.returnValue(false); + oneboxComponent.onBlur(new Event('blur',)); + expect(oneboxComponent.change.emit).not.toHaveBeenCalled(); + expect(oneboxComponent.blur.emit).toHaveBeenCalled(); }); it('should not emit change Event onBlur when VocabularyOptions.closed is false and inputValue is null', () => { - typeaheadComp.inputValue = null; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); - (typeaheadComp.model as any).value = 'test value'; - typeaheadFixture.detectChanges(); - spyOn(typeaheadComp.blur, 'emit'); - spyOn(typeaheadComp.change, 'emit'); - spyOn(typeaheadComp.instance, 'isPopupOpen').and.returnValue(false); - typeaheadComp.onBlur(new Event('blur',)); - expect(typeaheadComp.change.emit).not.toHaveBeenCalled(); - expect(typeaheadComp.blur.emit).toHaveBeenCalled(); + oneboxComponent.inputValue = null; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); + (oneboxComponent.model as any).value = 'test value'; + oneboxCompFixture.detectChanges(); + spyOn(oneboxComponent.blur, 'emit'); + spyOn(oneboxComponent.change, 'emit'); + spyOn(oneboxComponent.instance, 'isPopupOpen').and.returnValue(false); + oneboxComponent.onBlur(new Event('blur',)); + expect(oneboxComponent.change.emit).not.toHaveBeenCalled(); + expect(oneboxComponent.blur.emit).toHaveBeenCalled(); }); it('should emit focus Event onFocus', () => { - spyOn(typeaheadComp.focus, 'emit'); - typeaheadComp.onFocus(new Event('focus')); - expect(typeaheadComp.focus.emit).toHaveBeenCalled(); + spyOn(oneboxComponent.focus, 'emit'); + oneboxComponent.onFocus(new Event('focus')); + expect(oneboxComponent.focus.emit).toHaveBeenCalled(); }); }); describe('when init model value is not empty', () => { beforeEach(() => { - typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent); - typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance - typeaheadComp.group = TYPEAHEAD_TEST_GROUP; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); + oneboxCompFixture = TestBed.createComponent(DsDynamicOneboxComponent); + oneboxComponent = oneboxCompFixture.componentInstance; // FormComponent test instance + oneboxComponent.group = ONEBOX_TEST_GROUP; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); const entry = observableOf(Object.assign(new VocabularyEntry(), { authority: null, value: 'test', display: 'testDisplay' })); - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); - (typeaheadComp.model as any).value = new FormFieldMetadataValueObject('test', null, null, 'testDisplay'); - typeaheadFixture.detectChanges(); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); + (oneboxComponent.model as any).value = new FormFieldMetadataValueObject('test', null, null, 'testDisplay'); + oneboxCompFixture.detectChanges(); }); afterEach(() => { - typeaheadFixture.destroy(); - typeaheadComp = null; + oneboxCompFixture.destroy(); + oneboxComponent = null; }); it('should init component properly', fakeAsync(() => { tick(); - expect(typeaheadComp.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, null, 'testDisplay')); - expect((typeaheadComp as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); + expect(oneboxComponent.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, null, 'testDisplay')); + expect((oneboxComponent as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); })); it('should emit change Event onChange and currentValue is empty', () => { - typeaheadComp.currentValue = null; - spyOn(typeaheadComp.change, 'emit'); - typeaheadComp.onChange(new Event('change')); - expect(typeaheadComp.change.emit).toHaveBeenCalled(); - expect(typeaheadComp.model.value).toBeNull(); + oneboxComponent.currentValue = null; + spyOn(oneboxComponent.change, 'emit'); + oneboxComponent.onChange(new Event('change')); + expect(oneboxComponent.change.emit).toHaveBeenCalled(); + expect(oneboxComponent.model.value).toBeNull(); }); }); describe('when init model value is not empty and has authority', () => { beforeEach(() => { - typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent); - typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance - typeaheadComp.group = TYPEAHEAD_TEST_GROUP; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); + oneboxCompFixture = TestBed.createComponent(DsDynamicOneboxComponent); + oneboxComponent = oneboxCompFixture.componentInstance; // FormComponent test instance + oneboxComponent.group = ONEBOX_TEST_GROUP; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); const entry = observableOf(Object.assign(new VocabularyEntry(), { authority: 'test001', value: 'test001', display: 'test' })); - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); - (typeaheadComp.model as any).value = new FormFieldMetadataValueObject('test', null, 'test001'); - typeaheadFixture.detectChanges(); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); + (oneboxComponent.model as any).value = new FormFieldMetadataValueObject('test', null, 'test001'); + oneboxCompFixture.detectChanges(); }); afterEach(() => { - typeaheadFixture.destroy(); - typeaheadComp = null; + oneboxCompFixture.destroy(); + oneboxComponent = null; }); it('should init component properly', fakeAsync(() => { tick(); - expect(typeaheadComp.currentValue).toEqual(new FormFieldMetadataValueObject('test001', null, 'test001', 'test')); - expect((typeaheadComp as any).vocabularyService.getVocabularyEntryByID).toHaveBeenCalled(); + expect(oneboxComponent.currentValue).toEqual(new FormFieldMetadataValueObject('test001', null, 'test001', 'test')); + expect((oneboxComponent as any).vocabularyService.getVocabularyEntryByID).toHaveBeenCalled(); })); it('should emit change Event onChange and currentValue is empty', () => { - typeaheadComp.currentValue = null; - spyOn(typeaheadComp.change, 'emit'); - typeaheadComp.onChange(new Event('change')); - expect(typeaheadComp.change.emit).toHaveBeenCalled(); - expect(typeaheadComp.model.value).toBeNull(); + oneboxComponent.currentValue = null; + spyOn(oneboxComponent.change, 'emit'); + oneboxComponent.onChange(new Event('change')); + expect(oneboxComponent.change.emit).toHaveBeenCalled(); + expect(oneboxComponent.model.value).toBeNull(); }); }); }); @@ -370,63 +370,63 @@ describe('DsDynamicTypeaheadComponent test suite', () => { describe('when init model value is empty', () => { beforeEach(() => { - typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent); - typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance - typeaheadComp.group = TYPEAHEAD_TEST_GROUP; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); - typeaheadFixture.detectChanges(); + oneboxCompFixture = TestBed.createComponent(DsDynamicOneboxComponent); + oneboxComponent = oneboxCompFixture.componentInstance; // FormComponent test instance + oneboxComponent.group = ONEBOX_TEST_GROUP; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); + oneboxCompFixture.detectChanges(); }); afterEach(() => { - typeaheadFixture.destroy(); - typeaheadComp = null; + oneboxCompFixture.destroy(); + oneboxComponent = null; }); it('should init component properly', () => { - expect(typeaheadComp.currentValue).not.toBeDefined(); + expect(oneboxComponent.currentValue).not.toBeDefined(); }); it('should open tree properly', () => { - scheduler.schedule(() => typeaheadComp.openTree(new Event('click'))); + scheduler.schedule(() => oneboxComponent.openTree(new Event('click'))); scheduler.flush(); - expect((typeaheadComp as any).modalService.open).toHaveBeenCalled(); + expect((oneboxComponent as any).modalService.open).toHaveBeenCalled(); }); }); describe('when init model value is not empty', () => { beforeEach(() => { - typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent); - typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance - typeaheadComp.group = TYPEAHEAD_TEST_GROUP; - typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); + oneboxCompFixture = TestBed.createComponent(DsDynamicOneboxComponent); + oneboxComponent = oneboxCompFixture.componentInstance; // FormComponent test instance + oneboxComponent.group = ONEBOX_TEST_GROUP; + oneboxComponent.model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); const entry = observableOf(Object.assign(new VocabularyEntry(), { authority: null, value: 'test', display: 'testDisplay' })); - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); - (typeaheadComp.model as any).value = new FormFieldMetadataValueObject('test', null, null, 'testDisplay'); - typeaheadFixture.detectChanges(); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); + spyOn((oneboxComponent as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); + (oneboxComponent.model as any).value = new FormFieldMetadataValueObject('test', null, null, 'testDisplay'); + oneboxCompFixture.detectChanges(); }); afterEach(() => { - typeaheadFixture.destroy(); - typeaheadComp = null; + oneboxCompFixture.destroy(); + oneboxComponent = null; }); it('should init component properly', fakeAsync(() => { tick(); - expect(typeaheadComp.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, null, 'testDisplay')); - expect((typeaheadComp as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); + expect(oneboxComponent.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, null, 'testDisplay')); + expect((oneboxComponent as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); })); it('should open tree properly', () => { - scheduler.schedule(() => typeaheadComp.openTree(new Event('click'))); + scheduler.schedule(() => oneboxComponent.openTree(new Event('click'))); scheduler.flush(); - expect((typeaheadComp as any).modalService.open).toHaveBeenCalled(); + expect((oneboxComponent as any).modalService.open).toHaveBeenCalled(); }); }); @@ -440,8 +440,8 @@ describe('DsDynamicTypeaheadComponent test suite', () => { }) class TestComponent { - group: FormGroup = TYPEAHEAD_TEST_GROUP; + group: FormGroup = ONEBOX_TEST_GROUP; - model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG); + model = new DynamicOneboxModel(ONEBOX_TEST_MODEL_CONFIG); } diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts similarity index 95% rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts index 5d7413e4dd..fa9fe2103a 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts @@ -17,7 +17,7 @@ import { Observable, of as observableOf, Subject, Subscription } from 'rxjs'; import { NgbModal, NgbModalRef, NgbTypeahead, NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; -import { DynamicTypeaheadModel } from './dynamic-typeahead.model'; +import { DynamicOneboxModel } from './dynamic-onebox.model'; import { hasValue, isEmpty, isNotEmpty, isNotNull } from '../../../../../empty.util'; import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; import { ConfidenceType } from '../../../../../../core/shared/confidence-type'; @@ -31,14 +31,14 @@ import { VocabularyTreeviewComponent } from '../../../../../vocabulary-treeview/ import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model'; @Component({ - selector: 'ds-dynamic-typeahead', - styleUrls: ['./dynamic-typeahead.component.scss'], - templateUrl: './dynamic-typeahead.component.html' + selector: 'ds-dynamic-onebox', + styleUrls: ['./dynamic-onebox.component.scss'], + templateUrl: './dynamic-onebox.component.html' }) -export class DsDynamicTypeaheadComponent extends DsDynamicVocabularyComponent implements OnInit { +export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent implements OnInit { @Input() bindId = true; @Input() group: FormGroup; - @Input() model: DynamicTypeaheadModel; + @Input() model: DynamicOneboxModel; @Output() blur: EventEmitter = new EventEmitter(); @Output() change: EventEmitter = new EventEmitter(); @@ -76,7 +76,7 @@ export class DsDynamicTypeaheadComponent extends DsDynamicVocabularyComponent im /** * Converts a stream of text values from the `` element to the stream of the array of items - * to display in the typeahead popup. + * to display in the onebox popup. */ search = (text$: Observable) => { return text$.pipe( diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.model.ts similarity index 58% rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.model.ts index 866055ed04..4b973e3058 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.model.ts @@ -1,19 +1,19 @@ import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core'; import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model'; -export const DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD = 'TYPEAHEAD'; +export const DYNAMIC_FORM_CONTROL_TYPE_ONEBOX = 'ONEBOX'; -export interface DsDynamicTypeaheadModelConfig extends DsDynamicInputModelConfig { +export interface DsDynamicOneboxModelConfig extends DsDynamicInputModelConfig { minChars?: number; value?: any; } -export class DynamicTypeaheadModel extends DsDynamicInputModel { +export class DynamicOneboxModel extends DsDynamicInputModel { @serializable() minChars: number; - @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD; + @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_ONEBOX; - constructor(config: DsDynamicTypeaheadModelConfig, layout?: DynamicFormControlLayout) { + constructor(config: DsDynamicOneboxModelConfig, layout?: DynamicFormControlLayout) { super(config, layout); diff --git a/src/app/shared/form/builder/form-builder.service.spec.ts b/src/app/shared/form/builder/form-builder.service.spec.ts index 434fe6a2e1..ae3aa782b9 100644 --- a/src/app/shared/form/builder/form-builder.service.spec.ts +++ b/src/app/shared/form/builder/form-builder.service.spec.ts @@ -34,7 +34,7 @@ import { DynamicScrollableDropdownModel } from './ds-dynamic-form-ui/models/scro import { DynamicRelationGroupModel } from './ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model'; import { DynamicLookupModel } from './ds-dynamic-form-ui/models/lookup/dynamic-lookup.model'; import { DynamicDsDatePickerModel } from './ds-dynamic-form-ui/models/date-picker/date-picker.model'; -import { DynamicTypeaheadModel } from './ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model'; +import { DynamicOneboxModel } from './ds-dynamic-form-ui/models/onebox/dynamic-onebox.model'; import { DynamicListRadioGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model'; import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model'; import { FormFieldModel } from './models/form-field.model'; @@ -195,7 +195,7 @@ describe('FormBuilderService test suite', () => { new DynamicColorPickerModel({id: 'testColorPicker'}), - new DynamicTypeaheadModel({id: 'testTypeahead', repeatable: false, metadataFields: [], submissionId: '1234'}), + new DynamicOneboxModel({id: 'testOnebox', repeatable: false, metadataFields: [], submissionId: '1234'}), new DynamicScrollableDropdownModel({id: 'testScrollableDropdown', vocabularyOptions: vocabularyOptions, repeatable: false, metadataFields: [], submissionId: '1234'}), @@ -433,7 +433,7 @@ describe('FormBuilderService test suite', () => { expect(formModel[2] instanceof DynamicRowGroupModel).toBe(true); expect((formModel[2] as DynamicRowGroupModel).group.length).toBe(1); - expect((formModel[2] as DynamicRowGroupModel).get(0) instanceof DynamicTypeaheadModel).toBe(true); + expect((formModel[2] as DynamicRowGroupModel).get(0) instanceof DynamicOneboxModel).toBe(true); }); it('should return form\'s fields value from form model', () => { @@ -449,7 +449,7 @@ describe('FormBuilderService test suite', () => { }; expect(service.getValueFromModel(formModel)).toEqual(value); - ((formModel[2] as DynamicRowGroupModel).get(0) as DynamicTypeaheadModel).valueUpdates.next('test one'); + ((formModel[2] as DynamicRowGroupModel).get(0) as DynamicOneboxModel).valueUpdates.next('test one'); value = { issue: [new FormFieldMetadataValueObject('test')], conference: [new FormFieldMetadataValueObject('test one')] @@ -462,11 +462,11 @@ describe('FormBuilderService test suite', () => { const value = {} as any; ((formModel[0] as DynamicRowGroupModel).get(1) as DsDynamicInputModel).valueUpdates.next('test'); - ((formModel[2] as DynamicRowGroupModel).get(0) as DynamicTypeaheadModel).valueUpdates.next('test one'); + ((formModel[2] as DynamicRowGroupModel).get(0) as DynamicOneboxModel).valueUpdates.next('test one'); service.clearAllModelsValue(formModel); - expect(((formModel[0] as DynamicRowGroupModel).get(1) as DynamicTypeaheadModel).value).toEqual(undefined) - expect(((formModel[2] as DynamicRowGroupModel).get(0) as DynamicTypeaheadModel).value).toEqual(undefined) + expect(((formModel[0] as DynamicRowGroupModel).get(1) as DynamicOneboxModel).value).toEqual(undefined) + expect(((formModel[2] as DynamicRowGroupModel).get(0) as DynamicOneboxModel).value).toEqual(undefined) }); it('should return true when model has a custom group model as parent', () => { diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts index c2d1b6f565..e6a99d8e74 100644 --- a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts @@ -1,7 +1,7 @@ import { FormFieldModel } from '../models/form-field.model'; import { OneboxFieldParser } from './onebox-field-parser'; import { DynamicQualdropModel } from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model'; -import { DynamicTypeaheadModel } from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model'; +import { DynamicOneboxModel } from '../ds-dynamic-form-ui/models/onebox/dynamic-onebox.model'; import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model'; import { ParserOptions } from './parser-options'; @@ -92,12 +92,12 @@ describe('OneboxFieldParser test suite', () => { expect(fieldModel instanceof DsDynamicInputModel).toBe(true); }); - it('should return a DynamicTypeaheadModel object when selectableMetadata has authority', () => { + it('should return a DynamicOneboxModel object when selectableMetadata has authority', () => { const parser = new OneboxFieldParser(submissionId, field1, initFormValues, parserOptions); const fieldModel = parser.parse(); - expect(fieldModel instanceof DynamicTypeaheadModel).toBe(true); + expect(fieldModel instanceof DynamicOneboxModel).toBe(true); }); }); diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts index 598918ac2e..3eb5764a37 100644 --- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts +++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts @@ -12,9 +12,9 @@ import { FormFieldMetadataValueObject } from '../models/form-field-metadata-valu import { isNotEmpty } from '../../../empty.util'; import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model'; import { - DsDynamicTypeaheadModelConfig, - DynamicTypeaheadModel -} from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model'; + DsDynamicOneboxModelConfig, + DynamicOneboxModel +} from '../ds-dynamic-form-ui/models/onebox/dynamic-onebox.model'; export class OneboxFieldParser extends FieldParser { @@ -76,11 +76,11 @@ export class OneboxFieldParser extends FieldParser { return new DynamicQualdropModel(inputSelectGroup, clsGroup); } else if (this.configData.selectableMetadata[0].controlledVocabulary) { - const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel(null, label); - this.setVocabularyOptions(typeaheadModelConfig, this.parserOptions.collectionUUID); - this.setValues(typeaheadModelConfig, fieldValue, true); + const oneboxModelConfig: DsDynamicOneboxModelConfig = this.initModel(null, label); + this.setVocabularyOptions(oneboxModelConfig, this.parserOptions.collectionUUID); + this.setValues(oneboxModelConfig, fieldValue, true); - return new DynamicTypeaheadModel(typeaheadModelConfig); + return new DynamicOneboxModel(oneboxModelConfig); } else { const inputModelConfig: DsDynamicInputModelConfig = this.initModel(null, label); this.setValues(inputModelConfig, fieldValue); diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 38bb9afd5d..7790698059 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -48,7 +48,7 @@ import { VarDirective } from './utils/var.directive'; import { AuthNavMenuComponent } from './auth-nav-menu/auth-nav-menu.component'; import { LogOutComponent } from './log-out/log-out.component'; import { FormComponent } from './form/form.component'; -import { DsDynamicTypeaheadComponent } from './form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component'; +import { DsDynamicOneboxComponent } from './form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component'; import { DsDynamicScrollableDropdownComponent } from './form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component'; import { DsDynamicFormControlContainerComponent, @@ -271,7 +271,7 @@ const COMPONENTS = [ DsDynamicLookupRelationModalComponent, DsDynamicScrollableDropdownComponent, DsDynamicTagComponent, - DsDynamicTypeaheadComponent, + DsDynamicOneboxComponent, DsDynamicRelationGroupComponent, DsDatePickerComponent, DsDynamicFormGroupComponent, @@ -415,7 +415,7 @@ const ENTRY_COMPONENTS = [ DsDynamicLookupRelationModalComponent, DsDynamicScrollableDropdownComponent, DsDynamicTagComponent, - DsDynamicTypeaheadComponent, + DsDynamicOneboxComponent, DsDynamicRelationGroupComponent, DsDatePickerComponent, DsDynamicFormGroupComponent,