Feature/add previous and next navigation to personal finance tools (#7899)

Add previous and next navigation

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.component.ts

@@ -23,9 +23,8 @@ export class PersonalFinanceToolsPageComponent {
   public pathResources = publicRoutes.resources.path;
   public pathPersonalFinanceTools =
     publicRoutes.resources.subRoutes.personalFinanceTools.path;
-  public personalFinanceTools = personalFinanceTools.sort((a, b) => {
-    return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
-  });
+
+  public personalFinanceTools = personalFinanceTools;
   public routerLinkAbout = publicRoutes.about.routerLink;
 
   public constructor() {

apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts

@@ -1,4 +1,5 @@
 import { getCountryName } from '@ghostfolio/common/helper';
+import { Product } from '@ghostfolio/common/interfaces';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { translate } from '@ghostfolio/ui/i18n';
@@ -91,9 +92,20 @@ export class GfProductPageComponent {
 
   protected readonly routerLinkAbout = publicRoutes.about.routerLink;
   protected readonly routerLinkFeatures = publicRoutes.features.routerLink;
+
   protected readonly routerLinkResourcesPersonalFinanceTools =
     publicRoutes.resources.subRoutes.personalFinanceTools.routerLink;
 
+  protected readonly titlePrefix = $localize`The Open Source Alternative to`;
+
+  protected readonly nextProduct = computed(() => {
+    return personalFinanceTools[this.getCurrentProductIndex() + 1];
+  });
+
+  protected readonly previousProduct = computed(() => {
+    return personalFinanceTools[this.getCurrentProductIndex() - 1];
+  });
+
   protected readonly tags = computed<string[]>(() => {
     const product1 = this.product1();
     const product2 = this.product2();
@@ -139,6 +151,27 @@ export class GfProductPageComponent {
   private readonly dataService = inject(DataService);
   private readonly route = inject(ActivatedRoute);
 
+  protected getProductRouterLink(product?: Product) {
+    if (!product) {
+      return this.routerLinkResourcesPersonalFinanceTools;
+    }
+
+    return [
+      ...this.routerLinkResourcesPersonalFinanceTools,
+      `${publicRoutes.resources.subRoutes.personalFinanceTools.subRoutes.product.path}-${product.alias ?? product.key}`
+    ];
+  }
+
+  protected getProductTitle(product?: Product) {
+    return `Ghostfolio: ${this.titlePrefix} ${product?.name ?? ''}`;
+  }
+
+  private getCurrentProductIndex() {
+    return personalFinanceTools.findIndex(({ key }) => {
+      return key === this.product2().key;
+    });
+  }
+
   private getSortedTranslations(values?: string[]) {
     return values
       ?.map((value) => {

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -4,9 +4,8 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">
-            <strong>Ghostfolio</strong>:
-            <ng-container i18n>The Open Source Alternative to</ng-container
-            >&nbsp;<strong>{{ product2().name }}</strong>
+            <strong>Ghostfolio</strong>: {{ titlePrefix }}
+            <strong>{{ product2().name }}</strong>
           </h1>
         </div>
         @if (product2().isArchived) {
@@ -379,7 +378,7 @@
             >
           </div>
         </section>
-        <section class="mb-4">
+        <section>
           <ul class="list-inline">
             @for (tag of tags(); track tag) {
               <li class="list-inline-item">
@@ -388,9 +387,29 @@
             }
           </ul>
         </section>
+        <nav class="d-flex justify-content-between my-5">
+          @if (previousProduct()) {
+            <a
+              class="font-weight-light link-primary text-decoration-none small"
+              [routerLink]="getProductRouterLink(previousProduct())"
+              [title]="getProductTitle(previousProduct())"
+              >← <span i18n>Previous</span></a
+            >
+          } @else {
+            <span></span>
+          }
+          @if (nextProduct()) {
+            <a
+              class="font-weight-light link-primary text-decoration-none small"
+              [routerLink]="getProductRouterLink(nextProduct())"
+              [title]="getProductTitle(nextProduct())"
+              ><span i18n>Next</span> →</a
+            >
+          }
+        </nav>
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb">
-            <li class="breadcrumb-item">
+            <li class="breadcrumb-item text-truncate">
               <a i18n [routerLink]="routerLinkResourcesPersonalFinanceTools"
                 >Personal Finance Tools</a
               >