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

This commit is contained in:
Shubham Kumar
2025-12-31 11:07:56 -06:00
committed by GitHub
parent 53a238a1cb
commit e52691bf85
@@ -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
// This handles action names from route parameters for Savings, Loans, Shares, Fixed Deposits, and Recurring Deposits accounts
if (
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;
}
}
// For action names, keep the original name and let getTranslate() handle translation dynamically
// This ensures breadcrumbs update when language changes without requiring navigation
// The getTranslate() method will check both labels.text.* and labels.menus.* for translations
} 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;
const translation = this.translateService.instant(key);
const result = translation !== key ? translation : text;
return result;
// First try labels.text.* (for static breadcrumb labels)
let key: string = 'labels.text.' + text;
let translation = this.translateService.instant(key);
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();
}
}