Merge pull request #1838 from abpframework/fix/localization

feat(core): add default option to localization

npm/ng-packs/packages/core/src/lib/models/config.ts

@@ -30,4 +30,9 @@ export namespace Config {
   export interface Requirements {
     layouts: Type<any>[];
   }
+
+  export interface LocalizationWithDefault {
+    key: string;
+    defaultValue: string;
+  }
 }

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

@@ -1,46 +1,20 @@
-import { Pipe, PipeTransform, OnDestroy } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { Config } from '../models';
 import { ConfigState } from '../states';
-import { takeUntilDestroy } from '../utils';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
 
 @Pipe({
   name: 'abpLocalization',
-  // tslint:disable-next-line: no-pipe-impure
-  pure: false // required to update the value
 })
-export class LocalizationPipe implements PipeTransform, OnDestroy {
-  initialValue = '';
-
-  value: string;
-
-  destroy$ = new Subject();
-
+export class LocalizationPipe implements PipeTransform {
   constructor(private store: Store) {}
 
-  transform(value: string = '', ...interpolateParams: string[]): string {
-    if (this.initialValue !== value) {
-      this.initialValue = value;
-      this.destroy$.next();
-
-      this.store
-        .select(
-          ConfigState.getCopy(
-            value,
-            ...interpolateParams.reduce((acc, val) => (Array.isArray(val) ? [...acc, ...val] : [...acc, val]), [])
-          )
-        )
-        .pipe(
-          takeUntil(this.destroy$),
-          takeUntilDestroy(this),
-          distinctUntilChanged()
-        )
-        .subscribe(copy => (this.value = copy));
-    }
-
-    return this.value;
+  transform(value: string | Config.LocalizationWithDefault = '', ...interpolateParams: string[]): string {
+    return this.store.selectSnapshot(
+      ConfigState.getLocalization(
+        value,
+        ...interpolateParams.reduce((acc, val) => (Array.isArray(val) ? [...acc, ...val] : [...acc, val]), []),
+      ),
+    );
   }
-
-  ngOnDestroy() {}
 }

npm/ng-packs/packages/core/src/lib/states/config.state.ts

@@ -115,8 +115,7 @@ export class ConfigState {
 
   /**
    *
-   * @param deprecated, Use getLocalization instead. To be delete in v1
-   *
+   * @deprecated, Use getLocalization instead. To be delete in v1
    */
   static getCopy(key: string, ...interpolateParams: string[]) {
     if (!key) key = '';
@@ -166,14 +165,21 @@ export class ConfigState {
     return selector;
   }
 
-  static getLocalization(key: string, ...interpolateParams: string[]) {
+  static getLocalization(key: string | Config.LocalizationWithDefault, ...interpolateParams: string[]) {
+    let defaultValue: string;
+
+    if (typeof key !== 'string') {
+      defaultValue = key.defaultValue;
+      key = key.key;
+    }
+
     if (!key) key = '';
 
     const keys = key.split('::') as string[];
     const selector = createSelector(
       [ConfigState],
       (state: Config.State) => {
-        if (!state.localization) return key;
+        if (!state.localization) return defaultValue || key;
 
         const { defaultResourceName } = state.environment.localization;
         if (keys[0] === '') {
@@ -207,7 +213,7 @@ export class ConfigState {
           });
         }
 
-        return localization || key;
+        return localization || defaultValue || key;
       },
     );
 

npm/ng-packs/packages/core/src/lib/states/session.state.ts

@@ -4,6 +4,7 @@ import { ABP, Session } from '../models';
 import { GetAppConfiguration } from '../actions/config.actions';
 import { LocalizationService } from '../services/localization.service';
 import { from, combineLatest } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 @State<Session.State>({
   name: 'SessionState',
@@ -28,7 +29,9 @@ export class SessionState {
       language: payload,
     });
 
-    return combineLatest([dispatch(new GetAppConfiguration()), from(this.localizationService.registerLocale(payload))]);
+    return dispatch(new GetAppConfiguration()).pipe(
+      switchMap(() => from(this.localizationService.registerLocale(payload))),
+    );
   }
 
   @Action(SetTenant)

npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html

@@ -1,5 +1,5 @@
 <div class="error">
-  <button id="abp-close-button mr-4" type="button" class="close" (click)="destroy()">
+  <button id="abp-close-button mr-3" type="button" class="close" (click)="destroy()">
     <span aria-hidden="true">&times;</span>
   </button>
   <div class="row centered">
@@ -13,7 +13,8 @@
         </div>
         <div class="error-actions">
           <a (click)="destroy()" routerLink="/" class="btn btn-primary btn-md mt-2"
-            ><span class="glyphicon glyphicon-home"></span> {{ '::Menu:Home' | abpLocalization }}
+            ><span class="glyphicon glyphicon-home"></span>
+            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
           </a>
         </div>
       </div>

npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts

@@ -1,14 +1,15 @@
 import { Component, Renderer2, ElementRef } from '@angular/core';
+import { Config } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-error',
   templateUrl: './error.component.html',
-  styleUrls: ['error.component.scss']
+  styleUrls: ['error.component.scss'],
 })
 export class ErrorComponent {
-  title = 'Oops!';
+  title: string | Config.LocalizationWithDefault = 'Oops!';
 
-  details = 'Sorry, an error has occured.';
+  details: string | Config.LocalizationWithDefault = 'Sorry, an error has occured.';
 
   renderer: Renderer2;
 

npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts

@@ -36,11 +36,11 @@ export const DEFAULT_ERROR_MESSAGES = {
   },
   defaultError500: {
     title: '500',
-    details: 'AbpAccount::InternalServerErrorMessage',
+    details: { key: 'AbpAccount::InternalServerErrorMessage', defaultValue: 'Error detail not sent by server.' },
   },
   defaultErrorUnknown: {
     title: 'Unknown Error',
-    details: 'AbpAccount::InternalServerErrorMessage',
+    details: { key: 'AbpAccount::InternalServerErrorMessage', defaultValue: 'Error detail not sent by server.' },
   },
 };