WEB-398 fix(breadcrumb):update breadcrumb headings on language change (#2954)
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user