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-18 13:24:12 +02:00
parent 4852dcf0cf
commit bf6247a091
9 changed files with 164 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dmp-frontend/.angular-cli.json
View File

@ -19,12 +19,13 @@
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"./../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
],
"scripts": [
"./../node_modules/bootstrap/dist/js/bootstrap.min.js",
"./assets/xml2json.min.js"
],
"./../node_modules/bootstrap/dist/js/bootstrap.min.js",
"./assets/xml2json.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
@ -60,4 +61,4 @@
"styleExt": "css",
"component": {}
}
}
}

2
dmp-frontend/src/app/datasets_new/dataset-listing.component.ts
View File

@ -97,7 +97,7 @@ export class DatasetDataSource extends DataSource<DatasetListingModel> {
});
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
const request = new DataTableRequest(startIndex, this._paginator.pageSize);
request.projectCriteria = this._criteria.getFormData();
request.criteria = this._criteria.getFormData();
return this._service.getPaged(request);
})
.catch((error: any) => {

48
dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
View File

@ -1,26 +1,25 @@
<div class="project-editor">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-title *ngIf="isNew">{{'PROJECT-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">{{'PROJECT-EDITOR.TITLE.EDIT' | translate}} {{project.label}}</mat-card-title>
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">{{'DMP-EDITOR.TITLE.EDIT' | translate}} {{project.label}}</mat-card-title>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
required>
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
required>
<mat-error *ngIf="formGroup.get('abbreviation').errors?.backendError">{{baseErrorModel.abbreviation}}</mat-error>
<mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri" required>
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri" required>
<mat-error *ngIf="formGroup.get('uri').errors?.backendError">{{baseErrorModel.uri}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> -->
@ -29,7 +28,7 @@
<tr>
<td>
<mat-form-field>
<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}"
<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'DMP-EDITOR.FIELDS.START' | translate}}"
class="table-input" [matDatepicker]="startDate" formControlName="startDate" required>
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
@ -39,7 +38,7 @@
</td>
<td>
<mat-form-field>
<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}"
<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'DMP-EDITOR.FIELDS.END' | translate}}"
class="table-input" [matDatepicker]="endDate" formControlName="endDate" required>
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
@ -51,33 +50,48 @@
</table> -->
<mat-form-field class="full-width">
<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
required></textarea>
<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<td-chips [items]="filteredOrganisations" [debounce]="500" placeholder="Enter autocomplete strings" (inputChange)="filterOrganisations($event)"
requireMatch>
<td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
(inputChange)="filterOrganisations($event)" requireMatch>
<ng-template td-chip let-chip="chip">
<!-- <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.substring(0, 1).toUpperCase()}}</div> -->
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
{{option.name}}
{{option.name}}
</div>
</ng-template>
</ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
</td-chips>
<td-chips color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
(inputChange)="filterResearchers($event)" requireMatch>
<ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
{{option.name}}
</div>
</ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
</td-chips>
<div layout="row" class="full-width text-right" align="end">
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE' | translate}}</button>
<button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE' | translate}}</button>
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
<button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button>
</div>
</mat-card-content>
</mat-card>
</form>
<div *ngIf="formGroup"> {{ formGroup.value | json }}</div>
</div>

53
dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts
View File

@ -12,6 +12,7 @@ import { DataManagementPlanService } from "../../services/data-management-plan/d
import { DataManagementPlanModel } from "../../models/data-managemnt-plans/DataManagementPlanModel";
import { ServerService } from "../../services/server.service";
import { ExternalSourcesService } from "../../services/external-sources/external-sources.service";
import { ExternalSourcesItemModel } from "../../models/external-sources/ExternalSourcesItemModel";
@ -30,20 +31,8 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
filteringOrganisationsAsync: boolean = false;
filteringResearchersAsync: boolean = false;
filteredOrganisations: string[];
filteredResearchers: string[];
filterOrganisations(value: string): void {
this.filteredOrganisations = undefined;
if (value) {
this.filteringOrganisationsAsync = true;
this.externalSourcesService.searchDMPOrganizations(value).subscribe(organizations => {
this.filteredOrganisations = organizations;
this.filteringOrganisationsAsync = false;
});
}
}
filteredOrganisations: ExternalSourcesItemModel[];
filteredResearchers: ExternalSourcesItemModel[];
constructor(
private dataManagementPlanService: DataManagementPlanService,
@ -116,4 +105,40 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
public cancel(): void {
this.router.navigate(['/dataManagementPlans']);
}
filterOrganisations(value: string): void {
this.filteredOrganisations = undefined;
if (value) {
this.filteringOrganisationsAsync = true;
this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
this.filteredOrganisations = items;
this.filteringOrganisationsAsync = false;
// this.filteredOrganisations = items.filter((filteredObj: any) => {
// return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// });
});
}
}
filterResearchers(value: string): void {
this.filteredResearchers = undefined;
if (value) {
this.filteringResearchersAsync = true;
this.externalSourcesService.searchDMPResearchers(value).subscribe(items => {
this.filteredResearchers = items;
this.filteringResearchersAsync = false;
// this.filteredOrganisations = items.filter((filteredObj: any) => {
// return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// });
});
}
}
}

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

@ -4,6 +4,7 @@ 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";
export class DataManagementPlanModel implements Serializable<DataManagementPlanModel> {
public id: String;
@ -13,9 +14,8 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
public status: String;
public description: String;
public selectedProject: AutoCompleteItem;
// public selectedProjectReference: AutoCompleteItem;
// public selectedProjectReference: AutoCompleteItem;
public organisations: ExternalSourcesItemModel[] = [];
public researchers: ExternalSourcesItemModel[] = [];
public errorModel: BaseErrorModel = new BaseErrorModel();
@ -26,7 +26,7 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
this.version = item.version;
this.status = item.status;
this.description = item.description;
return this;
}
@ -39,6 +39,8 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
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],
organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('description').validators],
researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
});
return formGroup;
@ -51,6 +53,8 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
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: 'organisations', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'organisations')] });
baseContext.validation.push({ key: 'researchers', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'researchers')] });
return baseContext;
}

5
dmp-frontend/src/app/models/external-sources/ExternalSourcesItemModel.ts Normal file
View File

@ -0,0 +1,5 @@
export interface ExternalSourcesItemModel {
id: String;
name: String;
description: String;
}

21
dmp-frontend/src/app/services/external-sources/external-sources.service.ts
View File

@ -4,6 +4,7 @@ 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 { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
@Injectable()
@ -21,23 +22,23 @@ export class ExternalSourcesService {
this.headers = this.headers.set('Accept', 'application/json');
}
public searchDatasetRegistry(like: string) {
return this.http.get("registries" + "?query=" + like);
public searchDatasetRegistry(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "registries" + "?query=" + like, { headers: this.headers });
}
public searchDatasetRepository(like: string) {
return this.http.get("datarepos" + "?query=" + like);
public searchDatasetRepository(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "datarepos" + "?query=" + like, { headers: this.headers });
}
public searchDatasetService(like: string) {
return this.http.get("services" + "?query=" + like);
public searchDatasetService(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "services" + "?query=" + like, { headers: this.headers });
}
public searchDMPResearchers(like: string) {
return this.http.get("researchers" + "?query=" + like);
public searchDMPResearchers(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers });
}
public searchDMPOrganizations(like: string): Observable<any> {
return this.http.get<any>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
public searchDMPOrganizations(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
}
}

19
dmp-frontend/src/assets/lang/en.json
View File

@ -43,7 +43,7 @@
"EDIT": "Edit"
},
"FIELDS": {
"NAME": "New Project",
"NAME": "Name",
"ABBREVIATION": "Abbreviation",
"URI": "URI",
"START": "Start",
@ -56,6 +56,23 @@
"DELETE": "Delete"
}
},
"DMP-EDITOR": {
"TITLE": {
"NEW": "New Data Management Plan",
"EDIT": "Edit"
},
"FIELDS": {
"NAME": "Name",
"DESCRIPTION": "Description",
"ORGANISATIONS": "Organisations",
"RESEARCHERS": "Researchers"
},
"ACTIONS": {
"SAVE": "Save",
"CANCEL": "Cancel",
"DELETE": "Delete"
}
},
"CRITERIA": {
"FORMS": {
"PERIOD-FROM": "Start",

47
dmp-frontend/src/styles.scss
View File

@ -1,3 +1,48 @@
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
@import '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme';
@include mat-core();
// Define a theme.
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
// Include all theme styles for the components.
@include angular-material-theme($theme);
@include covalent-theme($theme);
/* dashboard */
.card{
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0,0,0, 0.87);
background: #fff;
}
.card-raised{
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 990px){
#sidebar, #nav-right, #nav-left-button{
display: none;
}
#menu{
display: inline;
}
#main-panel{
padding-left: 0;
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
transition: all 400ms;
}
}