From 7ac0cde7c11d383d78efa41320794eaa03eea9da Mon Sep 17 00:00:00 2001 From: Diamadis Tziotzios Date: Wed, 20 Dec 2017 15:34:32 +0200 Subject: [PATCH] no message --- dmp-frontend/.vscode/launch.json | 35 +++++ dmp-frontend/src/app/app.module.ts | 4 +- .../dataset-wizard.component.html | 11 +- .../dataset-wizard.component.ts | 27 ++-- .../DataManagementPlanModel.ts | 1 - .../dataset-wizard/DatasetWizardModel.ts | 60 ++++++++ .../src/app/models/datasets/DatasetModel.ts | 1 - .../models/organisation/OrganisationModel.ts | 10 +- .../app/models/researcher/ResearcherModel.ts | 4 +- .../dataset-wizard/dataset-wizard.service.ts | 30 ++++ .../autocomplete/AutoCompleteConfiguration.ts | 7 +- .../autocomplete/AutoCompleteItem.ts | 23 ---- .../autocomplete/autocomplete.component.html | 18 ++- .../autocomplete/autocomplete.component.ts | 130 +++++++++++------- 14 files changed, 255 insertions(+), 106 deletions(-) create mode 100644 dmp-frontend/.vscode/launch.json create mode 100644 dmp-frontend/src/app/models/dataset-wizard/DatasetWizardModel.ts create mode 100644 dmp-frontend/src/app/services/dataset-wizard/dataset-wizard.service.ts delete mode 100644 dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteItem.ts diff --git a/dmp-frontend/.vscode/launch.json b/dmp-frontend/.vscode/launch.json new file mode 100644 index 000000000..2ed69a337 --- /dev/null +++ b/dmp-frontend/.vscode/launch.json @@ -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"] + } + ] + } \ No newline at end of file diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index 2f7a4acd4..aa30e6215 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -50,6 +50,7 @@ import { FigurecardComponent } from './shared/components/figurecard/figurecard.c import { DatasetListingComponent } from './datasets/dataset-listing.component'; import { DatasetEditorComponent } from './datasets/editor/dataset-editor.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, DatasetWizardComponent, FigurecardComponent, - DatasetEditorComponent + DatasetEditorComponent, + AutocompleteComponent ], imports: [ BrowserModule, 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 06a44a8f1..d79bad557 100644 --- a/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html +++ b/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html @@ -1,11 +1,12 @@
- -
+ + Fill out your name - - - + + + {{firstStepFormGroup.value | json}}
diff --git a/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.ts b/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.ts index 641391730..bfd491a6a 100644 --- a/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.ts +++ b/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.ts @@ -1,32 +1,43 @@ import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core"; import { DataManagementPlanService } from "../services/data-management-plan/data-management-plan.service"; 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({ selector: 'app-dataset-wizard-component', templateUrl: 'dataset-wizard.component.html', styleUrls: ['./dataset-wizard.component.scss'], - providers: [DataManagementPlanService], + providers: [DatasetWizardService], encapsulation: ViewEncapsulation.None }) export class DatasetWizardComponent implements AfterViewInit { + dmpAutoCompleteConfiguration: AutoCompleteConfiguration; + constructor( - private dataManagementPlanService: DataManagementPlanService, + private datasetWizardService: DatasetWizardService, private formBuilder: FormBuilder ) { } isLinear = false; - firstFormGroup: FormGroup; + firstStepFormGroup: FormGroup; secondFormGroup: FormGroup; ngOnInit() { - this.firstFormGroup = this.formBuilder.group({ - firstCtrl: ['', Validators.required] + let dmpRequestItem: RequestItem = new RequestItem(); + 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({ secondCtrl: ['', Validators.required] @@ -53,8 +64,6 @@ export class DatasetWizardComponent implements AfterViewInit { // }); } - - public cancel(): void { //this.router.navigate(['/dataManagementPlans']); } diff --git a/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts b/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts index 86512ab7e..a41669d0c 100644 --- a/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts +++ b/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts @@ -3,7 +3,6 @@ import { ValidationContext } from "../../utilities/validators/ValidationContext" import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms"; import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator"; import { BaseErrorModel } from "../error/BaseErrorModel"; -import { AutoCompleteItem } from "../../shared/components/autocomplete/AutoCompleteItem"; import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel"; import { ProjectModel } from "../projects/ProjectModel"; import { OrganisationModel } from "../organisation/OrganisationModel"; diff --git a/dmp-frontend/src/app/models/dataset-wizard/DatasetWizardModel.ts b/dmp-frontend/src/app/models/dataset-wizard/DatasetWizardModel.ts new file mode 100644 index 000000000..51f73d11a --- /dev/null +++ b/dmp-frontend/src/app/models/dataset-wizard/DatasetWizardModel.ts @@ -0,0 +1,60 @@ + + +// export class DatasetWizardModel implements Serializable { +// 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().fromJSONObject(item.project, ProjectModel); +// this.organisations = new JsonSerializer().fromJSONArray(item.organisations, OrganisationModel); +// this.researchers = new JsonSerializer().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; +// } +// } \ No newline at end of file diff --git a/dmp-frontend/src/app/models/datasets/DatasetModel.ts b/dmp-frontend/src/app/models/datasets/DatasetModel.ts index 37974a7f0..07dbbc9ca 100644 --- a/dmp-frontend/src/app/models/datasets/DatasetModel.ts +++ b/dmp-frontend/src/app/models/datasets/DatasetModel.ts @@ -3,7 +3,6 @@ import { ValidationContext } from "../../utilities/validators/ValidationContext" import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms"; import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator"; import { BaseErrorModel } from "../error/BaseErrorModel"; -import { AutoCompleteItem } from "../../shared/components/autocomplete/AutoCompleteItem"; import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel"; import { ServiceModel } from "../services/ServiceModel"; import { JsonSerializer } from "../../utilities/JsonSerializer"; diff --git a/dmp-frontend/src/app/models/organisation/OrganisationModel.ts b/dmp-frontend/src/app/models/organisation/OrganisationModel.ts index bb3abf540..16bf9752a 100644 --- a/dmp-frontend/src/app/models/organisation/OrganisationModel.ts +++ b/dmp-frontend/src/app/models/organisation/OrganisationModel.ts @@ -3,17 +3,15 @@ import { Serializable } from "../Serializable"; export class OrganisationModel implements Serializable { public id: String; - public label: String; - public abbreviation: String; + public name: String; + public description: String; public reference: String; - public uri: String; fromJSONObject(item: any): OrganisationModel { this.id = item.id; - this.label = item.label; - this.abbreviation = item.abbreviation; + this.name = item.name; + this.description = item.abbreviation; this.reference = item.reference; - this.uri = item.uri; return this; } diff --git a/dmp-frontend/src/app/models/researcher/ResearcherModel.ts b/dmp-frontend/src/app/models/researcher/ResearcherModel.ts index 98b547172..03cbace90 100644 --- a/dmp-frontend/src/app/models/researcher/ResearcherModel.ts +++ b/dmp-frontend/src/app/models/researcher/ResearcherModel.ts @@ -2,13 +2,13 @@ import { Serializable } from "../Serializable"; export class ResearcherModel implements Serializable { public id: String; - public label: String; + public name: String; public uri: String; public email: String; fromJSONObject(item: any): ResearcherModel { this.id = item.id; - this.label = item.label; + this.name = item.name; this.email = item.email; this.uri = item.uri; diff --git a/dmp-frontend/src/app/services/dataset-wizard/dataset-wizard.service.ts b/dmp-frontend/src/app/services/dataset-wizard/dataset-wizard.service.ts new file mode 100644 index 000000000..d5b93f2d7 --- /dev/null +++ b/dmp-frontend/src/app/services/dataset-wizard/dataset-wizard.service.ts @@ -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): Observable { + return this.http.post(this.actionUrl + 'userDmps', criteria, { headers: this.headers }); + } +} diff --git a/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteConfiguration.ts b/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteConfiguration.ts index bf4866ea5..7dd457ec4 100644 --- a/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteConfiguration.ts +++ b/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteConfiguration.ts @@ -1,10 +1,11 @@ import { BaseCriteria } from "../../../models/criteria/BaseCriteria"; +import { RequestItem } from "../../../models/criteria/RequestItem"; export class AutoCompleteConfiguration { public callback: Function; - public criteria: BaseCriteria; - constructor(callback: Function, criteria: BaseCriteria) { + public requestItem: RequestItem; + constructor(callback: Function, requestItem: RequestItem) { this.callback = callback; - this.criteria = criteria; + this.requestItem = requestItem; } } diff --git a/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteItem.ts b/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteItem.ts deleted file mode 100644 index 919ddcdef..000000000 --- a/dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteItem.ts +++ /dev/null @@ -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] - }); - } -} 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 eabd5c3dd..5ff9061eb 100644 --- a/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html +++ b/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html @@ -1,4 +1,4 @@ -
+ + + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + {{errorString}} + + + + {{ 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 c347d8a10..4e05f6fbf 100644 --- a/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts +++ b/dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts @@ -5,7 +5,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/map'; import { AutoCompleteConfiguration } from './AutoCompleteConfiguration'; -import { AutoCompleteItem } from './AutoCompleteItem'; import { ErrorStateMatcher } from '@angular/material'; @Component({ @@ -18,92 +17,117 @@ export class AutocompleteComponent implements OnInit { configuration: AutoCompleteConfiguration; @Input() - mapper: Function; + titleKey: String; @Input() - typeaheadMS: number; + subtitleKey: String; + + @Input() + delay: number = 700; @Input() placeholder: String; - @Input() - validationErrorString: String; + filteredItems: Observable; - public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher(); + // @Input() + // validationErrorString: String; + + // public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher(); @Input() required: boolean; - @Input() selectedDropdownItem: AutoCompleteItem; - @Output() selectedDropdownItemChange = new EventEmitter(); + // @Input() selectedDropdownItem: AutoCompleteItem; + // @Output() selectedDropdownItemChange = new EventEmitter(); - @Output() - output: EventEmitter = new EventEmitter(); + // @Output() + // output: EventEmitter = new EventEmitter(); - @Input() form: FormGroup; + @Input() control: FormControl; - @Input() createNew = false; - //term = new FormControl(); - @Input() - ClickFunctionCall: Function; + // @Input() createNew = false; + // //term = new FormControl(); + // @Input() + // ClickFunctionCall: Function; loading = false; - options: AutoCompleteItem[]; constructor() { } ngOnInit() { - const valueChanges = this.form.controls['text'].valueChanges.share(); + + const valueChanges = this.control.valueChanges.share(); valueChanges.subscribe(searchTerm => { this.loading = true; - if (this.form.controls['value'].value) { - this.resetFormGroupValue(); + if (this.control.value) { + 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 - .debounceTime(this.typeaheadMS) - .subscribe(searchTerm => { - if (typeof searchTerm === 'string') { - this.inputOnChange(searchTerm) - } - }); + // const valueChanges = this.form.controls['text'].valueChanges.share(); + // valueChanges.subscribe(searchTerm => { + // this.loading = true; + // if (this.form.controls['value'].value) { + // this.resetFormGroupValue(); + // } + // }); + + // valueChanges + // .debounceTime(this.typeaheadMS) + // .subscribe(searchTerm => { + // if (typeof searchTerm === 'string') { + // this.inputOnChange(searchTerm) + // } + // }); } - resetFormGroupValue() { - this.form.patchValue({ value: null }, { emitEvent: false }); + resetFormControlValue() { + //this.control.setValue(null, { emitEvent: false }); } - // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem { - // return (item as DropdownListingItem).toDropdownList(); + // // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem { + // // 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.form.patchValue(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: '' }); + // //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 }); + // } - inputOnChange(term: string) { - //this.form.patchValue({ value: null, description: '', text: '' }); - //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 : ''; + displayWith(value: any): String { + return value['' + this.titleKey]; } + // displayFn(item: AutoCompleteItem): string { + // return item.text ? item.text : ''; + // } //fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean { // return this.errorStateMatcher(control, form);