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

Add Breadcrumb to navbar (Ticket #82)

This commit is contained in:
apapachristou 2019-05-16 19:11:41 +03:00
parent f26b3200e3
commit 162d2ef21f
14 changed files with 119 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<div class="wrapper">
<div class="sidebar sidebar-shadow" data-color="danger" data-background-color="white" data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
<div class="sidebar sidebar-shadow" data-color="danger" data-background-color="white"
data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
<app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)">
</div>
@ -7,6 +8,7 @@
<div class="main-panel">
<app-navbar></app-navbar>
<div>
<!-- <app-breadcrumb *ngIf="this.isAuthenticated() && (hasBreadCrumb | async)"></app-breadcrumb> -->
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div>
</div>

14
dmp-frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -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<BreadcrumbItem[]>;
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))

8
dmp-frontend/src/app/ui/dashboard/dashboard.routing.ts
View File

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

6
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
View File

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

2
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

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

10
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts
View File

@ -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<BreadcrumbItem[]>;
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() {

10
dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts
View File

@ -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<BreadcrumbItem[]>;
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() {

11
dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html
View File

@ -1,8 +1,13 @@
<div class="row" *ngIf="(buildBreadCrumb(this.activatedRoute) | async) as items" [class.app-breadcrumb]="items.length > 0">
<div *ngFor="let breadcrumb of items; let i = index; let length = count" class="col-auto">
<div class="row">
<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="link col-auto">
{{ breadcrumb.label }}
<div class="row breadcrumb-item">
<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="navbar-brand breadcrumb-title col-auto active" *ngIf="currentUrl(breadcrumb)">
<mat-icon *ngIf="breadcrumb.icon" class="icon mr-2">{{ breadcrumb.icon }}</mat-icon>
<span>{{ breadcrumb.label }}</span>
</a>
<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="navbar-brand breadcrumb-title col-auto" *ngIf="!currentUrl(breadcrumb)">
<mat-icon *ngIf="breadcrumb.icon" class="icon mr-2">{{ breadcrumb.icon }}</mat-icon>
<span>{{ breadcrumb.label }}</span>
</a>
<mat-icon class="arrow col-auto">chevron_right</mat-icon>
</div>

40
dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss
View File

@ -1,9 +1,9 @@
.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;
@ -14,4 +14,34 @@
.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;
}
}

17
dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.ts
View File

@ -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<BreadcrumbItem[]> {
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
}
}
}

1
dmp-frontend/src/app/ui/misc/breadcrumb/definition/breadcrumb-item.ts
View File

@ -4,5 +4,6 @@ export class BreadcrumbItem {
label: string;
url: string;
params?: any = {};
icon?: string;
notFoundResolver?: any[];
}

5
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -1,10 +1,11 @@
<nav class="navbar navbar-expand-lg fixed-navbar">
<div class="container-fluid">
<div class="navbar-wrapper">
<a routerLink="/home">
<app-breadcrumb></app-breadcrumb>
<!-- <a routerLink="/home">
<i class="material-icons">dashboard</i>
</a>
<a class="navbar-brand" routerLink="/home">{{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}</a>
<a class="navbar-brand" routerLink="/home">{{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}</a> -->
</div>
<button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>

1
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -18,4 +18,5 @@ $mat-card-header-size: 40px !default;
.fixed-navbar {
position: fixed;
z-index: 1000;
height: 70px;
}

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

@ -4,12 +4,14 @@ import { CommonFormsModule } from '../../common/forms/common-forms.module';
import { CommonUiModule } from '../../common/ui/common-ui.module';
import { NavbarComponent } from './navbar.component';
import { SearchComponent } from '../misc/search/search.component';
import { BreadcrumbModule } from '../misc/breadcrumb/breadcrumb.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
RouterModule
RouterModule,
BreadcrumbModule
],
declarations: [
NavbarComponent,