From e9d309fc5a1103cb13098cb8e894c2f2caf9fe9e Mon Sep 17 00:00:00 2001 From: Nikolaos Laskaris Date: Tue, 14 Nov 2017 16:06:00 +0200 Subject: [PATCH] added breadcrumb --- dmp-frontend/.angular-cli.json | 2 + dmp-frontend/src/app/app-routing.module.ts | 3 +- dmp-frontend/src/app/app.component.html | 11 +- dmp-frontend/src/app/app.component.ts | 44 +++++++- dmp-frontend/src/app/app.module.ts | 6 +- .../src/app/datasets/dataset.component.ts | 4 - dmp-frontend/src/app/dmps/dmp.component.ts | 100 ++++++++++-------- dmp-frontend/src/app/dmps/dmps.html | 39 ++++--- .../src/app/services/breadcrumb.service.ts | 23 ++++ 9 files changed, 161 insertions(+), 71 deletions(-) create mode 100644 dmp-frontend/src/app/services/breadcrumb.service.ts diff --git a/dmp-frontend/.angular-cli.json b/dmp-frontend/.angular-cli.json index f71ddd6e0..d2bdb2410 100644 --- a/dmp-frontend/.angular-cli.json +++ b/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" ], diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts index d8ede8ba6..c128949dd 100644 --- a/dmp-frontend/src/app/app-routing.module.ts +++ b/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 { } diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html index 619855ccb..c0605e7cc 100644 --- a/dmp-frontend/src/app/app.component.html +++ b/dmp-frontend/src/app/app.component.html @@ -9,11 +9,10 @@ -->
- +
@@ -48,6 +47,12 @@
+ +
+ +
+ +
@@ -67,10 +72,8 @@ - -
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts index 9d73db78e..b800a4376 100644 --- a/dmp-frontend/src/app/app.component.ts +++ b/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(); + + + + /* + 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"); - } diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index e690aa807..b7ee0bb57 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/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] }) diff --git a/dmp-frontend/src/app/datasets/dataset.component.ts b/dmp-frontend/src/app/datasets/dataset.component.ts index 1fff01b91..2868e63bd 100644 --- a/dmp-frontend/src/app/datasets/dataset.component.ts +++ b/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; diff --git a/dmp-frontend/src/app/dmps/dmp.component.ts b/dmp-frontend/src/app/dmps/dmp.component.ts index e6ad711fc..fa0f93c23 100644 --- a/dmp-frontend/src/app/dmps/dmp.component.ts +++ b/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.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"); } diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html index f9270f95b..e196b6e6b 100644 --- a/dmp-frontend/src/app/dmps/dmps.html +++ b/dmp-frontend/src/app/dmps/dmps.html @@ -1,4 +1,10 @@ - + + +--> + +
@@ -68,14 +74,16 @@ - + + + @@ -129,7 +137,8 @@ - + + -->
@@ -152,7 +162,6 @@
- + - + - + - \ No newline at end of file + + + + diff --git a/dmp-frontend/src/app/services/breadcrumb.service.ts b/dmp-frontend/src/app/services/breadcrumb.service.ts new file mode 100644 index 000000000..e7ad13548 --- /dev/null +++ b/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 = new EventEmitter(); + breadcrumbDataEmitter : EventEmitter> = new EventEmitter>(); + + + setData(breadcrumbData : Array){ + this.breadcrumbDataEmitter.emit(breadcrumbData); + } + + setHome(breadcrumbHome: MenuItem) { + this.breadcrumbHomeEmitter.emit(breadcrumbHome); + } + + +} \ No newline at end of file
{{dmp?.description}} {{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}} {{dmp?.status | statusToString }} - - + + + + - + - -