WEB-398 fix(breadcrumb):update breadcrumb headings on language change (#2954)

src/app/core/shell/breadcrumb/breadcrumb.component.ts

@@ -1,9 +1,10 @@
 /** Angular Imports */
-import { Component, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
+import { Component, TemplateRef, ElementRef, ViewChild, AfterViewInit, OnDestroy, inject } from '@angular/core';
 import { ActivatedRoute, Router, NavigationEnd, Data, RouterLink } from '@angular/router';
 
 /** rxjs Imports */
-import { filter } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
+import { merge, Subject } from 'rxjs';
 
 /** Custom Model */
 import { Breadcrumb } from './breadcrumb.model';
@@ -54,12 +55,13 @@ const routeAddBreadcrumbLink = 'addBreadcrumbLink';
     ...STANDALONE_SHARED_IMPORTS
   ]
 })
-export class BreadcrumbComponent implements AfterViewInit {
+export class BreadcrumbComponent implements AfterViewInit, OnDestroy {
   private activatedRoute = inject(ActivatedRoute);
   private router = inject(Router);
   private configurationWizardService = inject(ConfigurationWizardService);
   private popoverService = inject(PopoverService);
   private translateService = inject(TranslateService);
+  private destroy$ = new Subject<void>();
 
   /** Array of breadcrumbs. */
   breadcrumbs: Breadcrumb[];
@@ -85,7 +87,10 @@ export class BreadcrumbComponent implements AfterViewInit {
   generateBreadcrumbs() {
     const onNavigationEnd = this.router.events.pipe(filter((event) => event instanceof NavigationEnd));
 
-    onNavigationEnd.subscribe(() => {
+    // Merge navigation events with language change events to regenerate breadcrumbs when language changes
+    merge(onNavigationEnd, this.translateService.onLangChange)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
         this.breadcrumbs = [];
         let currentRoute = this.activatedRoute.root;
         let currentUrl = '';
@@ -170,24 +175,9 @@ export class BreadcrumbComponent implements AfterViewInit {
                   breadcrumbLabel = routeData.taxGroup.name;
                 }
 
-              // Check if the breadcrumbLabel is an action name that should be translated using labels.menus
+                // For action names, keep the original name and let getTranslate() handle translation dynamically
-              // This handles action names from route parameters for Savings, Loans, Shares, Fixed Deposits, and Recurring Deposits accounts
+                // This ensures breadcrumbs update when language changes without requiring navigation
-              if (
+                // The getTranslate() method will check both labels.text.* and labels.menus.* for translations
-                breadcrumbLabel &&
-                (routeData.breadcrumb === 'Savings Account Actions' ||
-                  routeData.breadcrumb === 'Loan Account Actions' ||
-                  routeData.breadcrumb === 'Shares Account Actions' ||
-                  routeData.breadcrumb === 'Actions' ||
-                  routeData.breadcrumb === 'action' ||
-                  routeData.title === 'Fixed Deposits Account Actions' ||
-                  routeData.title === 'Recurring Deposits Account Actions')
-              ) {
-                const menuKey = 'labels.menus.' + breadcrumbLabel;
-                const menuTranslation = this.translateService.instant(menuKey);
-                if (menuTranslation !== menuKey) {
-                  breadcrumbLabel = menuTranslation;
-                }
-              }
               } else if (route.snapshot.data.hasOwnProperty(routeDataBreadcrumb)) {
                 breadcrumbLabel = route.snapshot.data[routeDataBreadcrumb];
               }
@@ -280,9 +270,29 @@ export class BreadcrumbComponent implements AfterViewInit {
   }
 
   getTranslate(text: string): any {
-    const key: string = 'labels.text.' + text;
+    // First try labels.text.* (for static breadcrumb labels)
-    const translation = this.translateService.instant(key);
+    let key: string = 'labels.text.' + text;
-    const result = translation !== key ? translation : text;
+    let translation = this.translateService.instant(key);
-    return result;
+    if (translation !== key) {
+      return translation;
+    }
+
+    // Then try labels.menus.* (for action names like "View Guarantors")
+    key = 'labels.menus.' + text;
+    translation = this.translateService.instant(key);
+    if (translation !== key) {
+      return translation;
+    }
+
+    // If no translation found, return the original text
+    return text;
+  }
+
+  /**
+   * Clean up subscriptions on component destroy.
+   */
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }