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

breadcrumb

This commit is contained in:
Nikolaos Laskaris 2017-11-15 00:51:39 +02:00
parent e9d309fc5a
commit 4aa63d0c61
12 changed files with 364 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/app.component.html
View File

@ -9,7 +9,7 @@
--> -->
<div class="nav navbar-nav navbar-left"> <div class="nav navbar-nav navbar-left">
<div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"> <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Quick Navigate <span class="caret"></span> </button> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li> <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
<li><a class="cursor" (click)="goToProjects()">My Projects</a></li> <li><a class="cursor" (click)="goToProjects()">My Projects</a></li>

20
dmp-frontend/src/app/app.component.ts
View File

@ -26,31 +26,19 @@ export class AppComponent implements OnInit {
sliderExpanded : boolean = false; sliderExpanded : boolean = false;
breadcrumbHome: MenuItem = {icon: 'fa fa-home'}; breadcrumbHome: MenuItem = {icon: 'fa fa-home', routerLink: "/welcome"};
breadcrumbData: MenuItem[] = new Array<MenuItem>(); breadcrumbData: MenuItem[] = new Array<MenuItem>();
/*
breadcrumbData: MenuItem[] = [
{label:'Categories'},
{label:'Sports'},
{label:'Football'},
{label:'Countries'},
{label:'Spain'},
{label:'F.C. Barcelona'},
{label:'Squad'},
{label:'Lionel Messi', url: '/login'}
];
*/
constructor(private tokenService : TokenService, private router: Router, private breadcrumbService : BreadcrumbService) { constructor(private tokenService : TokenService, private router: Router, private breadcrumbService : BreadcrumbService) {
} }
ngOnInit() { ngOnInit() {
this.clearbreadCrumb();
this.breadcrumbService.breadcrumbDataEmitter.subscribe( this.breadcrumbService.breadcrumbDataEmitter.subscribe(
(data) => { (data) => {
this.breadcrumbData = data; this.breadcrumbData = data;
@ -92,7 +80,9 @@ export class AppComponent implements OnInit {
} }
logout(){ logout(){
this.breadcrumbService.clearAll();
this.tokenService.logout(); this.tokenService.logout();
location.reload();
} }

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

@ -71,6 +71,7 @@ export class DatasetsComponent implements OnInit {
} }
constructor( constructor(
private serverService: ServerService, private serverService: ServerService,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,

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

@ -1,145 +1,145 @@
<app-spinner> </app-spinner> <app-spinner> </app-spinner>
<table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" <table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"> [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead> <thead>
<tr> <tr>
<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">
<!-- <input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' /> --> <!-- <input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' /> -->
<select class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown" #datasetfield > <select class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown" #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>
</th> </th>
<th> <th>
<button class="btn btn-default" (click)="getDatasets('false')"> <button class="btn btn-default" (click)="getDatasets('false')">
<span class="glyphicon glyphicon-refresh"></span> <span class="glyphicon glyphicon-refresh"></span>
</button> </button>
</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="uri">Uri</mfDefaultSorter> <mfDefaultSorter by="uri">Uri</mfDefaultSorter>
</th> </th>
<th> <th>
<mfDefaultSorter by="profile">Profile</mfDefaultSorter> <mfDefaultSorter by="profile">Profile</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>
</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="7">No elements</td> <td colspan="7">No elements</td>
</tr> </tr>
<tr *ngFor="let dataset of mf.data" class="hover"> <tr *ngFor="let dataset of mf.data" class="hover">
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td> <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td>
<td>{{dataset?.label}}</td> <td>{{dataset?.label}}</td>
<td>{{dataset?.uri}}</td> <td>{{dataset?.uri}}</td>
<td>{{dataset?.profile?.label}}</td> <td>{{dataset?.profile?.label}}</td>
<td>{{dataset?.description}}</td> <td>{{dataset?.description}}</td>
<td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td> <td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
<td>{{dataset?.status | statusToString }}</td> <td>{{dataset?.status | statusToString }}</td>
<td><a href="#" class="editGridColumn" (click)="editRow(dataset, $event)"> <td><a href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i></a> <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i></a>
<a href="#" class="editGridColumn" (click)="editRow(dataset, $event)"> <a href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dataset-confirm" (click)="markDatasetForDelete(dataset)" title="delete Dataset"></i></a> <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dataset-confirm" (click)="markDatasetForDelete(dataset)" title="delete Dataset"></i></a>
<a href="#" class="editGridColumn" (click)="editRow(dataset, $event)"> <a href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
<i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td> <i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="5"> <td colspan="5">
<button type="button" class="btn btn-info btncustom" (click)="newDataset(item)">New Dataset</button> <button type="button" class="btn btn-info btncustom" (click)="newDataset(item)">New Dataset</button>
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator> <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
<div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true"> <div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" 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">
<h5 class="modal-title" >Dataset</h5> <h5 class="modal-title" >Dataset</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">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form #newProjectForm="ngForm" (ngSubmit)="SaveDataset()"> <form #newProjectForm="ngForm" (ngSubmit)="SaveDataset()">
<div class="form-group"> <div class="form-group">
<label for="recipient-name" class="col-form-label">Dataset Profile:</label> <label for="recipient-name" class="col-form-label">Dataset Profile:</label>
<select class="form-control" id="datasetProfileDropDownKey" [(ngModel)]="dataset.profile" name="datasetProfileDropDown" <select class="form-control" id="datasetProfileDropDownKey" [(ngModel)]="dataset.profile" name="datasetProfileDropDown"
#datasetfield> #datasetfield>
<option *ngFor="let opt of datasetProfileDropDown.options" [value]="opt.key">{{opt.value}}</option> <option *ngFor="let opt of datasetProfileDropDown.options" [value]="opt.key">{{opt.value}}</option>
</select> </select>
</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)]="dataset.label" name="label">
</div>
<div class="form-group">
<label for="abbreviation-text" class="form-control-label">DMP:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]="dataset.dmp" name="dmp" disabled>
</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="status-name" class="col-form-label">Status:</label>
<select class="form-control" id="statusid" [(ngModel)]="dataset.status" name="statusDropDown" #datasetfield>
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
</select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="label-name" class="form-control-label">Label:</label> <label for="abbreviation-text" class="form-control-label">Description:</label>
<input type="text" class="form-control" id="label-name" [(ngModel)]="dataset.label" name="label"> <textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dataset.description" name="description"></textarea>
</div>
<div class="form-group">
<label for="abbreviation-text" class="form-control-label">DMP:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]="dataset.dmp" name="dmp" disabled>
</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="status-name" class="col-form-label">Status:</label>
<select class="form-control" id="statusid" [(ngModel)]="dataset.status" name="statusDropDown" #datasetfield>
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
</select>
</div> </div>
<div class="form-group"> <!-- <div class="form-group">
<label for="abbreviation-text" class="form-control-label">Description:</label> <label for="start-date" class="form-control-label">Properties:</label>
<textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dataset.description" name="description"></textarea> <input class="form-control" id="startDate-date" [(ngModel)]= "dataset.properties" name = "properties">
</div> </div> -->
<!-- <div class="form-group"> <!-- <div class="form-group">
<label for="start-date" class="form-control-label">Properties:</label> <label for="end-date" class="form-control-label">End Date:</label>
<input class="form-control" id="startDate-date" [(ngModel)]= "dataset.properties" name = "properties"> <input class="form-control" id="endDate-date" [(ngModel)]= "dataset.endDate" name = "endDate">
</div> --> </div> -->
<!-- <div class="form-group"> </form>
<label for="end-date" class="form-control-label">End Date:</label> </div>
<input class="form-control" id="endDate-date" [(ngModel)]= "dataset.endDate" name = "endDate"> <div class="modal-footer">
</div> --> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</form> <button type="submit" class="btn btn-primary" (click)="SaveDataset();">Save</button>
</div> <button type="submit" class="btn btn-primary" (click)="SaveDescribeDataset();">Save and describe</button>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" (click)="SaveDataset();">Save</button>
<button type="submit" class="btn btn-primary" (click)="SaveDescribeDataset();">Save and describe</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Confirmation module- do not delete --> <!-- Confirmation module- do not delete -->
<confirmation [confirmationID]="'delete-dataset-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this dataset. Are you sure you want to delete this dataset ? This is not revertable !'" (responseSender)="deleteDataset($event)"></confirmation> <confirmation [confirmationID]="'delete-dataset-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this dataset. Are you sure you want to delete this dataset ? This is not revertable !'" (responseSender)="deleteDataset($event)"></confirmation>

5
dmp-frontend/src/app/dmps/dmp.component.css
View File

@ -52,3 +52,8 @@ tr.hover:hover > * {
.table>thead>tr>th.rowFilterTopBorder{ .table>thead>tr>th.rowFilterTopBorder{
border-top: 0px solid white; border-top: 0px solid white;
} }
.table-button {
font-size: 1em;
padding: 2px;
}

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

@ -48,6 +48,7 @@ export class DmpComponent implements OnInit{
public stateConfig : any = { public stateConfig : any = {
"dmps" : { "dmps" : {
"tableVisible" : true, "tableVisible" : true,
"dmpDescriptionVisible" : false,
"selectedID" : null, "selectedID" : null,
"selectedLabel" : null "selectedLabel" : null
}, },
@ -59,27 +60,11 @@ export class DmpComponent implements OnInit{
} }
breadcrumbHome: MenuItem = {icon: 'fa fa-home'}; //breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
breadcrumbData: MenuItem[] = new Array<MenuItem>();
/*
breadcrumbData: MenuItem[] = [];
*/
breadcrumbData: MenuItem[] = [
{label:'Categories'},
{label:'Sports'},
{label:'Football'},
{label:'Countries'},
{label:'Spain'},
{label:'F.C. Barcelona'},
{label:'Squad'},
{label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
];
dmp : any;
dmp:any;
@Input() projectsDropDown:DropdownField; @Input() projectsDropDown:DropdownField;
@Input() statusDropDown: DropdownField; @Input() statusDropDown: DropdownField;
@ -128,190 +113,199 @@ export class DmpComponent implements OnInit{
} }
) )
this.showDmps();
}
showDMPDetails(dmp) {
console.log("Showing details for dmp : " + JSON.stringify(dmp));
// TODO: Add here code to show details of dmp.
//1. hide dmp table and show component for detailed dmp
//2. also edit the breadcrumb
}
showDmps(){
this.stateConfig.dmps.tableVisible = true;
this.stateConfig.datasets.tableVisible = false;
this.breadcrumbService.clearAll();
this.breadcrumbData.length = 0;
this.breadcrumbData.push({label:'My Data Management Plans ', command: (onclick)=> { this.showDmps() }});
this.breadcrumbService.setData(this.breadcrumbData); this.breadcrumbService.setData(this.breadcrumbData);
this.breadcrumbService.setData(this.breadcrumbData);
} }
getDmps(muted? : boolean){ getDmps(muted? : boolean){
this.serverService.getDmpOfUser().subscribe( this.serverService.getDmpOfUser().subscribe(
response => {
this.tableData = response;
if(muted && muted!=true)
simple_notifier("success",null,"Refreshed DMPs");
},
(err: HttpErrorResponse) => {
simple_notifier("danger",null,"Could not refresh DMPs");
}
);
}
newDMP(){
console.log(this.dmp, this.dmp.projectsDropDownKey);
this.dmp.project = {"id" : this.dmp.project};
this.dmp["version"] = 1;
//this.dmp.profile = {};
this.serverService.createDmpForCurrentUser(this.dmp)
.subscribe(
response =>{
simple_notifier("success",null,"DMP created");
this.getDmps();
},
error => {
simple_notifier("danger",null,"Could not create the DMP");
}
);
$("#newDmpModal").modal("hide");
}
updateDMP(){
this.dmp.project = {"id":this.dmp.project};
this.serverService.updateDmp(this.dmp)
.subscribe(
response =>{
simple_notifier("success",null,"Edited the DMP");
this.getDmps();
},
error =>{
simple_notifier("danger",null,"Failed to edit the DMP");
}
);
$("#newDmpModal").modal("hide");
$("#newVersionDmpModal").modal("hide");
}
cloneDMP(dmp){
dmp = {"id": dmp.id, "label": dmp.label};
this.serverService.cloneDmp(dmp).subscribe(
response => {
simple_notifier("success",null,"Successfully cloned the DMP");
this.getDmps();
},
error => {
simple_notifier("danger",null,"Failed to clone the DMP");
}
);
$("#newVersionDmpModal").modal("hide");
}
SaveDmp(){
if (this.dmp.id == null)
this.newDMP();
else
this.updateDMP();
}
selectDmp(item){
this.stateConfig.dmps.selectedID = item.id;
this.stateConfig.dmps.selectedLabel = item.label;
if(this.stateConfig.datasets.tableVisible == false)
this.stateConfig.datasets.tableVisible = true;
else
this.datasetsComponent.getDatasetForDmpMethod(item.id);
}
editRow(item, elementId){
if (elementId == "editDMP"){
this.dmp = item;
this.dmp.project = item.project.id;
//setTimeout(function() {
$("#newDmpModal").modal("show");
//},0);
}
if(elementId == "changeVersionDMP"){
this.dmp = item;
this.dmp.project = item.project.id;
$("#newVersionDmpModal").modal("show");
}
if(elementId == "showDatasets"){
this.selectDmp(item);
}
return false; //return false will prevent browser from following the link
}
newDmp(item){
this.dmp.label = "";
this.dmp.id = null;
this.dmp.version = "";
// this.dmp.profile = "";
this.dmp.profileData = "";
this.dmp.project = "";
$("#newDmpModal").modal("show");
}
markDMPForDelete(dmp){
this.dmp = dmp;
}
deleteDMP(confirmation){
if(confirmation==true)
this.deleteRow(this.dmp);
}
deleteRow(dmp){
this.serverService.deleteDmp(dmp).subscribe(
response => {
simple_notifier("success",null,"Successfully deleted the DMP");
this.getDmps();
},
(err: HttpErrorResponse) => {
simple_notifier("danger",null,"Failed to delete the DMP");
}
);
}
clickFilters(element){
if(element.textContent == "More filters")
element.textContent = "Less Filters";
else
element.textContent = "More Filters";
}
SelectDMPStatus(dmp, event, oldValue){
console.log(dmp);
let cannotChangeStatus:boolean;
if(dmp.status == 2){
this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
response => { response => {
response.forEach(dataset => { this.tableData = response;
if(dataset.status !==2 || dataset.status !==3){ if(muted && muted!=true)
cannotChangeStatus=true; simple_notifier("success",null,"Refreshed DMPs");
}
return;
});
if(cannotChangeStatus == true){
dmp.status = 0;
$("#messageForChangingStatus").modal("show");
}
}, },
error => { (err: HttpErrorResponse) => {
console.log("could not retrieve dataset for dpm: "+dmp.id); simple_notifier("danger",null,"Could not refresh DMPs");
} }
); );
} }
} newDMP(){
console.log(this.dmp, this.dmp.projectsDropDownKey);
this.dmp.project = {"id" : this.dmp.project};
this.dmp["version"] = 1;
//this.dmp.profile = {};
this.serverService.createDmpForCurrentUser(this.dmp)
.subscribe(
response =>{
simple_notifier("success",null,"DMP created");
this.getDmps();
},
error => {
simple_notifier("danger",null,"Could not create the DMP");
}
);
$("#newDmpModal").modal("hide");
}
updateDMP(){
this.dmp.project = {"id":this.dmp.project};
this.serverService.updateDmp(this.dmp)
.subscribe(
response =>{
simple_notifier("success",null,"Edited the DMP");
this.getDmps();
},
error =>{
simple_notifier("danger",null,"Failed to edit the DMP");
}
);
$("#newDmpModal").modal("hide");
$("#newVersionDmpModal").modal("hide");
}
cloneDMP(dmp){
dmp = {"id": dmp.id, "label": dmp.label};
this.serverService.cloneDmp(dmp).subscribe(
response => {
simple_notifier("success",null,"Successfully cloned the DMP");
this.getDmps();
},
error => {
simple_notifier("danger",null,"Failed to clone the DMP");
}
);
$("#newVersionDmpModal").modal("hide");
}
SaveDmp(){
if (this.dmp.id == null)
this.newDMP();
else
this.updateDMP();
}
showDatasetsOfDmp(item){
this.stateConfig.dmps.selectedID = item.id;
this.stateConfig.dmps.selectedLabel = item.label;
if(this.stateConfig.datasets.tableVisible == false){
this.stateConfig.datasets.tableVisible = true;
this.stateConfig.dmps.tableVisible = false;
this.breadcrumbData.push({label:"Datasets of '"+this.stateConfig.dmps.selectedLabel+"'" /* , command:""*/})
this.breadcrumbService.breadcrumbDataEmitter.emit(this.breadcrumbData);
}
else{
this.datasetsComponent.getDatasetForDmpMethod(item.id);
}
}
editDmp(item){
this.dmp = item;
this.dmp.project = item.project.id;
$("#newDmpModal").modal("show");
}
editDmpVersion(item){
this.dmp = item;
this.dmp.project = item.project.id;
$("#newVersionDmpModal").modal("show");
}
newDmp(item){
this.dmp.label = "";
this.dmp.id = null;
this.dmp.version = "";
// this.dmp.profile = "";
this.dmp.profileData = "";
this.dmp.project = "";
$("#newDmpModal").modal("show");
}
markDMPForDelete(dmp){
this.dmp = dmp;
}
deleteDMP(confirmation){
if(confirmation==true)
this.deleteRow(this.dmp);
}
deleteRow(dmp){
this.serverService.deleteDmp(dmp).subscribe(
response => {
simple_notifier("success",null,"Successfully deleted the DMP");
this.getDmps();
},
(err: HttpErrorResponse) => {
simple_notifier("danger",null,"Failed to delete the DMP");
}
);
}
clickFilters(element){
if(element.textContent == "More filters")
element.textContent = "Less Filters";
else
element.textContent = "More Filters";
}
SelectDMPStatus(dmp, event, oldValue){
console.log(dmp);
let cannotChangeStatus:boolean;
if(dmp.status == 2){
this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
response => {
response.forEach(dataset => {
if(dataset.status !==2 || dataset.status !==3){
cannotChangeStatus=true;
}
return;
});
if(cannotChangeStatus == true){
dmp.status = 0;
$("#messageForChangingStatus").modal("show");
}
},
error => {
console.log("could not retrieve dataset for dpm: "+dmp.id);
}
);
}
}
} }

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

@ -1,8 +1,3 @@
<!--
<div class="col-md-12 ">
<p-breadcrumb [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
</div>
-->
<table *ngIf="stateConfig.dmps.tableVisible" class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter" <table *ngIf="stateConfig.dmps.tableVisible" 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">
@ -57,6 +52,9 @@
<th> <th>
Actions Actions
</th> </th>
<th>
</th>
</tr> </tr>
</thead> </thead>
@ -75,20 +73,25 @@
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td> <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
<td>{{dmp?.status | statusToString }}</td> <td>{{dmp?.status | statusToString }}</td>
<td> <td>
<a class="editGridColumn cursor-link" (click)="editRow(dmp, 'editDMP')"> <!--btn btn-primary btn-rounded css for button style --> <a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a> <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
<a class="editGridColumn cursor-link" (click)="editRow(dmp, 'changeVersionDMP')"> <a class="editGridColumn cursor-link" (click)="editDmpVersion(dmp)">
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></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)="markDMPForDelete(dmp)"> <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> <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)="editRow(dmp, 'showDatasets')"> <!--
<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> <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;">
<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> </td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="7"> <td colspan="8">
<button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button> <button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator> <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
</td> </td>
@ -224,15 +227,11 @@
</div> </div>
<!--Modal for DMPs-->
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></modal> -->
<!--DATASET TABLE--> <!--DATASET TABLE-->
<datasets-table *ngIf="stateConfig.datasets.tableVisible" [dmpIdforDatasets]="stateConfig.dmps.selectedID" [dmpLabelforDatasets]="stateConfig.dmps.selectedLabel" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></datasets-table> <datasets-table *ngIf="stateConfig.datasets.tableVisible" [dmpIdforDatasets]="stateConfig.dmps.selectedID" [dmpLabelforDatasets]="stateConfig.dmps.selectedLabel" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></datasets-table>
<!-- Confirmation module- do not delete --> <!-- Confirmation module- do not delete -->
<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation> <confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>

4
dmp-frontend/src/app/form/dynamic-form.component.css
View File

@ -13,7 +13,7 @@
} }
.parent-div { .parent-div {
height: calc(100vh - 60px); /* is height of window minus heigh of header bar */ height: calc(100vh - 60px - 32px); /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) */
width:100%; width:100%;
} }
@ -60,7 +60,7 @@
.form-body-container{ .form-body-container{
padding-bottom: 10px; padding-bottom: 10px;
height: calc(100vh - 85px - 138px); /* is height of window minus heigh of app header bar minus height of form footer bar */ height: calc(100vh - 85px - 32px - 138px); /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */
overflow-y:scroll; overflow-y:scroll;
} }

10
dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
View File

@ -3,6 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NativeLoginService } from '../../services/login/native-login.service'; import { NativeLoginService } from '../../services/login/native-login.service';
import { TokenService, TokenProvider } from '../../services/login/token.service'; import { TokenService, TokenProvider } from '../../services/login/token.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {MenuItem} from 'primeng/primeng';
import { BreadcrumbService } from '../../services/breadcrumb.service';
import '../../../assets/custom.js'; import '../../../assets/custom.js';
declare function simple_notifier(type: string, title: string, message:string): any; declare function simple_notifier(type: string, title: string, message:string): any;
@ -20,12 +22,12 @@ export class MainSignInComponent implements OnInit {
creds : any = {"username":"","password":""}; creds : any = {"username":"","password":""};
constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router) { constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router, private breadcrumbService: BreadcrumbService) {
} }
createProjectEditorForm(){ createForm(){
this.nativeLoginForm = this.fb.group({ this.nativeLoginForm = this.fb.group({
username: ['', Validators.required ], username: ['', Validators.required ],
@ -36,8 +38,8 @@ export class MainSignInComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.createProjectEditorForm(); this.breadcrumbService.clearAll();
//debugger; this.createForm();
if(this.tokenService.isLoggedIn()){ if(this.tokenService.isLoggedIn()){
this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }}); this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});
} }

11
dmp-frontend/src/app/projects/projects.component.ts
View File

@ -17,6 +17,8 @@ import { NgForm } from '@angular/forms';
import { DatepickerOptions } from 'ng2-datepicker'; import { DatepickerOptions } from 'ng2-datepicker';
import { StatusToString} from '../pipes/various/status-to-string'; import { StatusToString} from '../pipes/various/status-to-string';
import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component'; import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
import {MenuItem} from 'primeng/primeng';
import { BreadcrumbService } from '../services/breadcrumb.service';
import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe'; import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe';
@ -83,11 +85,13 @@ export class ProjectsComponent implements OnInit{
firstCalendarDay: 0 // 0 - Sunday, 1 - Monday firstCalendarDay: 0 // 0 - Sunday, 1 - Monday
}; };
//breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
breadcrumbData: MenuItem[] = new Array<MenuItem>();
constructor( constructor(
private serverService: ServerService, private serverService: ServerService,
private route: ActivatedRoute, private route: ActivatedRoute,
private breadcrumbService : BreadcrumbService,
private router: Router) { private router: Router) {
this.datasetDropDown = new DropdownField(); this.datasetDropDown = new DropdownField();
this.datasetDropDown.options = []; this.datasetDropDown.options = [];
@ -118,6 +122,11 @@ getEmptyProject(){
ngOnInit() { ngOnInit() {
this.getProjects(); this.getProjects();
this.breadcrumbService.clearAll();
this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
this.breadcrumbService.setData(this.breadcrumbData);
} }

9
dmp-frontend/src/app/services/breadcrumb.service.ts
View File

@ -1,15 +1,17 @@
import { Injectable, EventEmitter } from '@angular/core'; import { OnInit, Injectable, EventEmitter } from '@angular/core';
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs/Observable';
import {MenuItem} from 'primeng/primeng'; import {MenuItem} from 'primeng/primeng';
@Injectable() @Injectable()
export class BreadcrumbService { export class BreadcrumbService implements OnInit{
breadcrumbHomeEmitter : EventEmitter<MenuItem> = new EventEmitter<MenuItem>(); breadcrumbHomeEmitter : EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
breadcrumbDataEmitter : EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>(); breadcrumbDataEmitter : EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
ngOnInit() {
}
setData(breadcrumbData : Array<MenuItem>){ setData(breadcrumbData : Array<MenuItem>){
this.breadcrumbDataEmitter.emit(breadcrumbData); this.breadcrumbDataEmitter.emit(breadcrumbData);
@ -19,5 +21,8 @@ export class BreadcrumbService {
this.breadcrumbHomeEmitter.emit(breadcrumbHome); this.breadcrumbHomeEmitter.emit(breadcrumbHome);
} }
clearAll(){
this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
}
} }

1
dmp-frontend/src/app/services/login/token.service.ts
View File

@ -84,7 +84,6 @@ export class TokenService {
logout(){ logout(){
debugger;
//set the log out actions here //set the log out actions here
this.setLoggedIn(false); this.setLoggedIn(false);
this.setEmail(null); this.setEmail(null);