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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -4,6 +4,7 @@ import { Injectable } from '@angular/core';
import { HostConfiguration } from './../../app.constants'; import { HostConfiguration } from './../../app.constants';
import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service'; import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
@Injectable() @Injectable()
@ -21,23 +22,23 @@ export class ExternalSourcesService {
this.headers = this.headers.set('Accept', 'application/json'); this.headers = this.headers.set('Accept', 'application/json');
} }
public searchDatasetRegistry(like: string) { public searchDatasetRegistry(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get("registries" + "?query=" + like); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "registries" + "?query=" + like, { headers: this.headers });
} }
public searchDatasetRepository(like: string) { public searchDatasetRepository(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get("datarepos" + "?query=" + like); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "datarepos" + "?query=" + like, { headers: this.headers });
} }
public searchDatasetService(like: string) { public searchDatasetService(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get("services" + "?query=" + like); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "services" + "?query=" + like, { headers: this.headers });
} }
public searchDMPResearchers(like: string) { public searchDMPResearchers(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get("researchers" + "?query=" + like); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers });
} }
public searchDMPOrganizations(like: string): Observable<any> { public searchDMPOrganizations(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<any>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers }); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
} }
} }

View File

@ -43,7 +43,7 @@
"EDIT": "Edit" "EDIT": "Edit"
}, },
"FIELDS": { "FIELDS": {
"NAME": "New Project", "NAME": "Name",
"ABBREVIATION": "Abbreviation", "ABBREVIATION": "Abbreviation",
"URI": "URI", "URI": "URI",
"START": "Start", "START": "Start",
@ -56,6 +56,23 @@
"DELETE": "Delete" "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": { "CRITERIA": {
"FORMS": { "FORMS": {
"PERIOD-FROM": "Start", "PERIOD-FROM": "Start",

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 '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme'; @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;
}
}