Merge pull request #6920 from abpframework/fix/6904

Fixed localization of navigation extension property in Angular UI

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -27,6 +27,7 @@ import { ePropType } from '../../enums/props.enum';
 import { FormProp } from '../../models/form-props';
 import { PropData } from '../../models/props';
 import { selfFactory } from '../../utils/factory.util';
+import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
 
 @Component({
   selector: 'abp-extensible-form-prop',
@@ -96,10 +97,10 @@ export class ExtensibleFormPropComponent implements OnChanges {
 
   private getTypeaheadControls() {
     const { name } = this.prop;
-    const textSuffix = '_Text';
     const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
     const keyControl =
-      this.form.get(extraPropName + textSuffix) || this.form.get(name + textSuffix);
+      this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
+      this.form.get(addTypeaheadTextSuffix(name));
     const valueControl = this.form.get(extraPropName) || this.form.get(name);
     return [keyControl, valueControl];
   }

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts

@@ -3,11 +3,20 @@ import { EntityPropList } from '../entity-props';
 import { FormPropList } from '../form-props';
 import { PropContributorCallbacks } from '../props';
 
+export type DisplayNameGeneratorFn = (
+  displayName: LocalizableStringDto,
+  fallback: LocalizableStringDto,
+) => string;
+
+export type EntityExtensions = Record<string, EntityExtensionDto>;
+
 export interface EntityExtensionDto {
-  properties: Record<string, ExtensionPropertyDto>;
+  properties: EntityExtensionProperties;
   configuration: Record<string, object>;
 }
 
+export type EntityExtensionProperties = Record<string, ExtensionPropertyDto>;
+
 export interface ExtensionEnumDto {
   fields: ExtensionEnumFieldDto[];
   localizationResource?: string;

npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts

@@ -14,7 +14,12 @@ import { PropCallback } from '../models/props';
 import { createEnum, createEnumOptions, createEnumValueResolver } from './enum.util';
 import { createDisplayNameLocalizationPipeKeyGenerator } from './localization.util';
 import { createExtraPropertyValueResolver } from './props.util';
-import { createTypeaheadOptions, getTypeaheadType } from './typeahead.util';
+import {
+  createTypeaheadDisplayNameGenerator,
+  createTypeaheadOptions,
+  getTypeaheadType,
+  hasTypeaheadTextSuffix,
+} from './typeahead.util';
 import { getValidatorsFromProperty } from './validation.util';
 
 function selectObjectExtensions(
@@ -59,7 +64,7 @@ export function getObjectExtensionEntitiesFromStore(
         .entities;
     }),
     map(entities => (isUndefined(entities) ? {} : entities)),
-    filter<Entities>(Boolean),
+    filter<ObjectExtensions.EntityExtensions>(Boolean),
     take(1),
   );
 }
@@ -75,7 +80,7 @@ export function mapEntitiesToContributors<T = any>(
           const generateDisplayName = createDisplayNameLocalizationPipeKeyGenerator(localization);
 
           return Object.keys(entities).reduce(
-            (acc, key: keyof Entities) => {
+            (acc, key: keyof ObjectExtensions.EntityExtensions) => {
               acc.prop[key] = [];
               acc.createForm[key] = [];
               acc.editForm[key] = [];
@@ -108,23 +113,30 @@ export function mapEntitiesToContributors<T = any>(
 }
 
 function createPropertiesToContributorsMapper<T = any>(
-  generateDisplayName: DisplayNameGeneratorFn,
+  generateDisplayName: ObjectExtensions.DisplayNameGeneratorFn,
   resource: string,
   enums: Record<string, ObjectExtensions.ExtensionEnumDto>,
 ) {
   return (
-    properties: Record<string, ObjectExtensions.ExtensionPropertyDto>,
+    properties: ObjectExtensions.EntityExtensionProperties,
     contributors: ObjectExtensions.PropContributors<T>,
     key: string,
   ) => {
     const isExtra = true;
+    const generateTypeaheadDisplayName = createTypeaheadDisplayNameGenerator(
+      generateDisplayName,
+      properties,
+    );
 
     Object.keys(properties).forEach((name: string) => {
       const property = properties[name];
       const propName = name;
       const lookup = property.ui.lookup || ({} as ExtensionPropertyUiLookupDto);
       const type = getTypeaheadType(lookup, name) || getTypeFromProperty(property);
-      const displayName = generateDisplayName(property.displayName, { name, resource });
+      const generateDN = hasTypeaheadTextSuffix(name)
+        ? generateTypeaheadDisplayName
+        : generateDisplayName;
+      const displayName = generateDN(property.displayName, { name, resource });
 
       if (property.ui.onTable.isVisible) {
         const sortable = Boolean(property.ui.onTable.isSortable);
@@ -186,6 +198,3 @@ function getTypeFromProperty(property: ObjectExtensions.ExtensionPropertyDto): e
 function isUndefined(obj: any): obj is undefined {
   return typeof obj === 'undefined';
 }
-
-type DisplayNameGeneratorFn = ReturnType<typeof createDisplayNameLocalizationPipeKeyGenerator>;
-type Entities = Record<string, ObjectExtensions.EntityExtensionDto>;

npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/typeahead.util.ts

@@ -2,8 +2,12 @@ import { ABP, ExtensionPropertyUiLookupDto, RestService } from '@abp/ng.core';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ePropType } from '../enums/props.enum';
+import { ObjectExtensions } from '../models/object-extensions';
 import { PropCallback } from '../models/props';
 
+const TYPEAHEAD_TEXT_SUFFIX = '_Text';
+const TYPEAHEAD_TEXT_SUFFIX_REGEX = /_Text$/;
+
 export function createTypeaheadOptions(
   lookup: ExtensionPropertyUiLookupDto,
 ): PropCallback<any, Observable<ABP.Option<any>[]>> {
@@ -37,7 +41,32 @@ export function createTypeaheadOptions(
 export function getTypeaheadType(lookup: ExtensionPropertyUiLookupDto, name: string) {
   return Boolean(lookup.url)
     ? ePropType.Typeahead
-    : name.endsWith('_Text')
+    : name.endsWith(TYPEAHEAD_TEXT_SUFFIX)
     ? ePropType.Hidden
     : undefined;
 }
+
+export function createTypeaheadDisplayNameGenerator(
+  displayNameGeneratorFn: ObjectExtensions.DisplayNameGeneratorFn,
+  properties: ObjectExtensions.EntityExtensionProperties,
+): ObjectExtensions.DisplayNameGeneratorFn {
+  return (displayName, fallback) => {
+    const name = removeTypeaheadTextSuffix(fallback.name);
+    return displayNameGeneratorFn(displayName || properties[name].displayName, {
+      name,
+      resource: fallback.resource,
+    });
+  };
+}
+
+export function addTypeaheadTextSuffix(name: string) {
+  return name + TYPEAHEAD_TEXT_SUFFIX;
+}
+
+export function hasTypeaheadTextSuffix(name: string) {
+  return TYPEAHEAD_TEXT_SUFFIX_REGEX.test(name);
+}
+
+export function removeTypeaheadTextSuffix(name: string) {
+  return name.replace(TYPEAHEAD_TEXT_SUFFIX_REGEX, '');
+}