edit dataset form

This commit is contained in:
annampak 2017-10-30 16:56:50 +02:00
parent ec2219680a
commit d3754d31c3
10 changed files with 251 additions and 196 deletions

View File

@ -1,5 +1,5 @@
import { Component, OnInit, Input, ViewChild, NgZone ,Output ,EventEmitter} from '@angular/core';
import {GoogleSignInSuccess} from 'angular-google-signin';
import { Component, OnInit, Input, ViewChild, NgZone, Output, EventEmitter } from '@angular/core';
import { GoogleSignInSuccess } from 'angular-google-signin';
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
@ -9,78 +9,78 @@ import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-d
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';
declare var $ :any;
declare var $: any;
@Component({
selector: 'datasets-table',
templateUrl: 'dataset.html',
// template: `
// <h1 class="title">Projects</h1>
// <ul class="list-group col-md-4">
// <li *ngFor="let project of projects"
// class="list-group-item">
// <a [routerLink]="['/dynamic-form', project.id]" >
// {{ project.name }}
// </a>
// </li>
// </ul>
// template: `
// <h1 class="title">Projects</h1>
// <router-outlet></router-outlet>
// `,
providers: [ServerService]
// <ul class="list-group col-md-4">
// <li *ngFor="let project of projects"
// class="list-group-item">
// <a [routerLink]="['/dynamic-form', project.id]" >
// {{ project.name }}
// </a>
// </li>
// </ul>
// <router-outlet></router-outlet>
// `,
providers: [ServerService]
})
export class DatasetsComponent implements OnInit{
export class DatasetsComponent implements OnInit {
returnUrl: string;
@Input() datasets: Dataset[];
@Input() datasetProfileDropDown: DropdownField;
datasetResource :DataTableResource<Dataset>;
datasetResource: DataTableResource<Dataset>;
@Input() datasetCount = 0;
@Input() dmpIdforDatasets: string;
dataset:any;
dataset: any;
//@ViewChild(DataTable) projectsTable;
dataSetValue:boolean
dataSetValue: boolean
@Input()
get dataSetVisibe(){
get dataSetVisibe() {
return this.dataSetValue;
}
@Output()
public dataSetValueChange = new EventEmitter();
set dataSetVisibe(value:any){
this.dataSetValue = value
set dataSetVisibe(value: any) {
this.dataSetValue = value
this.dataSetValueChange.emit(this.dataSetValue)
}
constructor(
constructor(
private serverService: ServerService,
private route: ActivatedRoute,
private router: Router,
private ngZone: NgZone){
this.dataset = {
id:null,
label:'',
reference:'',
uri:'',
properties:'',
profile:{"id": ''},
dmp:{"id": ''}
}
private ngZone: NgZone) {
this.dataset = {
id: null,
label: '',
reference: '',
uri: '',
properties: '',
profile: { "id": '' },
dmp: { "id": '' }
}
this.datasetProfileDropDown = new DropdownField();
this.datasetProfileDropDown.options = [];
this.datasetProfileDropDown = new DropdownField();
this.datasetProfileDropDown.options = [];
}
ngOnInit() {debugger;
ngOnInit() {
//this.projects = this.serverService.getDummyProjects();
this.datasets = [];
console.log(this.dmpIdforDatasets);
this.serverService.getDatasetForDmp({"id":this.dmpIdforDatasets}).subscribe(
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
response => {
console.log("response");
@ -91,14 +91,17 @@ export class DatasetsComponent implements OnInit{
dt.id = resp.id;
dt.name = resp.label;
dt.uriDataset = resp.uri;
dt.dmp = resp.dmp.label;
dt.profile = resp.profile.label;
dt.profileId = resp.profile.id;
this.datasets.push(dt);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
var params = { limit: 8, offset: 0, sortAsc: false }
this.afterLoad();
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
});
}
);
}
);
this.serverService.getAllDatsetsProfile().subscribe(
response => {
console.log("response");
@ -118,47 +121,47 @@ export class DatasetsComponent implements OnInit{
reloadDatasets(params) {
this.datasetResource = new DataTableResource(this.datasets);
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
}
}
afterLoad(){
this.datasetResource = new DataTableResource(this.datasets);
this.datasetResource.count().then(count => this.datasetCount = count);
}
afterLoad() {
this.datasetResource = new DataTableResource(this.datasets);
this.datasetResource.count().then(count => this.datasetCount = count);
}
rowClick(rowEvent){
this.ngZone.run(() => this.router.navigateByUrl('dynamic-form', rowEvent.row.item.id));
}
selectDataset(item) {debugger;
this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profileId}]));
}
SaveNewDataset(){debugger;
this.dataset.dmp={"id": this.dmpIdforDatasets}
this.dataset.profile = {"id": this.dataset.profile}
this.serverService.createDatasetForDmp(this.dataset).subscribe(
response=>{
console.log(response);
}
)
$("#newDatasetModal").modal("hide");
this.serverService.getDatasetForDmp({"id":this.dmpIdforDatasets}).subscribe(
response => {
SaveNewDataset() {
this.dataset.dmp = { "id": this.dmpIdforDatasets }
this.dataset.profile = { "id": this.dataset.profile }
this.serverService.createDatasetForDmp(this.dataset).subscribe(
response => {
console.log(response);
console.log("response");
console.log(response);
this.datasets = [];
response.forEach(resp => {
}
)
$("#newDatasetModal").modal("hide");
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
response => {
let dt = new Dataset();
dt.id = resp.id;
dt.name = resp.label;
dt.uriDataset = resp.uri;
this.datasets.push(dt);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
});
}
);
}
console.log("response");
console.log(response);
this.datasets = [];
response.forEach(resp => {
let dt = new Dataset();
dt.id = resp.id;
dt.name = resp.label;
dt.uriDataset = resp.uri;
this.datasets.push(dt);
var params = { limit: 8, offset: 0, sortAsc: false }
this.afterLoad();
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
});
}
);
}
// special params:
translations = <DataTableTranslations>{
@ -167,28 +170,44 @@ SaveNewDataset(){debugger;
selectColumn: 'Select column',
paginationLimit: 'Max results',
paginationRange: 'Result range'
};
};
getDatasetForDmpMethod(dmpid){
this.serverService.getDatasetForDmp({"id":dmpid}).subscribe(
response => {
getDatasetForDmpMethod(dmpid) {
this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
response => {
console.log("response");
console.log(response);
this.datasets = [];
response.forEach(resp => {
console.log("response");
console.log(response);
this.datasets = [];
response.forEach(resp => {
let dt = new Dataset();
dt.id = resp.id;
dt.name = resp.label;
dt.uriDataset = resp.uri;
this.datasets.push(dt);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
});
}
);
}
let dt = new Dataset();
dt.id = resp.id;
dt.name = resp.label;
dt.uriDataset = resp.uri;
this.datasets.push(dt);
var params = { limit: 8, offset: 0, sortAsc: false }
this.afterLoad();
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
});
}
);
}
editRow(item) {
this.dataset.label = item.label;
this.dataset.uri = item.uriDataset;
this.dataset.dmp = item.dmp;
this.dataset.profile = item.profileId;
$("#newDatasetModal").modal("show");
}
newDataset() {
this.dataset.label = "";
this.dataset.uri = "";
this.dataset.dmp =this.dmpIdforDatasets;
this.dataset.profile = "";
$("#newDatasetModal").modal("show");
}
}

View File

@ -1,21 +1,37 @@
<div style="margin: auto; max-width: 1000px; margin-top:50px">
<data-table id="films-grid" headerTitle="Datasets" [items]="datasets" [itemCount]="datasetCount" (reload)="reloadDatasets($event)"
[limit]="8" [sortBy]="'rating'" [sortAsc]="false" [substituteRows]="false"
[translations]="translations" [selectOnRowClick]="true" (rowClick)="rowClick($event)">
[translations]="translations" >
<data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
</data-table-column>
<!-- <data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
</data-table-column> -->
<data-table-column [property]="'id'" [header]="'Id'" [sortable]="true">
<data-table-column [property]="'dmp'" [header]="'DMP'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'profile'" [header]="'Profile'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'uriDataset'" [header]="'Uri'" [sortable]="true">
</data-table-column>
<!-- <data-table-column [property]="'definition'" [header]="'Definition'" [sortable]="true">
</data-table-column> -->
<data-table-column header="Actions">
<template #dataTableHeader let-item="item">
<i>Actions</i>
</template>
<template #dataTableCell let-item="item">
<a class="editGridColumn" (click) = "editRow(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
</template>
</data-table-column>
<data-table-column header="Edit">
<template #dataTableHeader let-item="item">
<i>Edit</i>
</template>
<template #dataTableCell let-item="item">
<a class="editGridColumn" (click) = "selectDataset(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
</template>
</data-table-column>
</data-table>
<div style="margin-top: 10px">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#newDatasetModal">New Dataset</button>
<button type="button" class="btn btn-info" (click) = "newDataset(item)" >New Dataset</button> <!-- data-toggle="modal" data-target="#newDatasetModal" -->
<!-- <b>Selected:</b>
<span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
<span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span> -->
@ -44,23 +60,19 @@
<label for="label-name" class="form-control-label">Label:</label>
<input type="text" class="form-control" id="label-name" [(ngModel)]= "dataset.label" name = "label">
</div>
<!-- <div class="form-group">
<label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]= "dataset.abbreviation" name = "abbreviation">
</div> -->
<div class="form-group">
<label for="reference-text" class="form-control-label">Reference:</label>
<input class="form-control" id="reference-text" [(ngModel)]= "dataset.reference" name = "reference">
<label for="abbreviation-text" class="form-control-label">DMP:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]= "dataset.dmp" name = "dmp">
</div>
<div class="form-group">
<label for="uri-text" class="form-control-label">Uri:</label>
<input class="form-control" id="uri-text" [(ngModel)]= "dataset.uri" name = "uri">
</div>
<!-- <div class="form-group">
<label for="start-date" class="form-control-label">Start Date:</label>
<input class="form-control" id="startDate-date" [(ngModel)]= "dataset.startDate" name = "startDate">
<div class="form-group">
<label for="start-date" class="form-control-label">Properties:</label>
<input class="form-control" id="startDate-date" [(ngModel)]= "dataset.properties" name = "properties">
</div>
<div class="form-group">
<!-- <div class="form-group">
<label for="end-date" class="form-control-label">End Date:</label>
<input class="form-control" id="endDate-date" [(ngModel)]= "dataset.endDate" name = "endDate">
</div> -->

View File

@ -48,10 +48,10 @@ export class DmpComponent implements OnInit{
this.dataSetVisibe = false;
this.dmp = {
label: '',
abbreviation:'',
reference:'',
uri:'',
definition:''
previous:'',
version:'',
profileData:'',
profile:''
}
}
@ -71,27 +71,30 @@ console.log(response);
dmp.version = resp.version;
dmp.dataset = resp.dataset;
dmp.projectLabel = resp.project.label;
dmp.projectid = resp.project.id;
dmp.previous = resp.previous;
dmp.profile = resp.profile;
dmp.profileData = resp.profileData;
this.dmps.push(dmp);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();
this.dmpResource.query(params).then(dmps => this.dmps = dmps);
}
);
}
// (err: HttpErrorResponse) => {
// if (err.error instanceof Error) {
// // A client-side or network error occurred. Handle it accordingly.
// console.log('An error occurred:', err.error.message);
// } else {
// // The backend returned an unsuccessful response code.
// // The response body may contain clues as to what went wrong,
// if(err.status == 401){
// this.isignOutBtn.nativeElement.click();
// }
// console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
// }
// }
);
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
console.log('An error occurred:', err.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
if(err.status == 401){
this.isignOutBtn.nativeElement.click();
}
console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
}
}
});
this.serverService.getAllProjects().subscribe(
response => {
@ -186,7 +189,7 @@ signOut() {
    this.serverService.logOut();
}
selectDmp(rowEvent){debugger;
selectDmp(rowEvent){
this.dmpIdforDatasets = rowEvent.row.item.id;
if(this.dataSetVisibe == false)
this.dataSetVisibe = true;
@ -194,12 +197,25 @@ selectDmp(rowEvent){debugger;
this.datasetsComponent.getDatasetForDmpMethod(rowEvent.row.item.id);
}
editRow(item){debugger;
editRow(item){
this.dmp.label = item.label;
this.dmp.abbreviation = item.abbreviation;
this.dmp.uri = item.uri;
this.dmp.previous = item.previous;
this.dmp.version = item.version;
this.dmp.profile = item.profile;
this.dmp.profileData = item.profileData;
this.dmp.id = item.id;
this.dmp.project = item.project;
this.dmp.project = item.projectid;
this.dmp.projectid = item.projectid;
$("#newDmpModal").modal("show");
}
newDmp(item){
this.dmp.label = "";
this.dmp.previous = "";
this.dmp.version = "";
this.dmp.profile = "";
this.dmp.profileData = "";
this.dmp.project = "";
$("#newDmpModal").modal("show");
}

View File

@ -46,7 +46,7 @@
<!-- <span *ngIf="dmpsTable.selectedRow == null"><i>No item selected</i></span>
<span [textContent]="dmpsTable.selectedRow && dmpsTable.selectedRow.item.name"></span> -->
</div>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#newDmpModal">New Dmp</button>
<button type="button" class="btn btn-info" (click) = "newDmp(item)">New Dmp</button> <!-- data-toggle="modal" data-target="#newDmpModal" -->
<!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
<option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
@ -74,23 +74,23 @@
</div>
<div class="form-group">
<label for="label-name" class="form-control-label">Previous:</label>
<input type="text" class="form-control" id="label-previous" [(ngModel)]= "dmp.previous" name = "label">
<input type="text" class="form-control" id="label-previous" [(ngModel)]= "dmp.previous" name = "previous">
</div>
<div class="form-group">
<label for="label-name" class="form-control-label">Label:</label>
<input type="text" class="form-control" id="label-name" [(ngModel)]= "dmp.label" name = "label">
</div>
<div class="form-group">
<label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]= "dmp.version" name = "abbreviation">
<label for="abbreviation-text" class="form-control-label">Version:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]= "dmp.version" name = "version">
</div>
<div class="form-group">
<label for="reference-text" class="form-control-label">Reference:</label>
<input class="form-control" id="reference-text" [(ngModel)]= "dmp.profileData" name = "reference">
<label for="reference-text" class="form-control-label">Profile Data:</label>
<textarea class="form-control" id="reference-text" [(ngModel)]= "dmp.profileData" name = "profileData"></textarea>
</div>
<div class="form-group">
<label for="uri-text" class="form-control-label">Uri:</label>
<input class="form-control" id="uri-text" [(ngModel)]= "dmp.profile" name = "uri">
<label for="uri-text" class="form-control-label">Profile:</label>
<input class="form-control" id="uri-text" [(ngModel)]= "dmp.profile" name = "profile">
</div>
<!-- <div class="form-group">
<label for="start-date" class="form-control-label">Start Date:</label>

View File

@ -4,4 +4,7 @@ export class Dataset {
id:string;
name: string;
uriDataset: string;
dmp:string;
profile:string;
profileId:string;
}

View File

@ -9,5 +9,6 @@ export class Dmp {
profile:string;
profileData:string;
projectLabel:string;
projectid:string;
version: number;
}

View File

@ -1,7 +1,7 @@
import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import 'rxjs/add/operator/switchMap';
//import { FieldBase } from '../../app/form/fields/field-base';
@ -29,6 +29,7 @@ export class DynamicFormComponent implements OnInit {
@Input() dirtyValues: number = 0;
// pagination object
@Input() pagination: any = {};
id:string;
private fragment: string;
xml2jsonOBJ: any;
@ -48,11 +49,14 @@ export class DynamicFormComponent implements OnInit {
this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
let id = this.route.snapshot.paramMap.get('id'); //get the project id
//let id = this.route.snapshot.paramMap.get('id'); //get the project id
this.serverService.getData().subscribe(
let sub = this.route.params.subscribe(params => {
this.id = params.id;
});
this.serverService.getDatsetsProfile(this.id).subscribe(
response => {
@ -61,24 +65,18 @@ export class DynamicFormComponent implements OnInit {
const data = response;
console.log("data.dataset--BEFORE")
console.log(response.dataset.profile.definition)
console.log(response.dataset.profile.ruleset.definition)
console.log(response.dataset.profile.viewstyle.definition)
//replace the xmls {model,view,rule} definitions with json -- https://github.com/abdmob/x2js library
data.dataset.profile.definition = this.xml2jsonOBJ.xml_str2json(data.dataset.profile.definition);
data.dataset.profile.ruleset.definition = this.xml2jsonOBJ.xml_str2json(data.dataset.profile.ruleset.definition);
data.dataset.profile.viewstyle.definition = this.xml2jsonOBJ.xml_str2json(data.dataset.profile.viewstyle.definition);
data.definition = this.xml2jsonOBJ.xml_str2json(data.definition);
data.ruleset.definition = this.xml2jsonOBJ.xml_str2json(data.ruleset.definition);
data.viewstyle.definition = this.xml2jsonOBJ.xml_str2json(data.viewstyle.definition);
//can be converted back to xml (which shouldn't be needed) with this.xml2jsonOBJ.json2xml_str
console.log("this.serverService.getFields");
console.log("data.dataset")
console.log(data.dataset.profile.definition)
console.log(data.dataset.profile.ruleset.definition)
console.log(data.dataset.profile.viewstyle.definition)
console.log(data.definition)
console.log(data.ruleset.definition)
console.log(data.viewstyle.definition)
this.dataModel = new DataModel();

View File

@ -26,12 +26,12 @@ export class dataModelBuilder {
return this.dataModel;
this.dataModel = new DataModel();
this.fields = this.buildFields(data.dataset.profile.viewstyle.definition.root.fields.field);
this.dataModel.groups = this.getGroups(data.dataset.profile.viewstyle.definition.root.fieldGroups.fieldGroup, this.fields);
this.fields = this.buildFields(data.viewstyle.definition.root.fields.field);
this.dataModel.groups = this.getGroups(data.viewstyle.definition.root.fieldGroups.fieldGroup, this.fields);
this.dataModel.semanticAttr = new Array(new Attribute);
//this.dataModel.semanticAttr = data.dataset.profile.definition.root.fields.field;
this.dataModel.semanticAttr = this.getFieldsAttributes(data.dataset.profile.definition.root.fields.field, data.dataset.profile.ruleset.definition.root.functions.function, this.fields);
this.dataModel.sections = this.getSections(data.dataset.profile.viewstyle.definition.root.sections.section, this.dataModel.groups);
this.dataModel.semanticAttr = this.getFieldsAttributes(data.definition.root.fields.field, data.ruleset.definition.root.functions.function, this.fields);
this.dataModel.sections = this.getSections(data.viewstyle.definition.root.sections.section, this.dataModel.groups);
this.dataModel.buildIndex();
return this.dataModel;
@ -224,41 +224,43 @@ export class dataModelBuilder {
if (attr.sources) {
newAttribute.sources.push(attr.sources.source);
if (attr.sources.source.url !== undefined) {
for (var i = 0; i < attr.sources.source.length; i++) {
if (attr.sources.source[i].url !== undefined) {
fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source[i].url._value;
fields.find(x => x.key == newAttribute.id).url.url = attr.sources.source.url._value;
this.restBase.proxy_get(attr.sources.source.url._value).subscribe((data) => {
console.log(data);
newAttribute.sources.forEach(src => {
src.params = new Array();
data.data.forEach(data => {
let prm = new Param();
prm.key = data.id;
prm.value = data.attributes.name;
src.params.push(prm);
this.restBase.proxy_get(attr.sources.source[i].url._value).subscribe((data) => {
console.log(data);
newAttribute.sources.forEach(src => {
src.params = new Array();
data.data.forEach(data => {
let prm = new Param();
prm.key = data.id;
prm.value = data.attributes.name;
src.params.push(prm);
});
});
});
break;
} else {
newAttribute.sources.forEach(src => {
});
} else {
newAttribute.sources.forEach(src => {
src.params = new Array();
for (var i = 0, len = attr.sources.source.value.length; i < len; i++) {
let prm = new Param();
prm.key = attr.sources.source.value[i]._value;
prm.value = attr.sources.source.value[i]._label;
src.params.push(prm);
}
src.params = new Array();
for (var i = 0, len = attr.sources.source[i].value.length; i < len; i++) {
let prm = new Param();
prm.key = attr.sources.source[i].value[i]._value;
prm.value = attr.sources.source[i].value[i]._label;
src.params.push(prm);
}
});
});
}
}
}

View File

@ -22,7 +22,7 @@ export class RestBase {
webappname: string = "dmp-backend";//"dmp-backend-new";//
/* protocol: string = "http";
/*protocol: string = "http";
hostname: string = "dionysus.di.uoa.gr" ;
port: number = 7070;
webappname: string = "dmp-backend";*/

View File

@ -120,6 +120,10 @@ public createDatasetForDmp(data:any){
public getAllDatsetsProfile(){
return this.restBase.get("datasetprofile/getAll");
}
public getDatsetsProfile(id){debugger;
return this.restBase.get("datasetprofiles/"+id);
}
logOut() {