MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

New Tables, new action buttons, new filter

This commit is contained in:
annampak 2017-10-31 19:59:27 +02:00
parent bf7f6be531
commit 573e1fd92c
17 changed files with 549 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dmp-frontend/package-lock.json generated
View File

@ -581,6 +581,14 @@
"typescript": "2.3.4"
}
},
"angular2-datatable": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/angular2-datatable/-/angular2-datatable-0.6.0.tgz",
"integrity": "sha1-ygCPdAh/DLh9pXCe0vLR0GF3JjI=",
"requires": {
"lodash": "4.17.4"
}
},
"ansi-escapes": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz",
@ -4900,8 +4908,7 @@
"lodash": {
"version": "4.17.4",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
"dev": true
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
},
"lodash._arraycopy": {
"version": "3.0.0",

1
dmp-frontend/package.json
View File

@ -24,6 +24,7 @@
"angular-2-data-table": "^0.1.2",
"angular-4-data-table-bootstrap-4": "^0.2.0",
"angular-google-signin": "^0.1.5",
"angular2-datatable": "^0.6.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.2.1",

5
dmp-frontend/src/app/app.module.ts
View File

@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes, Router } from '@angular/router';
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
//import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
import { DataTableModule } from "angular2-datatable";
//import { OrganisationTableFilterPipe } from './pipes/organisation-table-filter.pipe';
import { AppComponent } from './app.component';
import { RestBase } from './services/rest-base';

39
dmp-frontend/src/app/datasets/dataset.component.css Normal file
View File

@ -0,0 +1,39 @@
.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;
}
.btncustom{
background-color:#337ab7;
color:white;
margin-top:15px;
}

86
dmp-frontend/src/app/datasets/dataset.component.ts
View File

@ -5,7 +5,8 @@ import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
import { Dataset } from '../entities/model/dataset';
import { Dmp } from '../entities/model/dmp';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
import {DataTable} from 'angular2-datatable';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';
@ -14,29 +15,38 @@ 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>
// <router-outlet></router-outlet>
// `,
styleUrls: ['./dataset.component.css'],
providers: [ServerService]
})
export class DatasetsComponent implements OnInit {
// Start ALTERNATIVE
//whole dmp data model
tableData : any[] = new Array();
//organisation editor data model
editingOrganisation: any = {};
organisationEditorForm : 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;
// END ALTERNATIVE
returnUrl: string;
@Input() datasets: Dataset[];
@Input() datasetProfileDropDown: DropdownField;
datasetResource: DataTableResource<Dataset>;
@Input() datasetCount = 0;
@Input() dmpIdforDatasets: string;
@Input() dmpLabelforDatasets: string;
@ -80,26 +90,10 @@ export class DatasetsComponent implements OnInit {
ngOnInit() {
//this.projects = this.serverService.getDummyProjects();
this.datasets = [];
console.log(this.dmpIdforDatasets);
console.log(this.dmpIdforDatasets);debugger;
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
response => {
console.log("response");
console.log(response);
response.forEach(resp => {
let dt = new Dataset();
dt.id = resp.id;
dt.name = resp.label;
dt.uriDataset = resp.uri;
dt.dmp = this.dmpLabelforDatasets; //to pairnw apo to datatable tou dmp
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);
});
this.tableData = response;
}
);
@ -119,16 +113,6 @@ 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);
}
selectDataset(item) {
this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profileId, datasetId:item.id, datasetProperties:item.properties}]));
}
@ -183,22 +167,11 @@ export class DatasetsComponent implements OnInit {
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);
});
}
);
}
// special params:
translations = <DataTableTranslations>{
indexColumn: 'Index column',
expandColumn: 'Expand column',
selectColumn: 'Select column',
paginationLimit: 'Max results',
paginationRange: 'Result range'
};
getDatasetForDmpMethod(dmpid) {
this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
@ -214,9 +187,6 @@ export class DatasetsComponent implements OnInit {
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);
});
}
);

110
dmp-frontend/src/app/datasets/dataset.html
View File

@ -1,43 +1,75 @@
<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]="'name'" [sortAsc]="false" [substituteRows]="false"
[translations]="translations" >
<data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
</data-table-column>
<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-file-text 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" (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> -->
</div>
</div>
<table class="table table-striped" [mfData]="tableData | dmpTableFilter : filterQuery"
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th colspan="1">
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
<input class="form-control" [(ngModel)]="versionFilter" 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="dmp">DMP</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="uri">Uri</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="profile">Profile</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="description">Description</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter>Actions </mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
<td colspan="5">No elements</td>
</tr>
<tr *ngFor="let dmp of mf.data" class="hover">
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.id}}</td>
<td>{{dmp?.label}}</td>
<td>{{dmp?.version}}</td>
<td>{{dmp?.previous}}</td>
<td>{{dmp?.project?.label}}</td>
<td>{{dmp?.description}}</td>
<td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Dataset" id="editDataset"></i>
<i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete Dataset"></i>
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<button type="button" class="btn btn-info btncustom" (click) = "newDataset(item)" >New Dataset</button>
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">

6
dmp-frontend/src/app/datasets/dataset.module.ts
View File

@ -1,7 +1,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
import {DataTableModule} from 'angular2-datatable';
import { DatasetTableFilterPipe } from '../pipes/dataset-table-filter.pipe';
import { DatasetsComponent } from './dataset.component';
@ -16,7 +17,8 @@ import { DatasetRoutingModule } from './dataset-routing.module';
DataTableModule
],
declarations: [
DatasetsComponent
DatasetsComponent,
DatasetTableFilterPipe
//ProjectDetailComponent
],
providers: [ ],

39
dmp-frontend/src/app/dmps/dmp.component.css Normal file
View File

@ -0,0 +1,39 @@
.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;
}
.btncustom{
background-color:#337ab7;
color:white;
margin-top:15px;
}

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

@ -5,7 +5,8 @@ import { ServerService } from '../../app/services/server.service';
import { Dmp } from '../entities/model/dmp';
import { Dataset } from '../entities/model/dataset';
import { Project } from '../entities/model/project';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
import {DataTable} from 'angular2-datatable';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';
import { ModalComponent } from '../modal/modal.component';
@ -19,41 +20,71 @@ declare var $ :any;
@Component({
selector: 'dmps',
templateUrl: 'dmps.html',
styleUrls: ['./dmp.component.css'],
providers: [ServerService]
})
export class DmpComponent implements OnInit{
// Start ALTERNATIVE
//whole dmp data model
tableData : any[] = new Array();
//organisation editor data model
editingOrganisation: any = {};
organisationEditorForm : 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;
// END ALTERNATIVE
@Input() dmps: Dmp[];
dmp:any;
dmpResource :DataTableResource<Dmp>;
dmpIdforDatasets: string;
dmpLabelforDatasets:string;
@Input() dmpCount = 0;
@Input() projectsDropDown:DropdownField;
@Input() dataSetVisibe:boolean;
@Input() projects: Project[];
@Input() projects: Project[];
dmpIdforDatasets: string;
dmpLabelforDatasets:string;
@ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
/*dmpResource :DataTableResource<Dmp>;
@ViewChild(DataTable) dmpsTable;
@ViewChild(DataTable) datasetsTable;
@ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
@ViewChild('isignOutBtn') isignOutBtn;
*/
@ViewChild('isignOutBtn') isignOutBtn;
constructor(
private serverService: ServerService,
private route: ActivatedRoute,
private router: Router){
this.projectsDropDown = new DropdownField();
this.projectsDropDown.options = [];
this.projects = [];
//this.projects = [];
this.dataSetVisibe = false;
this.dmp = {
id:null,
label: '',
//previous:'',
previous:'',
version:'',
profileData:'',
//profile:''
}
profile:''
}
}
ngOnInit() {
@ -63,23 +94,24 @@ export class DmpComponent implements OnInit{
});
this.dmps = [];
this.serverService.getDmpOfUser().subscribe(
response => {
response => {
this.tableData = response;
console.log(response);
response.forEach(resp => {
let dmp = new Dmp();
dmp.id = resp.id;
dmp.label = resp.label;
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);
// let dmp = new Dmp();
// dmp.id = resp.id;
// dmp.label = resp.label;
// 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) => {debugger;
@ -113,35 +145,26 @@ export class DmpComponent implements OnInit{
)
}
reloadDmps(params) {
//this.dmpResource = new DataTableResource(this.dmps);
this.dmpResource.query(params).then(projects => this.dmps = projects);
}
afterLoad(){
this.dmpResource = new DataTableResource(this.dmps);
this.dmpResource.count().then(count => this.dmpCount = count);
CallDmps(){
this.serverService.getDmpOfUser().subscribe(
response => {
response.forEach(resp => {
let dmp = new Dmp();
dmp.id = resp.id;
dmp.label = resp.label;
dmp.version = resp.version;
dmp.dataset = resp.dataset;
dmp.projectLabel = resp.project.label;
this.dmps.push(dmp);
var params = {limit:8,offset:0, sortAsc:false}
//this.afterLoad();
//this.dmpResource.query(params).then(dmps => this.dmps = dmps);
}
);
});
}
filterGrid() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("dmps-grid");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if (td) {
if (td.innerText.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
SaveNewDmp(){
console.log(this.dmp, this.dmp.projectsDropDownKey);
//this.http.post('http://someurl', JSON.stringify(this.project))
@ -155,60 +178,78 @@ SaveNewDmp(){
console.log("response");
console.log(response);
this.dmps = [];
this.serverService.getDmpOfUser().subscribe(
response => {
response.forEach(resp => {
let dmp = new Dmp();
dmp.id = resp.id;
dmp.label = resp.label;
dmp.version = resp.version;
dmp.dataset = resp.dataset;
dmp.projectLabel = resp.project.label;
this.dmps.push(dmp);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();
this.dmpResource.query(params).then(dmps => this.dmps = dmps);
}
);
});
this.CallDmps();
}
);
$("#newDmpModal").modal("hide");
}
// special params:
translations = <DataTableTranslations>{
indexColumn: 'Index column',
expandColumn: 'Expand column',
selectColumn: 'Select column',
paginationLimit: 'Max results',
paginationRange: 'Result range'
};
SaveUpdatesDmp(){
console.log(this.dmp, this.dmp.projectsDropDownKey);
//this.http.post('http://someurl', JSON.stringify(this.project))
this.dmp.project = {"id":this.dmp.project};
this.dmp["version"] = 1;
this.serverService.updateDmpForCurrentUser(this.dmp)
.subscribe(
response =>{
console.log("response");
console.log(response);
this.dmps = [];
this.CallDmps();
}
);
$("#newDmpModal").modal("hide");
}
SaveDmp(){ debugger;
if (this.dmp.id == null)
this.SaveNewDmp();
else
this.SaveUpdatesDmp();
}
signOut() {
    this.serverService.logOut();
}
selectDmp(rowEvent){
this.dmpIdforDatasets = rowEvent.row.item.id;
this.dmpLabelforDatasets = rowEvent.row.item.label;
selectDmp(item){
this.dmpIdforDatasets = item.id;
this.dmpLabelforDatasets = item.label;
if(this.dataSetVisibe == false)
this.dataSetVisibe = true;
else
this.datasetsComponent.getDatasetForDmpMethod(rowEvent.row.item.id);
this.datasetsComponent.getDatasetForDmpMethod(item.id);
}
editRow(item){
this.dmp.label = item.label;
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.projectid;
this.dmp.projectid = item.projectid;
$("#newDmpModal").modal("show");
editRow(item, event){
if (event.toElement.id == "editDMP"){
this.dmp.label = item.label;
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.id;
$("#newDmpModal").modal("show");
}
if(event.toElement.id == "changeVersionDMP"){
this.dmp.label = item.label;
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.id;
$("#newVersionDmpModal").modal("show");
}
if(event.toElement.id == "showDatasets"){
this.selectDmp(item);
}
}
newDmp(item){
@ -221,5 +262,8 @@ newDmp(item){
$("#newDmpModal").modal("show");
}
refreshTable(){
this.CallDmps();
}
}

9
dmp-frontend/src/app/dmps/dmp.module.ts
View File

@ -1,10 +1,13 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
//import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
import {DataTableModule} from 'angular2-datatable';
import { DmpComponent } from './dmp.component';
import { DmpTableFilterPipe } from '../pipes/dmp-table-filter.pipe';
import { DmpVersionFilterPipe } from '../pipes/dmp-version-filter.pipe';
import { DmpRoutingModule } from './dmp-routing.module';
import { DatasetsModule } from '../datasets/dataset.module';
@ -17,6 +20,8 @@ import { DatasetsModule } from '../datasets/dataset.module';
DatasetsModule
],
declarations: [
DmpTableFilterPipe,
DmpVersionFilterPipe,
DmpComponent
],
providers: [ ]

206
dmp-frontend/src/app/dmps/dmps.html
View File

@ -1,62 +1,76 @@
<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
<div style="margin: auto; max-width: 1000px; margin-top:50px">
<div>
<span>Filter: </span>
<input type="text" id="myInput" (keyup)="filterGrid()" placeholder="Search for projects.." title="Type in a name">
</div>
<data-table id="dmps-grid" headerTitle="My Dmps" [items]="dmps" [itemCount]="dmpCount" (reload)="reloadDmps($event)" [limit]="8"
[sortBy]="'label'" [sortAsc]="true" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [translations]="translations"
[indexColumnHeader]="'#'" [selectOnRowClick]="true" (rowClick)="selectDmp($event)">
<data-table-column [property]="'label'" [header]="'Label'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'projectLabel'" [header]="'project'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'previous'" [header]="'Previous'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'version'" [header]="'Version'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'profileData'" [header]="'Profile Data'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'profile'" [header]="'Profile'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'active'" [header]="'Status'" [width]="100" [resizable]="true">
<template #dataTableHeader let-item="item">
<span>Active</span>
</template>
<template #dataTableCell let-item="item">
<span style="color: grey">
<span class="fa fa-check" *ngIf="item.active"></span>
<span class="fa fa-times" *ngIf="!item.active"></span>
</span>
</template>
</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>
<div style="margin-top: 10px">
<b>Selected:</b>
<!-- <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" (click)="newDmp(item)">New Dmp</button>
<!-- data-toggle="modal" data-target="#newDmpModal" -->
<table class="table table-striped" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter"
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th colspan="1">
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
<input class="form-control" [(ngModel)]="versionFilter" 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="version">Version</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="project">Project</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="description">Description</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter>Actions </mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
<td colspan="5">No elements</td>
</tr>
<!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
<option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
</select> -->
</div>
<tr *ngFor="let dmp of mf.data" class="hover">
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.id}}</td>
<td>{{dmp?.label}}</td>
<td>{{dmp?.version}}</td>
<td>{{dmp?.previous}}</td>
<td>{{dmp?.project?.label}}</td>
<td>{{dmp?.description}}</td>
<td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit DMP" id="editDMP"></i>
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i>
<i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete DMP"></i>
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
<!--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-dialog" role="document">
<div class="modal-content">
@ -69,6 +83,10 @@
<div class="modal-body">
<form #newProjectForm="ngForm" (ngSubmit)="SaveNewDmp()">
<div class="form-group">
<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>
<label for="recipient-name" class="col-form-label">Project:</label>
<select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.project" [name]="projectsDropDown" #datasetfield>
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
@ -78,35 +96,15 @@
<label for="label-name" class="form-control-label">Previous:</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">Version:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]="dmp.version" name="version">
</div>
<div class="form-group">
<!-- <div class="form-group">
<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="panel panel-default">
<div class="panel-heading">
<span style="font-weight: bold;">Profile</span>
<div class="panel-body">
<div class="form-group">
<label for="uri-text" class="form-control-label">Label:</label>
<input class="form-control" id="uri-text" [(ngModel)]="dmp.profile" name="profile">
</div>
<div class="form-group">
<label for="uri-text" class="form-control-label">Definition:</label>
<input class="form-control" id="uri-text" [(ngModel)]="dmp.profileDefinition" name="profileDefinition">
</div>
</div>
</div>
</div>
<!-- <div class="form-group">
<div class="form-group">
<label for="start-date" class="form-control-label">Start Date:</label>
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp.startDate" name = "startDate">
</div>
@ -114,25 +112,63 @@
<label for="end-date" class="form-control-label">End Date:</label>
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp.endDate" name = "endDate">
</div> -->
<div class="form-group">
<label for="code-name" class="form-control-label">Code:</label>
<input type="text" class="form-control" id="code-name" disabled>
</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>
</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)="SaveNewDmp();">Save Dmp</button>
</div>
</div>
</div>
</div>
<!--Modal for changing version-->
<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-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">DMP</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form #newProjectForm="ngForm" (ngSubmit)="SaveNewDmp()">
<div class="form-group" hidden>
<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>
<label for="recipient-name" class="col-form-label">Project:</label>
<select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.project" [name]="projectsDropDown" #datasetfield>
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
</select>
</div>
<div class="form-group" hidden>
<label for="label-name" class="form-control-label">Previous:</label>
<input type="text" class="form-control" id="label-previous" [(ngModel)]="dmp.previous" name="previous">
</div>
<div class="form-group">
<label for="abbreviation-text" class="form-control-label">Version:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]="dmp.version" name="version">
</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>
<!--Modal for DMPs-->
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
<!--DATASET TABLE-->
<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets] = "dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
<a href="#" (click)="signOut();" #isignOutBtn>Sign out</a>
<router-outlet></router-outlet>

29
dmp-frontend/src/app/pipes/dataset-table-filter.pipe.ts Normal file
View File

@ -0,0 +1,29 @@
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "dmpTableFilter"
})
export class DatasetTableFilterPipe 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;
}
}

29
dmp-frontend/src/app/pipes/dmp-table-filter.pipe.ts Normal file
View File

@ -0,0 +1,29 @@
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "dmpTableFilter"
})
export class DmpTableFilterPipe 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;
}
}

22
dmp-frontend/src/app/pipes/dmp-version-filter.pipe.ts Normal file
View File

@ -0,0 +1,22 @@
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "dmpVersionFilter"
})
export class DmpVersionFilterPipe implements PipeTransform {
transform(array: any[], version: number): any {
if (version) {
return _.filter(array, row => {
return (
row.version == version
)
});
}
return array;
}
}

8
dmp-frontend/src/app/services/rest-base.ts
View File

@ -16,16 +16,16 @@ export class RestBase {
}
/* protocol: string = "http";
protocol: string = "http";
hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";//
port: number = 8080;//8080;//
webappname: string = "dmp-backend";//"dmp-backend-new";//*/
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";
webappname: string = "dmp-backend";*/
proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";

4
dmp-frontend/src/app/services/server.service.ts
View File

@ -109,6 +109,10 @@ export class ServerService {
return this.restBase.post("dmp/createofuser", data);
}
public updateDmpForCurrentUser(data:any){
return this.restBase.post("dmp/update", data);
}
public getDatasetForDmp(data:any){
return this.restBase.post("dmp/getdatasets", data);
}

2
dmp-frontend/src/app/tabs/tabs.component.ts
View File

@ -5,7 +5,7 @@ import { Component } from '@angular/core';
template: `
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" routerLink="dmps" routerLinkActive="active">My Dmps</a>
<a class="nav-link" routerLink="dmps" routerLinkActive="active">DMPs</a>
</li>
<li class="nav-item">
<a class="nav-link active" routerLink="projects" routerLinkActive="active">Projects</a>