breadcrumb
This commit is contained in:
Nikolaos Laskaris
parent
e9d309fc5a
commit
4aa63d0c61
|
|
@ -9,7 +9,7 @@
|
|||
-->
|
||||
<div class="nav navbar-nav navbar-left">
|
||||
<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">
|
||||
<li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
|
||||
<li><a class="cursor" (click)="goToProjects()">My Projects</a></li>
|
||||
|
|
|
|||
|
|
@ -26,31 +26,19 @@ export class AppComponent implements OnInit {
|
|||
sliderExpanded : boolean = false;
|
||||
|
||||
|
||||
breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
|
||||
breadcrumbHome: MenuItem = {icon: 'fa fa-home', routerLink: "/welcome"};
|
||||
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) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.clearbreadCrumb();
|
||||
|
||||
this.breadcrumbService.breadcrumbDataEmitter.subscribe(
|
||||
(data) => {
|
||||
this.breadcrumbData = data;
|
||||
|
|
@ -92,7 +80,9 @@ export class AppComponent implements OnInit {
|
|||
}
|
||||
|
||||
logout(){
|
||||
this.breadcrumbService.clearAll();
|
||||
this.tokenService.logout();
|
||||
location.reload();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ export class DatasetsComponent implements OnInit {
|
|||
}
|
||||
|
||||
constructor(
|
||||
|
||||
private serverService: ServerService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<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">
|
||||
|
||||
<thead>
|
||||
|
|
@ -78,11 +78,11 @@
|
|||
</td>
|
||||
</tr>
|
||||
</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-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -52,3 +52,8 @@ tr.hover:hover > * {
|
|||
.table>thead>tr>th.rowFilterTopBorder{
|
||||
border-top: 0px solid white;
|
||||
}
|
||||
|
||||
.table-button {
|
||||
font-size: 1em;
|
||||
padding: 2px;
|
||||
}
|
||||
|
|
@ -48,6 +48,7 @@ export class DmpComponent implements OnInit{
|
|||
public stateConfig : any = {
|
||||
"dmps" : {
|
||||
"tableVisible" : true,
|
||||
"dmpDescriptionVisible" : false,
|
||||
"selectedID" : null,
|
||||
"selectedLabel" : null
|
||||
},
|
||||
|
|
@ -59,27 +60,11 @@ export class DmpComponent implements OnInit{
|
|||
}
|
||||
|
||||
|
||||
breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
|
||||
|
||||
/*
|
||||
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'}
|
||||
];
|
||||
//breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
|
||||
breadcrumbData: MenuItem[] = new Array<MenuItem>();
|
||||
|
||||
|
||||
|
||||
|
||||
dmp:any;
|
||||
dmp : any;
|
||||
|
||||
@Input() projectsDropDown:DropdownField;
|
||||
@Input() statusDropDown: DropdownField;
|
||||
|
|
@ -128,15 +113,31 @@ export class DmpComponent implements OnInit{
|
|||
}
|
||||
)
|
||||
|
||||
this.breadcrumbService.setData(this.breadcrumbData);
|
||||
this.breadcrumbService.setData(this.breadcrumbData);
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
getDmps(muted? : boolean){
|
||||
getDmps(muted? : boolean){
|
||||
this.serverService.getDmpOfUser().subscribe(
|
||||
response => {
|
||||
this.tableData = response;
|
||||
|
|
@ -147,9 +148,9 @@ getDmps(muted? : boolean){
|
|||
simple_notifier("danger",null,"Could not refresh DMPs");
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
newDMP(){
|
||||
newDMP(){
|
||||
console.log(this.dmp, this.dmp.projectsDropDownKey);
|
||||
|
||||
this.dmp.project = {"id" : this.dmp.project};
|
||||
|
|
@ -167,9 +168,9 @@ newDMP(){
|
|||
}
|
||||
);
|
||||
$("#newDmpModal").modal("hide");
|
||||
}
|
||||
}
|
||||
|
||||
updateDMP(){
|
||||
updateDMP(){
|
||||
|
||||
this.dmp.project = {"id":this.dmp.project};
|
||||
|
||||
|
|
@ -186,9 +187,9 @@ updateDMP(){
|
|||
$("#newDmpModal").modal("hide");
|
||||
$("#newVersionDmpModal").modal("hide");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
cloneDMP(dmp){
|
||||
cloneDMP(dmp){
|
||||
dmp = {"id": dmp.id, "label": dmp.label};
|
||||
this.serverService.cloneDmp(dmp).subscribe(
|
||||
response => {
|
||||
|
|
@ -200,54 +201,47 @@ cloneDMP(dmp){
|
|||
}
|
||||
);
|
||||
$("#newVersionDmpModal").modal("hide");
|
||||
}
|
||||
}
|
||||
|
||||
SaveDmp(){
|
||||
SaveDmp(){
|
||||
if (this.dmp.id == null)
|
||||
this.newDMP();
|
||||
else
|
||||
this.updateDMP();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
selectDmp(item){
|
||||
showDatasetsOfDmp(item){
|
||||
this.stateConfig.dmps.selectedID = item.id;
|
||||
this.stateConfig.dmps.selectedLabel = item.label;
|
||||
if(this.stateConfig.datasets.tableVisible == false)
|
||||
if(this.stateConfig.datasets.tableVisible == false){
|
||||
this.stateConfig.datasets.tableVisible = true;
|
||||
else
|
||||
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);
|
||||
}
|
||||
|
||||
editRow(item, elementId){
|
||||
if (elementId == "editDMP"){
|
||||
this.dmp = item;
|
||||
this.dmp.project = item.project.id;
|
||||
|
||||
//setTimeout(function() {
|
||||
$("#newDmpModal").modal("show");
|
||||
//},0);
|
||||
|
||||
}
|
||||
if(elementId == "changeVersionDMP"){
|
||||
}
|
||||
|
||||
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
if(elementId == "showDatasets"){
|
||||
this.selectDmp(item);
|
||||
|
||||
}
|
||||
|
||||
return false; //return false will prevent browser from following the link
|
||||
|
||||
}
|
||||
|
||||
newDmp(item){
|
||||
newDmp(item){
|
||||
this.dmp.label = "";
|
||||
this.dmp.id = null;
|
||||
this.dmp.version = "";
|
||||
|
|
@ -256,18 +250,18 @@ newDmp(item){
|
|||
this.dmp.project = "";
|
||||
|
||||
$("#newDmpModal").modal("show");
|
||||
}
|
||||
}
|
||||
|
||||
markDMPForDelete(dmp){
|
||||
markDMPForDelete(dmp){
|
||||
this.dmp = dmp;
|
||||
}
|
||||
}
|
||||
|
||||
deleteDMP(confirmation){
|
||||
deleteDMP(confirmation){
|
||||
if(confirmation==true)
|
||||
this.deleteRow(this.dmp);
|
||||
}
|
||||
}
|
||||
|
||||
deleteRow(dmp){
|
||||
deleteRow(dmp){
|
||||
|
||||
this.serverService.deleteDmp(dmp).subscribe(
|
||||
response => {
|
||||
|
|
@ -279,16 +273,16 @@ deleteRow(dmp){
|
|||
}
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
clickFilters(element){
|
||||
clickFilters(element){
|
||||
if(element.textContent == "More filters")
|
||||
element.textContent = "Less Filters";
|
||||
else
|
||||
element.textContent = "More Filters";
|
||||
}
|
||||
|
||||
SelectDMPStatus(dmp, event, oldValue){
|
||||
SelectDMPStatus(dmp, event, oldValue){
|
||||
console.log(dmp);
|
||||
let cannotChangeStatus:boolean;
|
||||
if(dmp.status == 2){
|
||||
|
|
@ -311,7 +305,7 @@ SelectDMPStatus(dmp, event, oldValue){
|
|||
);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||
|
|
@ -57,6 +52,9 @@
|
|||
<th>
|
||||
Actions
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -75,20 +73,25 @@
|
|||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{dmp?.status | statusToString }}</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>
|
||||
<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>
|
||||
<a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
|
||||
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" title="delete DMP"></i> </a>
|
||||
<a class="editGridColumn cursor-link" (click)="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>
|
||||
-->
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<td colspan="8">
|
||||
<button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
|
||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
|
||||
</td>
|
||||
|
|
@ -224,15 +227,11 @@
|
|||
</div>
|
||||
|
||||
|
||||
<!--Modal for DMPs-->
|
||||
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></modal> -->
|
||||
|
||||
<!--DATASET 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 [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
.form-body-container{
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|||
import { NativeLoginService } from '../../services/login/native-login.service';
|
||||
import { TokenService, TokenProvider } from '../../services/login/token.service';
|
||||
import {Router} from '@angular/router';
|
||||
import {MenuItem} from 'primeng/primeng';
|
||||
import { BreadcrumbService } from '../../services/breadcrumb.service';
|
||||
|
||||
import '../../../assets/custom.js';
|
||||
declare function simple_notifier(type: string, title: string, message:string): any;
|
||||
|
|
@ -20,12 +22,12 @@ export class MainSignInComponent implements OnInit {
|
|||
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({
|
||||
username: ['', Validators.required ],
|
||||
|
|
@ -36,8 +38,8 @@ export class MainSignInComponent implements OnInit {
|
|||
|
||||
|
||||
ngOnInit() {
|
||||
this.createProjectEditorForm();
|
||||
//debugger;
|
||||
this.breadcrumbService.clearAll();
|
||||
this.createForm();
|
||||
if(this.tokenService.isLoggedIn()){
|
||||
this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ import { NgForm } from '@angular/forms';
|
|||
import { DatepickerOptions } from 'ng2-datepicker';
|
||||
import { StatusToString} from '../pipes/various/status-to-string';
|
||||
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';
|
||||
|
||||
|
|
@ -83,11 +85,13 @@ export class ProjectsComponent implements OnInit{
|
|||
firstCalendarDay: 0 // 0 - Sunday, 1 - Monday
|
||||
};
|
||||
|
||||
|
||||
//breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
|
||||
breadcrumbData: MenuItem[] = new Array<MenuItem>();
|
||||
|
||||
constructor(
|
||||
private serverService: ServerService,
|
||||
private route: ActivatedRoute,
|
||||
private breadcrumbService : BreadcrumbService,
|
||||
private router: Router) {
|
||||
this.datasetDropDown = new DropdownField();
|
||||
this.datasetDropDown.options = [];
|
||||
|
|
@ -118,6 +122,11 @@ getEmptyProject(){
|
|||
ngOnInit() {
|
||||
|
||||
this.getProjects();
|
||||
|
||||
this.breadcrumbService.clearAll();
|
||||
this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
|
||||
this.breadcrumbService.setData(this.breadcrumbData);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import { Injectable, EventEmitter } from '@angular/core';
|
||||
import { OnInit, Injectable, EventEmitter } from '@angular/core';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import {MenuItem} from 'primeng/primeng';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class BreadcrumbService {
|
||||
export class BreadcrumbService implements OnInit{
|
||||
|
||||
|
||||
breadcrumbHomeEmitter : EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
|
||||
breadcrumbDataEmitter : EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
setData(breadcrumbData : Array<MenuItem>){
|
||||
this.breadcrumbDataEmitter.emit(breadcrumbData);
|
||||
|
|
@ -19,5 +21,8 @@ export class BreadcrumbService {
|
|||
this.breadcrumbHomeEmitter.emit(breadcrumbHome);
|
||||
}
|
||||
|
||||
clearAll(){
|
||||
this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -84,7 +84,6 @@ export class TokenService {
|
|||
|
||||
|
||||
logout(){
|
||||
debugger;
|
||||
//set the log out actions here
|
||||
this.setLoggedIn(false);
|
||||
this.setEmail(null);
|
||||
|
|
|
|||
Loading…
Reference in New Issue