breadcrumb few changes remaining

This commit is contained in:
Nikolaos Laskaris 2017-11-15 17:11:35 +02:00
parent 2936e1d37c
commit fed09b377f
15 changed files with 165 additions and 87 deletions

View File

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

View File

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

View File

@ -3,11 +3,12 @@ import { ServerService } from './services/server.service';
import { FieldBase } from '../app/form/fields/field-base'; import { FieldBase } from '../app/form/fields/field-base';
import { JsonObjest } from '../app/entities/JsonObject.class'; import { JsonObjest } from '../app/entities/JsonObject.class';
import { TokenService, TokenProvider } from './services/login/token.service'; 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 { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
import {BreadcrumbModule,MenuItem} from 'primeng/primeng'; import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
import { BreadcrumbService } from './services/breadcrumb.service'; import { BreadcrumbService } from './services/breadcrumb.service';
import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.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.breadcrumbData = data;
} }
); );
this.breadcrumbService.breadcrumbHomeEmitter.subscribe( this.breadcrumbService.breadcrumbHomeEmitter.subscribe(
(data) => { (data) => {
this.breadcrumbHome = data; this.breadcrumbHome = data;

View File

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

View File

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

View File

@ -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){ editDmp(item){
this.dmp = item; this.dmp = item;
this.dmp.project = item.project.id; 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 }});
}
} }

View File

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

View File

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

View File

@ -124,8 +124,3 @@
</div> </div>
</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"-->

View File

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

View File

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

View File

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

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

View File

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