added breadcrumb
This commit is contained in:
Nikolaos Laskaris
parent
49bb22627e
commit
e9d309fc5a
|
|
@ -19,6 +19,8 @@
|
|||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/primeng/resources/themes/omega/theme.css" ,
|
||||
"../node_modules/primeng/resources/primeng.css",
|
||||
"./../node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"styles.css"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { DmpComponent } from './dmps/dmp.component';
|
|||
import { AppComponent } from './app.component';
|
||||
import { UserWorkspaceComponent } from './user-workspace/user-workspace.component';
|
||||
import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
|
||||
import { BreadcrumbService } from './services/breadcrumb.service';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
//{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
|
||||
|
|
@ -45,7 +46,7 @@ const appRoutes: Routes = [
|
|||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
|
||||
BreadcrumbService
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
|
|
|||
|
|
@ -9,11 +9,10 @@
|
|||
-->
|
||||
<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"> Manage <span class="caret"></span> </button>
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Quick Navigate <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>
|
||||
<li><a class="cursor"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -48,6 +47,12 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- breadcrumb bar -->
|
||||
<div *ngIf="breadcrumbData.length!=0" class="col-md-12">
|
||||
<p-breadcrumb [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="parent_div">
|
||||
|
||||
<div id="appSidebar" class="sidenav child_div_left">
|
||||
|
|
@ -67,10 +72,8 @@
|
|||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
|
||||
<!--this should be invisible -->
|
||||
<app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ import { JsonObjest } from '../app/entities/JsonObject.class';
|
|||
import { TokenService, TokenProvider } from './services/login/token.service';
|
||||
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
||||
import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
|
||||
import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
|
||||
import { BreadcrumbService } from './services/breadcrumb.service';
|
||||
|
||||
|
||||
import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
|
||||
|
||||
|
|
@ -22,21 +25,56 @@ export class AppComponent implements OnInit {
|
|||
|
||||
sliderExpanded : boolean = false;
|
||||
|
||||
constructor(private tokenService : TokenService, private router: Router) {
|
||||
|
||||
breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
|
||||
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.breadcrumbService.breadcrumbDataEmitter.subscribe(
|
||||
(data) => {
|
||||
this.breadcrumbData = data;
|
||||
}
|
||||
);
|
||||
this.breadcrumbService.breadcrumbHomeEmitter.subscribe(
|
||||
(data) => {
|
||||
this.breadcrumbHome = data;
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
clearbreadCrumb(){
|
||||
this.breadcrumbData.length = 0;
|
||||
}
|
||||
|
||||
|
||||
slideNav(){
|
||||
|
||||
$("#appSidebar").toggleClass("expanded");
|
||||
$("#appBody").toggleClass("expanded");
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import { GlobalInterceptor } from './services/interceptor';
|
|||
import { TabModule } from './tabs/tab.module';
|
||||
import { AngularDraggableModule } from 'angular2-draggable';
|
||||
|
||||
import { BreadcrumbService } from './services/breadcrumb.service';
|
||||
import { NativeLoginService } from './services/login/native-login.service';
|
||||
import { GooggleSignInComponent } from './login/googgle-sign-in/googgle-sign-in.component';
|
||||
import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
|
||||
|
|
@ -42,7 +43,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
|
|||
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
|
||||
|
||||
import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
|
|
@ -115,6 +116,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
|
|||
NgDatepickerModule,
|
||||
Ng4LoadingSpinnerModule,
|
||||
NguiAutoCompleteModule,
|
||||
BreadcrumbModule,
|
||||
SidebarModule.forRoot()
|
||||
|
||||
],
|
||||
|
|
@ -123,7 +125,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
|
|||
useClass: GlobalInterceptor,
|
||||
multi: true,
|
||||
},
|
||||
ServerService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
|
||||
ServerService, BreadcrumbService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -41,10 +41,6 @@ export class DatasetsComponent implements OnInit {
|
|||
public sortBy = "label";
|
||||
public sortOrder = "asc";
|
||||
|
||||
//visibility rules for containers
|
||||
tableVisible: boolean = true;
|
||||
editorVisible: boolean = false;
|
||||
|
||||
|
||||
// for tableIds
|
||||
showIDs : boolean = false;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import { FormGroup, FormControl } from '@angular/forms'; //na dw
|
|||
import { NgForm } from '@angular/forms';
|
||||
import { DatasetsComponent } from '../datasets/dataset.component';
|
||||
import { StatusToString } from '../pipes/various/status-to-string';
|
||||
import {MenuItem} from 'primeng/primeng';
|
||||
import { BreadcrumbService } from '../services/breadcrumb.service';
|
||||
|
||||
declare var $ :any;
|
||||
|
||||
|
|
@ -31,55 +33,70 @@ declare function simple_notifier(type: string, title: string, message:string): a
|
|||
|
||||
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 = "label";
|
||||
public sortOrder = "asc";
|
||||
|
||||
//visibility rules for containers
|
||||
//tableVisible: boolean = true;
|
||||
//editorVisible: boolean = true;
|
||||
|
||||
|
||||
// for tableIds
|
||||
showIDs : boolean = false;
|
||||
// END ALTERNATIVE
|
||||
|
||||
public stateConfig : any = {
|
||||
"dmps" : {
|
||||
"tableVisible" : true,
|
||||
"selectedID" : null,
|
||||
"selectedLabel" : null
|
||||
},
|
||||
"datasets" : {
|
||||
"tableVisible" : false,
|
||||
"selectedID" : null,
|
||||
"selectedLabel" : null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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'}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
dmp:any;
|
||||
@Input() dmpTableVisible: boolean;
|
||||
@Input() dmpCount = 0;
|
||||
|
||||
@Input() projectsDropDown:DropdownField;
|
||||
@Input() dataSetVisibe:boolean;
|
||||
@Input() statusDropDown: DropdownField;
|
||||
@Input() isSelected:boolean;
|
||||
//@Input() projects: Project[];
|
||||
dmpIdforDatasets: string;
|
||||
dmpLabelforDatasets:string;
|
||||
|
||||
@ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
|
||||
|
||||
|
||||
@ViewChild('isignOutBtn') isignOutBtn;
|
||||
constructor(
|
||||
private serverService: ServerService,
|
||||
private route: ActivatedRoute,
|
||||
private breadcrumbService : BreadcrumbService,
|
||||
private router: Router){
|
||||
this.projectsDropDown = new DropdownField();
|
||||
this.projectsDropDown.options = [];
|
||||
this.statusDropDown = new DropdownField();
|
||||
this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}, {key:'2', value:"Submitted"}, {key:'3', value:"Cancel"}]
|
||||
//this.projects = [];
|
||||
this.dmpTableVisible = false;
|
||||
this.dataSetVisibe = false;
|
||||
this.isSelected=false;
|
||||
|
||||
this.dmp = {
|
||||
id: null,
|
||||
|
|
@ -110,6 +127,11 @@ export class DmpComponent implements OnInit{
|
|||
simple_notifier("danger",null,"Could not load User's Projects");
|
||||
}
|
||||
)
|
||||
|
||||
this.breadcrumbService.setData(this.breadcrumbData);
|
||||
this.breadcrumbService.setData(this.breadcrumbData);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -189,40 +211,30 @@ SaveDmp(){
|
|||
|
||||
|
||||
selectDmp(item){
|
||||
this.dmpIdforDatasets = item.id;
|
||||
this.dmpLabelforDatasets = item.label;
|
||||
if(this.dataSetVisibe == false)
|
||||
this.dataSetVisibe = true;
|
||||
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){
|
||||
this.isSelected = true;
|
||||
if (elementId == "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 = item;
|
||||
this.dmp.project = item.project.id;
|
||||
this.dmp.description = item.description;
|
||||
this.dmp.status = item.status;
|
||||
setTimeout(function() {
|
||||
|
||||
//setTimeout(function() {
|
||||
$("#newDmpModal").modal("show");
|
||||
},0);
|
||||
//},0);
|
||||
|
||||
}
|
||||
if(elementId == "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 = item;
|
||||
this.dmp.project = item.project.id;
|
||||
this.dmp.description = item.description;
|
||||
|
||||
$("#newVersionDmpModal").modal("show");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
|
||||
<!--
|
||||
<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">
|
||||
<thead>
|
||||
<tr class="rowFilter">
|
||||
|
|
@ -68,14 +74,16 @@
|
|||
<td>{{dmp?.description}}</td>
|
||||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{dmp?.status | statusToString }}</td>
|
||||
<td><a href="#" class="editGridColumn" (click)="editRow(dmp, 'editDMP')"> <!--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 href="#" class="editGridColumn" (click)="editRow(dmp, 'changeVersionDMP')">
|
||||
<td>
|
||||
<a class="editGridColumn cursor-link" (click)="editRow(dmp, 'editDMP')"> <!--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')">
|
||||
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
|
||||
<a href="#" class="editGridColumn" (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>
|
||||
<a href="#" class="editGridColumn" (click)="editRow(dmp, 'showDatasets')">
|
||||
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
|
||||
<a class="editGridColumn cursor-link" (click)="editRow(dmp, 'showDatasets')">
|
||||
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
|
|
@ -129,7 +137,8 @@
|
|||
<label for="abbreviation-text" class="form-control-label">Description:</label>
|
||||
<textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dmp.description" name="description"></textarea>
|
||||
</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>
|
||||
|
|
@ -140,7 +149,8 @@
|
|||
<div class="form-group">
|
||||
<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>
|
||||
-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
@ -152,7 +162,6 @@
|
|||
</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">
|
||||
|
|
@ -214,12 +223,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Modal for DMPs-->
|
||||
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
|
||||
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></modal> -->
|
||||
|
||||
<!--DATASET TABLE-->
|
||||
<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></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 [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure you want to delete this DMP ? 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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { Injectable, EventEmitter } from '@angular/core';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import {MenuItem} from 'primeng/primeng';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class BreadcrumbService {
|
||||
|
||||
|
||||
breadcrumbHomeEmitter : EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
|
||||
breadcrumbDataEmitter : EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
|
||||
|
||||
|
||||
setData(breadcrumbData : Array<MenuItem>){
|
||||
this.breadcrumbDataEmitter.emit(breadcrumbData);
|
||||
}
|
||||
|
||||
setHome(breadcrumbHome: MenuItem) {
|
||||
this.breadcrumbHomeEmitter.emit(breadcrumbHome);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue