Merge pull request #19200 from abpframework/sinan/tooltip-for-grid-ac…

…tion Add tooltip functionality to grid actions component
abpframework · Mar 5, 2024 · af99ee2 · af99ee2
2 parents 325fa5b + daaa770
commit af99ee2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/...ackages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html b/...ackages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
@@ -53,16 +53,31 @@
 
 <ng-template #btnTmp let-action>
   @if (action.visible(data)) {
-    <button
-      *abpPermission="action.permission; runChangeDetection: false"
-      (click)="action.action(data)"
-      type="button"
-      [class]="action.btnClass"
-      [style]="action.btnStyle"
-    >
-      <ng-container
-        *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
-      ></ng-container>
-    </button>
+    @if (action.tooltip) {
+      <button
+        *abpPermission="action.permission; runChangeDetection: false"
+        (click)="action.action(data)"
+        type="button"
+        [class]="action.btnClass"
+        [style]="action.btnStyle"
+        [ngbTooltip]="action.tooltip.text | abpLocalization" [placement]="action.tooltip.placement || 'auto'"  container="body" 
+      >
+        <ng-container
+          *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
+        ></ng-container>
+      </button>
+    } @else {
+      <button
+        *abpPermission="action.permission; runChangeDetection: false"
+        (click)="action.action(data)"
+        type="button"
+        [class]="action.btnClass"
+        [style]="action.btnStyle"
+      >
+        <ng-container
+          *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
+        ></ng-container>
+      </button>
+    }
   }
 </ng-template>
diff --git a/.../packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/.../packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
@@ -8,7 +8,7 @@ import {
 import { EntityAction, EntityActionList } from '../../models/entity-actions';
 import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
 import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { LocalizationModule, PermissionDirective } from '@abp/ng.core';
 import { EllipsisDirective } from '@abp/ng.theme.shared';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
@@ -23,6 +23,7 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
     NgClass,
     LocalizationModule,
     NgTemplateOutlet,
+    NgbTooltipModule
   ],
   selector: 'abp-grid-actions',
   templateUrl: './grid-actions.component.html',

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/entity-actions.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/entity-actions.ts
@@ -8,6 +8,7 @@ import {
   Actions,
   ActionsFactory,
 } from './actions';
+import { FormPropTooltip } from './form-props';
 
 export class EntityActionList<R = any> extends ActionList<R, EntityAction<R>> {}
 
@@ -25,6 +26,7 @@ export class EntityAction<R = any> extends Action<R> {
   readonly btnClass?: string;
   readonly btnStyle?: string;
   readonly showOnlyIcon?: boolean;
+  readonly tooltip?: FormPropTooltip;
 
   constructor(options: EntityActionOptions<R>) {
     super(options.permission || '', options.visible, options.action);
@@ -33,6 +35,7 @@ export class EntityAction<R = any> extends Action<R> {
     this.btnClass = options.btnClass || 'btn btn-primary text-center';
     this.btnStyle = options.btnStyle;
     this.showOnlyIcon = options.showOnlyIcon || false;
+    this.tooltip = options.tooltip;
   }
 
   static create<R = any>(options: EntityActionOptions<R>) {