added breadcrumb

dmp-frontend/.angular-cli.json

@@ -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"
       ],

dmp-frontend/src/app/app-routing.module.ts

@@ -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 { }

dmp-frontend/src/app/app.component.html

@@ -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>
 

dmp-frontend/src/app/app.component.ts

@@ -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");
-    
 
   }
 

dmp-frontend/src/app/app.module.ts

@@ -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]
 })

dmp-frontend/src/app/datasets/dataset.component.ts

@@ -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;

dmp-frontend/src/app/dmps/dmp.component.ts

@@ -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.stateConfig.dmps.selectedID = item.id;
-  this.dmpLabelforDatasets = item.label;
+  this.stateConfig.dmps.selectedLabel = item.label;
-  if(this.dataSetVisibe == false)
+  if(this.stateConfig.datasets.tableVisible == false)
-    this.dataSetVisibe = true;
+    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 = item;
-    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;
-    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 = item;
-    this.dmp.profile = item.profile;
-    this.dmp.profileData = item.profileData;
-    this.dmp.id = item.id;
     this.dmp.project = item.project.id;
-    this.dmp.description = item.description;
+    
     $("#newVersionDmpModal").modal("show");
   }
   

dmp-frontend/src/app/dmps/dmps.html

@@ -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 -->
+            <td>
-                <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, 'editDMP')"> <!--btn btn-primary btn-rounded css for button style -->
-                <a href="#" class="editGridColumn" (click)="editRow(dmp, 'changeVersionDMP')">
+                    <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')">
+                <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>
+                    <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>
+
+

dmp-frontend/src/app/services/breadcrumb.service.ts

@@ -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);
+    }
+
+
+}