Skip to content

Commit

Permalink
Merge pull request #14223 from abpframework/Issue-11700
Browse files Browse the repository at this point in the history
Added displayNameResolver to form prop
  • Loading branch information
mahmut-gundogdu authored Oct 11, 2022
2 parents fc9177e + e50dc75 commit 9f55c35
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 18 deletions.
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);

Expand Down Expand Up @@ -136,6 +136,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
ngAfterViewInit() {
if (this.first && this.fieldRef) {
this.fieldRef.nativeElement.focus();
this.cdRef.detectChanges();
}
}

Expand Down Expand Up @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
PropContributorCallback,
PropContributorCallbacks,
PropData,
PropDisplayTextResolver,
PropList,
PropPredicate,
Props,
Expand Down Expand Up @@ -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(
Expand All @@ -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>) {
Expand Down Expand Up @@ -128,6 +131,7 @@ export type FormPropOptions<R = any> = O.Optional<
| 'defaultValue'
| 'options'
| 'id'
| 'displayTextResolver'
>;

export type CreateFormPropDefaults<R = any> = Record<string, FormProp<R>[]>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,15 @@ 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;
}
}

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>;
Expand Down

0 comments on commit 9f55c35

Please sign in to comment.