From 694b9b8991bb53acd580b4820dabf4881b7a3312 Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Sat, 15 May 2021 10:05:03 +0200 Subject: [PATCH] Feature/refactor active menu item state (#91) * Refactor active menu item state * Update changelog --- CHANGELOG.md | 4 ++ apps/client/src/app/app.component.ts | 27 +++++++------ .../components/header/header.component.html | 40 +++++++++---------- 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f05c2456..ea4370113 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Changed + +- Refactored the active menu item state by parsing the current url + ### Fixed - Fixed the link to the pricing page diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index ad17b0c4c..d6322f738 100644 --- a/apps/client/src/app/app.component.ts +++ b/apps/client/src/app/app.component.ts @@ -5,7 +5,7 @@ import { OnDestroy, OnInit } from '@angular/core'; -import { NavigationEnd, Router } from '@angular/router'; +import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router'; import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface'; import { User } from '@ghostfolio/api/app/user/interfaces/user.interface'; import { @@ -58,7 +58,10 @@ export class AppComponent implements OnDestroy, OnInit { this.router.events .pipe(filter((event) => event instanceof NavigationEnd)) .subscribe(() => { - this.currentRoute = this.router.url.toString().substring(1); + const urlTree = this.router.parseUrl(this.router.url); + const urlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET]; + const urlSegments = urlSegmentGroup.segments; + this.currentRoute = urlSegments[0].path; }); this.tokenStorageService @@ -84,6 +87,16 @@ export class AppComponent implements OnDestroy, OnInit { }); } + public onCreateAccount() { + this.tokenStorageService.signOut(); + window.location.reload(); + } + + public ngOnDestroy() { + this.unsubscribeSubject.next(); + this.unsubscribeSubject.complete(); + } + private initializeTheme() { this.materialCssVarsService.setDarkTheme( window.matchMedia('(prefers-color-scheme: dark)').matches @@ -96,14 +109,4 @@ export class AppComponent implements OnDestroy, OnInit { this.materialCssVarsService.setPrimaryColor(primaryColorHex); this.materialCssVarsService.setAccentColor(secondaryColorHex); } - - public onCreateAccount() { - this.tokenStorageService.signOut(); - window.location.reload(); - } - - public ngOnDestroy() { - this.unsubscribeSubject.next(); - this.unsubscribeSubject.complete(); - } } diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html index 72e181cf8..b414e17c8 100644 --- a/apps/client/src/app/components/header/header.component.html +++ b/apps/client/src/app/components/header/header.component.html @@ -8,7 +8,7 @@ class="d-none d-sm-block" i18n mat-flat-button - [color]="currentRoute?.startsWith('home') ? 'primary' : null" + [color]="currentRoute === 'home' ? 'primary' : null" [routerLink]="['/']" >Overview @@ -16,7 +16,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('analysis') ? 'primary' : null" + [color]="currentRoute === 'analysis' ? 'primary' : null" [routerLink]="['/analysis']" >Analysis @@ -24,7 +24,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('report') ? 'primary' : null" + [color]="currentRoute === 'report' ? 'primary' : null" [routerLink]="['/report']" >X-ray @@ -32,7 +32,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('transactions') ? 'primary' : null" + [color]="currentRoute === 'transactions' ? 'primary' : null" [routerLink]="['/transactions']" >Transactions @@ -40,7 +40,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('accounts') ? 'primary' : null" + [color]="currentRoute === 'accounts' ? 'primary' : null" [routerLink]="['/accounts']" >Accounts @@ -49,7 +49,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('admin') ? 'primary' : null" + [color]="currentRoute === 'admin' ? 'primary' : null" [routerLink]="['/admin']" >Admin Control @@ -57,7 +57,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('resources') ? 'primary' : null" + [color]="currentRoute === 'resources' ? 'primary' : null" [routerLink]="['/resources']" >Resources @@ -66,7 +66,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('pricing') ? 'primary' : null" + [color]="currentRoute === 'pricing' ? 'primary' : null" [routerLink]="['/pricing']" >Pricing @@ -74,7 +74,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('about') ? 'primary' : null" + [color]="currentRoute === 'about' ? 'primary' : null" [routerLink]="['/about']" >About @@ -138,7 +138,7 @@ class="d-block d-sm-none" i18n mat-menu-item - [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('analysis') }" + [ngClass]="{ 'font-weight-bold': currentRoute === 'analysis' }" [routerLink]="['/analysis']" >Analysis @@ -146,7 +146,7 @@ class="d-block d-sm-none" i18n mat-menu-item - [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('report') }" + [ngClass]="{ 'font-weight-bold': currentRoute === 'report' }" [routerLink]="['/report']" >X-ray @@ -155,7 +155,7 @@ i18n mat-menu-item [ngClass]="{ - 'font-weight-bold': currentRoute?.startsWith('transactions') + 'font-weight-bold': currentRoute === 'transactions' }" [routerLink]="['/transactions']" >TransactionsAccounts @@ -172,7 +172,7 @@ class="align-items-center d-flex" i18n mat-menu-item - [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('account') }" + [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }" [routerLink]="['/account']" >Ghostfolio Account @@ -181,7 +181,7 @@ class="d-block d-sm-none" i18n mat-menu-item - [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('admin') }" + [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }" [routerLink]="['/admin']" >Admin Control @@ -191,7 +191,7 @@ i18n mat-menu-item [ngClass]="{ - 'font-weight-bold': currentRoute?.startsWith('resources') + 'font-weight-bold': currentRoute === 'resources' }" [routerLink]="['/resources']" >ResourcesPricing @@ -209,7 +209,7 @@ class="d-block d-sm-none" i18n mat-menu-item - [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('about') }" + [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }" [routerLink]="['/about']" >About Ghostfolio @@ -231,7 +231,7 @@ *ngIf="hasPermissionForSubscription" i18n mat-flat-button - [color]="currentRoute?.startsWith('pricing') ? 'primary' : null" + [color]="currentRoute === 'pricing' ? 'primary' : null" [routerLink]="['/pricing']" >Pricing @@ -239,7 +239,7 @@ class="d-none d-sm-block mx-1" i18n mat-flat-button - [color]="currentRoute?.startsWith('about') ? 'primary' : null" + [color]="currentRoute === 'about' ? 'primary' : null" [routerLink]="['/about']" >About