Merge branch 'Development' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into Development
This commit is contained in:
commit
d05b2ba5e2
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"name": "Launch Chrome",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"url": "http://localhost:4200/#",
|
||||||
|
"webRoot": "${workspaceRoot}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Attach Chrome",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "attach",
|
||||||
|
"url": "http://localhost:4200/#",
|
||||||
|
"webRoot": "${workspaceRoot}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Launch Chrome (Test)",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"url": "http://localhost:9876/debug.html",
|
||||||
|
"webRoot": "${workspaceRoot}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Launch Chrome (E2E)",
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
|
||||||
|
"protocol": "inspector",
|
||||||
|
"args": ["${workspaceRoot}/protractor.conf.js"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -50,6 +50,7 @@ import { FigurecardComponent } from './shared/components/figurecard/figurecard.c
|
||||||
import { DatasetListingComponent } from './datasets/dataset-listing.component';
|
import { DatasetListingComponent } from './datasets/dataset-listing.component';
|
||||||
import { DatasetEditorComponent } from './datasets/editor/dataset-editor.component';
|
import { DatasetEditorComponent } from './datasets/editor/dataset-editor.component';
|
||||||
import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
|
import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
|
||||||
|
import { AutocompleteComponent } from './shared/components/autocomplete/autocomplete.component';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -82,7 +83,8 @@ import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.componen
|
||||||
DataManagementPlanEditorComponent,
|
DataManagementPlanEditorComponent,
|
||||||
DatasetWizardComponent,
|
DatasetWizardComponent,
|
||||||
FigurecardComponent,
|
FigurecardComponent,
|
||||||
DatasetEditorComponent
|
DatasetEditorComponent,
|
||||||
|
AutocompleteComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
<div class="data-management-plan-editor">
|
<div class="data-management-plan-editor">
|
||||||
<mat-horizontal-stepper [linear]="isLinear">
|
<mat-horizontal-stepper [linear]="isLinear">
|
||||||
<mat-step [stepControl]="firstFormGroup">
|
<mat-step [stepControl]="firstStepFormGroup">
|
||||||
<form [formGroup]="firstFormGroup">
|
<form [formGroup]="firstStepFormGroup">
|
||||||
<ng-template matStepLabel>Fill out your name</ng-template>
|
<ng-template matStepLabel>Fill out your name</ng-template>
|
||||||
<mat-form-field>
|
<auto-complete class="full-width" placeholder="{{'FORM-PAYMENT-ORDER.EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="dmpAutoCompleteConfiguration"
|
||||||
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
|
titleKey="label" [control]="firstStepFormGroup.get('dataManagementPlan')" [required]="true">
|
||||||
</mat-form-field>
|
</auto-complete>
|
||||||
|
{{firstStepFormGroup.value | json}}
|
||||||
<div>
|
<div>
|
||||||
<button mat-button matStepperNext>Next</button>
|
<button mat-button matStepperNext>Next</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,32 +1,43 @@
|
||||||
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
|
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
|
||||||
import { DataManagementPlanService } from "../services/data-management-plan/data-management-plan.service";
|
import { DataManagementPlanService } from "../services/data-management-plan/data-management-plan.service";
|
||||||
import { FormGroup, Validators, FormBuilder } from "@angular/forms";
|
import { FormGroup, Validators, FormBuilder } from "@angular/forms";
|
||||||
|
import { AutoCompleteConfiguration } from "../shared/components/autocomplete/AutoCompleteConfiguration";
|
||||||
|
import { DatasetWizardService } from "../services/dataset-wizard/dataset-wizard.service";
|
||||||
|
import { DataManagementPlanCriteria } from "../models/criteria/data-management-plan/DataManagementPlanCriteria";
|
||||||
|
import { DataManagementPlanModel } from "../models/data-managemnt-plans/DataManagementPlanModel";
|
||||||
|
import { JsonSerializer } from "../utilities/JsonSerializer";
|
||||||
|
import { Observable } from "rxjs/Observable";
|
||||||
|
import { RequestItem } from "../models/criteria/RequestItem";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-wizard-component',
|
selector: 'app-dataset-wizard-component',
|
||||||
templateUrl: 'dataset-wizard.component.html',
|
templateUrl: 'dataset-wizard.component.html',
|
||||||
styleUrls: ['./dataset-wizard.component.scss'],
|
styleUrls: ['./dataset-wizard.component.scss'],
|
||||||
providers: [DataManagementPlanService],
|
providers: [DatasetWizardService],
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class DatasetWizardComponent implements AfterViewInit {
|
export class DatasetWizardComponent implements AfterViewInit {
|
||||||
|
|
||||||
|
dmpAutoCompleteConfiguration: AutoCompleteConfiguration;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dataManagementPlanService: DataManagementPlanService,
|
private datasetWizardService: DatasetWizardService,
|
||||||
private formBuilder: FormBuilder
|
private formBuilder: FormBuilder
|
||||||
) {
|
) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
isLinear = false;
|
isLinear = false;
|
||||||
firstFormGroup: FormGroup;
|
firstStepFormGroup: FormGroup;
|
||||||
secondFormGroup: FormGroup;
|
secondFormGroup: FormGroup;
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.firstFormGroup = this.formBuilder.group({
|
let dmpRequestItem: RequestItem<DataManagementPlanCriteria> = new RequestItem();
|
||||||
firstCtrl: ['', Validators.required]
|
dmpRequestItem.criteria = new DataManagementPlanCriteria();
|
||||||
|
this.dmpAutoCompleteConfiguration = new AutoCompleteConfiguration(this.datasetWizardService.userDmps.bind(this.datasetWizardService), dmpRequestItem);
|
||||||
|
|
||||||
|
this.firstStepFormGroup = this.formBuilder.group({
|
||||||
|
dataManagementPlan: ['dataManagementPlan', Validators.required]
|
||||||
});
|
});
|
||||||
this.secondFormGroup = this.formBuilder.group({
|
this.secondFormGroup = this.formBuilder.group({
|
||||||
secondCtrl: ['', Validators.required]
|
secondCtrl: ['', Validators.required]
|
||||||
|
@ -53,8 +64,6 @@ export class DatasetWizardComponent implements AfterViewInit {
|
||||||
// });
|
// });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
public cancel(): void {
|
public cancel(): void {
|
||||||
//this.router.navigate(['/dataManagementPlans']);
|
//this.router.navigate(['/dataManagementPlans']);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { ValidationContext } from "../../utilities/validators/ValidationContext"
|
||||||
import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms";
|
import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms";
|
||||||
import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator";
|
import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator";
|
||||||
import { BaseErrorModel } from "../error/BaseErrorModel";
|
import { BaseErrorModel } from "../error/BaseErrorModel";
|
||||||
import { AutoCompleteItem } from "../../shared/components/autocomplete/AutoCompleteItem";
|
|
||||||
import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel";
|
import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel";
|
||||||
import { ProjectModel } from "../projects/ProjectModel";
|
import { ProjectModel } from "../projects/ProjectModel";
|
||||||
import { OrganisationModel } from "../organisation/OrganisationModel";
|
import { OrganisationModel } from "../organisation/OrganisationModel";
|
||||||
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
|
||||||
|
// export class DatasetWizardModel implements Serializable<DatasetWizardModel> {
|
||||||
|
// public id: String;
|
||||||
|
// public label: String;
|
||||||
|
// public previous: String;
|
||||||
|
// public version: number;
|
||||||
|
// public status: String;
|
||||||
|
// public description: String;
|
||||||
|
// public project: ProjectModel;
|
||||||
|
// public organisations: OrganisationModel[] = [];
|
||||||
|
// public researchers: ResearcherModel[] = [];
|
||||||
|
|
||||||
|
// public errorModel: BaseErrorModel = new BaseErrorModel();
|
||||||
|
|
||||||
|
// fromJSONObject(item: any): DataManagementPlanModel {
|
||||||
|
// this.id = item.id;
|
||||||
|
// this.label = item.label;
|
||||||
|
// this.previous = item.previous;
|
||||||
|
// this.version = item.version;
|
||||||
|
// this.status = item.status;
|
||||||
|
// this.description = item.description;
|
||||||
|
// this.project = new JsonSerializer<ProjectModel>().fromJSONObject(item.project, ProjectModel);
|
||||||
|
// this.organisations = new JsonSerializer<OrganisationModel>().fromJSONArray(item.organisations, OrganisationModel);
|
||||||
|
// this.researchers = new JsonSerializer<ResearcherModel>().fromJSONArray(item.researchers, ResearcherModel);
|
||||||
|
|
||||||
|
// return this;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// buildForm(context: ValidationContext = null, disabled: boolean = false): FormGroup {
|
||||||
|
// if (context == null) { context = this.createValidationContext(); }
|
||||||
|
|
||||||
|
// const formGroup = new FormBuilder().group({
|
||||||
|
// label: [{ value: this.label, disabled: disabled }, context.getValidation('label').validators],
|
||||||
|
// previous: [{ value: this.previous, disabled: disabled }, context.getValidation('previous').validators],
|
||||||
|
// version: [{ value: this.version, disabled: disabled }, context.getValidation('version').validators],
|
||||||
|
// status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
|
||||||
|
// description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
|
||||||
|
// project: [{ value: this.project, disabled: disabled }, context.getValidation('project').validators],
|
||||||
|
// organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('description').validators],
|
||||||
|
// researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
|
||||||
|
// });
|
||||||
|
|
||||||
|
// return formGroup;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// createValidationContext(): ValidationContext {
|
||||||
|
// const baseContext: ValidationContext = new ValidationContext();
|
||||||
|
// baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'label')] });
|
||||||
|
// baseContext.validation.push({ key: 'previous', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'previous')] });
|
||||||
|
// baseContext.validation.push({ key: 'version', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'version')] });
|
||||||
|
// baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'status')] });
|
||||||
|
// baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'description')] });
|
||||||
|
// baseContext.validation.push({ key: 'project', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'project')] });
|
||||||
|
// baseContext.validation.push({ key: 'organisations', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'organisations')] });
|
||||||
|
// baseContext.validation.push({ key: 'researchers', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'researchers')] });
|
||||||
|
|
||||||
|
// return baseContext;
|
||||||
|
// }
|
||||||
|
// }
|
|
@ -3,7 +3,6 @@ import { ValidationContext } from "../../utilities/validators/ValidationContext"
|
||||||
import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms";
|
import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms";
|
||||||
import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator";
|
import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator";
|
||||||
import { BaseErrorModel } from "../error/BaseErrorModel";
|
import { BaseErrorModel } from "../error/BaseErrorModel";
|
||||||
import { AutoCompleteItem } from "../../shared/components/autocomplete/AutoCompleteItem";
|
|
||||||
import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel";
|
import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel";
|
||||||
import { ServiceModel } from "../services/ServiceModel";
|
import { ServiceModel } from "../services/ServiceModel";
|
||||||
import { JsonSerializer } from "../../utilities/JsonSerializer";
|
import { JsonSerializer } from "../../utilities/JsonSerializer";
|
||||||
|
|
|
@ -3,17 +3,15 @@ import { Serializable } from "../Serializable";
|
||||||
|
|
||||||
export class OrganisationModel implements Serializable<OrganisationModel> {
|
export class OrganisationModel implements Serializable<OrganisationModel> {
|
||||||
public id: String;
|
public id: String;
|
||||||
public label: String;
|
public name: String;
|
||||||
public abbreviation: String;
|
public description: String;
|
||||||
public reference: String;
|
public reference: String;
|
||||||
public uri: String;
|
|
||||||
|
|
||||||
fromJSONObject(item: any): OrganisationModel {
|
fromJSONObject(item: any): OrganisationModel {
|
||||||
this.id = item.id;
|
this.id = item.id;
|
||||||
this.label = item.label;
|
this.name = item.name;
|
||||||
this.abbreviation = item.abbreviation;
|
this.description = item.abbreviation;
|
||||||
this.reference = item.reference;
|
this.reference = item.reference;
|
||||||
this.uri = item.uri;
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,13 +2,13 @@ import { Serializable } from "../Serializable";
|
||||||
|
|
||||||
export class ResearcherModel implements Serializable<ResearcherModel> {
|
export class ResearcherModel implements Serializable<ResearcherModel> {
|
||||||
public id: String;
|
public id: String;
|
||||||
public label: String;
|
public name: String;
|
||||||
public uri: String;
|
public uri: String;
|
||||||
public email: String;
|
public email: String;
|
||||||
|
|
||||||
fromJSONObject(item: any): ResearcherModel {
|
fromJSONObject(item: any): ResearcherModel {
|
||||||
this.id = item.id;
|
this.id = item.id;
|
||||||
this.label = item.label;
|
this.name = item.name;
|
||||||
this.email = item.email;
|
this.email = item.email;
|
||||||
this.uri = item.uri;
|
this.uri = item.uri;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
import 'rxjs/add/operator/map';
|
||||||
|
import { HttpHeaders } from '@angular/common/http';
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HostConfiguration } from './../../app.constants';
|
||||||
|
import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
|
||||||
|
import { Observable } from 'rxjs/Observable';
|
||||||
|
import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
|
||||||
|
import { DataManagementPlanCriteria } from '../../models/criteria/data-management-plan/DataManagementPlanCriteria';
|
||||||
|
import { RequestItem } from '../../models/criteria/RequestItem';
|
||||||
|
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class DatasetWizardService {
|
||||||
|
|
||||||
|
private actionUrl: string;
|
||||||
|
private headers: HttpHeaders;
|
||||||
|
|
||||||
|
constructor(private http: BaseHttpService) {
|
||||||
|
|
||||||
|
this.actionUrl = HostConfiguration.Server + 'datasetwizard/';
|
||||||
|
|
||||||
|
this.headers = new HttpHeaders();
|
||||||
|
this.headers = this.headers.set('Content-Type', 'application/json');
|
||||||
|
this.headers = this.headers.set('Accept', 'application/json');
|
||||||
|
}
|
||||||
|
|
||||||
|
public userDmps(criteria: RequestItem<DataManagementPlanCriteria>): Observable<DataManagementPlanModel[]> {
|
||||||
|
return this.http.post<DataManagementPlanModel[]>(this.actionUrl + 'userDmps', criteria, { headers: this.headers });
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,10 +1,11 @@
|
||||||
import { BaseCriteria } from "../../../models/criteria/BaseCriteria";
|
import { BaseCriteria } from "../../../models/criteria/BaseCriteria";
|
||||||
|
import { RequestItem } from "../../../models/criteria/RequestItem";
|
||||||
|
|
||||||
export class AutoCompleteConfiguration {
|
export class AutoCompleteConfiguration {
|
||||||
public callback: Function;
|
public callback: Function;
|
||||||
public criteria: BaseCriteria;
|
public requestItem: RequestItem<any>;
|
||||||
constructor(callback: Function, criteria: BaseCriteria) {
|
constructor(callback: Function, requestItem: RequestItem<any>) {
|
||||||
this.callback = callback;
|
this.callback = callback;
|
||||||
this.criteria = criteria;
|
this.requestItem = requestItem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
import { FormGenerator } from "../../../utilities/forms/FormGenerator";
|
|
||||||
import { ValidationContext } from "../../../utilities/validators/ValidationContext";
|
|
||||||
import { FormBuilder, FormGroup } from "@angular/forms";
|
|
||||||
|
|
||||||
export class AutoCompleteItem implements FormGenerator {
|
|
||||||
|
|
||||||
public value: string;
|
|
||||||
public text: string;
|
|
||||||
public description: string;
|
|
||||||
constructor(value: string, text: string, description: string) {
|
|
||||||
this.value = value;
|
|
||||||
this.text = text;
|
|
||||||
this.description = description;
|
|
||||||
}
|
|
||||||
|
|
||||||
buildForm(context: ValidationContext, disabled: boolean = false): FormGroup {
|
|
||||||
return new FormBuilder().group({
|
|
||||||
value: [{ value: this.value, disabled: disabled }, context.getValidation('value').validators],
|
|
||||||
text: [{ value: this.text, disabled: disabled }, context.getValidation('text').validators],
|
|
||||||
description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div [formGroup]="form" class="autocomplete">
|
<!-- <div [formGroup]="form" class="autocomplete">
|
||||||
<table class="full-width">
|
<table class="full-width">
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
@ -22,4 +22,18 @@
|
||||||
{{ option.text }} {{option.description?'['+option.description+']':''}}
|
{{ option.text }} {{option.description?'['+option.description+']':''}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-autocomplete>
|
</mat-autocomplete>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
|
<mat-form-field>
|
||||||
|
<input matInput [matAutocomplete]="auto" [formControl]="control" placeholder="{{placeholder}}" [required]="required">
|
||||||
|
<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-option *ngFor="let item of filteredItems | async" [value]="item">
|
||||||
|
<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-autocomplete>
|
||||||
|
</mat-form-field>
|
|
@ -5,7 +5,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||||
import 'rxjs/add/operator/debounceTime';
|
import 'rxjs/add/operator/debounceTime';
|
||||||
import 'rxjs/add/operator/map';
|
import 'rxjs/add/operator/map';
|
||||||
import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
|
import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
|
||||||
import { AutoCompleteItem } from './AutoCompleteItem';
|
|
||||||
import { ErrorStateMatcher } from '@angular/material';
|
import { ErrorStateMatcher } from '@angular/material';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -18,92 +17,117 @@ export class AutocompleteComponent implements OnInit {
|
||||||
configuration: AutoCompleteConfiguration;
|
configuration: AutoCompleteConfiguration;
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
mapper: Function;
|
titleKey: String;
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
typeaheadMS: number;
|
subtitleKey: String;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
delay: number = 700;
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
placeholder: String;
|
placeholder: String;
|
||||||
|
|
||||||
@Input()
|
filteredItems: Observable<any[]>;
|
||||||
validationErrorString: String;
|
|
||||||
|
|
||||||
public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();
|
// @Input()
|
||||||
|
// validationErrorString: String;
|
||||||
|
|
||||||
|
// public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
required: boolean;
|
required: boolean;
|
||||||
|
|
||||||
@Input() selectedDropdownItem: AutoCompleteItem;
|
// @Input() selectedDropdownItem: AutoCompleteItem;
|
||||||
@Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();
|
// @Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();
|
||||||
|
|
||||||
@Output()
|
// @Output()
|
||||||
output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();
|
// output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();
|
||||||
|
|
||||||
@Input() form: FormGroup;
|
@Input() control: FormControl;
|
||||||
|
|
||||||
@Input() createNew = false;
|
// @Input() createNew = false;
|
||||||
//term = new FormControl();
|
// //term = new FormControl();
|
||||||
@Input()
|
// @Input()
|
||||||
ClickFunctionCall: Function;
|
// ClickFunctionCall: Function;
|
||||||
|
|
||||||
loading = false;
|
loading = false;
|
||||||
|
|
||||||
options: AutoCompleteItem[];
|
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
const valueChanges = this.form.controls['text'].valueChanges.share();
|
|
||||||
|
const valueChanges = this.control.valueChanges.share();
|
||||||
valueChanges.subscribe(searchTerm => {
|
valueChanges.subscribe(searchTerm => {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
if (this.form.controls['value'].value) {
|
if (this.control.value) {
|
||||||
this.resetFormGroupValue();
|
this.resetFormControlValue();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
this.filteredItems = 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)
|
||||||
|
})
|
||||||
|
|
||||||
valueChanges
|
// const valueChanges = this.form.controls['text'].valueChanges.share();
|
||||||
.debounceTime(this.typeaheadMS)
|
// valueChanges.subscribe(searchTerm => {
|
||||||
.subscribe(searchTerm => {
|
// this.loading = true;
|
||||||
if (typeof searchTerm === 'string') {
|
// if (this.form.controls['value'].value) {
|
||||||
this.inputOnChange(searchTerm)
|
// this.resetFormGroupValue();
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
|
// valueChanges
|
||||||
|
// .debounceTime(this.typeaheadMS)
|
||||||
|
// .subscribe(searchTerm => {
|
||||||
|
// if (typeof searchTerm === 'string') {
|
||||||
|
// this.inputOnChange(searchTerm)
|
||||||
|
// }
|
||||||
|
// });
|
||||||
}
|
}
|
||||||
|
|
||||||
resetFormGroupValue() {
|
resetFormControlValue() {
|
||||||
this.form.patchValue({ value: null }, { emitEvent: false });
|
//this.control.setValue(null, { emitEvent: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
// listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
|
// // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
|
||||||
// return (item as DropdownListingItem).toDropdownList();
|
// // 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) {
|
// inputOnChange(term: string) {
|
||||||
this.form.patchValue(event.option.value, { emitEvent: false });
|
// //this.form.patchValue({ value: null, description: '', text: '' });
|
||||||
this.selectedDropdownItemChange.emit(event.option.value);
|
// //this.form.updateValueAndValidity();
|
||||||
//this.form.updateValueAndValidity();
|
// this.configuration.criteria.like = term;
|
||||||
this.options = [event.option.value];
|
// this.configuration.callback(this.configuration.criteria)
|
||||||
this.loading = false;
|
// .map((res: any) => this.mapper(res))
|
||||||
}
|
// .subscribe(
|
||||||
|
// (res: AutoCompleteItem[]) => {
|
||||||
|
// this.options = res;
|
||||||
|
// },
|
||||||
|
// null,
|
||||||
|
// () => { this.loading = false });
|
||||||
|
// }
|
||||||
|
|
||||||
inputOnChange(term: string) {
|
displayWith(value: any): String {
|
||||||
//this.form.patchValue({ value: null, description: '', text: '' });
|
return value['' + this.titleKey];
|
||||||
//this.form.updateValueAndValidity();
|
|
||||||
this.configuration.criteria.like = term;
|
|
||||||
this.configuration.callback(this.configuration.criteria)
|
|
||||||
.map((res: any) => this.mapper(res))
|
|
||||||
.subscribe(
|
|
||||||
(res: AutoCompleteItem[]) => {
|
|
||||||
this.options = res;
|
|
||||||
},
|
|
||||||
null,
|
|
||||||
() => { this.loading = false });
|
|
||||||
}
|
|
||||||
|
|
||||||
displayFn(item: AutoCompleteItem): string {
|
|
||||||
return item.text ? item.text : '';
|
|
||||||
}
|
}
|
||||||
|
// displayFn(item: AutoCompleteItem): string {
|
||||||
|
// return item.text ? item.text : '';
|
||||||
|
// }
|
||||||
|
|
||||||
//fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean {
|
//fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean {
|
||||||
// return this.errorStateMatcher(control, form);
|
// return this.errorStateMatcher(control, form);
|
||||||
|
|
Loading…
Reference in New Issue