breadcrumb few changes remaining

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

@@ -15,7 +15,7 @@ import { BreadcrumbService } from './services/breadcrumb.service';
 const appRoutes: Routes = [
   //{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
   { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
-  //{ path: 'dataset', component: DatasetsComponent },
+  { path: 'dataset', component: DatasetsComponent },
   { path: 'login', component: MainSignInComponent},
   { path: 'projects', component: ProjectsComponent},
   { path: 'dmps', component: DmpComponent},

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

@@ -61,8 +61,8 @@
 </div>
 
 <!-- breadcrumb bar -->
-<div *ngIf="breadcrumbData.length!=0" class="col-md-12">
-    <p-breadcrumb [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
+<div class="col-md-12">
+  <breadcrumb></breadcrumb>
 </div>
 
 

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

@@ -3,11 +3,12 @@ import { ServerService } from './services/server.service';
 import { FieldBase } from '../app/form/fields/field-base';
 import { JsonObjest } from '../app/entities/JsonObject.class';
 import { TokenService, TokenProvider } from './services/login/token.service';
-import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, NavigationExtras } 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 { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
@@ -31,7 +32,7 @@ export class AppComponent implements OnInit {
   
 
 
-  constructor(private tokenService : TokenService, private router: Router, private breadcrumbService  : BreadcrumbService) {
+  constructor(private tokenService : TokenService, private router: Router, private breadcrumbService  : BreadcrumbService, private route: ActivatedRoute) {
 
   }
 
@@ -44,6 +45,7 @@ export class AppComponent implements OnInit {
         this.breadcrumbData = data;
       }
     );
+
     this.breadcrumbService.breadcrumbHomeEmitter.subscribe(
       (data) => {
         this.breadcrumbHome = data;

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

@@ -70,6 +70,7 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
 import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
+import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 
 
 
@@ -100,7 +101,8 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
     DmpTableFilterPipe,
     DatasetTableFilterPipe, 
     DatasetStatusFilterPipe, 
-    StatusToString
+    StatusToString, 
+    BreadcrumbComponent
   ],
   imports: [
     BrowserModule,

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

@@ -41,6 +41,8 @@ export class DatasetsComponent implements OnInit {
   public sortBy = "label";
   public sortOrder = "asc";
 
+  dmpIdforDatasets: string;
+
 
   // for tableIds
   showIDs : boolean = false;
@@ -50,25 +52,14 @@ export class DatasetsComponent implements OnInit {
   @Input() datasets: Dataset[];
   @Input() datasetProfileDropDown: DropdownField;
   @Input() datasetCount = 0;
-  @Input() dmpIdforDatasets: string;
+  
   @Input() dmpLabelforDatasets: string;
   @Input() statusDropDown: DropdownField;
   dataset: any;
   saveAndDescribe:boolean;
   
-
-  dataSetValue: boolean
-  @Input()
-  get dataSetVisibe() {
-    return this.dataSetValue;
-  }
-  @Output()
-  public dataSetValueChange = new EventEmitter();
-
-  set dataSetVisibe(value: any) {
-    this.dataSetValue = value
-    this.dataSetValueChange.emit(this.dataSetValue)
-  }
+  dataSetValue: boolean = true;
+  
 
   constructor(
     
@@ -77,21 +68,27 @@ export class DatasetsComponent implements OnInit {
     private router: Router,
     private ngZone: NgZone,
     private spinnerService: Ng4LoadingSpinnerService) {
+
     this.dataset = this.createEmptyDataset();
 
     this.datasetProfileDropDown = new DropdownField();
     this.datasetProfileDropDown.options = [];
     this.saveAndDescribe = false;
     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.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
 
   }
 
   ngOnInit() {    
-    //this.projects = this.serverService.getDummyProjects();
-    this.datasets = [];
-    console.log(this.dmpIdforDatasets);
-    this.getDatasets();
+    
+    
+    this.route
+      .queryParams
+      .subscribe(params => {
+        this.dmpIdforDatasets = params['dmpid'];
+        this.getDatasets();
+      });
+
 
     this.serverService.getAllDatsetsProfile().subscribe(
       response => {

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

@@ -217,24 +217,6 @@ export class DmpComponent implements OnInit{
   }
 
 
-  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;
@@ -311,5 +293,10 @@ export class DmpComponent implements OnInit{
     
   }
 
+  showDatasetsOfDmp(item){ 
+    this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id }});
+  }
+
+
 
 }

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

@@ -227,10 +227,6 @@
 </div>
 
 
-<!--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>
 

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

@@ -17,6 +17,9 @@ import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autoco
 
 import { AngularDraggableModule } from 'angular2-draggable';
 
+import {MenuItem} from 'primeng/primeng';
+import { BreadcrumbService } from '../services/breadcrumb.service';
+
 import './../../assets/xml2json.min.js';
 declare var X2JS: any;
 
@@ -64,7 +67,7 @@ export class DynamicFormComponent implements OnInit {
   expandedToc : boolean = true;
 
 
-  constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
+  constructor(private qcs: FieldControlService, private breadcrumbService : BreadcrumbService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
     private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService) {
     this.form = this.qcs.toFormGroup(new Array(), new Array());
     this.xml2jsonOBJ = new X2JS();
@@ -77,6 +80,7 @@ export class DynamicFormComponent implements OnInit {
 
   ngOnInit() {
 
+/*
     //this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page, it doesn't use anymore
     let sub = this.route.params.subscribe(params => {
       this.id = params.id;
@@ -193,7 +197,11 @@ export class DynamicFormComponent implements OnInit {
 
       var formScroller = new PerfectScrollbar("#form-container");
       var tocScroller = new PerfectScrollbar("#toc-container");
+      */
+
       
+      //this.breadcrumbService.breadcrumbDataEmitter
+
   }
 
   scrollToElemID(elemID) {

dmp-frontend/src/app/projects/project.html

@@ -124,8 +124,3 @@
     </div>
 </div>
 
-<!--Modal for DMPs-->
-<modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal>
-
-<!--DATASET TABLE-->
-<datasets-table *ngIf="dataSetVisibe"  [(dataSetVisibe)]="dataSetVisibe"></datasets-table> <!--*ngIf="dataSetVisibe == true"-->

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

@@ -52,29 +52,13 @@ export class ProjectsComponent implements OnInit{
   public sortBy = "label";
   public sortOrder = "asc";
 
-  //visibility rules for containers
-  tableVisible: boolean = true;
-  editorVisible: boolean = false;
-
 
   // for tableIds
   showIDs : boolean = false;
-// END ALTERNATIVE
 
-  returnUrl: string;
-  @Input() projectCount = 0;
-  @Input() datasetDropDown:DropdownField;
-  @Input() statusDropDown: DropdownField;
-  //@Input() dataSetVisibe:boolean;
-  @Input() datasets: Dataset[];  
+  statusDropDown: DropdownField;
+
   project: any;
-  modalEditedRow: ModalComponent;
-  public item:any;
-  public show:boolean = false;
-  public dataSetVisibe:boolean = false;
-  @ViewChild(DataTable) projectsTable;
-  @ViewChild(DataTable) datasetsTable;
-  @ViewChild('isignOutBtn') isignOutBtn;
 
 
   options: DatepickerOptions = {
@@ -93,12 +77,8 @@ export class ProjectsComponent implements OnInit{
     private route: ActivatedRoute,
     private breadcrumbService : BreadcrumbService,
     private router: Router) {
-      this.datasetDropDown = new DropdownField();
-      this.datasetDropDown.options = [];
-      this.datasets = [];
       this.statusDropDown = new DropdownField();
       this.statusDropDown.options= [{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
-      //this.projects = [];
       this.project = this.getEmptyProject();
   }
 
@@ -143,7 +123,7 @@ getProjects(muted? : boolean){
 );
 }
  
-
+/*
 getDMPs(){
   this.serverService.listDmpsLabelID().subscribe(
     response =>{
@@ -164,6 +144,7 @@ getDMPs(){
     }
   )
 }
+*/
 
 showDatasets(){ //dmpId, event
   //this.dataSetVisibe = true;
@@ -192,7 +173,7 @@ SaveProject(){
   $("#newEditProjectModal").modal("hide");
 }
 
-  newProject(item){
+  newProject(){
     this.project = this.getEmptyProject();
     $("#newEditProjectModal").modal("show");
 

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

@@ -1,19 +1,25 @@
-import { OnInit, Injectable, EventEmitter } from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {MenuItem} from 'primeng/primeng';
+import { OnInit, Injectable, EventEmitter, Input } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { MenuItem } from 'primeng/primeng';
 
 
 @Injectable()
-export class BreadcrumbService implements OnInit{
+export class BreadcrumbService implements OnInit {
+
+
+    breadcrumbHomeEmitter: EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
+    breadcrumbDataEmitter: EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
+
+    @Input() currentHome: MenuItem;
+    @Input() currentData: Array<MenuItem>;
+
 
 
-    breadcrumbHomeEmitter : EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
-    breadcrumbDataEmitter : EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
-    
     ngOnInit() {
+        console.log("Intiated the service")
     }
-    
-    setData(breadcrumbData : Array<MenuItem>){
+
+    setData(breadcrumbData: Array<MenuItem>) {
         this.breadcrumbDataEmitter.emit(breadcrumbData);
     }
 
@@ -21,7 +27,11 @@ export class BreadcrumbService implements OnInit{
         this.breadcrumbHomeEmitter.emit(breadcrumbHome);
     }
 
-    clearAll(){
+    appendMenuItem(menuItem: MenuItem) {
+        //
+    }
+
+    clearAll() {
         this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
     }
 

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

@@ -0,0 +1,2 @@
+<!-- breadcrumb bar -->
+<p-breadcrumb *ngIf="breadcrumbData?.length != 0" [model]="getPaths()" [home]="breadcrumbHome"></p-breadcrumb>

dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+describe('BreadcrumbComponent', () => {
+  let component: BreadcrumbComponent;
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BreadcrumbComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, NavigationEnd } from '@angular/router';
+import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
+
+@Component({
+  selector: 'breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.css']
+})
+export class BreadcrumbComponent implements OnInit {
+
+
+  breadcrumbHome: MenuItem = {icon: 'fa fa-home', routerLink: "/welcome"};
+  breadcrumbData: MenuItem[] = new Array<MenuItem>();
+
+
+  constructor(private router: Router, private route: ActivatedRoute) {
+    router.events.subscribe(
+      event =>{
+        console.log("Router event captured")
+        console.log(event)
+        
+
+        if(event instanceof NavigationEnd){
+          //this.breadcrumbData.push("")
+          console.log(event.urlAfterRedirects);
+          console.log(this.route);
+
+          
+          //this.breadcrumbData.length = 0;
+          this.route.children.forEach( child => {
+            let menuItem : MenuItem = this.guessMenuItemFromActivatedRoute(child, event);
+            if(menuItem != null)
+              this.breadcrumbData.push(menuItem);
+          })
+
+        }
+      });
+
+  }
+
+  guessMenuItemFromActivatedRoute(activatedRoute : any, event : NavigationEnd) { //it's important to leave it as "any"
+    let componentName = activatedRoute.component.name; 
+    let params = activatedRoute.queryParams.getValue();
+    let url = event.urlAfterRedirects.split("?")[0]; 
+
+    let label = null;
+    if(componentName == "ProjectsComponent") {
+      label = "My Projects";
+    }
+    if(componentName == "DmpComponent"){
+      label = "My Data Management Plans";
+    }
+    
+    if(label != null)
+      return {"label": label, "routerLink": url, "queryParams" : params };
+
+    return null;
+  }
+
+
+  ngOnInit() {
+
+  }
+
+  getPaths(){
+
+    return this.breadcrumbData;
+  }
+
+
+
+}