From 162d2ef21feadf07f98561ee33ac963d2b3b490b Mon Sep 17 00:00:00 2001 From: apapachristou Date: Thu, 16 May 2019 19:11:41 +0300 Subject: [PATCH] Add Breadcrumb to navbar (Ticket #82) --- dmp-frontend/src/app/app.component.html | 4 +- .../app/ui/dashboard/dashboard.component.ts | 14 ++++- .../src/app/ui/dashboard/dashboard.routing.ts | 8 ++- .../app/ui/dmp/editor/dmp-editor.component.ts | 6 +- .../ui/dmp/listing/dmp-listing.component.ts | 2 +- .../explore-dataset-listing.component.ts | 10 +++- .../explore-dmp-listing.component.ts | 10 +++- .../misc/breadcrumb/breadcrumb.component.html | 11 +++- .../misc/breadcrumb/breadcrumb.component.scss | 56 ++++++++++++++----- .../misc/breadcrumb/breadcrumb.component.ts | 17 +++++- .../breadcrumb/definition/breadcrumb-item.ts | 1 + .../src/app/ui/navbar/navbar.component.html | 5 +- .../src/app/ui/navbar/navbar.component.scss | 1 + .../src/app/ui/navbar/navbar.module.ts | 4 +- 14 files changed, 119 insertions(+), 30 deletions(-) diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html index 806e5cc21..e75e35237 100644 --- a/dmp-frontend/src/app/app.component.html +++ b/dmp-frontend/src/app/app.component.html @@ -1,5 +1,6 @@
-
+
@@ -7,6 +8,7 @@
+
diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts index 4ed1018a6..ea3ac35ff 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Router } from '@angular/router'; -import { Observable } from 'rxjs/internal/Observable'; +import { Router, ActivatedRoute, Params } from '@angular/router'; import { takeUntil } from 'rxjs/operators'; import { BaseComponent } from '../../core/common/base/base.component'; import { RecentActivityType } from '../../core/common/enum/recent-activity-type'; @@ -23,13 +22,18 @@ import { ExploreDmpCriteriaModel } from '../../core/query/explore-dmp/explore-dm import { DatasetListingModel } from '../../core/model/dataset/dataset-listing'; import { DatasetService } from '../../core/services/dataset/dataset.service'; import { ExploreDatasetCriteriaModel } from '../../core/query/explore-dataset/explore-dataset-criteria'; +import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item'; +import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbComponent'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'], }) -export class DashboardComponent extends BaseComponent implements OnInit { +export class DashboardComponent extends BaseComponent implements OnInit, IBreadCrumbComponent { + + breadCrumbs: Observable; public userInfo: any; datasetActivities: any[]; @@ -48,6 +52,7 @@ export class DashboardComponent extends BaseComponent implements OnInit { constructor( private router: Router, + private route: ActivatedRoute, private projectService: ProjectService, private dmpService: DmpService, private datasetService: DatasetService, @@ -84,6 +89,9 @@ export class DashboardComponent extends BaseComponent implements OnInit { // titleFn: (item) => item['label'] // }; + const breadCrumbs = []; + this.breadCrumbs = Observable.of(breadCrumbs); + if (!this.isAuthenticated()) { this.dashboardService.getStatistics() .pipe(takeUntil(this._destroyed)) diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.routing.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.routing.ts index 8d1fc1e57..cf1f8b527 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.routing.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.routing.ts @@ -4,7 +4,13 @@ import { DashboardComponent } from './dashboard.component'; import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component'; const routes: Routes = [ - { path: '', component: DashboardComponent }, + { + path: '', + component: DashboardComponent, + data: { + breadcrumb: true + }, + }, ]; @NgModule({ diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts index 70b2d439d..9d15c225b 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts @@ -151,7 +151,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.formGroup = this.dmp.buildForm(); this.registerFormEventsForDmpProfile(this.dmp.definition); if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); } - if (!this.isAuthenticated) { + if (this.isAuthenticated) { + // if (!this.isAuthenticated) { this.breadCrumbs = Observable.of([ { parentComponentName: 'DmpListingComponent', @@ -185,7 +186,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.formGroup = this.dmp.buildForm(); this.registerFormEventsForDmpProfile(this.dmp.definition); if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); } - if (!this.isAuthenticated) { + if (this.isAuthenticated) { + // if (!this.isAuthenticated) { this.breadCrumbs = Observable.of([ { parentComponentName: 'DmpListingComponent', diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts index aad015d85..fb1cce8f5 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts @@ -71,7 +71,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread { parentComponentName: null, label: 'DMPs', url: '/plans' }, ); } - //else breadCrumbs.push({ parentComponentName: null, label: 'DMPs', url: "/plans" }) + else breadCrumbs.push({ parentComponentName: null, label: 'DMPs', url: "/plans" }) this.breadCrumbs = Observable.of(breadCrumbs); this.criteria.setCriteria(this.getDefaultCriteria()); diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts index ed4cb1596..c72559b88 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts +++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts @@ -7,6 +7,9 @@ import { DataTableRequest } from '../../core/model/data-table/data-table-request import { DatasetListingModel } from '../../core/model/dataset/dataset-listing'; import { ExploreDatasetCriteriaModel } from '../../core/query/explore-dataset/explore-dataset-criteria'; import { DatasetService } from '../../core/services/dataset/dataset.service'; +import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbComponent'; +import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item'; +import { Observable } from 'rxjs'; @Component({ @@ -14,7 +17,7 @@ import { DatasetService } from '../../core/services/dataset/dataset.service'; templateUrl: 'explore-dataset-listing.component.html', styleUrls: ['./explore-dataset-listing.component.scss'], }) -export class ExploreDatasetListingComponent extends BaseComponent implements OnInit { +export class ExploreDatasetListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent { @ViewChild(MatPaginator) _paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @@ -22,6 +25,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI totalCount: number; listingItems: DatasetListingModel[] = []; exploreDatasetCriteriaModel: ExploreDatasetCriteriaModel; + breadCrumbs: Observable; constructor( private datasetService: DatasetService, @@ -32,6 +36,10 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI ngOnInit() { this.refresh(); + + const breadCrumbs = []; + breadCrumbs.push({ parentComponentName: null, label: 'PUBLIC DATASETS', url: "/explore" }) + this.breadCrumbs = Observable.of(breadCrumbs); } refresh() { diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts index ef5b16bae..6459a5a87 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts +++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts @@ -7,13 +7,16 @@ import { DataTableRequest } from "../../core/model/data-table/data-table-request import { DmpListingModel } from "../../core/model/dmp/dmp-listing"; import { ExploreDmpCriteriaModel } from "../../core/query/explore-dmp/explore-dmp-criteria"; import { DmpService } from "../../core/services/dmp/dmp.service"; +import { Observable } from "rxjs"; +import { IBreadCrumbComponent } from "../misc/breadcrumb/definition/IBreadCrumbComponent"; +import { BreadcrumbItem } from "../misc/breadcrumb/definition/breadcrumb-item"; @Component({ selector: 'app-explore-dmp-listing-component', templateUrl: 'explore-dmp-listing.component.html', styleUrls: ['./explore-dmp-listing.component.scss'], }) -export class ExploreDmpListingComponent extends BaseComponent implements OnInit { +export class ExploreDmpListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent { @ViewChild(MatPaginator) _paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @@ -22,6 +25,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit titlePrefix: string; totalCount: number; listingItems: DmpListingModel[] = []; + breadCrumbs: Observable; constructor( private dmpService: DmpService, @@ -32,6 +36,10 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit ngOnInit() { this.refresh(); + + const breadCrumbs = []; + breadCrumbs.push({ parentComponentName: null, label: 'PUBLIC DMPS', url: "/explore-plans" }) + this.breadCrumbs = Observable.of(breadCrumbs); } refresh() { diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html index cb68b40cf..809592ba8 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html @@ -1,8 +1,13 @@
-
- - {{ breadcrumb.label }} +
+ + {{ breadcrumb.icon }} + {{ breadcrumb.label }} + + + {{ breadcrumb.icon }} + {{ breadcrumb.label }} chevron_right
diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss index a7bebfffa..1b0559dab 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss @@ -1,17 +1,47 @@ .app-breadcrumb { - padding: 0.75rem 0.1rem; - margin-bottom: 1rem; - background-color: #e9ecef; - border-radius: 0.25rem; - margin-top: 2em; + // padding: 0.75rem 0.1rem; + // margin-bottom: 1rem; + // background-color: #e9ecef; + // border-radius: 0.25rem; + // margin-top: 2em; - .arrow { - padding-right: 0; - padding-left: 0; - font-size: 1.7em; - } + .arrow { + padding-right: 0; + padding-left: 0; + font-size: 1.7em; + } - .link { - font-size: 1.1em; - } + .link { + font-size: 1.1em; + } + + .navbar-brand { + display: flex; + justify-content: center; + align-items: center; + background-color: #f8f8f8; + font-size: 16px; + font-weight: 400; + padding: 0.5em 0.5em; + } + + .breadcrumb-title { + height: auto; + line-height: 1em; + } + + .breadcrumb-item { + display: flex; + align-items: center; + } + + .active { + color: #4687f0; + } + + .icon { + font-size: 1em; + width: auto; + height: auto; + } } diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.ts b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.ts index 30d85d34a..a2aeb685e 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.ts +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.ts @@ -3,6 +3,9 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { Observable } from 'rxjs'; import { BreadcrumbItem } from './definition/breadcrumb-item'; import { BreadCrumbResolverService } from './service/breadcrumb.service'; +import { DashboardService } from '../../../core/services/dashboard/dashboard.service'; +import { assertDataInRangeInternal } from '@angular/core/src/render3/util'; +import { url } from 'inspector'; @Component({ selector: 'app-breadcrumb', @@ -29,11 +32,23 @@ export class BreadcrumbComponent implements OnInit { } buildBreadCrumb(route: ActivatedRoute): Observable { - if (this.breadCrumbService.resolve(route)) { return this.breadCrumbService.resolve(route).map(x => { x.unshift({ label: 'Dashboard', url: '/home' }); return x; }); } + if (this.breadCrumbService.resolve(route)) { + return this.breadCrumbService.resolve(route).map(x => { + x.unshift({ label: 'HOME', url: '/home', icon: 'dashboard' }); return x; + }); + } return Observable.of([]); } navigate(url, params) { this.router.navigate([url, params]); } + + currentUrl(breadcrumb) { + if (breadcrumb.url == this.router.url) { + return true; + } else { + false + } + } } diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/definition/breadcrumb-item.ts b/dmp-frontend/src/app/ui/misc/breadcrumb/definition/breadcrumb-item.ts index b312262de..f3452eb60 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/definition/breadcrumb-item.ts +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/definition/breadcrumb-item.ts @@ -4,5 +4,6 @@ export class BreadcrumbItem { label: string; url: string; params?: any = {}; + icon?: string; notFoundResolver?: any[]; } diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html index 0e7fbe7a1..dd338bbf3 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.html +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html @@ -1,10 +1,11 @@