Merge pull request #19147 from abpframework/sinan/tooltip

Add tooltip attribute to extensible form component
abpframework · Feb 29, 2024 · 3ba0f36 · 3ba0f36
2 parents 3f2f1be + 4a6743d
commit 3ba0f36
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/...ponents/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/...ponents/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -179,4 +179,7 @@
     }
     {{ asterisk }}
   </label>
+  @if (prop.tooltip) {
+    <i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"  container="body" class="bi bi-info-circle ms-1"></i>
+  }
 </ng-template>
diff --git a/...omponents/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/...omponents/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -49,6 +49,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
 import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
 import { CommonModule } from '@angular/common';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-extensible-form-prop',
@@ -61,6 +62,7 @@ import { CommonModule } from '@angular/common';
     ReactiveFormsModule,
     DisabledDirective,
     NgxValidateCoreModule,
+    NgbTooltip,
     NgbTypeaheadModule,
     CreateInjectorPipe,
     ShowPasswordDirective,

diff --git a/...components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/...components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -31,9 +31,10 @@
   >
     <ng-template ngx-datatable-header-template let-column="column">
       @if (prop.tooltip) {
-      <span [ngbTooltip]="prop.tooltip | abpLocalization" container="body">
-        {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
-      </span>
+      <span [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
+      container="body">
+      {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
+    </span>
       }@else{
       {{ column.name }}
       }

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts
@@ -12,6 +12,7 @@ import {
   Props,
   PropsFactory,
 } from './props';
+import { FormPropTooltip } from './form-props';
 
 export class EntityPropList<R = any> extends PropList<R, EntityProp<R>> {}
 
@@ -30,7 +31,7 @@ export class EntityProp<R = any> extends Prop<R> {
   readonly action?: ActionCallback<R>;
   readonly component?: Type<any>;
   readonly enumList?: Array<ABP.Option<any>>;
-  readonly tooltip?: string;
+  readonly tooltip?: FormPropTooltip;
   readonly columnVisible: ColumnPredicate;
 
   constructor(options: EntityPropOptions<R>) {

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts
@@ -27,6 +27,11 @@ export interface FormPropGroup {
   className?: string;
 }
 
+export interface FormPropTooltip {
+  text: string;
+  placement?: 'top' | 'end' | 'bottom' | 'start';
+}
+
 export class GroupedFormPropList<R = any> {
   public readonly items: GroupedFormPropItem[] = [];
   addItem(item: FormProp<R>) {
@@ -72,6 +77,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly group?: FormPropGroup | undefined;
   readonly displayTextResolver?: PropDisplayTextResolver<R>;
   readonly formText?: string;
+  readonly tooltip?: FormPropTooltip;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -84,10 +90,12 @@ export class FormProp<R = any> extends Prop<R> {
       options.template,
       options.className,
       options.formText,
+      options.tooltip,
     );
     this.group = options.group;
     this.className = options.className;
     this.formText = options.formText;
+    this.tooltip = options.tooltip;
     this.asyncValidators = options.asyncValidators || (_ => []);
     this.validators = options.validators || (_ => []);
     this.disabled = options.disabled || (_ => false);
@@ -135,6 +143,7 @@ export type FormPropOptions<R = any> = O.Optional<
   | 'id'
   | 'displayTextResolver'
   | 'formText'
+  | 'tooltip'
 >;
 
 export type CreateFormPropDefaults<R = any> = Record<string, FormProp<R>[]>;

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
@@ -2,6 +2,7 @@ import { LinkedList } from '@abp/utils';
 import { InjectFlags, InjectionToken, InjectOptions, Type } from '@angular/core';
 import { O } from 'ts-toolbelt';
 import { ePropType } from '../enums/props.enum';
+import { FormPropTooltip } from './form-props';
 
 export abstract class PropList<R = any, A = Prop<R>> extends LinkedList<A> {}
 
@@ -36,6 +37,7 @@ export abstract class Prop<R = any> {
     public readonly template?: Type<any>,
     public readonly className?: string,
     public readonly formText?: string,
+    public readonly tooltip?: FormPropTooltip,
     public readonly displayTextResolver?: PropDisplayTextResolver<R>,
   ) {
     this.displayName = this.displayName || this.name;