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 15:34:32 +02:00
parent 5d00d133c4
commit 7ac0cde7c1
14 changed files with 255 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
dmp-frontend/.vscode/launch.json vendored Normal file
View File

@ -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"]
}
]
}

4
dmp-frontend/src/app/app.module.ts
View File

@ -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,

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

@ -1,11 +1,12 @@
<div class="data-management-plan-editor">
<mat-horizontal-stepper [linear]="isLinear">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<mat-step [stepControl]="firstStepFormGroup">
<form [formGroup]="firstStepFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<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>

27
dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.ts
View File

@ -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<DataManagementPlanCriteria> = 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']);
}

1
dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts
View File

@ -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";

60
dmp-frontend/src/app/models/dataset-wizard/DatasetWizardModel.ts Normal file
View File

@ -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;
// }
// }

1
dmp-frontend/src/app/models/datasets/DatasetModel.ts
View File

@ -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";

10
dmp-frontend/src/app/models/organisation/OrganisationModel.ts
View File

@ -3,17 +3,15 @@ import { Serializable } from "../Serializable";
export class OrganisationModel implements Serializable<OrganisationModel> {
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;
}

4
dmp-frontend/src/app/models/researcher/ResearcherModel.ts
View File

@ -2,13 +2,13 @@ import { Serializable } from "../Serializable";
export class ResearcherModel implements Serializable<ResearcherModel> {
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;

30
dmp-frontend/src/app/services/dataset-wizard/dataset-wizard.service.ts Normal file
View File

@ -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 });
}
}

7
dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteConfiguration.ts
View File

@ -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<any>;
constructor(callback: Function, requestItem: RequestItem<any>) {
this.callback = callback;
this.criteria = criteria;
this.requestItem = requestItem;
}
}

23
dmp-frontend/src/app/shared/components/autocomplete/AutoCompleteItem.ts
View File

@ -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]
});
}
}

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

@ -1,4 +1,4 @@
<div [formGroup]="form" class="autocomplete">
<!-- <div [formGroup]="form" class="autocomplete">
<table class="full-width">
<tr>
<td>
@ -22,4 +22,18 @@
{{ option.text }} {{option.description?'['+option.description+']':''}}
</mat-option>
</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>

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

@ -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<any[]>;
public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();
// @Input()
// validationErrorString: String;
// public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();
@Input()
required: boolean;
@Input() selectedDropdownItem: AutoCompleteItem;
@Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();
// @Input() selectedDropdownItem: AutoCompleteItem;
// @Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();
@Output()
output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();
// @Output()
// output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();
@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);