From e50dc75d2fae4a4aab7e14e2e9e52f1630a7653f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20KILI=C3=87?= <fsk202@gmail.com>
Date: Tue, 4 Oct 2022 10:47:44 +0300
Subject: [PATCH] Added displayNameResolver to form prop

---
 .../extensible-form-prop.component.html       | 31 +++++++++----------
 .../extensible-form-prop.component.ts         |  5 +--
 .../extensions/src/lib/models/form-props.ts   |  4 +++
 .../extensions/src/lib/models/props.ts        |  2 ++
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 9cdc06401c1..d66ad6c344f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -1,17 +1,13 @@
-<ng-container [ngSwitch]="getComponent(prop)"
-
-              *abpPermission="prop.permission; runChangeDetection: false">
-
+<ng-container
+  [ngSwitch]="getComponent(prop)"
+  *abpPermission="prop.permission; runChangeDetection: false"
+>
   <ng-template ngSwitchCase="template">
-    <ng-container
-      *ngComponentOutlet="prop.template;injector:injectorForCustomComponent">
+    <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent">
     </ng-container>
   </ng-template>
 
-  <div
-    [ngClass]="containerClassName"
-    class="mb-3 form-group"
-  >
+  <div [ngClass]="containerClassName" class="mb-3 form-group">
     <ng-template ngSwitchCase="input">
       <ng-template [ngTemplateOutlet]="label"></ng-template>
       <input
@@ -27,7 +23,7 @@
     </ng-template>
 
     <ng-template ngSwitchCase="hidden">
-      <input [formControlName]="prop.name" type="hidden"/>
+      <input [formControlName]="prop.name" type="hidden" />
     </ng-template>
 
     <ng-template ngSwitchCase="checkbox">
@@ -103,7 +99,7 @@
           [class.is-invalid]="typeahead.classList.contains('is-invalid')"
           class="form-control"
         />
-        <input [formControlName]="prop.name" type="hidden"/>
+        <input [formControlName]="prop.name" type="hidden" />
       </div>
     </ng-template>
 
@@ -143,11 +139,14 @@
       ></textarea>
     </ng-template>
   </div>
-
 </ng-container>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'" x
-  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
-  >
+  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">
+    <ng-container *ngIf="prop.displayTextResolver; else displayNameTemplate">
+      {{ prop.displayTextResolver(data) | abpLocalization }}
+    </ng-container>
+    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>
+    {{ asterisk }}
+  </label>
 </ng-template>
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 ec1ba4ea1bf..e18c0ab8a4c 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
@@ -60,7 +60,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   asterisk = '';
 
-  containerClassName = 'mb-3 form-group'
+  containerClassName = 'mb-3 form-group';
 
   options$: Observable<ABP.Option<any>[]> = of([]);
 
@@ -136,6 +136,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   ngAfterViewInit() {
     if (this.first && this.fieldRef) {
       this.fieldRef.nativeElement.focus();
+      this.cdRef.detectChanges();
     }
   }
 
@@ -213,7 +214,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       this.validators = validators(this.data);
       this.setAsterisk();
     }
-    if(className !== undefined){
+    if (className !== undefined) {
       this.containerClassName = className;
     }
 
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index 14de1a94f46..af0ae767d7f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
@@ -9,6 +9,7 @@ import {
   PropContributorCallback,
   PropContributorCallbacks,
   PropData,
+  PropDisplayTextResolver,
   PropList,
   PropPredicate,
   Props,
@@ -69,6 +70,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly template?: Type<any>;
   readonly className?: string;
   readonly group?: FormPropGroup | undefined;
+  readonly displayTextResolver?: PropDisplayTextResolver<R>;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -93,6 +95,7 @@ export class FormProp<R = any> extends Prop<R> {
     this.id = options.id || options.name;
     const defaultValue = options.defaultValue;
     this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || null;
+    this.displayTextResolver = options.displayTextResolver;
   }
 
   static create<R = any>(options: FormPropOptions<R>) {
@@ -128,6 +131,7 @@ export type FormPropOptions<R = any> = O.Optional<
   | 'defaultValue'
   | 'options'
   | 'id'
+  | 'displayTextResolver'
 >;
 
 export type CreateFormPropDefaults<R = any> = Record<string, FormProp<R>[]>;
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
index 3799c419a73..456a280ba85 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
@@ -35,6 +35,7 @@ export abstract class Prop<R = any> {
     public readonly isExtra = false,
     public readonly template?: Type<any>,
     public readonly className?: string,
+    public readonly displayTextResolver?: PropDisplayTextResolver<R>,
   ) {
     this.displayName = this.displayName || this.name;
   }
@@ -42,6 +43,7 @@ export abstract class Prop<R = any> {
 
 export type PropCallback<T, R = any> = (data: Omit<PropData<T>, 'data'>, auxData?: any) => R;
 export type PropPredicate<T> = (data?: Omit<PropData<T>, 'data'>, auxData?: any) => boolean;
+export type PropDisplayTextResolver<T> = (data?: Omit<PropData<T>, 'data'>) => string;
 
 export abstract class PropsFactory<C extends Props<any>> {
   protected abstract _ctor: Type<C>;