Feature/restructure paths to routes (part 2) (#4884)

* Restructure paths to routes

apps/client/src/app/app-routing.module.ts

@@ -18,7 +18,7 @@ const routes: Routes = [
       import('./pages/about/about-page.module').then((m) => m.AboutPageModule)
   },
   {
-    path: ghostfolioRoutes.account,
+    path: internalRoutes.account.path,
     loadChildren: () =>
       import('./pages/user-account/user-account-page.module').then(
         (m) => m.UserAccountPageModule

apps/client/src/app/app.component.ts

@@ -188,7 +188,8 @@ export class AppComponent implements OnDestroy, OnInit {
             this.currentSubRoute ===
               internalRoutes.portfolio.subRoutes.activities.path) ||
           (this.currentRoute === internalRoutes.portfolio.path &&
-            this.currentSubRoute === routes.allocations) ||
+            this.currentSubRoute ===
+              internalRoutes.portfolio.subRoutes.allocations.path) ||
           (this.currentRoute === internalRoutes.zen.path &&
             this.currentSubRoute ===
               internalRoutes.home.subRoutes.holdings.path)
@@ -202,7 +203,7 @@ export class AppComponent implements OnDestroy, OnInit {
           (this.currentRoute === routes.about ||
             this.currentRoute === routes.faq ||
             this.currentRoute === routes.resources ||
-            this.currentRoute === routes.account ||
+            this.currentRoute === internalRoutes.account.path ||
             this.currentRoute === routes.adminControl ||
             this.currentRoute === internalRoutes.home.path ||
             this.currentRoute === internalRoutes.portfolio.path ||

apps/client/src/app/components/header/header.component.ts

@@ -91,7 +91,7 @@ export class HeaderComponent implements OnChanges {
   public routePricing = routes.pricing;
   public routeResources = routes.resources;
   public routerLinkAbout = ['/' + routes.about];
-  public routerLinkAccount = ['/' + routes.account];
+  public routerLinkAccount = internalRoutes.account.routerLink;
   public routerLinkAccounts = internalRoutes.accounts.routerLink;
   public routerLinkAdminControl = ['/' + routes.adminControl];
   public routerLinkFeatures = ['/' + routes.features];

apps/client/src/app/pages/faq/saas/saas-page.component.ts

@@ -1,6 +1,10 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
-import { publicRoutes, routes } from '@ghostfolio/common/routes/routes';
+import {
+  internalRoutes,
+  publicRoutes,
+  routes
+} from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
@@ -14,9 +18,9 @@ import { Subject, takeUntil } from 'rxjs';
 })
 export class SaasPageComponent implements OnDestroy {
   public pricingUrl = `https://ghostfol.io/${document.documentElement.lang}/${routes.pricing}`;
-  public routerLinkAccount = ['/' + routes.account];
+  public routerLinkAccount = internalRoutes.account.routerLink;
   public routerLinkAccountMembership = [
-    '/' + routes.account,
+    '/' + internalRoutes.account.path,
     routes.membership
   ];
   public routerLinkMarkets = ['/' + routes.markets];

apps/client/src/app/pages/home/home-page-routing.module.ts

@@ -28,9 +28,9 @@ const routes: Routes = [
         title: internalRoutes.home.subRoutes.holdings.title
       },
       {
-        path: ghostfolioRoutes.summary,
+        path: internalRoutes.home.subRoutes.summary.path,
         component: HomeSummaryComponent,
-        title: $localize`Summary`
+        title: internalRoutes.home.subRoutes.summary.title
       },
       {
         path: ghostfolioRoutes.market,
@@ -38,9 +38,9 @@ const routes: Routes = [
         title: $localize`Markets`
       },
       {
-        path: ghostfolioRoutes.watchlist,
+        path: internalRoutes.home.subRoutes.watchlist.path,
         component: HomeWatchlistComponent,
-        title: $localize`Watchlist`
+        title: internalRoutes.home.subRoutes.watchlist.title
       }
     ],
     component: HomePageComponent,

apps/client/src/app/pages/home/home-page.component.ts

@@ -46,13 +46,13 @@ export class HomePageComponent implements OnDestroy, OnInit {
             },
             {
               iconName: 'reader-outline',
-              label: $localize`Summary`,
+              label: internalRoutes.home.subRoutes.summary.title,
-              path: ['/' + internalRoutes.home.path, routes.summary]
+              path: internalRoutes.home.subRoutes.summary.routerLink
             },
             {
               iconName: 'bookmark-outline',
-              label: $localize`Watchlist`,
+              label: internalRoutes.home.subRoutes.watchlist.title,
-              path: ['/' + internalRoutes.home.path, routes.watchlist]
+              path: internalRoutes.home.subRoutes.watchlist.routerLink
             },
             {
               iconName: 'newspaper-outline',

apps/client/src/app/pages/portfolio/analysis/analysis-page-routing.module.ts

@@ -1,4 +1,5 @@
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -10,7 +11,7 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     component: AnalysisPageComponent,
     path: '',
-    title: $localize`Analysis`
+    title: internalRoutes.portfolio.subRoutes.analysis.title
   }
 ];
 

apps/client/src/app/pages/portfolio/portfolio-page-routing.module.ts

@@ -1,8 +1,5 @@
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-import {
+import { internalRoutes } from '@ghostfolio/common/routes/routes';
-  routes as ghostfolioRoutes,
-  internalRoutes
-} from '@ghostfolio/common/routes/routes';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -28,19 +25,19 @@ const routes: Routes = [
           )
       },
       {
-        path: ghostfolioRoutes.allocations,
+        path: internalRoutes.portfolio.subRoutes.allocations.path,
         loadChildren: () =>
           import('./allocations/allocations-page.module').then(
             (m) => m.AllocationsPageModule
           )
       },
       {
-        path: ghostfolioRoutes.fire,
+        path: internalRoutes.portfolio.subRoutes.fire.path,
         loadChildren: () =>
           import('./fire/fire-page.module').then((m) => m.FirePageModule)
       },
       {
-        path: ghostfolioRoutes.xRay,
+        path: internalRoutes.portfolio.subRoutes.xRay.path,
         loadChildren: () =>
           import('./x-ray/x-ray-page.module').then((m) => m.XRayPageModule)
       }

apps/client/src/app/pages/portfolio/portfolio-page.component.ts

@@ -1,6 +1,6 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
-import { internalRoutes, routes } from '@ghostfolio/common/routes/routes';
+import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -33,7 +33,7 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
           this.tabs = [
             {
               iconName: 'analytics-outline',
-              label: $localize`Analysis`,
+              label: internalRoutes.portfolio.subRoutes.analysis.title,
               path: internalRoutes.portfolio.routerLink
             },
             {
@@ -43,18 +43,18 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
             },
             {
               iconName: 'pie-chart-outline',
-              label: $localize`Allocations`,
+              label: internalRoutes.portfolio.subRoutes.allocations.title,
-              path: ['/' + internalRoutes.portfolio.path, routes.allocations]
+              path: internalRoutes.portfolio.subRoutes.allocations.routerLink
             },
             {
               iconName: 'calculator-outline',
-              label: 'FIRE ',
+              label: internalRoutes.portfolio.subRoutes.fire.title,
-              path: ['/' + internalRoutes.portfolio.path, routes.fire]
+              path: internalRoutes.portfolio.subRoutes.fire.routerLink
             },
             {
               iconName: 'scan-outline',
-              label: 'X-ray',
+              label: internalRoutes.portfolio.subRoutes.xRay.title,
-              path: ['/' + internalRoutes.portfolio.path, routes.xRay]
+              path: internalRoutes.portfolio.subRoutes.xRay.routerLink
             }
           ];
           this.user = state.user;

apps/client/src/app/pages/user-account/user-account-page.component.ts

@@ -1,6 +1,6 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
-import { routes } from '@ghostfolio/common/routes/routes';
+import { internalRoutes, routes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -34,19 +34,19 @@ export class UserAccountPageComponent implements OnDestroy, OnInit {
           this.tabs = [
             {
               iconName: 'settings-outline',
-              label: $localize`Settings`,
+              label: internalRoutes.account.title,
-              path: ['/' + routes.account]
+              path: internalRoutes.account.routerLink
             },
             {
               iconName: 'diamond-outline',
               label: $localize`Membership`,
-              path: ['/' + routes.account, routes.membership],
+              path: ['/' + internalRoutes.account.path, routes.membership],
               showCondition: !!this.user?.subscription
             },
             {
               iconName: 'key-outline',
               label: $localize`Access`,
-              path: ['/' + routes.account, routes.access]
+              path: ['/' + internalRoutes.account.path, routes.access]
             }
           ];
 

libs/common/src/lib/routes/routes.ts

@@ -4,13 +4,10 @@ import { IRoute } from './interfaces/interfaces';
 
 export const routes = {
   access: 'access',
-  account: 'account',
   adminControl: 'admin',
-  allocations: 'allocations',
   api: 'api',
   auth: 'auth',
   demo: 'demo',
-  fire: 'fire',
   i18n: 'i18n',
   jobs: 'jobs',
   market: 'market',
@@ -21,11 +18,8 @@ export const routes = {
   saas: 'saas',
   settings: 'settings',
   start: 'start',
-  summary: 'summary',
   users: 'users',
-  watchlist: 'watchlist',
   webauthn: 'webauthn',
-  xRay: 'x-ray',
 
   // Publicly accessible pages
   about: $localize`:kebab-case:about`,
@@ -47,6 +41,11 @@ export const routes = {
 };
 
 export const internalRoutes: Record<string, IRoute> = {
+  account: {
+    path: 'account',
+    routerLink: ['/account'],
+    title: $localize`Settings`
+  },
   accounts: {
     path: 'accounts',
     routerLink: ['/accounts'],
@@ -60,6 +59,16 @@ export const internalRoutes: Record<string, IRoute> = {
         path: 'holdings',
         routerLink: ['/home', 'holdings'],
         title: $localize`Holdings`
+      },
+      summary: {
+        path: 'summary',
+        routerLink: ['/home', 'summary'],
+        title: $localize`Summary`
+      },
+      watchlist: {
+        path: 'watchlist',
+        routerLink: ['/home', 'watchlist'],
+        title: $localize`Watchlist`
       }
     },
     title: $localize`Overview`
@@ -72,6 +81,26 @@ export const internalRoutes: Record<string, IRoute> = {
         path: 'activities',
         routerLink: ['/portfolio', 'activities'],
         title: $localize`Activities`
+      },
+      allocations: {
+        path: 'allocations',
+        routerLink: ['/portfolio', 'allocations'],
+        title: $localize`Allocations`
+      },
+      analysis: {
+        path: undefined, // Default sub route
+        routerLink: ['/portfolio'],
+        title: $localize`Analysis`
+      },
+      fire: {
+        path: 'fire',
+        routerLink: ['/portfolio', 'fire'],
+        title: 'FIRE'
+      },
+      xRay: {
+        path: 'x-ray',
+        routerLink: ['/portfolio', 'x-ray'],
+        title: 'X-ray'
       }
     },
     title: $localize`Portfolio`