This commit is contained in:
Nikolaos Laskaris 2017-10-18 11:29:22 +03:00
parent a4fee58983
commit 3c8e6629cb
23 changed files with 445 additions and 7 deletions

View File

@ -23,6 +23,7 @@ import { ResearcherService } from './services/researcher-service';
import { OrganisationService } from './services/organisation-service';
import { DmpProfileService } from './services/dmpprofile-service';
import { RegistryService } from './services/registry-service';
import { DatarepoService } from './services/datarepo-service';
import { Toolbox } from './services/toolbox';
import { DataFilterPipe } from './pipes/data-filter.pipe';
@ -33,6 +34,7 @@ import { ProjectTableFilterPipe } from './pipes/project-table-filter.pipe';
import { RegistryTableFilterPipe } from './pipes/registry-table-filter.pipe';
import { OrganisationTableFilterPipe } from './pipes/organisation-table-filter.pipe';
import { ResearcherTableFilterPipe } from './pipes/researcher-table-filter.pipe';
import { DatarepoTableFilterPipe } from './pipes/datarepo-table-filter.pipe';
import { GooggleSignInComponent } from './login/googgle-sign-in/googgle-sign-in.component';
@ -53,6 +55,7 @@ import { OrganisationEditorComponent } from './managers/organisation-editor/orga
import { RegistryEditorComponent } from './managers/registry-editor/registry-editor.component';
import { ServiceEditorComponent } from './managers/service-editor/service-editor.component';
import { ResearcherEditorComponent } from './managers/researcher-editor/researcher-editor.component';
import { DatareposEditorComponent } from './managers/datarepos-editor/datarepos-editor.component';
@ -66,6 +69,7 @@ import { ResearcherEditorComponent } from './managers/researcher-editor/research
RegistryTableFilterPipe,
ServiceTableFilterPipe,
ResearcherTableFilterPipe,
DatarepoTableFilterPipe,
AppComponent,
GooggleSignInComponent,
@ -82,7 +86,8 @@ import { ResearcherEditorComponent } from './managers/researcher-editor/research
RegistryEditorComponent,
ServiceEditorComponent,
MainSignInComponent,
ResearcherEditorComponent
ResearcherEditorComponent,
DatareposEditorComponent
],
imports: [
BrowserModule,
@ -97,7 +102,7 @@ import { ResearcherEditorComponent } from './managers/researcher-editor/research
AppRouting
],
providers: [ DatasetsServiceService, TokenService, DmpsServiceService, ResearcherService,
DialogService, DatasetProfileService, ProjectService, OrganisationService,
DialogService, DatasetProfileService, ProjectService, OrganisationService, DatarepoService,
DmpProfileService, RegistryService, ServiceService, NativeLoginService, HttpModule, Toolbox, HttpClient, RestBase],
bootstrap: [AppComponent]
})

View File

@ -23,11 +23,11 @@
<li [ngClass]="{true:'active'}[currentlySelected=='dmpprofiles']" (click)="setActive('dmpprofiles')" [routerLink]="['/dmpprofiles']">DMP profiles</li>
</ul>
<li data-toggle="collapse" data-target="#data-repositories" class="collapsed">
<li data-toggle="collapse" data-target="#manage-repositories" class="collapsed">
<a style="cursor:pointer"><i class="fa fa-database"></i> Manage Data Repositories <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="data-repositories">
<li>Data Repositories</li>
<ul class="sub-menu collapse" id="manage-repositories">
<li [ngClass]="{true:'active'}[currentlySelected=='datarepos']" (click)="setActive('datarepos')" [routerLink]="['/datarepos']">Data Repositories</li>
<li>Non-assigned repositories</li>
</ul>

View File

@ -0,0 +1,33 @@
.invisible {
display:none;
}
.visible {
display:block;
}
tr.hover:hover > * {
background-color: #eeeeee;
}
.editor-container{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.button-150px {
max-width: 150px;
}
.ng-template{
text-align: right;
}
.grayout-empty-table {
opacity: 0.6; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
text-align: center;
vertical-align: middle;
}

View File

@ -0,0 +1,122 @@
<div class="editor-container container">
<div [ngClass]="{true:'visible', false:'invisible'}[tableVisible]">
<table class="table table-striped" [mfData]="tableData | datarepoTableFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th colspan="1">
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter'/>
</th>
<th>
<button class="btn btn-default" (click)="refreshTable($event)">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</th>
</tr>
<tr>
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]"><mfDefaultSorter by="id">ID</mfDefaultSorter></th>
<th><mfDefaultSorter by="label">Label</mfDefaultSorter></th>
<th><mfDefaultSorter by="abbreviation">Abbreviation</mfDefaultSorter></th>
<th><mfDefaultSorter by="reference">Reference</mfDefaultSorter></th>
<th><mfDefaultSorter by="uri">Uri</mfDefaultSorter></th>
<th><mfDefaultSorter by="definition">Definition</mfDefaultSorter></th>
</tr>
</thead>
<tbody>
<tr class="grayout-empty-table" *ngIf="!mf.data[0]" [contextMenu]="basicMenu" [contextMenuSubject]="datarepo"> <td colspan="5">No elements</td></tr>
<tr *ngFor="let datarepo of mf.data" class="hover" [contextMenu]="basicMenu" [contextMenuSubject]="datarepo">
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{datarepo.id}}</td>
<td>{{datarepo?.label}}</td>
<td>{{datarepo?.abbreviation}}</td>
<td>{{datarepo?.reference}}</td>
<td>{{datarepo?.uri}}</td>
<td>{{datarepo?.definition}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<mfBootstrapPaginator [rowsOnPageSet]="[10,20,40]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- this is the dmp editor -->
<div [ngClass]="{true:'visible', false:'invisible'}[editorVisible]">
<div> <!-- form container -->
<div style="display:block;">
<button (click)="switchToTable()" class="btn btn-lg btn-success pull-right" style="max-width:120px;">
<span class="glyphicon glyphicon-arrow-left"></span> Go back
</button>
</div>
<form [formGroup]="datarepoEditorForm" novalidate style="display:block;">
<div class="form-group" [ngClass]="{null:'invisible'}[editingDatarepo?.id]">
<label class="center-block">ID: {{editingDatarepo?.id}}
<input class="form-control invisible" formControlName="id" [ngModel]="editingDatarepo?.id">
</label>
</div>
<div class="form-group">
<label class="center-block">Label:
<input class="form-control" formControlName="label" [ngModel]="editingDatarepo?.label" (ngModelChange)="editingDatarepo.label=$event">
</label>
</div>
<div class="form-group">
<label class="center-block">Abbreviation:
<input class="form-control" formControlName="abbreviation" [ngModel]="editingDatarepo?.abbreviation" (ngModelChange)="editingDatarepo.abbreviation=$event">
</label>
</div>
<div class="form-group">
<label class="center-block">Reference:
<input class="form-control" formControlName="reference" [ngModel]="editingDatarepo?.reference" (ngModelChange)="editingDatarepo.reference$event">
</label>
</div>
<div class="form-group">
<label class="center-block">Uri:
<input class="form-control" formControlName="uri" [ngModel]="editingDatarepo?.uri" (ngModelChange)="editingDatarepo.uri$event">
</label>
</div>
<div class="form-group">
<label class="center-block">Definition:
<input class="form-control" formControlName="definition" [ngModel]="editingDatarepo?.definition" (ngModelChange)="editingDatarepo.definition$event">
</label>
</div>
<div class="form-group" style="width:540px;">
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ datarepoEditorForm.value | json }}</p>
-->
</div>
</div>
</div>
<context-menu>
<ng-template contextMenuItem [subMenu]="manage">
<span></span>Manage data repositories
</ng-template>
<context-menu #manage>
<ng-template contextMenuItem (execute)="newDatarepo($event?.item)">
<span class="glyphicon glyphicon-plus"></span>Create data repository
</ng-template>
<ng-template contextMenuItem (execute)="editDatarepo($event?.item?.id)">
<span class="glyphicon glyphicon-pencil"></span>Edit this data repository
</ng-template>
<ng-template contextMenuItem (execute)="delete($event?.item?.id)">
<span class="glyphicon glyphicon-trash red"></span> Delete this
</ng-template>
</context-menu>
<ng-template contextMenuItem>
<span></span>Show full tree connections
</ng-template>
</context-menu>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatareposEditorComponent } from './datarepos-editor.component';
describe('DatareposEditorComponent', () => {
let component: DatareposEditorComponent;
let fixture: ComponentFixture<DatareposEditorComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DatareposEditorComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatareposEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,137 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { DatarepoService } from '../../services/datarepo-service';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import '../../../assets/custom.js';
declare function simple_notifier(type: string, title: string, message:string): any;
@Component({
selector: 'app-datarepos-editor',
templateUrl: './datarepos-editor.component.html',
styleUrls: ['./datarepos-editor.component.css']
})
export class DatareposEditorComponent implements OnInit {
constructor(private datarepoService : DatarepoService, private fb: FormBuilder) {
}
//whole dmp data model
tableData : any[] = new Array();
//datarepos editor data model
editingDatarepo: any = {};
datarepoEditorForm : any;
//required by the table
public filterQuery = "";
public rowsOnPage = 10;
//public sortBy = "email";
public sortOrder = "asc";
//visibility rules for containers
tableVisible: boolean = true;
editorVisible: boolean = false;
// for tableIds
showIDs : boolean = false;
ngOnInit() {
this.getAllDatarepos(false);
this.createDatareposEditorForm();
}
createDatareposEditorForm(){
this.datarepoEditorForm = this.fb.group({
id: null,
label: ['', Validators.required ],
abbreviation: '',
reference: '',
uri: '',
definition: ''
});
}
switchToTable(){
this.tableVisible = true;
this.editorVisible = false;
}
switchToEditor(datarepoID){
this.tableVisible = false;
this.editorVisible = true;
if(datarepoID == null){
this.editingDatarepo = {id: null, label: "", abbreviation: "", reference: "", uri: "", definition: "" };
}
else{
this.editingDatarepo = this.tableData.filter((datarepo) => datarepo.id === datarepoID)[0];
}
}
getAllDatarepos(showNotification : boolean){
this.datarepoService.getAllDatarepos().subscribe( (data) => {
this.tableData = data;
if(showNotification)
simple_notifier("info",null,"Refreshed the table");
});
}
editDatarepo(datarepo){
this.switchToEditor(datarepo);
}
newDatarepo(){
this.switchToEditor(null);
}
save(mouseEvent){
this.datarepoService.create(this.datarepoEditorForm.value).subscribe(
response => {
simple_notifier("success",null,"Saved data repository");
this.getAllDatarepos(false);
this.switchToTable();
},
err => {
simple_notifier("danger",null,"Could not save data repository");
}
);
}
delete(datarepo){
this.datarepoService.delete(datarepo).subscribe(
(response) => {
simple_notifier("success",null,"Deleted data repository");
this.getAllDatarepos(false);
this.switchToTable();
},
(err) => {
simple_notifier("danger",null,"Could not delete data repository");
}
)
}
refreshTable($event){
this.getAllDatarepos(true);
}
@ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;
}

View File

@ -102,7 +102,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ dmpEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -125,6 +125,7 @@ export class DmpEditorComponent implements OnInit {
response => {
simple_notifier("success",null,"Saved dmp");
this.getAllDmps(false);
this.switchToTable();
},
err => {
simple_notifier("danger",null,"Could not save dmp");

View File

@ -67,7 +67,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ dmpProfileEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -100,6 +100,7 @@ export class DmpProfileEditorComponent implements OnInit {
response => {
simple_notifier("success",null,"Saved DMP Profile");
this.getAllDmpProfiles(false);
this.switchToTable();
},
err => {
simple_notifier("danger",null,"Could not save DMP Profile");

View File

@ -89,7 +89,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ organisationEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -100,6 +100,7 @@ export class OrganisationEditorComponent implements OnInit {
response => {
simple_notifier("success",null,"Saved organisation");
this.getAllOrganisations(false);
this.switchToTable();
},
err => {
simple_notifier("danger",null,"Could not save organisation");
@ -111,7 +112,7 @@ export class OrganisationEditorComponent implements OnInit {
this.organisationService.delete(organisation).subscribe(
(response) => {
simple_notifier("success",null,"Deleted organisation");
this.refreshTable(false);
this.getAllOrganisations(false);
this.switchToTable();
},
(err) => {

View File

@ -88,7 +88,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ projectEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -88,7 +88,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ registryEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -102,6 +102,8 @@ export class RegistryEditorComponent implements OnInit {
this.registryService.create(this.registryEditorForm.value).subscribe(
response => {
simple_notifier("success",null,"Saved registry");
this.getAllRegistries(false);
this.switchToTable();
},
err => {
simple_notifier("danger",null,"Could not save registry");
@ -113,8 +115,8 @@ export class RegistryEditorComponent implements OnInit {
this.registryService.delete(registry).subscribe(
(response) => {
simple_notifier("success",null,"Deleted registry");
this.getAllRegistries(false);
this.switchToTable();
this.refreshTable(false);
},
(err) => {
simple_notifier("danger",null,"Could not delete registry");

View File

@ -89,7 +89,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ researcherEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -100,6 +100,7 @@ export class ResearcherEditorComponent implements OnInit {
response => {
simple_notifier("success",null,"Saved resercher");
this.getAllResearchers(false);
this.switchToTable();
},
err => {
simple_notifier("danger",null,"Could not save researcher");

View File

@ -89,7 +89,9 @@
<button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
</div>
</form>
<!--
<p>Form value: {{ serviceEditorForm.value | json }}</p>
-->
</div>
</div>

View File

@ -0,0 +1,29 @@
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "datarepoTableFilter"
})
export class DatarepoTableFilterPipe implements PipeTransform {
transform(array: any[], query: string): any {
if (query) {
return _.filter(array, row => {
if (row.uri == null) row.uri = "";
if (row.label == null) row.label = "";
if (row.id == null) row.id = "";
return (
row.label.indexOf(query) > -1 ||
//row.version == query ||
row.id.indexOf(query) > -1
)
});
}
return array;
}
}

View File

@ -11,6 +11,7 @@ import { ServiceEditorComponent } from './managers/service-editor/service-editor
import { RegistryEditorComponent } from './managers/registry-editor/registry-editor.component';
import { OrganisationEditorComponent } from './managers/organisation-editor/organisation-editor.component';
import { ResearcherEditorComponent } from './managers/researcher-editor/researcher-editor.component';
import { DatareposEditorComponent } from './managers/datarepos-editor/datarepos-editor.component';
import { MainWindowComponent } from './main-window/main-window.component';
@ -29,6 +30,10 @@ export const routes: Routes = [
path: 'datasets',
component: DatasetsViewerComponent
},
{
path: 'datarepos',
component: DatareposEditorComponent
},
{
path: 'datasets/profile',
component: ProfileEditorComponent

View File

@ -0,0 +1,46 @@
import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
import { HttpClient , HttpHeaders, HttpParams} from '@angular/common/http';
import { TokenService, TokenProvider } from './login/token.service'
import { Injectable } from '@angular/core';
import { Toolbox } from '../services/toolbox';
import {RestBase} from './rest-base';
import 'rxjs/Rx';
@Injectable()
export class DatarepoService implements OnInit {
constructor(public restBase: RestBase) {
}
ngOnInit(){
}
getDatarepoIdsLabels() {
return this.restBase.get("datarepo/listAllLabelIDs");
}
getDatarepoIds(){
return this.restBase.get("datarepos");
}
getAllDatarepos(){
return this.restBase.get("datarepo/getAll");
}
create(datarepo){
return this.restBase.post("datarepo/create", datarepo);
}
delete(datarepoID){
var datarepo = {"id": datarepoID};
return this.restBase.post("datarepo/delete", datarepo);
}
}

3
dmp-backend/package-lock.json generated Normal file
View File

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

View File

@ -53,6 +53,7 @@ export class DynamicFormComponent implements OnInit {
this.serverService.getData().subscribe(
response => {
console.log("response");
@ -60,6 +61,12 @@ 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);
@ -67,6 +74,12 @@ export class DynamicFormComponent implements OnInit {
//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)
this.dataModel = new DataModel();
this.dataModel = this.dataModelService.getDataModel(data);