diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-vocabulary.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-vocabulary.component.ts new file mode 100644 index 0000000000..bf09e237a5 --- /dev/null +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-vocabulary.component.ts @@ -0,0 +1,119 @@ +import { EventEmitter, Input, Output } from '@angular/core'; +import { FormGroup } from '@angular/forms'; + +import { + DynamicFormControlComponent, + DynamicFormLayoutService, + DynamicFormValidationService +} from '@ng-dynamic-forms/core'; +import { map } from 'rxjs/operators'; +import { Observable, of as observableOf } from 'rxjs'; + +import { VocabularyService } from '../../../../../core/submission/vocabularies/vocabulary.service'; +import { isNotEmpty } from '../../../../empty.util'; +import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model'; +import { VocabularyEntry } from '../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; +import { DsDynamicInputModel } from './ds-dynamic-input.model'; +import { PageInfo } from '../../../../../core/shared/page-info.model'; + +/** + * An abstract class to be extended by form components that handle vocabulary + */ +export abstract class DsDynamicVocabularyComponent extends DynamicFormControlComponent { + + @Input() abstract bindId = true; + @Input() abstract group: FormGroup; + @Input() abstract model: DsDynamicInputModel; + + @Output() abstract blur: EventEmitter = new EventEmitter(); + @Output() abstract change: EventEmitter = new EventEmitter(); + @Output() abstract focus: EventEmitter = new EventEmitter(); + + public abstract pageInfo: PageInfo; + + constructor(protected vocabularyService: VocabularyService, + protected layoutService: DynamicFormLayoutService, + protected validationService: DynamicFormValidationService + ) { + super(layoutService, validationService); + } + + /** + * Sets the current value with the given value. + * @param value The value to set. + * @param init Representing if is init value or not. + */ + public abstract setCurrentValue(value: any, init?: boolean); + + /** + * Retrieves the init form value from model + */ + getInitValueFromModel(): Observable { + let initValue$: Observable; + if (isNotEmpty(this.model.value) && (this.model.value instanceof FormFieldMetadataValueObject)) { + let initEntry$: Observable; + if (this.model.value.hasAuthority()) { + initEntry$ = this.vocabularyService.getVocabularyEntryByID(this.model.value.authority, this.model.vocabularyOptions) + } else { + initEntry$ = this.vocabularyService.getVocabularyEntryByValue(this.model.value.value, this.model.vocabularyOptions) + } + initValue$ = initEntry$.pipe(map((initEntry: VocabularyEntry) => { + if (isNotEmpty(initEntry)) { + return new FormFieldMetadataValueObject( + initEntry.value, + null, + initEntry.authority, + initEntry.display + ); + } else { + return this.model.value as any; + } + })); + } else { + initValue$ = observableOf(new FormFieldMetadataValueObject(this.model.value)); + } + return initValue$; + } + + + /** + * Emits a blur event containing a given value. + * @param event The value to emit. + */ + onBlur(event: Event) { + this.blur.emit(event); + } + + /** + * Emits a focus event containing a given value. + * @param event The value to emit. + */ + onFocus(event) { + this.focus.emit(event); + } + + /** + * Emits a change event and updates model value. + * @param updateValue + */ + dispatchUpdate(updateValue: any) { + this.model.valueUpdates.next(updateValue); + this.change.emit(updateValue); + } + + /** + * Update the page info object + * @param elementsPerPage + * @param currentPage + * @param totalElements + * @param totalPages + */ + protected updatePageInfo(elementsPerPage: number, currentPage: number, totalElements?: number, totalPages?: number) { + this.pageInfo = Object.assign(new PageInfo(), { + elementsPerPage: elementsPerPage, + currentPage: currentPage, + totalElements: totalElements, + totalPages: totalPages + }); + } +} diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts index 3c5a86f362..d7c492ccde 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts @@ -9,7 +9,6 @@ import { } from '@ng-dynamic-forms/core'; import { findKey } from 'lodash'; -import { VocabularyFindOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { hasValue, isNotEmpty } from '../../../../../empty.util'; import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model'; import { FormBuilderService } from '../../../form-builder.service'; @@ -18,6 +17,7 @@ import { VocabularyService } from '../../../../../../core/submission/vocabularie import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators'; import { PaginatedList } from '../../../../../../core/data/paginated-list'; import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; +import { PageInfo } from '../../../../../../core/shared/page-info.model'; export interface ListItem { id: string, @@ -26,12 +26,14 @@ export interface ListItem { index: number } +/** + * Component representing a list input field + */ @Component({ selector: 'ds-dynamic-list', styleUrls: ['./dynamic-list.component.scss'], templateUrl: './dynamic-list.component.html' }) - export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit { @Input() bindId = true; @Input() group: FormGroup; @@ -43,7 +45,6 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen public items: ListItem[][] = []; protected optionsList: VocabularyEntry[]; - protected searchOptions: VocabularyFindOptions; constructor(private vocabularyService: VocabularyService, private cdr: ChangeDetectorRef, @@ -56,14 +57,6 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen ngOnInit() { if (this.hasAuthorityOptions()) { - // TODO Replace max elements 1000 with a paginated request when pagination bug is resolved - this.searchOptions = new VocabularyFindOptions( - this.model.vocabularyOptions.scope, - this.model.vocabularyOptions.name, - this.model.vocabularyOptions.metadata, - '', - 1000, // Max elements - 1);// Current Page this.setOptionsFromAuthority(); } } @@ -99,7 +92,10 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen protected setOptionsFromAuthority() { if (this.model.vocabularyOptions.name && this.model.vocabularyOptions.name.length > 0) { const listGroup = this.group.controls[this.model.id] as FormGroup; - this.vocabularyService.getVocabularyEntries(this.searchOptions).pipe( + const pageInfo: PageInfo = new PageInfo({ + elementsPerPage: Number.MAX_VALUE, currentPage: 1 + } as PageInfo); + this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, pageInfo).pipe( getFirstSucceededRemoteDataPayload() ).subscribe((entries: PaginatedList) => { let groupCounter = 0; diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html index 254b15411d..b274197f13 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html @@ -21,8 +21,8 @@ [placeholder]="model.placeholder | translate" [readonly]="model.readOnly" (change)="onChange($event)" - (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();" - (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();" + (blur)="onBlur($event); $event.stopPropagation(); sdRef.close();" + (focus)="onFocus($event); $event.stopPropagation(); sdRef.close();" (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();"> @@ -40,8 +40,8 @@ [placeholder]="model.secondPlaceholder | translate" [readonly]="model.readOnly" (change)="onChange($event)" - (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();" - (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();" + (blur)="onBlur($event); $event.stopPropagation(); sdRef.close();" + (focus)="onFocus($event); $event.stopPropagation(); sdRef.close();" (click)="$event.stopPropagation(); sdRef.close();">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts index ce45e113a0..66eca2393b 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts @@ -4,6 +4,7 @@ import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angul import { async, ComponentFixture, fakeAsync, inject, TestBed, tick, } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { of as observableOf } from 'rxjs'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from '@ngx-translate/core'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; @@ -309,7 +310,13 @@ describe('Dynamic Lookup component', () => { lookupComp = lookupFixture.componentInstance; // FormComponent test instance lookupComp.group = LOOKUP_TEST_GROUP; lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG); - lookupComp.model.value = new FormFieldMetadataValueObject('test', null, 'test001'); + const entry = observableOf(Object.assign(new VocabularyEntry(), { + authority: null, + value: 'test', + display: 'testDisplay' + })); + spyOn((lookupComp as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); + (lookupComp.model as any).value = new FormFieldMetadataValueObject('test', null, null, 'testDisplay'); lookupFixture.detectChanges(); // spyOn(store, 'dispatch'); @@ -318,9 +325,52 @@ describe('Dynamic Lookup component', () => { lookupFixture.destroy(); lookupComp = null; }); - it('should init component properly', () => { - expect(lookupComp.firstInputValue).toBe('test'); + it('should init component properly', fakeAsync(() => { + tick(); + expect(lookupComp.firstInputValue).toBe('testDisplay'); + expect((lookupComp as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); + })); + + it('should have search button disabled on edit mode', () => { + lookupComp.editMode = true; + lookupFixture.detectChanges(); + + const de = lookupFixture.debugElement.queryAll(By.css('button')); + const searchBtnEl = de[0].nativeElement; + const saveBtnEl = de[1].nativeElement; + expect(searchBtnEl.disabled).toBe(true); + expect(saveBtnEl.disabled).toBe(false); + expect(saveBtnEl.textContent.trim()).toBe('form.save'); + }); + }); + describe('and init model value is not empty with authority', () => { + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG); + const entry = observableOf(Object.assign(new VocabularyEntry(), { + authority: 'test001', + value: 'test', + display: 'testDisplay' + })); + spyOn((lookupComp as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); + lookupComp.model.value = new FormFieldMetadataValueObject('test', null, 'test001', 'testDisplay'); + lookupFixture.detectChanges(); + + // spyOn(store, 'dispatch'); + }); + afterEach(() => { + lookupFixture.destroy(); + lookupComp = null; + }); + it('should init component properly', fakeAsync(() => { + tick(); + expect(lookupComp.firstInputValue).toBe('testDisplay'); + expect((lookupComp as any).vocabularyService.getVocabularyEntryByID).toHaveBeenCalled(); + })); it('should have search button disabled on edit mode', () => { lookupComp.editMode = true; @@ -430,6 +480,13 @@ describe('Dynamic Lookup component', () => { lookupComp.group = LOOKUP_TEST_GROUP; lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG); lookupComp.model.value = new FormFieldMetadataValueObject('Name, Lastname', null, 'test001'); + const entry = observableOf(Object.assign(new VocabularyEntry(), { + authority: null, + value: 'Name, Lastname', + display: 'Name, Lastname' + })); + spyOn((lookupComp as any).vocabularyService, 'getVocabularyEntryByValue').and.returnValue(entry); + (lookupComp.model as any).value = new FormFieldMetadataValueObject('Name, Lastname', null, null, 'Name, Lastname'); lookupFixture.detectChanges(); }); @@ -437,10 +494,55 @@ describe('Dynamic Lookup component', () => { lookupFixture.destroy(); lookupComp = null; }); - it('should init component properly', () => { + it('should init component properly', fakeAsync(() => { + tick(); expect(lookupComp.firstInputValue).toBe('Name'); expect(lookupComp.secondInputValue).toBe('Lastname'); + expect((lookupComp as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); + })); + + it('should have search button disabled on edit mode', () => { + lookupComp.editMode = true; + lookupFixture.detectChanges(); + + const de = lookupFixture.debugElement.queryAll(By.css('button')); + const searchBtnEl = de[0].nativeElement; + const saveBtnEl = de[1].nativeElement; + expect(searchBtnEl.disabled).toBe(true); + expect(saveBtnEl.disabled).toBe(false); + expect(saveBtnEl.textContent.trim()).toBe('form.save'); + }); + }); + + describe('and init model value is not empty with authority', () => { + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG); + lookupComp.model.value = new FormFieldMetadataValueObject('Name, Lastname', null, 'test001'); + const entry = observableOf(Object.assign(new VocabularyEntry(), { + authority: 'test001', + value: 'Name, Lastname', + display: 'Name, Lastname' + })); + spyOn((lookupComp as any).vocabularyService, 'getVocabularyEntryByID').and.returnValue(entry); + lookupComp.model.value = new FormFieldMetadataValueObject('Name, Lastname', null, 'test001', 'Name, Lastname'); + lookupFixture.detectChanges(); + + }); + afterEach(() => { + lookupFixture.destroy(); + lookupComp = null; + }); + it('should init component properly', fakeAsync(() => { + tick(); + expect(lookupComp.firstInputValue).toBe('Name'); + expect(lookupComp.secondInputValue).toBe('Lastname'); + expect((lookupComp as any).vocabularyService.getVocabularyEntryByID).toHaveBeenCalled(); + })); it('should have search button disabled on edit mode', () => { lookupComp.editMode = true; diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts index 24422e891a..9ae4ad0737 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts @@ -4,15 +4,10 @@ import { FormGroup } from '@angular/forms'; import { of as observableOf, Subscription } from 'rxjs'; import { catchError, distinctUntilChanged } from 'rxjs/operators'; import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'; -import { - DynamicFormControlComponent, - DynamicFormLayoutService, - DynamicFormValidationService -} from '@ng-dynamic-forms/core'; +import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; -import { VocabularyFindOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; -import { hasValue, isEmpty, isNotEmpty, isNull, isUndefined } from '../../../../../empty.util'; +import { hasValue, isEmpty, isNotEmpty } from '../../../../../empty.util'; import { PageInfo } from '../../../../../../core/shared/page-info.model'; import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; @@ -20,16 +15,21 @@ import { DynamicLookupNameModel } from './dynamic-lookup-name.model'; import { ConfidenceType } from '../../../../../../core/shared/confidence-type'; import { PaginatedList } from '../../../../../../core/data/paginated-list'; import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators'; +import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component'; +import { DynamicLookupModel } from './dynamic-lookup.model'; +/** + * Component representing a lookup or lookup-name input field + */ @Component({ selector: 'ds-dynamic-lookup', styleUrls: ['./dynamic-lookup.component.scss'], templateUrl: './dynamic-lookup.component.html' }) -export class DsDynamicLookupComponent extends DynamicFormControlComponent implements OnDestroy, OnInit { +export class DsDynamicLookupComponent extends DsDynamicVocabularyComponent implements OnDestroy, OnInit { @Input() bindId = true; @Input() group: FormGroup; - @Input() model: any; + @Input() model: DynamicLookupModel | DynamicLookupNameModel; @Output() blur: EventEmitter = new EventEmitter(); @Output() change: EventEmitter = new EventEmitter(); @@ -42,89 +42,97 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem public pageInfo: PageInfo; public optionsList: any; - protected searchOptions: VocabularyFindOptions; protected subs: Subscription[] = []; - constructor(private vocabularyService: VocabularyService, + constructor(protected vocabularyService: VocabularyService, private cdr: ChangeDetectorRef, protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService ) { - super(layoutService, validationService); + super(vocabularyService, layoutService, validationService); } + /** + * Converts an item from the result list to a `string` to display in the `` field. + */ inputFormatter = (x: { display: string }, y: number) => { return y === 1 ? this.firstInputValue : this.secondInputValue; }; + /** + * Initialize the component, setting up the init form value + */ ngOnInit() { - this.searchOptions = new VocabularyFindOptions( - this.model.vocabularyOptions.scope, - this.model.vocabularyOptions.name, - this.model.vocabularyOptions.metadata, - '', - this.model.maxOptions, - 1); - - this.setInputsValue(this.model.value); + if (isNotEmpty(this.model.value)) { + this.setCurrentValue(this.model.value, true); + } this.subs.push(this.model.valueUpdates .subscribe((value) => { if (isEmpty(value)) { this.resetFields(); } else if (!this.editMode) { - this.setInputsValue(this.model.value); + this.setCurrentValue(this.model.value); } })); } - public formatItemForInput(item: any, field: number): string { - if (isUndefined(item) || isNull(item)) { - return ''; - } - return (typeof item === 'string') ? item : this.inputFormatter(item, field); - } - + /** + * Check if model value has an authority + */ public hasAuthorityValue() { return hasValue(this.model.value) && this.model.value.hasAuthority(); } + /** + * Check if current value has an authority + */ public hasEmptyValue() { return isNotEmpty(this.getCurrentValue()); } + /** + * Clear inputs whether there is no results and authority is closed + */ public clearFields() { - // Clear inputs whether there is no results and authority is closed if (this.model.vocabularyOptions.closed) { this.resetFields(); } } + /** + * Check if edit button is disabled + */ public isEditDisabled() { return !this.hasAuthorityValue(); } + /** + * Check if input is disabled + */ public isInputDisabled() { return (this.model.vocabularyOptions.closed && this.hasAuthorityValue() && !this.editMode); } + /** + * Check if model is instanceof DynamicLookupNameModel + */ public isLookupName() { return (this.model instanceof DynamicLookupNameModel); } + /** + * Check if search button is disabled + */ public isSearchDisabled() { return isEmpty(this.firstInputValue) || this.editMode; } - public onBlurEvent(event: Event) { - this.blur.emit(event); - } - - public onFocusEvent(event) { - this.focus.emit(event); - } - + /** + * Update model value with the typed text if vocabulary is not closed + * @param event the typed text + */ public onChange(event) { event.preventDefault(); if (!this.model.vocabularyOptions.closed) { @@ -139,31 +147,51 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem } } + /** + * Load more result entries + */ public onScroll() { if (!this.loading && this.pageInfo.currentPage <= this.pageInfo.totalPages) { - this.searchOptions.currentPage++; + this.updatePageInfo( + this.pageInfo.elementsPerPage, + this.pageInfo.currentPage + 1, + this.pageInfo.totalElements, + this.pageInfo.totalPages + ); this.search(); } } + /** + * Update model value with selected entry + * @param event the selected entry + */ public onSelect(event) { this.updateModel(event); } + /** + * Reset the current value when dropdown toggle + */ public openChange(isOpened: boolean) { if (!isOpened) { if (this.model.vocabularyOptions.closed && !this.hasAuthorityValue()) { - this.setInputsValue(''); + this.setCurrentValue(''); } } } + /** + * Reset the model value + */ public remove() { this.group.markAsPristine(); - this.model.valueUpdates.next(null); - this.change.emit(null); + this.dispatchUpdate(null) } + /** + * Saves all changes + */ public saveChanges() { if (isNotEmpty(this.getCurrentValue())) { const newValue = Object.assign(new VocabularyEntry(), this.model.value, { @@ -177,15 +205,21 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem this.switchEditMode(); } + /** + * Converts a stream of text values from the `` element to the stream of the array of items + * to display in the result list. + */ public search() { this.optionsList = null; - this.pageInfo = null; - - // Query - this.searchOptions.query = this.getCurrentValue(); - + this.updatePageInfo(this.model.maxOptions, 1); this.loading = true; - this.subs.push(this.vocabularyService.getVocabularyEntries(this.searchOptions).pipe( + + this.subs.push(this.vocabularyService.getVocabularyEntriesByValue( + this.getCurrentValue(), + false, + this.model.vocabularyOptions, + this.pageInfo + ).pipe( getFirstSucceededRemoteDataPayload(), catchError(() => observableOf(new PaginatedList( @@ -195,18 +229,28 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem ), distinctUntilChanged()) .subscribe((list: PaginatedList) => { - console.log(list); this.optionsList = list.page; - this.pageInfo = list.pageInfo; + this.updatePageInfo( + list.pageInfo.elementsPerPage, + list.pageInfo.currentPage, + list.pageInfo.totalElements, + list.pageInfo.totalPages + ); this.loading = false; this.cdr.detectChanges(); })); } + /** + * Changes the edit mode flag + */ public switchEditMode() { this.editMode = !this.editMode; } + /** + * Callback functions for whenClickOnConfidenceNotAccepted event + */ public whenClickOnConfidenceNotAccepted(sdRef: NgbDropdown, confidence: ConfidenceType) { if (!this.model.readOnly) { sdRef.open(); @@ -220,6 +264,38 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem .forEach((sub) => sub.unsubscribe()); } + /** + * Sets the current value with the given value. + * @param value The value to set. + * @param init Representing if is init value or not. + */ + public setCurrentValue(value: any, init = false) { + if (init) { + this.getInitValueFromModel() + .subscribe((value: FormFieldMetadataValueObject) => this.setDisplayInputValue(value.display)); + } else if (hasValue(value)) { + if (value instanceof FormFieldMetadataValueObject || value instanceof VocabularyEntry) { + this.setDisplayInputValue(value.display); + } + } + } + + protected setDisplayInputValue(displayValue: string) { + if (hasValue(displayValue)) { + if (this.isLookupName()) { + const values = displayValue.split((this.model as DynamicLookupNameModel).separator); + + this.firstInputValue = (values[0] || '').trim(); + this.secondInputValue = (values[1] || '').trim(); + } else { + this.firstInputValue = displayValue || ''; + } + } + } + + /** + * Gets the current text present in the input field(s) + */ protected getCurrentValue(): string { let result = ''; if (!this.isLookupName()) { @@ -237,6 +313,9 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem return result; } + /** + * Clear text present in the input field(s) + */ protected resetFields() { this.firstInputValue = ''; if (this.isLookupName()) { @@ -244,32 +323,12 @@ export class DsDynamicLookupComponent extends DynamicFormControlComponent implem } } - protected setInputsValue(value) { - if (hasValue(value)) { - let displayValue = value; - if (value instanceof FormFieldMetadataValueObject || value instanceof VocabularyEntry) { - displayValue = value.display; - } - - if (hasValue(displayValue)) { - if (this.isLookupName()) { - const values = displayValue.split((this.model as DynamicLookupNameModel).separator); - - this.firstInputValue = (values[0] || '').trim(); - this.secondInputValue = (values[1] || '').trim(); - } else { - this.firstInputValue = displayValue || ''; - } - } - } - } - protected updateModel(value) { this.group.markAsDirty(); - this.model.valueUpdates.next(value); - this.setInputsValue(value); - this.change.emit(value); + this.dispatchUpdate(value); + this.setCurrentValue(value); this.optionsList = null; this.pageInfo = null; } + } diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts index 21606d7abc..51cf69d560 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts @@ -23,13 +23,15 @@ import { hasValue, isEmpty, isNotEmpty, isNotNull } from '../../../../../empty.u import { shrinkInOut } from '../../../../../animations/shrink'; import { ChipsItem } from '../../../../../chips/models/chips-item.model'; import { hasOnlyEmptyProperties } from '../../../../../object.util'; -import { VocabularyFindOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; import { environment } from '../../../../../../../environments/environment'; import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators'; import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model'; +/** + * Component representing a group input field + */ @Component({ selector: 'ds-dynamic-relation-group', styleUrls: ['./dynamic-relation-group.component.scss'], diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html index cfe50def98..7a35287a99 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html @@ -1,5 +1,5 @@ -
- + -
{ }); it('should display dropdown menu entries', () => { - const de = scrollableDropdownFixture.debugElement.query(By.css('button.ds-form-input-btn')); + const de = scrollableDropdownFixture.debugElement.query(By.css('input.custom-select')); const btnEl = de.nativeElement; const deMenu = scrollableDropdownFixture.debugElement.query(By.css('div.scrollable-dropdown-menu')); @@ -153,7 +153,7 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => { it('should select a results entry properly', fakeAsync(() => { const selectedValue = Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 }); - let de: any = scrollableDropdownFixture.debugElement.query(By.css('button.ds-form-input-btn')); + let de: any = scrollableDropdownFixture.debugElement.query(By.css('input.custom-select')); let btnEl = de.nativeElement; btnEl.click(); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts index f6442407c4..af8fb1b008 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts @@ -2,29 +2,29 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } fro import { FormGroup } from '@angular/forms'; import { Observable, of as observableOf } from 'rxjs'; -import { catchError, distinctUntilChanged, tap } from 'rxjs/operators'; +import { catchError, distinctUntilChanged, map, tap } from 'rxjs/operators'; import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'; -import { - DynamicFormControlComponent, - DynamicFormLayoutService, - DynamicFormValidationService -} from '@ng-dynamic-forms/core'; +import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core'; import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model'; import { PageInfo } from '../../../../../../core/shared/page-info.model'; -import { isNull, isUndefined } from '../../../../../empty.util'; +import { isEmpty } from '../../../../../empty.util'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; -import { VocabularyFindOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators'; import { PaginatedList } from '../../../../../../core/data/paginated-list'; +import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component'; +import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; +/** + * Component representing a dropdown input field + */ @Component({ selector: 'ds-dynamic-scrollable-dropdown', styleUrls: ['./dynamic-scrollable-dropdown.component.scss'], templateUrl: './dynamic-scrollable-dropdown.component.html' }) -export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComponent implements OnInit { +export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyComponent implements OnInit { @Input() bindId = true; @Input() group: FormGroup; @Input() model: DynamicScrollableDropdownModel; @@ -38,25 +38,20 @@ export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComp public pageInfo: PageInfo; public optionsList: any; - protected searchOptions: VocabularyFindOptions; - - constructor(private vocabularyService: VocabularyService, - private cdr: ChangeDetectorRef, + constructor(protected vocabularyService: VocabularyService, + protected cdr: ChangeDetectorRef, protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService ) { - super(layoutService, validationService); + super(vocabularyService, layoutService, validationService); } + /** + * Initialize the component, setting up the init form value + */ ngOnInit() { - this.searchOptions = new VocabularyFindOptions( - this.model.vocabularyOptions.scope, - this.model.vocabularyOptions.name, - this.model.vocabularyOptions.metadata, - '', - this.model.maxOptions, - 1); - this.vocabularyService.getVocabularyEntries(this.searchOptions).pipe( + this.updatePageInfo(this.model.maxOptions, 1) + this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.pageInfo).pipe( getFirstSucceededRemoteDataPayload(), catchError(() => observableOf(new PaginatedList( new PageInfo(), @@ -66,9 +61,15 @@ export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComp .subscribe((list: PaginatedList) => { this.optionsList = list.page; if (this.model.value) { - this.setCurrentValue(this.model.value); + this.setCurrentValue(this.model.value, true); } - this.pageInfo = list.pageInfo; + + this.updatePageInfo( + list.pageInfo.elementsPerPage, + list.pageInfo.currentPage, + list.pageInfo.totalElements, + list.pageInfo.totalPages + ); this.cdr.detectChanges(); }); @@ -76,22 +77,37 @@ export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComp .subscribe((value) => { this.setCurrentValue(value); }); - } + /** + * Converts an item from the result list to a `string` to display in the `` field. + */ inputFormatter = (x: VocabularyEntry): string => x.display || x.value; + /** + * Opens dropdown menu + * @param sdRef The reference of the NgbDropdown. + */ openDropdown(sdRef: NgbDropdown) { if (!this.model.readOnly) { + this.group.markAsUntouched(); sdRef.open(); } } + /** + * Loads any new entries + */ onScroll() { if (!this.loading && this.pageInfo.currentPage <= this.pageInfo.totalPages) { this.loading = true; - this.searchOptions.currentPage++; - this.vocabularyService.getVocabularyEntries(this.searchOptions).pipe( + this.updatePageInfo( + this.pageInfo.elementsPerPage, + this.pageInfo.currentPage + 1, + this.pageInfo.totalElements, + this.pageInfo.totalPages + ); + this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.pageInfo).pipe( getFirstSucceededRemoteDataPayload(), catchError(() => observableOf(new PaginatedList( new PageInfo(), @@ -101,49 +117,50 @@ export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComp tap(() => this.loading = false)) .subscribe((list: PaginatedList) => { this.optionsList = this.optionsList.concat(list.page); - this.pageInfo = list.pageInfo; + this.updatePageInfo( + list.pageInfo.elementsPerPage, + list.pageInfo.currentPage, + list.pageInfo.totalElements, + list.pageInfo.totalPages + ); this.cdr.detectChanges(); }) } } - onBlur(event: Event) { - this.blur.emit(event); - } - - onFocus(event) { - this.focus.emit(event); - } - + /** + * Emits a change event and set the current value with the given value. + * @param event The value to emit. + */ onSelect(event) { this.group.markAsDirty(); - this.model.valueUpdates.next(event); - this.change.emit(event); + this.dispatchUpdate(event); this.setCurrentValue(event); } - onToggle(sdRef: NgbDropdown) { - if (sdRef.isOpen()) { - this.focus.emit(event); - } else { - this.blur.emit(event); - } - } + /** + * Sets the current value with the given value. + * @param value The value to set. + * @param init Representing if is init value or not. + */ + setCurrentValue(value: any, init = false): void { + let result: Observable; - setCurrentValue(value): void { - let result: string; - if (isUndefined(value) || isNull(value)) { - result = ''; - } else if (typeof value === 'string') { - result = value; + if (init) { + result = this.getInitValueFromModel().pipe( + map((value: FormFieldMetadataValueObject) => value.display) + ); } else { - for (const item of this.optionsList) { - if (value.value === (item as any).value) { - result = this.inputFormatter(item); - break; - } + if (isEmpty(value)) { + result = observableOf(''); + } else if (typeof value === 'string') { + result = observableOf(value); + } else { + result = observableOf(value.display) } } - this.currentValue = observableOf(result); + + this.currentValue = result; } + } diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts index a85c215b5f..d0f7f4ec3b 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts @@ -142,15 +142,13 @@ describe('DsDynamicTagComponent test suite', () => { it('should init component properly', () => { chips = new Chips([], 'display'); expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems()); - - expect(tagComp.searchOptions).toBeDefined(); }); it('should search when 3+ characters typed', fakeAsync(() => { - spyOn((tagComp as any).vocabularyService, 'getVocabularyEntries').and.callThrough(); + spyOn((tagComp as any).vocabularyService, 'getVocabularyEntriesByValue').and.callThrough(); tagComp.search(observableOf('test')).subscribe(() => { - expect((tagComp as any).vocabularyService.getVocabularyEntries).toHaveBeenCalled(); + expect((tagComp as any).vocabularyService.getVocabularyEntriesByValue).toHaveBeenCalled(); }); })); @@ -232,7 +230,6 @@ describe('DsDynamicTagComponent test suite', () => { it('should init component properly', () => { chips = new Chips(modelValue, 'display'); expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems()); - expect(tagComp.searchOptions).toBeDefined(); }); }); @@ -259,7 +256,6 @@ describe('DsDynamicTagComponent test suite', () => { it('should init component properly', () => { chips = new Chips([], 'display'); expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems()); - expect(tagComp.searchOptions).not.toBeDefined(); }); it('should add an item on ENTER or key press is \',\' or \';\'', fakeAsync(() => { diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts index 85d791da6d..b62dbd6c1f 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts @@ -1,11 +1,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { FormGroup } from '@angular/forms'; -import { - DynamicFormControlComponent, - DynamicFormLayoutService, - DynamicFormValidationService -} from '@ng-dynamic-forms/core'; +import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core'; import { Observable, of as observableOf } from 'rxjs'; import { catchError, debounceTime, distinctUntilChanged, map, merge, switchMap, tap } from 'rxjs/operators'; import { NgbTypeahead, NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap'; @@ -13,7 +9,6 @@ import { isEqual } from 'lodash'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; import { DynamicTagModel } from './dynamic-tag.model'; -import { VocabularyFindOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { Chips } from '../../../../../chips/models/chips.model'; import { hasValue, isNotEmpty } from '../../../../../empty.util'; import { environment } from '../../../../../../../environments/environment'; @@ -21,13 +16,18 @@ import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/share import { PaginatedList } from '../../../../../../core/data/paginated-list'; import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; import { PageInfo } from '../../../../../../core/shared/page-info.model'; +import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component'; +/** + * Component representing a tag input field + */ @Component({ selector: 'ds-dynamic-tag', styleUrls: ['./dynamic-tag.component.scss'], templateUrl: './dynamic-tag.component.html' }) -export class DsDynamicTagComponent extends DynamicFormControlComponent implements OnInit { +export class DsDynamicTagComponent extends DsDynamicVocabularyComponent implements OnInit { + @Input() bindId = true; @Input() group: FormGroup; @Input() model: DynamicTagModel; @@ -42,21 +42,28 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement hasAuthority: boolean; searching = false; - searchOptions: VocabularyFindOptions; searchFailed = false; hideSearchingWhenUnsubscribed = new Observable(() => () => this.changeSearchingStatus(false)); currentValue: any; + public pageInfo: PageInfo; - constructor(private vocabularyService: VocabularyService, + constructor(protected vocabularyService: VocabularyService, private cdr: ChangeDetectorRef, protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService ) { - super(layoutService, validationService); + super(vocabularyService, layoutService, validationService); } + /** + * Converts an item from the result list to a `string` to display in the `` field. + */ formatter = (x: { display: string }) => x.display; + /** + * Converts a stream of text values from the `` element to the stream of the array of items + * to display in the typeahead popup. + */ search = (text$: Observable) => text$.pipe( debounceTime(300), @@ -66,8 +73,7 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement if (term === '' || term.length < this.model.minChars) { return observableOf({ list: [] }); } else { - this.searchOptions.query = term; - return this.vocabularyService.getVocabularyEntries(this.searchOptions).pipe( + return this.vocabularyService.getVocabularyEntriesByValue(term, false, this.model.vocabularyOptions, new PageInfo()).pipe( getFirstSucceededRemoteDataPayload(), tap(() => this.searchFailed = false), catchError(() => { @@ -83,16 +89,12 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement tap(() => this.changeSearchingStatus(false)), merge(this.hideSearchingWhenUnsubscribed)); + /** + * Initialize the component, setting up the init form value + */ ngOnInit() { this.hasAuthority = this.model.vocabularyOptions && hasValue(this.model.vocabularyOptions.name); - if (this.hasAuthority) { - this.searchOptions = new VocabularyFindOptions( - this.model.vocabularyOptions.scope, - this.model.vocabularyOptions.name, - this.model.vocabularyOptions.metadata); - } - this.chips = new Chips( this.model.value, 'display', @@ -104,17 +106,24 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement const items = this.chips.getChipsItems(); // Does not emit change if model value is equal to the current value if (!isEqual(items, this.model.value)) { - this.model.valueUpdates.next(items); - this.change.emit(event); + this.dispatchUpdate(items); } }); } + /** + * Changes the searching status + * @param status + */ changeSearchingStatus(status: boolean) { this.searching = status; this.cdr.detectChanges(); } + /** + * Mark form group as dirty on input + * @param event + */ onInput(event) { if (event.data) { this.group.markAsDirty(); @@ -122,6 +131,10 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement this.cdr.detectChanges(); } + /** + * Emits a blur event containing a given value and add all tags to chips. + * @param event The value to emit. + */ onBlur(event: Event) { if (isNotEmpty(this.currentValue) && !this.instance.isPopupOpen()) { this.addTagsToChips(); @@ -129,10 +142,10 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement this.blur.emit(event); } - onFocus(event) { - this.focus.emit(event); - } - + /** + * Updates model value with the selected value and add a new tag to chips. + * @param event The value to set. + */ onSelectItem(event: NgbTypeaheadSelectItemEvent) { this.chips.add(event.item); // this.group.controls[this.model.id].setValue(this.model.value); @@ -140,25 +153,34 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement setTimeout(() => { // Reset the input text after x ms, mandatory or the formatter overwrite it - this.currentValue = null; + this.setCurrentValue(null); this.cdr.detectChanges(); }, 50); } updateModel(event) { - this.model.valueUpdates.next(this.chips.getChipsItems()); - this.change.emit(event); + /* this.model.valueUpdates.next(this.chips.getChipsItems()); + this.change.emit(event);*/ + this.dispatchUpdate(this.chips.getChipsItems()); } + /** + * Add a new tag with typed text when typing 'Enter' or ',' or ';' + * @param event the keyUp event + */ onKeyUp(event) { if (event.keyCode === 13 || event.keyCode === 188) { event.preventDefault(); - // Key: Enter or ',' or ';' + // Key: 'Enter' or ',' or ';' this.addTagsToChips(); event.stopPropagation(); } } + /** + * Prevent propagation of a key event in case of return key is pressed + * @param event the key event + */ preventEventsPropagation(event) { event.stopPropagation(); if (event.keyCode === 13) { @@ -166,6 +188,15 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement } } + /** + * Sets the current value with the given value. + * @param value The value to set. + * @param init Representing if is init value or not. + */ + public setCurrentValue(value: any, init = false) { + this.currentValue = value; + } + private addTagsToChips() { if (hasValue(this.currentValue) && (!this.hasAuthority || !this.model.vocabularyOptions.closed)) { let res: string[] = []; @@ -188,7 +219,7 @@ export class DsDynamicTagComponent extends DynamicFormControlComponent implement // this.currentValue = ''; setTimeout(() => { // Reset the input text after x ms, mandatory or the formatter overwrite it - this.currentValue = null; + this.setCurrentValue(null); this.cdr.detectChanges(); }, 50); this.updateModel(event); 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/typeahead/dynamic-typeahead.component.spec.ts index 48456230bf..b827cd3536 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/typeahead/dynamic-typeahead.component.spec.ts @@ -19,6 +19,7 @@ import { FormFieldMetadataValueObject } from '../../../models/form-field-metadat import { createTestComponent } from '../../../../../testing/utils.test'; import { AuthorityConfidenceStateDirective } from '../../../../../authority-confidence/authority-confidence-state.directive'; import { ObjNgFor } from '../../../../../utils/object-ngfor.pipe'; +import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; export let TYPEAHEAD_TEST_GROUP; @@ -134,14 +135,14 @@ describe('DsDynamicTypeaheadComponent test suite', () => { it('should search when 3+ characters typed', fakeAsync(() => { - spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntries').and.callThrough(); + spyOn((typeaheadComp as any).vocabularyService, 'getVocabularyEntriesByValue').and.callThrough(); typeaheadComp.search(observableOf('test')).subscribe(); tick(300); typeaheadFixture.detectChanges(); - expect((typeaheadComp as any).vocabularyService.getVocabularyEntries).toHaveBeenCalled(); + expect((typeaheadComp as any).vocabularyService.getVocabularyEntriesByValue).toHaveBeenCalled(); })); it('should set model.value on input type when VocabularyOptions.closed is false', () => { @@ -229,13 +230,20 @@ describe('DsDynamicTypeaheadComponent test suite', () => { }); - describe('and init model value is not empty', () => { + 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); - (typeaheadComp.model as any).value = new FormFieldMetadataValueObject('test', null, 'test001'); + 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(); }); @@ -244,9 +252,11 @@ describe('DsDynamicTypeaheadComponent test suite', () => { typeaheadComp = null; }); - it('should init component properly', () => { - expect(typeaheadComp.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, 'test001')); - }); + it('should init component properly', fakeAsync(() => { + tick(); + expect(typeaheadComp.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, null, 'testDisplay')); + expect((typeaheadComp as any).vocabularyService.getVocabularyEntryByValue).toHaveBeenCalled(); + })); it('should emit change Event onChange and currentValue is empty', () => { typeaheadComp.currentValue = null; @@ -257,6 +267,42 @@ describe('DsDynamicTypeaheadComponent test suite', () => { }); }); + 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); + 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(); + }); + + afterEach(() => { + typeaheadFixture.destroy(); + typeaheadComp = 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(); + })); + + 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(); + }); + }); }); }); 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/typeahead/dynamic-typeahead.component.ts index 67030682a5..cee5e7ed05 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/typeahead/dynamic-typeahead.component.ts @@ -1,18 +1,13 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { FormGroup } from '@angular/forms'; -import { - DynamicFormControlComponent, - DynamicFormLayoutService, - DynamicFormValidationService -} from '@ng-dynamic-forms/core'; +import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core'; import { catchError, debounceTime, distinctUntilChanged, filter, map, merge, switchMap, tap } from 'rxjs/operators'; import { Observable, of as observableOf, Subject } from 'rxjs'; import { NgbTypeahead, NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap'; import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service'; import { DynamicTypeaheadModel } from './dynamic-typeahead.model'; -import { VocabularyFindOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { isEmpty, isNotEmpty, isNotNull } from '../../../../../empty.util'; import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; import { ConfidenceType } from '../../../../../../core/shared/confidence-type'; @@ -20,13 +15,14 @@ import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/share import { PaginatedList } from '../../../../../../core/data/paginated-list'; import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model'; import { PageInfo } from '../../../../../../core/shared/page-info.model'; +import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component'; @Component({ selector: 'ds-dynamic-typeahead', styleUrls: ['./dynamic-typeahead.component.scss'], templateUrl: './dynamic-typeahead.component.html' }) -export class DsDynamicTypeaheadComponent extends DynamicFormControlComponent implements OnInit { +export class DsDynamicTypeaheadComponent extends DsDynamicVocabularyComponent implements OnInit { @Input() bindId = true; @Input() group: FormGroup; @Input() model: DynamicTypeaheadModel; @@ -37,26 +33,33 @@ export class DsDynamicTypeaheadComponent extends DynamicFormControlComponent imp @ViewChild('instance', { static: false }) instance: NgbTypeahead; + pageInfo: PageInfo; searching = false; - searchOptions: VocabularyFindOptions; searchFailed = false; hideSearchingWhenUnsubscribed$ = new Observable(() => () => this.changeSearchingStatus(false)); click$ = new Subject(); currentValue: any; inputValue: any; - constructor(private vocabularyService: VocabularyService, + constructor(protected vocabularyService: VocabularyService, private cdr: ChangeDetectorRef, protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService ) { - super(layoutService, validationService); + super(vocabularyService, layoutService, validationService); } + /** + * Converts an item from the result list to a `string` to display in the `` field. + */ formatter = (x: { display: string }) => { return (typeof x === 'object') ? x.display : x }; + /** + * Converts a stream of text values from the `` element to the stream of the array of items + * to display in the typeahead popup. + */ search = (text$: Observable) => { return text$.pipe( merge(this.click$), @@ -67,8 +70,11 @@ export class DsDynamicTypeaheadComponent extends DynamicFormControlComponent imp if (term === '' || term.length < this.model.minChars) { return observableOf({ list: [] }); } else { - this.searchOptions.query = term; - return this.vocabularyService.getVocabularyEntries(this.searchOptions).pipe( + return this.vocabularyService.getVocabularyEntriesByValue( + term, + false, + this.model.vocabularyOptions, + this.pageInfo).pipe( getFirstSucceededRemoteDataPayload(), tap(() => this.searchFailed = false), catchError(() => { @@ -86,36 +92,49 @@ export class DsDynamicTypeaheadComponent extends DynamicFormControlComponent imp ) }; + /** + * Initialize the component, setting up the init form value + */ ngOnInit() { - this.currentValue = this.model.value; - this.searchOptions = new VocabularyFindOptions( - this.model.vocabularyOptions.scope, - this.model.vocabularyOptions.name, - this.model.vocabularyOptions.metadata); + if (this.model.value) { + this.setCurrentValue(this.model.value, true); + } + this.group.get(this.model.id).valueChanges.pipe( filter((value) => this.currentValue !== value)) .subscribe((value) => { - this.currentValue = value; + this.setCurrentValue(this.model.value); }); } + /** + * Changes the searching status + * @param status + */ changeSearchingStatus(status: boolean) { this.searching = status; this.cdr.detectChanges(); } + /** + * Update the input value with a FormFieldMetadataValueObject + * @param event + */ onInput(event) { if (!this.model.vocabularyOptions.closed && isNotEmpty(event.target.value)) { this.inputValue = new FormFieldMetadataValueObject(event.target.value); } } + /** + * Emits a blur event containing a given value. + * @param event The value to emit. + */ onBlur(event: Event) { if (!this.instance.isPopupOpen()) { if (!this.model.vocabularyOptions.closed && isNotEmpty(this.inputValue)) { if (isNotNull(this.inputValue) && this.model.value !== this.inputValue) { - this.model.valueUpdates.next(this.inputValue); - this.change.emit(this.inputValue); + this.dispatchUpdate(this.inputValue); } this.inputValue = null; } @@ -129,29 +148,60 @@ export class DsDynamicTypeaheadComponent extends DynamicFormControlComponent imp } } + /** + * Updates model value with the current value + * @param event The change event. + */ onChange(event: Event) { event.stopPropagation(); if (isEmpty(this.currentValue)) { - this.model.valueUpdates.next(null); - this.change.emit(null); + this.dispatchUpdate(null); } } - onFocus(event) { - this.focus.emit(event); - } - + /** + * Updates current value and model value with the selected value. + * @param event The value to set. + */ onSelectItem(event: NgbTypeaheadSelectItemEvent) { this.inputValue = null; - this.currentValue = event.item; - this.model.valueUpdates.next(event.item); - this.change.emit(event.item); + this.setCurrentValue(event.item); + this.dispatchUpdate(event.item); } + /** + * Callback functions for whenClickOnConfidenceNotAccepted event + */ public whenClickOnConfidenceNotAccepted(confidence: ConfidenceType) { if (!this.model.readOnly) { this.click$.next(this.formatter(this.currentValue)); } } + /** + * Sets the current value with the given value. + * @param value The value to set. + * @param init Representing if is init value or not. + */ + setCurrentValue(value: any, init = false): void { + let result: string; + if (init) { + this.getInitValueFromModel() + .subscribe((value: FormFieldMetadataValueObject) => { + this.currentValue = value; + }); + } else { + if (isEmpty(value)) { + result = ''; + } else if (typeof value === 'string') { + result = value; + } else { + result = value.display; + } + + this.currentValue = result; + } + + } + } diff --git a/src/app/shared/form/builder/parsers/list-field-parser.ts b/src/app/shared/form/builder/parsers/list-field-parser.ts index d3c158f4b8..e9c9f4e5be 100644 --- a/src/app/shared/form/builder/parsers/list-field-parser.ts +++ b/src/app/shared/form/builder/parsers/list-field-parser.ts @@ -1,12 +1,10 @@ import { FieldParser } from './field-parser'; import { isNotEmpty } from '../../../empty.util'; -import { VocabularyFindOptions } from '../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model'; import { DynamicListCheckboxGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model'; import { DynamicListRadioGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model'; export class ListFieldParser extends FieldParser { - searchOptions: VocabularyFindOptions; public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any { const listModelConfig = this.initModel(null, label); diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts index a7ea023569..be6d678455 100644 --- a/src/app/shared/form/builder/parsers/row-parser.ts +++ b/src/app/shared/form/builder/parsers/row-parser.ts @@ -1,22 +1,13 @@ import { Injectable, Injector } from '@angular/core'; -import { - DYNAMIC_FORM_CONTROL_TYPE_ARRAY, - DynamicFormGroupModelConfig -} from '@ng-dynamic-forms/core'; + +import { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core'; import { uniqueId } from 'lodash'; -import { VocabularyFindOptions } from '../../../../core/submission/vocabularies/models/vocabulary-find-options.model'; import { isEmpty } from '../../../empty.util'; import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model'; import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from '../ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model'; import { FormFieldModel } from '../models/form-field.model'; -import { - CONFIG_DATA, - FieldParser, - INIT_FORM_VALUES, - PARSER_OPTIONS, - SUBMISSION_ID -} from './field-parser'; +import { CONFIG_DATA, FieldParser, INIT_FORM_VALUES, PARSER_OPTIONS, SUBMISSION_ID } from './field-parser'; import { ParserFactory } from './parser-factory'; import { ParserOptions } from './parser-options'; import { ParserType } from './parser-type'; @@ -48,8 +39,6 @@ export class RowParser { group: [], }; - const vocabularyOptions = new VocabularyFindOptions(scopeUUID); - const scopedFields: FormFieldModel[] = this.filterScopedFields(rowData.fields, submissionScope); const layoutDefaultGridClass = ' col-sm-' + Math.trunc(12 / scopedFields.length); @@ -58,7 +47,7 @@ export class RowParser { const parserOptions: ParserOptions = { readOnly: readOnly, submissionScope: submissionScope, - collectionUUID: vocabularyOptions.collection + collectionUUID: scopeUUID }; // Iterate over row's fields