Merge branch 'Development' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into Development
# Conflicts: # dmp-frontend/src/app/app.module.ts # dmp-frontend/src/index.html
This commit is contained in:
commit
86c988c840
|
@ -39,7 +39,8 @@
|
||||||
</div><!-- /.container-fluid -->
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main-window [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"></main-window>
|
<form-comp></form-comp>
|
||||||
|
<!-- <main-window [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"></main-window> -->
|
||||||
|
|
||||||
<app-main-sign-in [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]"></app-main-sign-in>
|
<app-main-sign-in [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]"></app-main-sign-in>
|
||||||
|
|
||||||
|
|
|
@ -61,6 +61,13 @@ import { DatareposEditorComponent } from './managers/datarepos-editor/datarepos-
|
||||||
import { DatasetprofileEditorComponent } from './managers/datasetprofile-editor/datasetprofile-editor.component';
|
import { DatasetprofileEditorComponent } from './managers/datasetprofile-editor/datasetprofile-editor.component';
|
||||||
import { DatasetProfileGUIEditorComponent } from './dataset-profile-gui-editor/dataset-profile-gui-editor.component';
|
import { DatasetProfileGUIEditorComponent } from './dataset-profile-gui-editor/dataset-profile-gui-editor.component';
|
||||||
|
|
||||||
|
import { FieldFormComponent } from './field-form/field-form.component';
|
||||||
|
import { FormComponent } from './formBuilder/form.component';
|
||||||
|
import { GroupFieldFormComponent } from './groupfield-form/groupfield-form.component';
|
||||||
|
import { RuleFormComponent } from './rule-component/rule.component';
|
||||||
|
import { SectionFormComponent } from './section-form/section-form.component';
|
||||||
|
import { CompositeFieldFormComponent } from './compositefield-form/compositefield-form.component';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -78,6 +85,12 @@ import { DatasetProfileGUIEditorComponent } from './dataset-profile-gui-editor/d
|
||||||
|
|
||||||
AppComponent,
|
AppComponent,
|
||||||
GooggleSignInComponent,
|
GooggleSignInComponent,
|
||||||
|
FieldFormComponent,
|
||||||
|
FormComponent,
|
||||||
|
GroupFieldFormComponent,
|
||||||
|
RuleFormComponent,
|
||||||
|
SectionFormComponent,
|
||||||
|
CompositeFieldFormComponent,
|
||||||
DatasetsViewerComponent,
|
DatasetsViewerComponent,
|
||||||
ProfileEditorComponent,
|
ProfileEditorComponent,
|
||||||
PropertiesEditorComponent,
|
PropertiesEditorComponent,
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
<div class= "container">
|
||||||
|
<h4>FieldSet</h4>
|
||||||
|
<div *ngFor="let field of dataModel.fields let i=index;">
|
||||||
|
<field-form [form]="form.get('fields').get(''+i)" [dataModel]="field"></field-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a (click)="addNewField()" style="cursor: pointer">
|
||||||
|
Add another field +
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { CompositeField } from '../models/CompositeField';
|
||||||
|
import { Field } from '../models/Field';
|
||||||
|
import { FormArray } from '@angular/forms/src/model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'compositefield-form',
|
||||||
|
templateUrl: './compositefield-form.component.html',
|
||||||
|
styleUrls: []
|
||||||
|
})
|
||||||
|
|
||||||
|
export class CompositeFieldFormComponent {
|
||||||
|
@Input() form: FormGroup;
|
||||||
|
@Input() dataModel: CompositeField;
|
||||||
|
|
||||||
|
constructon(){}
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.addNewField();
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewField(){
|
||||||
|
let field: Field = new Field();
|
||||||
|
this.dataModel.fields.push(field);
|
||||||
|
(<FormArray>this.form.get("fields")).push(field.buildForm());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,62 @@
|
||||||
|
<div>
|
||||||
|
<h4 style="text-decoration: underline;">Fields</h4>
|
||||||
|
<div [formGroup]="form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Title</label>
|
||||||
|
<input type="text" class="form-control" formControlName="title">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Id</label>
|
||||||
|
<input type="text" class="form-control" formControlName="id">
|
||||||
|
</div>
|
||||||
|
<div class="form-row col-md-4">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>View style</label>
|
||||||
|
<select class="form-control" formControlName="viewStyle">
|
||||||
|
<option>textarea</option>
|
||||||
|
<option>booleanDesicion</option>
|
||||||
|
<option>combobox</option>
|
||||||
|
<option>checkBox</option>
|
||||||
|
<option>freetext</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>description</label>
|
||||||
|
<input type="text" class="form-control" formControlName="description">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>extendedDescription</label>
|
||||||
|
<input type="text" class="form-control" formControlName="extendedDescription">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Ordinal</label>
|
||||||
|
<input type="number" class="form-control" formControlName="extendedDescription">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-12">
|
||||||
|
<label>Default Visibility</label>
|
||||||
|
<label class="radio-inline">
|
||||||
|
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> true
|
||||||
|
</label>
|
||||||
|
<label class="radio-inline">
|
||||||
|
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> false
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div *ngFor="let rule of dataModel.rules let i=index;">
|
||||||
|
<rule-form [form]="form.get('rules').get(''+i)" [dataModel]="rule"></rule-form>
|
||||||
|
</div>
|
||||||
|
<div style="padding-left: 15px;">
|
||||||
|
<a (click)="addNewRule(form)" style="cursor: pointer">
|
||||||
|
Add another rule +
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { Field } from '../models/Field';
|
||||||
|
import { Rule } from '../models/Rule';
|
||||||
|
import { FormArray } from '@angular/forms/src/model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'field-form',
|
||||||
|
templateUrl: './field-form.component.html',
|
||||||
|
styleUrls: []
|
||||||
|
})
|
||||||
|
|
||||||
|
export class FieldFormComponent {
|
||||||
|
@Input() form: FormGroup;
|
||||||
|
@Input() dataModel: Field;
|
||||||
|
|
||||||
|
constructon(){}
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.addNewRule();
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewRule(){
|
||||||
|
let rule: Rule = new Rule();
|
||||||
|
this.dataModel.rules.push(rule);
|
||||||
|
(<FormArray>this.form.get("rules")).push(rule.buildForm());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div class="container">
|
||||||
|
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||||
|
<div *ngFor="let section of dataModel.sections; let i=index;">
|
||||||
|
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section"></section-form>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top:20px; padding-left: 15px;">
|
||||||
|
<a (click)="addSection()" style="cursor: pointer">
|
||||||
|
Add another section +
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
|
||||||
|
<p>Form value: {{ form.value | json }}</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
|
import { SectionFormComponent } from '../section-form/section-form.component';
|
||||||
|
import { Section } from '../models/Section';
|
||||||
|
import { FieldGroup } from '../models/FieldGroup';
|
||||||
|
import { DatasetProfileModel } from '../models/DatasetProfileModel';
|
||||||
|
import { TestModel } from '../testModel/testModel';
|
||||||
|
import { FormArray } from '@angular/forms/src/model';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'form-comp',
|
||||||
|
templateUrl: './form.component.html',
|
||||||
|
styleUrls: []
|
||||||
|
})
|
||||||
|
|
||||||
|
export class FormComponent {
|
||||||
|
|
||||||
|
dataModel: DatasetProfileModel ;
|
||||||
|
form: FormGroup;
|
||||||
|
|
||||||
|
constructor(){
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.dataModel = new DatasetProfileModel();
|
||||||
|
this.dataModel = new JsonSerializer<DatasetProfileModel>().fromJSONObject(TestModel,DatasetProfileModel);
|
||||||
|
this.form = this.dataModel.buildForm();
|
||||||
|
this.addSection();
|
||||||
|
}
|
||||||
|
|
||||||
|
addSection(){
|
||||||
|
let section:Section = new Section();
|
||||||
|
this.dataModel.sections.push(section);
|
||||||
|
(<FormArray>this.form.get("sections")).push(section.buildForm());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,38 @@
|
||||||
|
<div class= "container">
|
||||||
|
<h4 style="text-decoration: underline;">GroupFields</h4>
|
||||||
|
<div [formGroup]="form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Title</label>
|
||||||
|
<input type="text" class="form-control" formControlName="title">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Id</label>
|
||||||
|
<input type="text" class="form-control" formControlName="id">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>defaultVisibility</label>
|
||||||
|
<input type="text" class="form-control" formControlName="defaultVisibility">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-6">
|
||||||
|
<label>description</label>
|
||||||
|
<input type="text" class="form-control" formControlName="description">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-6">
|
||||||
|
<label>extendedDescription</label>
|
||||||
|
<input type="text" class="form-control" formControlName="extendedDescription">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngFor="let field of dataModel.compositeFields let i=index;">
|
||||||
|
<compositefield-form [form]="form.get('compositeFields').get(''+i)" [dataModel]="field"></compositefield-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a (click)="addNewField()" style="cursor: pointer">
|
||||||
|
Add another field Set (CompositeField) +
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { FieldGroup } from '../models/FieldGroup';
|
||||||
|
import { CompositeField } from '../models/CompositeField';
|
||||||
|
import { FormArray } from '@angular/forms/src/model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'groupfield-form',
|
||||||
|
templateUrl: './groupfield-form.component.html',
|
||||||
|
styleUrls: []
|
||||||
|
})
|
||||||
|
|
||||||
|
export class GroupFieldFormComponent {
|
||||||
|
@Input() form: FormGroup;
|
||||||
|
@Input() dataModel: FieldGroup;
|
||||||
|
|
||||||
|
constructor(){}
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.addNewField();
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewField(){
|
||||||
|
let compositeField: CompositeField = new CompositeField();
|
||||||
|
this.dataModel.compositeFields.push(compositeField);
|
||||||
|
(<FormArray>this.form.get("compositeFields")).push(compositeField.buildForm());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { FormBuilder } from '@angular/forms';
|
||||||
|
export abstract class BaseModel{
|
||||||
|
public formBuilder:FormBuilder = new FormBuilder();
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import {Field} from './Field'
|
||||||
|
export class CompositeField extends BaseModel implements Serializable<CompositeField> {
|
||||||
|
public fields:Array<Field> = new Array<Field>();
|
||||||
|
|
||||||
|
|
||||||
|
fromJSONObject(item:any):CompositeField{
|
||||||
|
|
||||||
|
this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields,Field);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm():FormGroup{
|
||||||
|
let formGroup = this.formBuilder.group({});
|
||||||
|
|
||||||
|
let fieldsFormArray = new Array<FormGroup>();
|
||||||
|
this.fields.forEach(item => {
|
||||||
|
let form: FormGroup = item.buildForm();
|
||||||
|
fieldsFormArray.push(form)
|
||||||
|
})
|
||||||
|
formGroup.addControl('fields', this.formBuilder.array(fieldsFormArray));
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
import { FormGenerator } from './interfaces/FormGenerator';
|
||||||
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
|
import { Section } from './Section';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
export class DatasetProfileModel extends BaseModel implements Serializable<DatasetProfileModel>,FormGenerator<FormGroup>{
|
||||||
|
|
||||||
|
public sections:Array<Section> = new Array<Section>();
|
||||||
|
|
||||||
|
fromJSONObject(item:any):DatasetProfileModel{
|
||||||
|
this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections,Section);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm():FormGroup{
|
||||||
|
let formGroup:FormGroup = new FormBuilder().group({});
|
||||||
|
let sectionsFormArray = new Array<FormGroup>();
|
||||||
|
this.sections.forEach(item => {
|
||||||
|
let form: FormGroup = item.buildForm();
|
||||||
|
sectionsFormArray.push(form)
|
||||||
|
})
|
||||||
|
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { FormGenerator } from './interfaces/FormGenerator';
|
||||||
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
import {Rule} from './Rule'
|
||||||
|
|
||||||
|
export class Field extends BaseModel implements Serializable<Field>,FormGenerator<FormGroup>{
|
||||||
|
|
||||||
|
public id:string;
|
||||||
|
public title:string;
|
||||||
|
public value:string;
|
||||||
|
public description:string;
|
||||||
|
public extendedDescription:string;
|
||||||
|
public viewStyle:string;
|
||||||
|
public defaultVisibility:boolean;
|
||||||
|
public page:number;
|
||||||
|
public rules: Array<Rule> = new Array<Rule>();
|
||||||
|
|
||||||
|
fromJSONObject(item:any):Field{
|
||||||
|
this.id = item.id;
|
||||||
|
this.title = item.title;
|
||||||
|
this.value = item.value;
|
||||||
|
this.description = item.description;
|
||||||
|
this.extendedDescription = item.extendedDescription;
|
||||||
|
this.viewStyle = item.viewStyle;
|
||||||
|
this.defaultVisibility = item.defaultVisibility;
|
||||||
|
this.page = item.page;
|
||||||
|
this.rules = new JsonSerializer<Rule>().fromJSONArray(item.rule, Rule);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm():FormGroup{
|
||||||
|
let formGroup = this.formBuilder.group({
|
||||||
|
id: [this.id],
|
||||||
|
title: [this.title],
|
||||||
|
value: [this.value],
|
||||||
|
description: [this.description],
|
||||||
|
extendedDescription:[this.extendedDescription],
|
||||||
|
viewStyle: [this.viewStyle],
|
||||||
|
defaultVisibility:[this.defaultVisibility],
|
||||||
|
page:[this.page]
|
||||||
|
});
|
||||||
|
|
||||||
|
let rulesFormArray = new Array<FormGroup>();
|
||||||
|
if (this.rules){
|
||||||
|
this.rules.forEach(rule =>{
|
||||||
|
let form:FormGroup = rule.buildForm();
|
||||||
|
rulesFormArray.push(form);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
formGroup.addControl("rules", this.formBuilder.array(rulesFormArray))
|
||||||
|
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,58 @@
|
||||||
|
import { CompositeField } from './CompositeField';
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { FormGenerator } from './interfaces/FormGenerator';
|
||||||
|
import { Validation } from './Validation';
|
||||||
|
import { Rule } from './Rule';
|
||||||
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
import { Field } from './Field';
|
||||||
|
|
||||||
|
export class FieldGroup extends BaseModel implements Serializable<FieldGroup>, FormGenerator<FormGroup>{
|
||||||
|
public id: string;
|
||||||
|
public title: string;
|
||||||
|
public section: string;
|
||||||
|
public value: string;
|
||||||
|
public description: string;
|
||||||
|
public extendedDescription: string;
|
||||||
|
public defaultVisibility: boolean;
|
||||||
|
public page: number;
|
||||||
|
public ordinal: number;
|
||||||
|
public compositeFields: Array<CompositeField> = new Array<CompositeField>();
|
||||||
|
|
||||||
|
fromJSONObject(item: any): FieldGroup {
|
||||||
|
this.id = item.id;
|
||||||
|
this.title = item.title;
|
||||||
|
this.value = item.value;
|
||||||
|
this.description = item.description;
|
||||||
|
this.extendedDescription = item.extendedDescription;
|
||||||
|
this.defaultVisibility = item.defaultVisibility;
|
||||||
|
this.page = item.page;
|
||||||
|
this.ordinal = item.ordinal;
|
||||||
|
this.compositeFields = new JsonSerializer<CompositeField>().fromJSONArray(item.compositeFields, CompositeField);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm(): FormGroup {
|
||||||
|
let formGroup: FormGroup = this.formBuilder.group({
|
||||||
|
id: [this.id],
|
||||||
|
title: [this.title],
|
||||||
|
value: [this.value],
|
||||||
|
description: [this.description],
|
||||||
|
extendedDescription: [this.extendedDescription],
|
||||||
|
defaultVisibility: [this.defaultVisibility],
|
||||||
|
page: [this.page],
|
||||||
|
ordinal: [this.ordinal]
|
||||||
|
});
|
||||||
|
let compositeFieldsFormArray = new Array<FormGroup>();
|
||||||
|
if (this.compositeFields) {
|
||||||
|
this.compositeFields.forEach(item => {
|
||||||
|
let form: FormGroup = item.buildForm();
|
||||||
|
compositeFieldsFormArray.push(form)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
formGroup.addControl('compositeFields', this.formBuilder.array(compositeFieldsFormArray));
|
||||||
|
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { FormGenerator } from './interfaces/FormGenerator';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
export class Rule extends BaseModel implements Serializable<Rule>,FormGenerator<FormGroup>{
|
||||||
|
public sourceField:string;
|
||||||
|
public targetField:string;
|
||||||
|
public requiredValue;
|
||||||
|
public type: string;
|
||||||
|
|
||||||
|
fromJSONObject(item:any):Rule{
|
||||||
|
this.sourceField = item.sourceField;
|
||||||
|
this.targetField = item.targetField;
|
||||||
|
this.requiredValue = item.requiredValue;
|
||||||
|
this.type = item.type;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm():FormGroup{
|
||||||
|
let formGroup = this.formBuilder.group({
|
||||||
|
sourceField: [this.sourceField],
|
||||||
|
targetField: [this.targetField],
|
||||||
|
requiredValue: [this.requiredValue],
|
||||||
|
type: [this.type]
|
||||||
|
|
||||||
|
});
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import { FormGenerator } from './interfaces/FormGenerator';
|
||||||
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||||
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
import { FieldGroup } from './FieldGroup';
|
||||||
|
export class Section extends BaseModel implements Serializable<Section>, FormGenerator<FormGroup>{
|
||||||
|
public sections: Array<Section> = new Array<Section>();
|
||||||
|
public fieldGroups: Array<FieldGroup> = new Array<FieldGroup>();
|
||||||
|
public defaultVisibility: boolean;
|
||||||
|
public page: number;
|
||||||
|
public id: string
|
||||||
|
public title: string
|
||||||
|
public description: string;
|
||||||
|
public ordinal: number;
|
||||||
|
|
||||||
|
fromJSONObject(item: any): Section {
|
||||||
|
this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections, Section);
|
||||||
|
this.fieldGroups = new JsonSerializer<FieldGroup>().fromJSONArray(item.fieldGroups, FieldGroup);
|
||||||
|
this.page = item.page;
|
||||||
|
this.defaultVisibility = item.defaultVisibility;
|
||||||
|
this.id = item.id;
|
||||||
|
this.title = item.title;
|
||||||
|
this.description = item.description;
|
||||||
|
this.ordinal = item.ordinal;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm(): FormGroup {
|
||||||
|
let formGroup: FormGroup = new FormBuilder().group({});
|
||||||
|
let sectionsFormArray = new Array<FormGroup>();
|
||||||
|
if (this.sections) {
|
||||||
|
this.sections.forEach(item => {
|
||||||
|
let form: FormGroup = item.buildForm();
|
||||||
|
sectionsFormArray.push(form)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let fieldGroupsFormArray = new Array<FormGroup>();
|
||||||
|
if (this.fieldGroups) {
|
||||||
|
this.fieldGroups.forEach(item => {
|
||||||
|
let form: FormGroup = item.buildForm();
|
||||||
|
fieldGroupsFormArray.push(form)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
|
||||||
|
formGroup.addControl('fieldGroups', this.formBuilder.array(fieldGroupsFormArray));
|
||||||
|
formGroup.addControl('defaultVisibility', new FormControl(this.defaultVisibility));
|
||||||
|
formGroup.addControl('page', new FormControl(this.page));
|
||||||
|
formGroup.addControl('id', new FormControl(this.id));
|
||||||
|
formGroup.addControl('title', new FormControl(this.title));
|
||||||
|
formGroup.addControl('description', new FormControl(this.description));
|
||||||
|
formGroup.addControl('ordinal', new FormControl(this.ordinal));
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { BaseModel } from './BaseModel';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { FormGenerator } from './interfaces/FormGenerator';
|
||||||
|
import { Serializable } from './interfaces/Serializable';
|
||||||
|
export class Validation extends BaseModel implements Serializable<Validation>,FormGenerator<FormGroup>{
|
||||||
|
public type:string;
|
||||||
|
public value:string;
|
||||||
|
|
||||||
|
fromJSONObject(item:any):Validation{
|
||||||
|
this.type = item.type;
|
||||||
|
this.value = item.value;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildForm():FormGroup{
|
||||||
|
return this.formBuilder.group({
|
||||||
|
type: [this.type],
|
||||||
|
value: [this.value],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { AbstractControl } from '@angular/forms';
|
||||||
|
export interface FormGenerator<T extends AbstractControl>{
|
||||||
|
buildForm():T
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
export interface Serializable<T> {
|
||||||
|
fromJSONObject(item: Object): T;
|
||||||
|
}
|
|
@ -0,0 +1,34 @@
|
||||||
|
<div>
|
||||||
|
<h4 style="text-decoration: underline;">Rules</h4>
|
||||||
|
<div [formGroup]="form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Rule Type</label>
|
||||||
|
<select class="form-control" formControlName="type">
|
||||||
|
<option>field value</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Target</label>
|
||||||
|
<input type="text" class="form-control" placeholder="field id" formControlName="targetField">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Rule style</label>
|
||||||
|
<select class="form-control">
|
||||||
|
<option>boolean</option>
|
||||||
|
<option>checked</option>
|
||||||
|
<option>unchecked</option>
|
||||||
|
<option>dropdown value</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-6">
|
||||||
|
<label>Value Type</label>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-6">
|
||||||
|
<label>Value</label>
|
||||||
|
<input type="text" class="form-control" formControlName="requiredValue">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms'
|
||||||
|
import { Rule } from '../models/Rule'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'rule-form',
|
||||||
|
templateUrl: './rule.component.html',
|
||||||
|
styleUrls: []
|
||||||
|
})
|
||||||
|
|
||||||
|
export class RuleFormComponent {
|
||||||
|
@Input() form: FormGroup;
|
||||||
|
@Input() dataModel: FormGroup;
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
<div>
|
||||||
|
<h4 style="text-decoration: underline;">Section</h4>
|
||||||
|
<div [formGroup]="form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Title</label>
|
||||||
|
<input type="text" class="form-control" formControlName="title">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>Id</label>
|
||||||
|
<input type="text" class="form-control" formControlName="id">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-4">
|
||||||
|
<label>defaultVisibility</label>
|
||||||
|
<input type="text" class="form-control" formControlName="defaultVisibility">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngFor="let fieldGroup of dataModel.fieldGroups let i=index;">
|
||||||
|
<groupfield-form [form]="form.get('fieldGroups').get(''+i)" [dataModel]="fieldGroup" ></groupfield-form>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a (click)="addGroupField()" style="cursor: pointer">
|
||||||
|
Add another group +
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { Section } from '../models/Section';
|
||||||
|
import { FieldGroup } from '../models/FieldGroup';
|
||||||
|
import { FormArray } from '@angular/forms/src/model';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'section-form',
|
||||||
|
templateUrl: './section-form.component.html',
|
||||||
|
styleUrls: []
|
||||||
|
})
|
||||||
|
|
||||||
|
export class SectionFormComponent {
|
||||||
|
@Input() form: FormGroup;
|
||||||
|
@Input() dataModel:Section;
|
||||||
|
constructor(){ }
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.addGroupField();
|
||||||
|
}
|
||||||
|
|
||||||
|
addGroupField(){
|
||||||
|
let fieldGroup:FieldGroup = new FieldGroup();
|
||||||
|
this.dataModel.fieldGroups.push(fieldGroup);
|
||||||
|
(<FormArray>this.form.get("fieldGroups")).push(fieldGroup.buildForm());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,251 @@
|
||||||
|
export const TestModel = {
|
||||||
|
"sections": [
|
||||||
|
{
|
||||||
|
"id": "sumData",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "1 Data Summary",
|
||||||
|
"description": " Fill in the fields to describe your data model ",
|
||||||
|
"sections": [],
|
||||||
|
"fieldGroups":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "dataSummaryGroup",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "Data Summary",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"compositeFields": [
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "dataSummary",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"title": "",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "checkBox"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "fairData",
|
||||||
|
"ordinal": "2",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "2 Fair Data",
|
||||||
|
"sections": [
|
||||||
|
{
|
||||||
|
"id": "dataMetadata",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "2.1 Making data findable, including provisions for metadata",
|
||||||
|
"sections": [],
|
||||||
|
"fieldGroups": [
|
||||||
|
{
|
||||||
|
"id": "FindDataMetadataGroup",
|
||||||
|
"section": "dataMetadata",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "Making data findable, including provisions for metadata",
|
||||||
|
"description": "Making data findable, including provisions for metadata",
|
||||||
|
"extendedDescription": "FieldGroup Description",
|
||||||
|
"compositeFields": [
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "useMetadataQ211",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"title": "Q2.1.1 Will you use metadata to describe the data?",
|
||||||
|
"description": "User can select from a list of metadata standards. If they cannot find the standard in the list provided then they should choose \"not listed\". Selecting this will result in a field in which the user can insert the URL to the description of the metadata scheme used. A \"comments\" box should exist to allow users to add comments. They may select more than one metadata standard. They may specify more than one URL when selecting \"not listed\". They are also presented with a field in which to specify the location of the metadata service. Users can select the \"no metadata\" button to specify no metadata will be used to describe the data.",
|
||||||
|
"extendedDescription": "FieldGroup Description",
|
||||||
|
"viewStyle": "booleanDesicion"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "metadataStandarsA211",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Metadata standards",
|
||||||
|
"description": "The data will be described by metadata that follows the metadata standards described in <url1>, <url2>, ? The data will be described by metadata that follows the metadata schema described in <not-listed-url1>, <not-listed-url2>. The metadata will be stored in the service located at <metadata-repo-url>",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "combobox"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "notlistedA211",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Not listed",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "checkBox"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "notlistedUrlA211",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Url",
|
||||||
|
"description": "URL to the description of the metadata scheme used",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "freetext"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "notlistedCommentA211",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Comments",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "freetext"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "noMetadata",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "The data will not be described by any metadata.",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "checkBox"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "VocabulariesGroup",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "Vocabularies",
|
||||||
|
"description": "Vocabularies",
|
||||||
|
"extendedDescription": "FieldGroup Description",
|
||||||
|
"compositeFields": [
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "useVocabulariesQ212",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"title": "Q2.1.2 Will your metadata use standardised vocabularies?",
|
||||||
|
"description": "User selects from a drop-down list of existing standardised vocabularies or \"not listed\" or \"none\". There should be a \"comments\" fields for additional information. If \"not listed\" is selected the user is presented with two additional fields in which the user can put the URL to the new vocabulary along with a short description. The user should be allowed to select more than one option.",
|
||||||
|
"extendedDescription": "FieldGroup Description",
|
||||||
|
"viewStyle": "booleanDesicion"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "standardisedVocabulariesA212",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Existing standardised vocabularies",
|
||||||
|
"description": "The metadata will make use of the standardised vocabulary <url>",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "combobox"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "notlistedVocabularyA212",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Not listed vocabulary",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "checkBox"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "notlistedVocUrlA212",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Vocabulary Url",
|
||||||
|
"description": "The user can put the URL to the new vocabulary",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "freetext"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "notlistedVocCommentA212",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "Comments",
|
||||||
|
"description": "Vocabulary short description",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "freetext"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "noMetadataVocabularyA212",
|
||||||
|
"defaultVisibility": "false",
|
||||||
|
"title": "The metadata will not make use of any vocabulary",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "checkBox"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "FreeOfChargeGroup",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"page": "1",
|
||||||
|
"title": "Metadata Available",
|
||||||
|
"description": "Metadata Available",
|
||||||
|
"extendedDescription": "FieldGroup Description",
|
||||||
|
"compositeFields": [
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "freeOfChargeGroupQ213",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"title": "Q2.1.3 Will you use standardised formats for some or all of your data.",
|
||||||
|
"description": "User is presented with a choice of ?yes?, ?no?. There should be a ?comments? field for additional information.",
|
||||||
|
"extendedDescription": "Field Description",
|
||||||
|
"viewStyle": "booleanDesicion"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"id": "freeOfChargeGroupCommentA213",
|
||||||
|
"defaultVisibility": "true",
|
||||||
|
"title": "Comments",
|
||||||
|
"description": "",
|
||||||
|
"extendedDescription": "",
|
||||||
|
"viewStyle": "freetext"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Serializable } from '../models/interfaces/Serializable';
|
||||||
|
export class JsonSerializer<T extends Serializable<T>>{
|
||||||
|
|
||||||
|
public fromJSONArray(items: any[], type: { new(): T; }): T[] {
|
||||||
|
if(!items)return null;
|
||||||
|
const objectList: T[] = new Array<T>();
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
objectList.push(new type().fromJSONObject(items[i]))
|
||||||
|
}
|
||||||
|
return objectList;
|
||||||
|
}
|
||||||
|
|
||||||
|
public fromJSONObject(item: any, type: { new(): T; }): T {
|
||||||
|
if(!item)return null;
|
||||||
|
return new type().fromJSONObject(item);
|
||||||
|
}
|
||||||
|
}
|
|
@ -14,24 +14,34 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
|
||||||
|
|
||||||
|
|
||||||
const appRoutes: Routes = [
|
const appRoutes: Routes = [
|
||||||
//{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
|
|
||||||
{ path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
|
{ path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
|
||||||
{ path: 'dataset', component: DatasetsComponent },
|
{ path: 'dataset', component: DatasetsComponent },
|
||||||
{ path: 'login', component: MainSignInComponent},
|
{ path: 'login', component: MainSignInComponent},
|
||||||
{ path: 'projects', component: ProjectsComponent},
|
{ path: 'projects', component: ProjectsComponent},
|
||||||
{ path: 'project', component: ProjectDetailedComponent},
|
{ path: 'dmps',
|
||||||
{ path: 'dmps', component: DmpComponent},
|
component: DmpComponent,
|
||||||
{ path: 'dmp', component: DmpDetailedComponent },
|
children: [
|
||||||
|
{
|
||||||
|
path: "dmp",
|
||||||
|
component: DmpDetailedComponent,
|
||||||
|
data: {
|
||||||
|
//breadcrumb: "Sign In"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "project",
|
||||||
|
component: ProjectDetailedComponent,
|
||||||
|
data: {
|
||||||
|
//breadcrumb: "Sign Up"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{ path: 'welcome', component: HomepageComponent},
|
{ path: 'welcome', component: HomepageComponent},
|
||||||
{ path: '', redirectTo: '/login', pathMatch: 'full' },
|
{ path: '', redirectTo: '/login', pathMatch: 'full' },
|
||||||
{ path: '**', component: PageNotFoundComponent },
|
{ path: '**', component: PageNotFoundComponent }
|
||||||
/*
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
redirectTo: 'app-root',
|
|
||||||
pathMatch: 'full'
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
@ -78,15 +78,15 @@
|
||||||
<a class="cursor">what to</a>
|
<a class="cursor">what to</a>
|
||||||
<a class="cursor">put here</a>
|
<a class="cursor">put here</a>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
|
||||||
-->
|
|
||||||
|
|
||||||
<div id="appBody" class="child_div_right">
|
|
||||||
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
|
|
||||||
<!--this should be invisible -->
|
<div id="appBody" class="child_div_right">
|
||||||
|
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
|
@ -9,6 +9,7 @@ import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
|
||||||
import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
|
import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
|
||||||
|
|
||||||
|
|
||||||
|
declare const gapi: any;
|
||||||
|
|
||||||
declare var $ :any;
|
declare var $ :any;
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -34,10 +35,45 @@ export class AppComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
//this.initiateExternalProviders();
|
||||||
|
}
|
||||||
|
|
||||||
|
initiateExternalProviders(){
|
||||||
|
|
||||||
|
|
||||||
|
//initiate google
|
||||||
|
var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
|
||||||
|
var scope = [
|
||||||
|
'profile',
|
||||||
|
'email'
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
|
if(gapi.auth2 == undefined){
|
||||||
|
|
||||||
|
gapi.load('auth2', () => {
|
||||||
|
|
||||||
|
gapi.auth2.init({
|
||||||
|
client_id: clientId,
|
||||||
|
cookiepolicy: 'single_host_origin',
|
||||||
|
scope: scope
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//RE-Render the button (due to known issues of google-button with angular's lifecycle)
|
||||||
|
gapi.signin2.render('googleBtn');
|
||||||
|
|
||||||
|
//var buttonElement = this.element.nativeElement.querySelector('#googleBtn');
|
||||||
|
//this.attachSignin(buttonElement);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
slideNav(){
|
slideNav(){
|
||||||
|
|
||||||
$("#appSidebar").toggleClass("expanded");
|
$("#appSidebar").toggleClass("expanded");
|
||||||
|
@ -55,12 +91,10 @@ export class AppComponent implements OnInit {
|
||||||
login(){
|
login(){
|
||||||
//redirect to login page
|
//redirect to login page
|
||||||
this.router.navigate(['/login'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ }});
|
this.router.navigate(['/login'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ }});
|
||||||
location.reload();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
logout(){
|
logout(){
|
||||||
this.tokenService.logout();
|
this.tokenService.logout();
|
||||||
location.reload();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -69,8 +69,7 @@ import { DmpVersionFilterPipe } from './pipes/dmp-version-filter.pipe';
|
||||||
|
|
||||||
|
|
||||||
import { ProjectTableFilterPipe } from './pipes/project-table-filter.pipe';
|
import { ProjectTableFilterPipe } from './pipes/project-table-filter.pipe';
|
||||||
import { ProjectsComponent } from './projects/projects.component';
|
import { ProjectsComponent } from './projects/projects.component';
|
||||||
import { ProjectDetailComponent } from './projects/project.detail';
|
|
||||||
import { ModalComponent } from './modal/modal.component';
|
import { ModalComponent } from './modal/modal.component';
|
||||||
import { NgDatepickerModule } from 'ng2-datepicker';
|
import { NgDatepickerModule } from 'ng2-datepicker';
|
||||||
|
|
||||||
|
@ -100,7 +99,6 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
|
||||||
PageNotFoundComponent,
|
PageNotFoundComponent,
|
||||||
HomepageComponent,
|
HomepageComponent,
|
||||||
ModalComponent,
|
ModalComponent,
|
||||||
ProjectDetailComponent,
|
|
||||||
ProjectsComponent,
|
ProjectsComponent,
|
||||||
DmpComponent,
|
DmpComponent,
|
||||||
DatasetsComponent,
|
DatasetsComponent,
|
||||||
|
|
|
@ -67,3 +67,53 @@ tr.hover:hover > * {
|
||||||
color: #0645AD;
|
color: #0645AD;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
.modal.modal-fullscreen .modal-dialog,
|
||||||
|
.modal.modal-fullscreen .modal-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 1%;
|
||||||
|
right: 1%;
|
||||||
|
top: 1%;
|
||||||
|
bottom: 1%;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen .modal-dialog {
|
||||||
|
margin: 0;
|
||||||
|
width: 98%;
|
||||||
|
animation-duration:0.5s;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen .modal-content {
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-box-shadow: inherit;
|
||||||
|
-moz-box-shadow: inherit;
|
||||||
|
-o-box-shadow: inherit;
|
||||||
|
box-shadow: inherit;
|
||||||
|
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen {
|
||||||
|
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-header,
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-header {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
*/
|
|
@ -112,6 +112,12 @@ export class DmpComponent implements OnInit{
|
||||||
this.tableData = response;
|
this.tableData = response;
|
||||||
if(muted && muted!=true)
|
if(muted && muted!=true)
|
||||||
simple_notifier("success",null,"Refreshed DMPs");
|
simple_notifier("success",null,"Refreshed DMPs");
|
||||||
|
|
||||||
|
this.tableData.forEach( dmp => {
|
||||||
|
if(dmp.previous!=null)
|
||||||
|
this.serverService.getDmp(dmp.previous).subscribe( previous => {dmp.previous = previous;});
|
||||||
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
(err: HttpErrorResponse) => {
|
(err: HttpErrorResponse) => {
|
||||||
simple_notifier("danger",null,"Could not refresh DMPs");
|
simple_notifier("danger",null,"Could not refresh DMPs");
|
||||||
|
@ -141,6 +147,8 @@ export class DmpComponent implements OnInit{
|
||||||
|
|
||||||
this.dmp.project = {"id":this.dmp.project};
|
this.dmp.project = {"id":this.dmp.project};
|
||||||
this.dmp.creator = {"id": this.dmp.creator};
|
this.dmp.creator = {"id": this.dmp.creator};
|
||||||
|
if(this.dmp.previous!=null)
|
||||||
|
this.dmp.previous = this.dmp.previous.id;
|
||||||
|
|
||||||
this.serverService.updateDmp(this.dmp)
|
this.serverService.updateDmp(this.dmp)
|
||||||
.subscribe(
|
.subscribe(
|
||||||
|
@ -185,7 +193,7 @@ export class DmpComponent implements OnInit{
|
||||||
$("#newDmpModal").modal("show");
|
$("#newDmpModal").modal("show");
|
||||||
}
|
}
|
||||||
|
|
||||||
editDmpVersion(item){
|
cloneDmp(item){
|
||||||
this.dmp = Object.assign({}, item);
|
this.dmp = Object.assign({}, item);
|
||||||
this.dmp.project = item.project.id;
|
this.dmp.project = item.project.id;
|
||||||
$("#newVersionDmpModal").modal("show");
|
$("#newVersionDmpModal").modal("show");
|
||||||
|
@ -211,7 +219,8 @@ export class DmpComponent implements OnInit{
|
||||||
|
|
||||||
this.dmp = {"id": this.dmp.id}; //only id is needed to delete
|
this.dmp = {"id": this.dmp.id}; //only id is needed to delete
|
||||||
|
|
||||||
this.serverService.deleteDmp(dmp).subscribe(
|
|
||||||
|
this.serverService.deleteDmp(this.dmp).subscribe(
|
||||||
response => {
|
response => {
|
||||||
simple_notifier("success",null,"Successfully deleted the DMP");
|
simple_notifier("success",null,"Successfully deleted the DMP");
|
||||||
this.getDmps();
|
this.getDmps();
|
||||||
|
@ -264,13 +273,13 @@ export class DmpComponent implements OnInit{
|
||||||
}
|
}
|
||||||
|
|
||||||
viewDetailedDMP(dmp){
|
viewDetailedDMP(dmp){
|
||||||
console.log(dmp)
|
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||||
this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
|
this.router.navigate(['/dmps/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label, random: random}});
|
||||||
}
|
}
|
||||||
|
|
||||||
viewDetailedProject(dmp){
|
viewDetailedProject(dmp){
|
||||||
console.log(dmp)
|
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||||
this.router.navigate(['/project'], { queryParams: { "projectid":dmp.project.id, "label":dmp.project.label }});
|
this.router.navigate(['/dmps/project'], { queryParams: { "projectid":dmp.project.id, "label":dmp.project.label, random: random }});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,232 +1,238 @@
|
||||||
|
|
||||||
<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
|
<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
|
||||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="rowFilter">
|
<tr class="rowFilter">
|
||||||
<th colspan="1">
|
<th colspan="1">
|
||||||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
||||||
</th>
|
</th>
|
||||||
<th colspan="1">
|
<th colspan="1">
|
||||||
<button class="btn btn-default " (click)="getDmps('false')">
|
<button class="btn btn-default " (click)="getDmps('false')">
|
||||||
<span class="glyphicon glyphicon-refresh"></span>
|
<span class="glyphicon glyphicon-refresh"></span>
|
||||||
</button>
|
</button>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th class="rowFilterTopBorder" colspan="3">
|
<th class="rowFilterTopBorder" colspan="3">
|
||||||
<button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
|
<button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
|
||||||
<div id="demo" class="collapse">
|
<div id="demo" class="collapse">
|
||||||
<input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
<input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
||||||
<select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
|
<select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
|
||||||
#datasetfield>
|
#datasetfield>
|
||||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
|
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
|
||||||
<mfDefaultSorter by="id">ID</mfDefaultSorter>
|
<mfDefaultSorter by="id">ID</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="label">Label</mfDefaultSorter>
|
<mfDefaultSorter by="label">Label</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="version">Version</mfDefaultSorter>
|
<mfDefaultSorter by="version">Version</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
|
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="project">Project</mfDefaultSorter>
|
<mfDefaultSorter by="project">Project</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="description">Description</mfDefaultSorter>
|
<mfDefaultSorter by="description">Description</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="created">Created at</mfDefaultSorter>
|
<mfDefaultSorter by="created">Created at</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<mfDefaultSorter by="status">Status</mfDefaultSorter>
|
<mfDefaultSorter by="status">Status</mfDefaultSorter>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
Actions
|
Actions
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
|
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||||||
<td colspan="5">No elements</td>
|
<td colspan="5">No elements</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr *ngFor="let dmp of mf.data" class="hover">
|
<tr *ngFor="let dmp of mf.data" class="hover">
|
||||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
|
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
|
||||||
<td class="url-like" (click)="viewDetailedDMP(dmp)">{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}</td>
|
<!-- data-toggle="modal" data-target="#dmp-deatils-fullscreen" -->
|
||||||
<td style="width:20px;">{{dmp?.version}}</td>
|
<td class="url-like" (click)="viewDetailedDMP(dmp)">{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}</td>
|
||||||
<td style="width:300px;">{{dmp?.previous}}</td>
|
<td style="width:20px;">{{dmp?.version}}</td>
|
||||||
<td class="url-like" (click)="viewDetailedProject(dmp)">{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}</td>
|
<td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
|
||||||
<td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
|
<td class="url-like" (click)="viewDetailedProject(dmp)">{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}</td>
|
||||||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
<td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
|
||||||
<td>{{dmp?.status | statusToString }}</td>
|
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||||
<td>
|
<td>{{dmp?.status | statusToString }}</td>
|
||||||
<a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
|
<td>
|
||||||
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
|
<a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
|
||||||
<a class="editGridColumn cursor-link" (click)="editDmpVersion(dmp)">
|
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
|
||||||
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
|
<a class="editGridColumn cursor-link" (click)="cloneDmp(dmp)">
|
||||||
<a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
|
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
|
||||||
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" title="delete DMP"></i> </a>
|
<a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
|
||||||
<!--
|
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" title="delete DMP"></i> </a>
|
||||||
<a class="editGridColumn cursor-link" (click)="selectDmp(dmp)">
|
<!--
|
||||||
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
|
<a class="editGridColumn cursor-link" (click)="selectDmp(dmp)">
|
||||||
-->
|
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
|
||||||
</td>
|
-->
|
||||||
<td style="max-width:100px;">
|
</td>
|
||||||
<button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
|
<td style="max-width:100px;">
|
||||||
</td>
|
<button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
<tfoot>
|
</tbody>
|
||||||
<tr>
|
<tfoot>
|
||||||
<td colspan="1">
|
<tr>
|
||||||
<button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
|
<td colspan="1">
|
||||||
</td>
|
<button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
|
||||||
<td colspan="7">
|
</td>
|
||||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
<td colspan="7">
|
||||||
</td>
|
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
||||||
</tr>
|
</td>
|
||||||
</tfoot>
|
</tr>
|
||||||
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
|
|
||||||
<!--Modal for new and edit DMP-->
|
<!--Modal for new and edit DMP-->
|
||||||
<div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
|
<div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header centered-text">
|
<div class="modal-header centered-text">
|
||||||
<h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
|
<h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||||
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="label-name" class="form-control-label">Label:</label>
|
||||||
<label for="label-name" class="form-control-label">Label:</label>
|
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
|
||||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
|
|
||||||
</div>
|
|
||||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
|
||||||
<select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
|
|
||||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||||
<label for="status-name" class="col-form-label">Status:</label>
|
<select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
|
||||||
<select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
|
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="status-name" class="col-form-label">Status:</label>
|
||||||
<label for="label-name" class="form-control-label">Previous:</label>
|
<select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
|
||||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous" disabled>
|
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
</div>
|
</select>
|
||||||
<div class="form-group">
|
</div>
|
||||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
<div class="form-group">
|
||||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version" disabled>
|
<label for="label-name" class="form-control-label">Previous:</label>
|
||||||
</div>
|
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous" disabled>
|
||||||
<div class="form-group">
|
</div>
|
||||||
<label for="abbreviation-text" class="form-control-label">Description:</label>
|
<div class="form-group">
|
||||||
<textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event" name="description"></textarea>
|
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||||
</div>
|
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version" disabled>
|
||||||
<!--
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="reference-text" class="form-control-label">Profile Data:</label>
|
<label for="abbreviation-text" class="form-control-label">Description:</label>
|
||||||
<textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
|
<textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event" name="description"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<!--
|
||||||
<label for="start-date" class="form-control-label">Start Date:</label>
|
<div class="form-group">
|
||||||
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
|
<label for="reference-text" class="form-control-label">Profile Data:</label>
|
||||||
</div>
|
<textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
|
||||||
<div class="form-group">
|
</div>
|
||||||
<label for="end-date" class="form-control-label">End Date:</label>
|
<div class="form-group">
|
||||||
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.endDate" name = "endDate">
|
<label for="start-date" class="form-control-label">Start Date:</label>
|
||||||
</div>
|
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
|
||||||
-->
|
</div>
|
||||||
</form>
|
<div class="form-group">
|
||||||
</div>
|
<label for="end-date" class="form-control-label">End Date:</label>
|
||||||
<div class="modal-footer">
|
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.endDate" name = "endDate">
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
|
-->
|
||||||
</div>
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
<button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!--Modal for changing version-->
|
<!--Modal for changing version-->
|
||||||
<div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
|
<div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
|
<h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="label-name" class="form-control-label">Label:</label>
|
<label for="label-name" class="form-control-label">Label:</label>
|
||||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
|
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group" hidden>
|
<div class="form-group" hidden>
|
||||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||||
<select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" [name]="projectsDropDown" #datasetfield>
|
<select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" [name]="projectsDropDown" #datasetfield>
|
||||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group" hidden>
|
<div class="form-group" hidden>
|
||||||
<label for="label-name" class="form-control-label">Previous:</label>
|
<label for="label-name" class="form-control-label">Previous:</label>
|
||||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous">
|
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group" hidden>
|
<div class="form-group" hidden>
|
||||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
|
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
<button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
|
<button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
|
<div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title">Change Staus</h5>
|
<h5 class="modal-title">Change Staus</h5>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
|
<p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Confirmation module- do not delete -->
|
<!-- Confirmation module- do not delete -->
|
||||||
|
|
|
@ -1,25 +0,0 @@
|
||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { GooggleSignInComponent } from './googgle-sign-in.component';
|
|
||||||
|
|
||||||
describe('GooggleSignInComponent', () => {
|
|
||||||
let component: GooggleSignInComponent;
|
|
||||||
let fixture: ComponentFixture<GooggleSignInComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [ GooggleSignInComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(GooggleSignInComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -23,54 +23,24 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
//this.googleInit();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
|
|
||||||
/*
|
|
||||||
$( window ).on( "load", function(){
|
|
||||||
|
|
||||||
if($("#googleBtn").length == 0) {
|
//RE-Render the button (due to known issues of google-button with angular's lifecycle)
|
||||||
alert("GoogleButton found");
|
gapi.signin2.render('googleBtn');
|
||||||
}
|
var buttonElement = this.element.nativeElement.querySelector('#googleBtn');
|
||||||
|
this.attachSignin(buttonElement);
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
this.googleInit();
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
private clientId:string = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
|
|
||||||
|
|
||||||
private scope = [
|
|
||||||
'profile',
|
|
||||||
'email'
|
|
||||||
//,
|
|
||||||
//'https://www.googleapis.com/auth/plus.me',
|
|
||||||
//'https://www.googleapis.com/auth/contacts.readonly',
|
|
||||||
//'https://www.googleapis.com/auth/admin.directory.user.readonly'
|
|
||||||
].join(' ');
|
|
||||||
|
|
||||||
public auth2: any;
|
|
||||||
|
|
||||||
public googleInit() {
|
|
||||||
|
|
||||||
gapi.load('auth2', () => {
|
|
||||||
this.auth2 = gapi.auth2.init({
|
|
||||||
client_id: this.clientId,
|
|
||||||
cookiepolicy: 'single_host_origin',
|
|
||||||
scope: this.scope
|
|
||||||
});
|
|
||||||
var buttonElement = this.element.nativeElement.querySelector('#googleBtn');
|
|
||||||
this.attachSignin(buttonElement);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public attachSignin(element) {
|
public attachSignin(element) {
|
||||||
this.auth2.attachClickHandler(element, {},
|
|
||||||
|
gapi.auth2.getAuthInstance().attachClickHandler(element, {},
|
||||||
(googleUser) => {
|
(googleUser) => {
|
||||||
//simple_notifier("success",null,"Successful login");
|
//simple_notifier("success",null,"Successful login");
|
||||||
let profile = googleUser.getBasicProfile();
|
let profile = googleUser.getBasicProfile();
|
||||||
|
@ -79,7 +49,8 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
|
||||||
function (error) {
|
function (error) {
|
||||||
//simple_notifier("danger",null,"Failed to login");
|
//simple_notifier("danger",null,"Failed to login");
|
||||||
console.log(JSON.stringify(error, undefined, 2));
|
console.log(JSON.stringify(error, undefined, 2));
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,25 +0,0 @@
|
||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { MainSignInComponent } from './main-sign-in.component';
|
|
||||||
|
|
||||||
describe('MainSignInComponent', () => {
|
|
||||||
let component: MainSignInComponent;
|
|
||||||
let fixture: ComponentFixture<MainSignInComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [ MainSignInComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(MainSignInComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,33 +0,0 @@
|
||||||
import 'rxjs/add/operator/switchMap';
|
|
||||||
import { Component, OnInit, HostBinding } from '@angular/core';
|
|
||||||
import { Observable } from 'rxjs/Observable';
|
|
||||||
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
template: `
|
|
||||||
<div *ngIf="project">
|
|
||||||
<h3>"{{ project.name }}"</h3>
|
|
||||||
<div>
|
|
||||||
<label>Id: </label>{{ project.id }}</div>
|
|
||||||
<div>
|
|
||||||
<label>Name: </label>
|
|
||||||
<input [(ngModel)]="project.name" placeholder="name"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class ProjectDetailComponent implements OnInit {
|
|
||||||
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private route: ActivatedRoute,
|
|
||||||
private router: Router,
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
// this.hero$ = this.route.paramMap
|
|
||||||
// .switchMap((params: ParamMap) =>
|
|
||||||
// this.service.getHero(params.get('id')));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -55,8 +55,8 @@
|
||||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{project?.id}}</td>
|
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{project?.id}}</td>
|
||||||
<td>{{(project?.label?.length > 40) ? (project?.label | slice:0:40)+'...':(project?.label) }}</td>
|
<td>{{(project?.label?.length > 40) ? (project?.label | slice:0:40)+'...':(project?.label) }}</td>
|
||||||
<td>{{project?.abbreviation}}</td>
|
<td>{{project?.abbreviation}}</td>
|
||||||
<td>{{project?.startdate | date:'yyyy-MM-dd HH:mm:ss Z' }}</td>
|
<td>{{project?.startdate | date:'medium' }}</td>
|
||||||
<td>{{project?.enddate | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
<td>{{project?.enddate | date:'medium'}}</td>
|
||||||
<td>{{project?.status | statusToString}}</td>
|
<td>{{project?.status | statusToString}}</td>
|
||||||
<td>{{(project?.description?.length > 40) ? (project?.description | slice:0:40)+'...':(project?.description) }}</td>
|
<td>{{(project?.description?.length > 40) ? (project?.description | slice:0:40)+'...':(project?.description) }}</td>
|
||||||
<td>
|
<td>
|
||||||
|
|
|
@ -48,12 +48,17 @@ export class ServerService {
|
||||||
}
|
}
|
||||||
|
|
||||||
public getDmp(dmpid : string, eager? : boolean){
|
public getDmp(dmpid : string, eager? : boolean){
|
||||||
if(eager)
|
if(eager && eager==true)
|
||||||
return this.restBase.get("dmps/"+dmpid, {"eager": true});
|
return this.restBase.get("dmps/"+dmpid, {"eager": true});
|
||||||
else
|
else
|
||||||
return this.restBase.get("dmps/"+dmpid, {"eager": true});
|
return this.restBase.get("dmps/"+dmpid, {"eager": false});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getDmpHistory(dmpid: string){
|
||||||
|
return this.restBase.get("dmp/history/"+dmpid);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
public listDmpIDs(){
|
public listDmpIDs(){
|
||||||
return this.restBase.get("dmps");
|
return this.restBase.get("dmps");
|
||||||
}
|
}
|
||||||
|
@ -67,8 +72,11 @@ export class ServerService {
|
||||||
return this.restBase.get("project/getAll");
|
return this.restBase.get("project/getAll");
|
||||||
}
|
}
|
||||||
|
|
||||||
public getProject(projectID : string){
|
public getProject(projectID : string, eager? : boolean){
|
||||||
return this.restBase.get("projects/"+projectID);
|
if(eager)
|
||||||
|
return this.restBase.get("projects/"+projectID, {"eager": true});
|
||||||
|
else
|
||||||
|
return this.restBase.get("projects/"+projectID, {"eager": false});
|
||||||
}
|
}
|
||||||
|
|
||||||
public listProjectsLabelID(){
|
public listProjectsLabelID(){
|
||||||
|
@ -91,6 +99,10 @@ export class ServerService {
|
||||||
return this.restBase.post("project/update", data);
|
return this.restBase.post("project/update", data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getDmpsOfProject(projectID: string){
|
||||||
|
return this.restBase.get("project/dmps", {"id":projectID});
|
||||||
|
}
|
||||||
|
|
||||||
public getAllDataSet(){
|
public getAllDataSet(){
|
||||||
return this.restBase.get("dataset/getAll");
|
return this.restBase.get("dataset/getAll");
|
||||||
}
|
}
|
||||||
|
@ -117,31 +129,35 @@ export class ServerService {
|
||||||
|
|
||||||
public getDatasetForDmp(data:any){
|
public getDatasetForDmp(data:any){
|
||||||
return this.restBase.post("dmp/getdatasets", data);
|
return this.restBase.post("dmp/getdatasets", data);
|
||||||
}
|
}
|
||||||
|
|
||||||
public createDatasetForDmp(data:any){
|
public createDatasetForDmp(data:any){
|
||||||
return this.restBase.post("dataset/create", data);
|
return this.restBase.post("dataset/create", data);
|
||||||
}
|
}
|
||||||
|
|
||||||
public getAllDatsetsProfile(){
|
public getAllDatsetsProfile(){
|
||||||
return this.restBase.get("datasetprofile/getAll");
|
return this.restBase.get("datasetprofile/getAll");
|
||||||
}
|
}
|
||||||
|
|
||||||
public getDatasetProfileByID(id){
|
public getDatasetProfileByID(id){
|
||||||
return this.restBase.get("datasetprofiles/"+id);
|
return this.restBase.get("datasetprofiles/"+id);
|
||||||
}
|
}
|
||||||
|
|
||||||
public updateDatsetsProfile(data:any){
|
public updateDatsetsProfile(data:any){
|
||||||
return this.restBase.post("dataset/update", data);
|
return this.restBase.post("dataset/update", data);
|
||||||
}
|
}
|
||||||
|
|
||||||
public deleteDataset(dataset: any){
|
public deleteDataset(dataset: any){
|
||||||
return this.restBase.post("dataset/softdelete", dataset);
|
return this.restBase.post("dataset/softdelete", dataset);
|
||||||
}
|
}
|
||||||
|
|
||||||
public whoami(){
|
public getUserByID(id : string){
|
||||||
return this.restBase.get("user/whoami");
|
return this.restBase.get("users/"+id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public whoami(){
|
||||||
|
return this.restBase.get("user/whoami");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
/* START - FOR DETAILS MODALS */
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.modal-fullscreen .modal-dialog,
|
||||||
|
.modal.modal-fullscreen .modal-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 15%;
|
||||||
|
right: 15%;
|
||||||
|
top: 5%;
|
||||||
|
bottom: 5%;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen .modal-dialog {
|
||||||
|
margin: 0;
|
||||||
|
width: 70%;
|
||||||
|
animation-duration:0.5s;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen .modal-content {
|
||||||
|
-moz-border-radius: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
/*
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-box-shadow: inherit;
|
||||||
|
-moz-box-shadow: inherit;
|
||||||
|
-o-box-shadow: inherit;
|
||||||
|
box-shadow: inherit;
|
||||||
|
*/
|
||||||
|
/* change bg color below */
|
||||||
|
/* background:#1abc9c; */
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen {
|
||||||
|
/* Remove the padding inside the body */
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-header,
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-header {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
/* END - FOR DETAILS MODALS */
|
||||||
|
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding-top:30px;
|
||||||
|
padding-bottom:30px;
|
||||||
|
}
|
|
@ -1,3 +1,76 @@
|
||||||
<p>
|
|
||||||
Under construction
|
<div class="modal fade modal-fullscreen footer-to-bottom" id="dmp-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
</p>
|
<div class="modal-dialog animated zoomInLeft">
|
||||||
|
<div class="modal-content" id="dmp-modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
|
||||||
|
<h4 style="text-align:center;" class="modal-title"><b>{{dmp?.label}}</b></h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!--
|
||||||
|
{{dmp | json}}
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<!--<div class="col-md-6 row-cell"><b>Digital Management Plan: </b>{{dmp?.label}}</div>-->
|
||||||
|
<div class="col-md-12 row-cell"><b>Belongs to Project: </b>{{dmp?.project?.label}}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 row-cell"><b>Current version:</b><span class="badge">{{dmp?.version}}</span></div>
|
||||||
|
<div class="col-md-6 row-cell"><b>Previous DMPs:</b>
|
||||||
|
<ul>
|
||||||
|
<li *ngFor="let previous of previousDMPs">{{ previous?.label }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 row-cell">
|
||||||
|
<b>Creator:</b> {{dmp?.creator?.name}}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 row-cell"><b>Users associated:</b>
|
||||||
|
<ul>
|
||||||
|
<li *ngFor="let user of dmp?.users">{{ user?.name }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 row-cell"><b>Researchers:</b>
|
||||||
|
<div *ngIf="dmp?.researchers?.length==0" style="opacity: 0.5;">None</div>
|
||||||
|
<ul *ngIf="dmp?.researchers?.length>1">
|
||||||
|
<li *ngFor="let researcher of dmp?.researchers">{{ researcher?.label }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 row-cell"><b>Organisations:</b>
|
||||||
|
<div *ngIf="dmp?.organisations?.length==0" style="opacity: 0.5;">None</div>
|
||||||
|
<ul *ngIf="dmp?.organisations?.length>1">
|
||||||
|
<li *ngFor="let organisation of dmp?.organisations">{{ organisation?.label }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<!--
|
||||||
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -2,10 +2,19 @@ import { Component, OnInit } from '@angular/core';
|
||||||
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
|
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
|
||||||
import {Location} from '@angular/common';
|
import {Location} from '@angular/common';
|
||||||
import { ServerService } from '../../../app/services/server.service';
|
import { ServerService } from '../../../app/services/server.service';
|
||||||
|
|
||||||
|
|
||||||
|
import '../../../assets/perfect-scrollbar/perfect-scrollbar.js';
|
||||||
|
declare var PerfectScrollbar : any;
|
||||||
|
|
||||||
|
declare var $ :any;
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'dmp-detailed',
|
selector: 'dmp-detailed',
|
||||||
templateUrl: './dmp-detailed.component.html',
|
templateUrl: './dmp-detailed.component.html',
|
||||||
styleUrls: ['./dmp-detailed.component.css']
|
styleUrls: [
|
||||||
|
'../../../assets/perfect-scrollbar/perfect-scrollbar.css',
|
||||||
|
'./dmp-detailed.component.css'
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class DmpDetailedComponent implements OnInit {
|
export class DmpDetailedComponent implements OnInit {
|
||||||
|
|
||||||
|
@ -14,7 +23,7 @@ export class DmpDetailedComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
dmp : any;
|
dmp : any;
|
||||||
|
previousDMPs : any [] = new Array<any>();
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
|
@ -24,8 +33,33 @@ export class DmpDetailedComponent implements OnInit {
|
||||||
let getParams : any = {"eager":true};
|
let getParams : any = {"eager":true};
|
||||||
this.serverService.getDmp(dmpid, getParams).subscribe(
|
this.serverService.getDmp(dmpid, getParams).subscribe(
|
||||||
response => {
|
response => {
|
||||||
|
|
||||||
this.dmp = response;
|
this.dmp = response;
|
||||||
debugger;
|
|
||||||
|
//get also the labels of all previous dmps (not eagerly, just fetch the dmp tuple)
|
||||||
|
if(this.dmp.previous != null && this.dmp.previous != ""){
|
||||||
|
this.serverService.getDmpHistory(this.dmp.id).subscribe(
|
||||||
|
response => {
|
||||||
|
this.previousDMPs = response;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log("Could not get previous DMPs (history)");
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
//fill-in also the creator
|
||||||
|
this.serverService.getUserByID(this.dmp.creator).subscribe(
|
||||||
|
response => {
|
||||||
|
this.dmp.creator = response;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log("Could not fetch creator details...");
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
$('#dmp-details-modal').modal('show');
|
||||||
|
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log("Could not load dmp");
|
console.log("Could not load dmp");
|
||||||
|
@ -34,9 +68,14 @@ export class DmpDetailedComponent implements OnInit {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var dmpDetailsModalScroller = new PerfectScrollbar("#dmp-modal-content");
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,247 @@
|
||||||
|
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding-top:30px;
|
||||||
|
padding-bottom:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* START - FOR DETAILS MODALS */
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.modal-fullscreen .modal-dialog,
|
||||||
|
.modal.modal-fullscreen .modal-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 15%;
|
||||||
|
right: 15%;
|
||||||
|
top: 5%;
|
||||||
|
bottom: 5%;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen .modal-dialog {
|
||||||
|
margin: 0;
|
||||||
|
width: 70%;
|
||||||
|
animation-duration:0.5s;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen .modal-content {
|
||||||
|
-moz-border-radius: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
/*
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-box-shadow: inherit;
|
||||||
|
-moz-box-shadow: inherit;
|
||||||
|
-o-box-shadow: inherit;
|
||||||
|
box-shadow: inherit;
|
||||||
|
*/
|
||||||
|
/* change bg color below */
|
||||||
|
/* background:#1abc9c; */
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen {
|
||||||
|
/* Remove the padding inside the body */
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-header,
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-header {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
/* END - FOR DETAILS MODALS */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* START - DATE CALENDAR VISUALISATION */
|
||||||
|
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald);
|
||||||
|
|
||||||
|
/****************************************/
|
||||||
|
/* Styling rules, such as font and colors */
|
||||||
|
.date-as-calendar {
|
||||||
|
font-variant: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: "Helvetica", "Arial", sans-serif;
|
||||||
|
|
||||||
|
/* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
/* margin: 1ex; */
|
||||||
|
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
background : linear-gradient(to bottom right, #FFF 0%, #EEE 100%);
|
||||||
|
|
||||||
|
border: 1px solid #888;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
box-shadow: 2px 2px 2px -2px black;
|
||||||
|
}
|
||||||
|
.date-as-calendar .weekday,
|
||||||
|
.date-as-calendar .day,
|
||||||
|
.date-as-calendar .month,
|
||||||
|
.date-as-calendar .year {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.0;
|
||||||
|
}
|
||||||
|
.date-as-calendar .month {
|
||||||
|
font-family: "Oswald", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: #B11;
|
||||||
|
background : linear-gradient(to bottom right, #D66 0%, #A00 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************************/
|
||||||
|
/* Layout rules using position: absolute and pixels. */
|
||||||
|
.position-pixels.date-as-calendar {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
.position-pixels.date-as-calendar .weekday,
|
||||||
|
.position-pixels.date-as-calendar .day,
|
||||||
|
.position-pixels.date-as-calendar .month,
|
||||||
|
.position-pixels.date-as-calendar .year {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.position-pixels.date-as-calendar .month {
|
||||||
|
top: 0px;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
.position-pixels.date-as-calendar .weekday {
|
||||||
|
top: 16px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.position-pixels.date-as-calendar .day {
|
||||||
|
top: 26px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.position-pixels.date-as-calendar .year {
|
||||||
|
top: 50px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************************/
|
||||||
|
/* Layout rules using position: absolute and relative dimensions using em. */
|
||||||
|
.position-em.date-as-calendar {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
.position-em.date-as-calendar .weekday,
|
||||||
|
.position-em.date-as-calendar .day,
|
||||||
|
.position-em.date-as-calendar .month,
|
||||||
|
.position-em.date-as-calendar .year {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.position-em.date-as-calendar .month {
|
||||||
|
top: 0px;
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0.1em 0;
|
||||||
|
}
|
||||||
|
.position-em.date-as-calendar .weekday {
|
||||||
|
top: 1.6em;
|
||||||
|
font-size: 0.6125em;
|
||||||
|
}
|
||||||
|
.position-em.date-as-calendar .day {
|
||||||
|
top: 1.1em;
|
||||||
|
font-size: 1.5em
|
||||||
|
}
|
||||||
|
.position-em.date-as-calendar .year {
|
||||||
|
bottom: 0px;
|
||||||
|
font-size: 0.87750em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************************/
|
||||||
|
/* Layout rules using display: inline-flex and relative dimensions using em. */
|
||||||
|
.inline-flex.date-as-calendar {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
.inline-flex.date-as-calendar .weekday,
|
||||||
|
.inline-flex.date-as-calendar .day,
|
||||||
|
.inline-flex.date-as-calendar .month,
|
||||||
|
.inline-flex.date-as-calendar .year {
|
||||||
|
display: block;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
.inline-flex.date-as-calendar .month {
|
||||||
|
order: 1;
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0.1em 0;
|
||||||
|
}
|
||||||
|
.inline-flex.date-as-calendar .weekday {
|
||||||
|
order: 2;
|
||||||
|
font-size: 0.6125em;
|
||||||
|
}
|
||||||
|
.inline-flex.date-as-calendar .day {
|
||||||
|
order: 3;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.inline-flex.date-as-calendar .year {
|
||||||
|
order: 4;
|
||||||
|
font-size: 0.87750em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************************/
|
||||||
|
/* Multiple sizes. */
|
||||||
|
.date-as-calendar.size0_5x {
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size0_75x {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size1x {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size1_25x {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size1_5x {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size1_75x {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size2x {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.date-as-calendar.size3x {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* END - DATE CALENDAR VISUALISATION */
|
|
@ -1,3 +1,92 @@
|
||||||
<p>
|
|
||||||
Details of project -- Under construction
|
<div class="modal fade modal-fullscreen footer-to-bottom" id="project-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
</p>
|
<div class="modal-dialog animated zoomInLeft">
|
||||||
|
<div class="modal-content" id="project-modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
|
||||||
|
<h4 class="modal-title" style="text-align:center;"><b>{{project?.label}}</b></h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!--
|
||||||
|
{{project | json}}
|
||||||
|
-->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!--
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 row-cell"><b>Project name: </b>{{project?.label}}</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 row-cell"><b>Abbreviation: </b>{{project?.abbreviation}}</div>
|
||||||
|
<div class="col-md-6 row-cell"><b>URI : </b><a href="{{project?.uri}}">{{project?.uri}}</a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-3 row-cell"><b>Short description: </b></div>
|
||||||
|
<div class="col-md-9 row-cell">{{project?.description}}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-3">
|
||||||
|
<b>Begins:</b>
|
||||||
|
<time class="date-as-calendar position-pixels">
|
||||||
|
<span class="weekday">{{project?.startdate | date:'EEEE' }}</span>
|
||||||
|
<span class="day">{{project?.startdate | date:'dd' }}</span>
|
||||||
|
<span class="month">{{project?.startdate | date:'MMMM' }}</span>
|
||||||
|
<span class="year">{{project?.startdate | date:'y' }}</span>
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<b>Ends:</b>
|
||||||
|
<time class="date-as-calendar position-pixels">
|
||||||
|
<span class="weekday">{{project?.enddate | date:'EEEE' }}</span>
|
||||||
|
<span class="day">{{project?.enddate | date:'dd' }}</span>
|
||||||
|
<span class="month">{{project?.enddate | date:'MMMM' }}</span>
|
||||||
|
<span class="year">{{project?.enddate | date:'y' }}</span>
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<b>Created by: </b> {{project?.creationUser?.name}}
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<b>at: </b> {{project?.created | date:'medium' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 row-cell"><b>Associated DMPs:</b>
|
||||||
|
<ul>
|
||||||
|
<li *ngFor="let dmp of project?.dmps">
|
||||||
|
{{ dmp?.label }} (owner: {{ users.get(dmp?.creator) }})
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{users | json}}
|
||||||
|
|
||||||
|
<!--
|
||||||
|
STUFF NOT USED:
|
||||||
|
status
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<p class="">…</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<!--
|
||||||
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,15 +1,92 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
|
||||||
|
import {Location} from '@angular/common';
|
||||||
|
import { ServerService } from '../../../app/services/server.service';
|
||||||
|
|
||||||
|
import '../../../assets/perfect-scrollbar/perfect-scrollbar.js';
|
||||||
|
declare var PerfectScrollbar : any;
|
||||||
|
|
||||||
|
declare var $ :any;
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'project-detailed',
|
selector: 'project-detailed',
|
||||||
templateUrl: './project-detailed.component.html',
|
templateUrl: './project-detailed.component.html',
|
||||||
styleUrls: ['./project-detailed.component.css']
|
styleUrls: [
|
||||||
|
'../../../assets/perfect-scrollbar/perfect-scrollbar.css',
|
||||||
|
'./project-detailed.component.css'
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class ProjectDetailedComponent implements OnInit {
|
export class ProjectDetailedComponent implements OnInit {
|
||||||
|
|
||||||
constructor() { }
|
constructor(private serverService: ServerService, private router: Router, private _location: Location, private route: ActivatedRoute) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
users : Map<string, string> = new Map<string, string>();
|
||||||
|
project : any;
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
|
let sub = this.route.queryParams.subscribe(params => {
|
||||||
|
|
||||||
|
let projectid = params.projectid;
|
||||||
|
this.serverService.getProject(projectid).subscribe(
|
||||||
|
response => {
|
||||||
|
this.project = response;
|
||||||
|
$('#project-details-modal').modal('show');
|
||||||
|
//get also projects of dmp (there's a problem with the List<> serialization on server - side)
|
||||||
|
this.serverService.getDmpsOfProject(projectid).subscribe(
|
||||||
|
response => {
|
||||||
|
this.project.dmps = response;
|
||||||
|
this.populateUsersMap(this.project);
|
||||||
|
//this.get
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log("Could not fetch project's dmps");
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log("Could not load project");
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var projectDetailsModalScroller = new PerfectScrollbar("#project-modal-content");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getUserByID(userid: string){
|
||||||
|
return this.serverService.getUserByID(userid); //Notice: returns Observable !
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async populateUsersMap1(project){
|
||||||
|
this.users.clear();
|
||||||
|
for(var i=0;i<project.dmps.length;i++){
|
||||||
|
debugger;
|
||||||
|
const user = await this.serverService.getUserByID(project.dmps[i].creator).toPromise();
|
||||||
|
this.users.set(project.dmps[i].creator, user.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
private populateUsersMap(project){
|
||||||
|
this.users.clear();
|
||||||
|
project.dmps.forEach(dmp => {
|
||||||
|
if(!this.users.has(dmp.creator)){
|
||||||
|
this.serverService.getUserByID(dmp.creator).subscribe(
|
||||||
|
user => {
|
||||||
|
this.users.set(dmp.creator, user.name);
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
}
|
||||||
|
)
|
||||||
|
console.log("USERS: "+JSON.stringify(this.users))
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,14 +20,15 @@ export class BreadcrumbComponent implements OnInit {
|
||||||
constructor(private router: Router, private route: ActivatedRoute) {
|
constructor(private router: Router, private route: ActivatedRoute) {
|
||||||
router.events.subscribe(
|
router.events.subscribe(
|
||||||
event =>{
|
event =>{
|
||||||
//console.log("Router event captured")
|
console.log("Router event captured")
|
||||||
//console.log(event)
|
console.log(event)
|
||||||
if(event instanceof NavigationEnd){
|
if(event instanceof NavigationEnd){
|
||||||
//console.log(event.urlAfterRedirects);
|
console.log(event.urlAfterRedirects);
|
||||||
//console.log(this.route);
|
console.log(this.route);
|
||||||
|
|
||||||
this.route.children.forEach( child => {
|
this.route.children.forEach( child => {
|
||||||
let guessed = this.guessMenuItemFromActivatedRoute(child, event);
|
let menuItem = this.guessMenuItemFromActivatedRoute(child, event);
|
||||||
this.adaptBreadcrumbByMenuItem(guessed.menuItem, guessed.isBaseComponent);
|
this.adaptBreadcrumbByMenuItem(menuItem);
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -44,36 +45,33 @@ export class BreadcrumbComponent implements OnInit {
|
||||||
let componentName = activatedRoute.component.name;
|
let componentName = activatedRoute.component.name;
|
||||||
|
|
||||||
let params = activatedRoute.queryParams.getValue();
|
let params = activatedRoute.queryParams.getValue();
|
||||||
let url = event.urlAfterRedirects.split("?")[0];
|
let url = activatedRoute.url.getValue()[0].path;
|
||||||
|
//let url = event.urlAfterRedirects.split("?")[0].split("(")[0];
|
||||||
let label = null;
|
let label = null;
|
||||||
|
|
||||||
if(componentName == "ProjectsComponent") {
|
if(componentName == "ProjectsComponent") {
|
||||||
label = "Projects";
|
label = "Projects";
|
||||||
isBaseComponent = true;
|
this.breadcrumbData.length = 0;
|
||||||
}
|
}
|
||||||
if(componentName == "DmpComponent"){
|
if(componentName == "DmpComponent"){
|
||||||
label = "My Data Management Plans";
|
label = "My Data Management Plans";
|
||||||
isBaseComponent = true;
|
this.breadcrumbData.length = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(componentName == "DatasetsComponent"){
|
if(componentName == "DatasetsComponent"){
|
||||||
label = "Datasets of DMP '"+params["label"]+"'";
|
label = "Datasets of DMP '"+params["label"]+"'";
|
||||||
isBaseComponent = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(componentName == "DynamicFormComponent"){
|
if(componentName == "DynamicFormComponent"){
|
||||||
label = "Form of dataset '"+params["label"]+"'";
|
label = "Form of dataset '"+params["label"]+"'";
|
||||||
isBaseComponent = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(componentName == "DmpDetailedComponent"){
|
if(componentName == "DmpDetailedComponent"){
|
||||||
label = "Details of DMP '"+params["label"]+"'";
|
label = "Details of DMP '"+params["label"]+"'";
|
||||||
isBaseComponent = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(componentName == "ProjectDetailedComponent"){
|
if(componentName == "ProjectDetailedComponent"){
|
||||||
label = "Details of Project '"+params["label"]+"'";
|
label = "Details of Project '"+params["label"]+"'";
|
||||||
isBaseComponent = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -82,19 +80,16 @@ export class BreadcrumbComponent implements OnInit {
|
||||||
|
|
||||||
console.log("COMPONENT NAME="+componentName);
|
console.log("COMPONENT NAME="+componentName);
|
||||||
|
|
||||||
return {"menuItem": menuItem, "isBaseComponent": isBaseComponent};
|
return menuItem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
adaptBreadcrumbByMenuItem(menuItem : MenuItem, isBaseComponent : boolean){
|
adaptBreadcrumbByMenuItem(menuItem : MenuItem){
|
||||||
|
|
||||||
if(menuItem==null){
|
if(menuItem==null){
|
||||||
this.breadcrumbData.length = 0;
|
this.breadcrumbData.length = 0;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(isBaseComponent){
|
|
||||||
this.breadcrumbData.length = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
let breadcrumbDataNew: MenuItem[] = new Array<MenuItem>();
|
let breadcrumbDataNew: MenuItem[] = new Array<MenuItem>();
|
||||||
for(var i=0; i<this.breadcrumbData.length;i++){
|
for(var i=0; i<this.breadcrumbData.length;i++){
|
||||||
|
|
|
@ -1,8 +1,34 @@
|
||||||
|
var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
|
||||||
|
var scope = [
|
||||||
|
'profile',
|
||||||
|
'email'
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
|
if(gapi.auth2 == undefined){
|
||||||
|
|
||||||
|
gapi.load('auth2', () => {
|
||||||
|
|
||||||
|
gapi.auth2.init({
|
||||||
|
client_id: clientId,
|
||||||
|
cookiepolicy: 'single_host_origin',
|
||||||
|
scope: scope
|
||||||
|
});
|
||||||
|
|
||||||
|
//RE-Render the button (due to known issues of google-button with angular's lifecycle)
|
||||||
|
gapi.signin2.render('googleBtn');
|
||||||
|
|
||||||
|
//var buttonElement = this.element.nativeElement.querySelector('#googleBtn');
|
||||||
|
//this.attachSignin(buttonElement);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
var sign_out_google = (function() {
|
var sign_out_google = (function() {
|
||||||
var auth2 = gapi.auth2.getAuthInstance();
|
var auth2 = gapi.auth2.getAuthInstance();
|
||||||
auth2.signOut().then(function () {
|
auth2.signOut().then(function () {
|
||||||
console.log('User signed out from google.');
|
console.log('User signed out from google.');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -51,8 +51,6 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue