Merge pull request #22817 from abpframework/issue/refactorLazyLocalization

Angular - Refactor localization for basic and lepton themes

Author: oykuermann

npm/ng-packs/packages/core/src/lib/localization.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { LocalizationPipe } from './pipes/localization.pipe';
+import { LazyLocalizationPipe } from './pipes';
 
 @NgModule({
-  exports: [LocalizationPipe],
+  imports: [LazyLocalizationPipe],
+  exports: [LocalizationPipe, LazyLocalizationPipe],
   declarations: [LocalizationPipe],
 })
 export class LocalizationModule {}

npm/ng-packs/packages/core/src/lib/pipes/index.ts

@@ -5,3 +5,4 @@ export * from './to-injector.pipe';
 export * from './short-date.pipe';
 export * from './short-time.pipe';
 export * from './short-date-time.pipe';
+export * from './lazy-localization.pipe';

npm/ng-packs/packages/core/src/lib/pipes/lazy-localization.pipe.ts

@@ -0,0 +1,41 @@
+import { inject, Injectable, Pipe, PipeTransform } from '@angular/core';
+import {
+  Observable,
+  of,
+  filter,
+  take,
+  switchMap,
+  map,
+  startWith,
+  distinctUntilChanged,
+} from 'rxjs';
+import { ConfigStateService, LocalizationService } from '../services';
+
+@Injectable()
+@Pipe({
+  name: 'abpLazyLocalization',
+})
+export class LazyLocalizationPipe implements PipeTransform {
+  private localizationService = inject(LocalizationService);
+  private configStateService = inject(ConfigStateService);
+
+  transform(key: string, ...params: (string | string[])[]): Observable<string> {
+    if (!key) {
+      return of('');
+    }
+
+    const flatParams = params.reduce<string[]>(
+      (acc, val) => (Array.isArray(val) ? acc.concat(val) : [...acc, val]),
+      [],
+    );
+
+    return this.configStateService.getAll$().pipe(
+      filter(config => !!config.localization),
+      take(1),
+      switchMap(() => this.localizationService.get(key, ...flatParams)),
+      map(translation => (translation && translation !== key ? translation : '')),
+      startWith(''),
+      distinctUntilChanged(),
+    );
+  }
+}

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

@@ -12,7 +12,7 @@
         @if (route.iconClass) {
           <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpLazyTranslate | async }}
+        {{ route.name | abpLazyLocalization | async }}
       </a>
     </li>
   </ng-template>
@@ -39,7 +39,7 @@
           @if (route.iconClass) {
             <i [ngClass]="route.iconClass"></i>
           }
-          {{ route.name | abpLazyTranslate | async }}
+          {{ route.name | abpLazyLocalization | async }}
         </a>
         <div
           #routeContainer

npm/ng-packs/packages/theme-basic/src/lib/pipes/index.ts

@@ -16,7 +16,6 @@ import { PageAlertContainerComponent } from './components/page-alert-container/p
 import { RoutesComponent } from './components/routes/routes.component';
 import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
 import { provideThemeBasicConfig } from './providers';
-import { LazyTranslatePipe } from './pipes';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -49,7 +48,6 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     NgbCollapseModule,
     NgbDropdownModule,
     NgxValidateCoreModule,
-    LazyTranslatePipe,
   ],
 })
 export class BaseThemeBasicModule {}

npm/ng-packs/packages/theme-basic/src/lib/pipes/lazy-translate.pipe.ts

@@ -6,7 +6,6 @@ export * from './lib/components';
 export * from './lib/enums';
 export * from './lib/handlers';
 export * from './lib/models';
-export * from './lib/pipes';
 export * from './lib/providers';
 export * from './lib/theme-basic.module';
 export * from './lib/tokens';