diff --git a/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html b/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html index d79bad557..ea99a110d 100644 --- a/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html +++ b/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html @@ -3,10 +3,12 @@
Fill out your name - + - {{firstStepFormGroup.value | json}}
diff --git a/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html b/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html index 5ff9061eb..5e95feae9 100644 --- a/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html +++ b/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html @@ -29,11 +29,13 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{errorString}} - + - {{ item[titleKey] }} - {{ item[subtitleKey] }} + {{item[titleKey]}} + {{item[subtitleKey]}} - {{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}} + \ No newline at end of file diff --git a/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts b/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts index 4e05f6fbf..4fdcbc0a7 100644 --- a/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts +++ b/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts @@ -1,11 +1,11 @@ -import { FormControl, FormGroupDirective, NgForm, FormGroup } from '@angular/forms'; +import { FormControl, FormGroupDirective, NgForm, FormGroup, FormBuilder } from '@angular/forms'; import { Observable } from 'rxjs/Rx'; import { setTimeout } from 'timers'; -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ElementRef } from '@angular/core'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/map'; import { AutoCompleteConfiguration } from './AutoCompleteConfiguration'; -import { ErrorStateMatcher } from '@angular/material'; +import { ErrorStateMatcher, MatInput } from '@angular/material'; @Component({ selector: 'auto-complete', @@ -28,7 +28,7 @@ export class AutocompleteComponent implements OnInit { @Input() placeholder: String; - filteredItems: Observable; + filteredItems: any[]; // @Input() // validationErrorString: String; @@ -52,8 +52,11 @@ export class AutocompleteComponent implements OnInit { // ClickFunctionCall: Function; loading = false; + hasSelectedItem = false; + constructor() { + } ngOnInit() { @@ -61,20 +64,28 @@ export class AutocompleteComponent implements OnInit { const valueChanges = this.control.valueChanges.share(); valueChanges.subscribe(searchTerm => { this.loading = true; - if (this.control.value) { + if (this.hasSelectedItem) { this.resetFormControlValue(); } }); - this.filteredItems = valueChanges - .startWith(null) + valueChanges .debounceTime(this.delay) .finally(() => this.loading = false) .distinctUntilChanged() .switchMap(val => { - this.configuration.requestItem.criteria.like = val; + //if (this.hasSelectedItem) return []; + this.configuration.requestItem.criteria.like = this.control.value; return this.configuration.callback(this.configuration.requestItem) }) + // this.filteredItems = this.inputField.nativeElement.valueChanges.startWith(null) + // .debounceTime(this.delay) + // .finally(() => this.loading = false) + // .distinctUntilChanged() + // .switchMap(val => { + // this.configuration.requestItem.criteria.like = val; + // return this.configuration.callback(this.configuration.requestItem) + // }) // const valueChanges = this.form.controls['text'].valueChanges.share(); // valueChanges.subscribe(searchTerm => { // this.loading = true; @@ -93,6 +104,7 @@ export class AutocompleteComponent implements OnInit { } resetFormControlValue() { + this.hasSelectedItem = false; //this.control.setValue(null, { emitEvent: false }); } @@ -100,13 +112,14 @@ export class AutocompleteComponent implements OnInit { // // return (item as DropdownListingItem).toDropdownList(); // // } - // optionSelected(event: any) { - // this.form.patchValue(event.option.value, { emitEvent: false }); - // this.selectedDropdownItemChange.emit(event.option.value); - // //this.form.updateValueAndValidity(); - // this.options = [event.option.value]; - // this.loading = false; - // } + optionSelected(event: any) { + this.hasSelectedItem = true; + this.control.setValue(event.option.value, { emitEvent: false }); + //this.selectedDropdownItemChange.emit(event.option.value); + //this.form.updateValueAndValidity(); + //this.options = [event.option.value]; + //this.loading = false; + } // inputOnChange(term: string) { // //this.form.patchValue({ value: null, description: '', text: '' }); @@ -123,6 +136,7 @@ export class AutocompleteComponent implements OnInit { // } displayWith(value: any): String { + if (!value) return ''; return value['' + this.titleKey]; } // displayFn(item: AutoCompleteItem): string {