diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts index 7e592cc4b0..893d6e6344 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts +++ b/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]; } diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts index db24cfe471..448183b8a0 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts +++ b/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; + export interface EntityExtensionDto { - properties: Record; + properties: EntityExtensionProperties; configuration: Record; } +export type EntityExtensionProperties = Record; + export interface ExtensionEnumDto { fields: ExtensionEnumFieldDto[]; localizationResource?: string; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts index b8b2687232..4920687077 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts +++ b/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(Boolean), + filter(Boolean), take(1), ); } @@ -75,7 +80,7 @@ export function mapEntitiesToContributors( 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( } function createPropertiesToContributorsMapper( - generateDisplayName: DisplayNameGeneratorFn, + generateDisplayName: ObjectExtensions.DisplayNameGeneratorFn, resource: string, enums: Record, ) { return ( - properties: Record, + properties: ObjectExtensions.EntityExtensionProperties, contributors: ObjectExtensions.PropContributors, 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; -type Entities = Record; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/typeahead.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/typeahead.util.ts index be89c4a295..b34528104d 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/typeahead.util.ts +++ b/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[]>> { @@ -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, ''); +}