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

Merge branch 'master' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot

This commit is contained in:
annampak 2017-11-16 10:25:21 +02:00
parent a638c46b3b 25d28ac77d
commit 16fd7a8c88
19 changed files with 196 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/app-routing.module.ts
View File

@ -10,12 +10,11 @@ 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] },
{ 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},
@ -46,7 +45,6 @@ const appRoutes: Routes = [
RouterModule
],
providers: [
BreadcrumbService
]
})
export class AppRoutingModule { }

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

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

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

@ -3,11 +3,11 @@ 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,31 +31,12 @@ export class AppComponent implements OnInit {
constructor(private tokenService : TokenService, private router: Router, private breadcrumbService : BreadcrumbService) {
constructor(private tokenService : TokenService, private router: Router, private route: ActivatedRoute) {
}
ngOnInit() {
this.clearbreadCrumb();
this.breadcrumbService.breadcrumbDataEmitter.subscribe(
(data) => {
this.breadcrumbData = data;
}
);
this.breadcrumbService.breadcrumbHomeEmitter.subscribe(
(data) => {
this.breadcrumbHome = data;
}
);
}
clearbreadCrumb(){
this.breadcrumbData.length = 0;
}
@ -80,7 +61,6 @@ export class AppComponent implements OnInit {
}
logout(){
this.breadcrumbService.clearAll();
this.tokenService.logout();
location.reload();
}

7
dmp-frontend/src/app/app.module.ts
View File

@ -35,7 +35,6 @@ 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';
@ -70,6 +69,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 +100,8 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
DmpTableFilterPipe,
DatasetTableFilterPipe,
DatasetStatusFilterPipe,
StatusToString
StatusToString,
BreadcrumbComponent
],
imports: [
BrowserModule,
@ -125,7 +126,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
useClass: GlobalInterceptor,
multi: true,
},
ServerService, BreadcrumbService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
ServerService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
],
bootstrap: [AppComponent]
})

4
dmp-frontend/src/app/datasets/dataset.component.css
View File

@ -36,4 +36,8 @@ tr.hover:hover > * {
background-color:#337ab7;
color:white;
margin-top:15px;
}
.cursor-hand{
cursor: pointer;
}

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

@ -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 => {
@ -117,6 +114,7 @@ export class DatasetsComponent implements OnInit {
label: '',
reference: '',
uri: '',
status: 0,
properties: '',
profile: { "id": '' },
dmp: { "id": '' }
@ -192,9 +190,12 @@ export class DatasetsComponent implements OnInit {
editRow(item, event) {
if (event.toElement.id == "editDataset"){
this.dataset = item;
//this.dataset = item;
this.dataset.label = item.label;
this.dataset.uri = item.uri;
this.dataset.created = item.created;
this.dataset.status = item.status;
this.dataset.description = item.description;
//this.dataset.dmp = item.dmp;
this.dataset.profile = item.profile==null ? null : item.profile.id;
this.dataset.id = item.id;
@ -203,7 +204,6 @@ export class DatasetsComponent implements OnInit {
else if(event.toElement.id == "describeDataset"){
this.describeDataset(item);
}
return false;
}
@ -220,7 +220,8 @@ export class DatasetsComponent implements OnInit {
}
describeDataset(item) {
this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id}]));
this.router.navigate(['/dynamic-form'], { queryParams: {id: item.profile.id, datasetId:item.id, label: item.label}});
//this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id, label: item.label}]));
}
markDatasetForDelete(dataset){

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

@ -61,11 +61,12 @@
<td>{{dataset?.description}}</td>
<td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
<td>{{dataset?.status | statusToString }}</td>
<td><a href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
<td>
<a class="editGridColumn cursor-hand disabled" (click)="editRow(dataset, $event)">
<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 class="editGridColumn cursor-hand" (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>
<a href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
<a class="editGridColumn cursor-hand" (click)="editRow(dataset, $event)">
<i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
</tr>

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

@ -17,7 +17,6 @@ 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;
@ -45,24 +44,6 @@ export class DmpComponent implements OnInit{
// for tableIds
showIDs : boolean = false;
public stateConfig : any = {
"dmps" : {
"tableVisible" : true,
"dmpDescriptionVisible" : false,
"selectedID" : null,
"selectedLabel" : null
},
"datasets" : {
"tableVisible" : false,
"selectedID" : null,
"selectedLabel" : null
}
}
//breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
breadcrumbData: MenuItem[] = new Array<MenuItem>();
dmp : any = null;
@ -75,7 +56,6 @@ export class DmpComponent implements OnInit{
constructor(
private serverService: ServerService,
private route: ActivatedRoute,
private breadcrumbService : BreadcrumbService,
private router: Router){
this.projectsDropDown = new DropdownField();
this.projectsDropDown.options = [];
@ -121,8 +101,6 @@ export class DmpComponent implements OnInit{
}
)
this.showDmps();
}
showDMPDetails(dmp) {
@ -133,17 +111,6 @@ export class DmpComponent implements OnInit{
}
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){
this.serverService.getDmpOfUser().subscribe(
@ -217,24 +184,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 +260,10 @@ export class DmpComponent implements OnInit{
}
showDatasetsOfDmp(item){
this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id , "label":item.label}});
}
}

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

@ -1,5 +1,5 @@
<table *ngIf="stateConfig.dmps.tableVisible" class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
<table 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">
@ -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>

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

@ -51,7 +51,7 @@
</div>
<div>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveFinalize();">Save</button>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
</div>
@ -121,7 +121,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="SaveFinalize();">Save and Finalize</button>
<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
</div>
</div>
</div>

19
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -17,6 +17,8 @@ import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autoco
import { AngularDraggableModule } from 'angular2-draggable';
import {MenuItem} from 'primeng/primeng';
import './../../assets/xml2json.min.js';
declare var X2JS: any;
@ -77,8 +79,11 @@ 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 => {
let sub = this.route.queryParams.subscribe(params => {
this.id = params.id;
this.datasetId = params.datasetId;
//this.datasetProperties = params.datasetProperties
@ -194,6 +199,10 @@ export class DynamicFormComponent implements OnInit {
var formScroller = new PerfectScrollbar("#form-container");
var tocScroller = new PerfectScrollbar("#toc-container");
//this.breadcrumbService.breadcrumbDataEmitter
}
scrollToElemID(elemID) {
@ -225,8 +234,8 @@ export class DynamicFormComponent implements OnInit {
this.serverService.getDatasetByID(this.datasetId).subscribe(
(data) => {
if (final) data.status = 2;
//is xml, so transform them to xml (it's json)
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
//data.properties = "<root><formValues><![CDATA["+JSON.stringify(this.form.value)+"]]></formValues><dataModel><![CDATA["+JSON.stringify(this.dataModel)+"]]></dataModel></root>";
data.properties = JSON.stringify(this.form.value);
this.serverService.setDataset(data).subscribe(
@ -244,14 +253,14 @@ export class DynamicFormComponent implements OnInit {
});
}
onSubmit() {
SaveForm() {
let final = false;
this.submitForm(false);
this.payLoad = JSON.stringify(this.form.value);
}
SaveFinalize(){
SaveFinalizeForm(){
$("#confirmModal").modal("hide");
let final = true;
this.submitForm(final);

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

@ -4,7 +4,6 @@ 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;
@ -22,7 +21,7 @@ export class MainSignInComponent implements OnInit {
creds : any = {"username":"","password":""};
constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router, private breadcrumbService: BreadcrumbService) {
constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router) {
}
@ -38,7 +37,6 @@ export class MainSignInComponent implements OnInit {
ngOnInit() {
this.breadcrumbService.clearAll();
this.createForm();
if(this.tokenService.isLoggedIn()){
this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});

5
dmp-frontend/src/app/projects/project.html
View File

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

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

@ -18,7 +18,6 @@ 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';
@ -52,29 +51,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 = {
@ -91,14 +74,9 @@ export class ProjectsComponent implements OnInit{
constructor(
private serverService: ServerService,
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();
}
@ -123,10 +101,6 @@ getEmptyProject(){
this.getProjects();
this.breadcrumbService.clearAll();
this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
this.breadcrumbService.setData(this.breadcrumbData);
}
@ -143,7 +117,7 @@ getProjects(muted? : boolean){
);
}
/*
getDMPs(){
this.serverService.listDmpsLabelID().subscribe(
response =>{
@ -164,6 +138,7 @@ getDMPs(){
}
)
}
*/
showDatasets(){ //dmpId, event
//this.dataSetVisibe = true;
@ -192,7 +167,7 @@ SaveProject(){
$("#newEditProjectModal").modal("hide");
}
newProject(item){
newProject(){
this.project = this.getEmptyProject();
$("#newEditProjectModal").modal("show");

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

@ -1,28 +0,0 @@
import { OnInit, Injectable, EventEmitter } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {MenuItem} from 'primeng/primeng';
@Injectable()
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);
}
setHome(breadcrumbHome: MenuItem) {
this.breadcrumbHomeEmitter.emit(breadcrumbHome);
}
clearAll(){
this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
}
}

0
dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.css Normal file
View File

2
dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.html Normal file
View File

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

25
dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.spec.ts Normal file
View File

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

100
dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts Normal file
View File

@ -0,0 +1,100 @@
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>();
ngOnInit() {
}
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.adaptBreadcrumbByMenuItem(menuItem);
//this.breadcrumbData.push(menuItem);
}
})
}
});
}
guessMenuItemFromActivatedRoute(activatedRoute : any, event : NavigationEnd) { //it's important to leave it as "any"
let menuItem : MenuItem = null;
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(componentName == "DatasetsComponent"){
label = "Datasets of DMP '"+params["label"]+"'";
}
if(componentName == "DynamicFormComponent"){
label = "Form of dataset '"+params["label"]+"'";
}
if(label != null)
menuItem = {"label": label, "routerLink": url, "queryParams" : params };
console.log("COMPONENT NAME="+componentName);
return menuItem;
}
adaptBreadcrumbByMenuItem(menuItem : MenuItem){
let breadcrumbDataNew: MenuItem[] = new Array<MenuItem>();
for(var i=0; i<this.breadcrumbData.length;i++){
if(this.breadcrumbData[i].label == menuItem.label)
break;
else
breadcrumbDataNew.push(this.breadcrumbData[i]);
}
this.breadcrumbData = breadcrumbDataNew;
this.breadcrumbData.push(menuItem);
}
}