MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

no message

This commit is contained in:
Diamantis Tziotzios 2017-12-20 17:15:27 +02:00
parent 91500c6061
commit d7658687ba
3 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html
View File

@ -3,10 +3,12 @@
<mat-step [stepControl]="firstStepFormGroup">
<form [formGroup]="firstStepFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<auto-complete class="full-width" placeholder="{{'FORM-PAYMENT-ORDER.EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="dmpAutoCompleteConfiguration"
titleKey="label" [control]="firstStepFormGroup.get('dataManagementPlan')" [required]="true">
<auto-complete class="full-width" placeholder="{{'FORM-PAYMENT-ORDER.EDITOR.FIELDS.PROJECT' | translate}}"
[configuration]="dmpAutoCompleteConfiguration"
titleKey="label"
[control]="firstStepFormGroup.get('dataManagementPlan')"
[required]="true">
</auto-complete>
{{firstStepFormGroup.value | json}}
<div>
<button mat-button matStepperNext>Next</button>
</div>

10
dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html
View File

@ -29,11 +29,13 @@
<mat-error *ngIf="control.errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="validationErrorString">{{errorString}}</mat-error>
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith.bind(this)">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith.bind(this)" (optionSelected)="this.optionSelected($event)">
<mat-option *ngFor="let item of filteredItems | async" [value]="item">
<span *ngIf="titleKey">{{ item[titleKey] }}</span>
<span *ngIf="subtitleKey">{{ item[subtitleKey] }}</span>
<span *ngIf="titleKey">{{item[titleKey]}}</span>
<span *ngIf="subtitleKey">{{item[subtitleKey]}}</span>
</mat-option>
<mat-option *ngIf="filteredItems.length == 0"><span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span></mat-option>
<!-- <mat-option *ngIf="filteredItems.length == 0" value="das">
<span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span>
</mat-option> -->
</mat-autocomplete>
</mat-form-field>

44
dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts
View File

@ -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<any[]>;
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 {