Merge pull request #25792 from abpframework/fix/action-tracking-index

Angular - Using unique index for tracking grid actions

npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html

@@ -1,55 +1,81 @@
 @if (actionList.length > 1) {
-<div ngbDropdown container="body" class="d-inline-block">
+  <div ngbDropdown container="body" class="d-inline-block">
-  <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ngbDropdownToggle>
+    <button
-    <i [class]="icon()" [class.me-1]="icon()"></i>{{ text() | abpLocalization }}
+      class="btn btn-primary btn-sm dropdown-toggle"
-  </button>
+      data-toggle="dropdown"
-  <div ngbDropdownMenu>
+      aria-haspopup="true"
-    @for (action of actionList; track action.text) {
+      ngbDropdownToggle
-    <ng-container [ngTemplateOutlet]="dropDownBtnItemTmp" [ngTemplateOutletContext]="{ $implicit: action }">
+    >
-    </ng-container>
+      <i [class]="icon()" [class.me-1]="icon()"></i>{{ text() | abpLocalization }}
-    }
+    </button>
+    <div ngbDropdownMenu>
+      @for (action of actionList; track $index) {
+        <ng-container
+          [ngTemplateOutlet]="dropDownBtnItemTmp"
+          [ngTemplateOutletContext]="{ $implicit: action }"
+        />
+      }
+    </div>
   </div>
-</div>
 }
 
 @if (actionList.length === 1) {
-<ng-container [ngTemplateOutlet]="btnTmp"
+  <ng-container
-  [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"></ng-container>
+    [ngTemplateOutlet]="btnTmp"
+    [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"
+  />
 }
 
 <ng-template #dropDownBtnItemTmp let-action>
   @if (action.visible(data)) {
-  <button ngbDropdownItem *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)"
+    <button
-    type="button">
+      ngbDropdownItem
-    <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container>
+      *abpPermission="action.permission; runChangeDetection: false"
-  </button>
+      (click)="action.action(data)"
+      type="button"
+    >
+      <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }" />
+    </button>
   }
 </ng-template>
 
 <ng-template #buttonContentTmp let-action>
   <i [class]="action.icon" [class.me-1]="action.icon && !action.showOnlyIcon"></i>
   @if (!action.showOnlyIcon) {
-  @if (action.icon) {
+    @if (action.icon) {
-  <span>{{ action.text | abpLocalization }}</span>
+      <span>{{ action.text | abpLocalization }}</span>
-  } @else {
+    } @else {
-  <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+      <div abpEllipsis>{{ action.text | abpLocalization }}</div>
-  }
+    }
   }
 </ng-template>
 
 <ng-template #btnTmp let-action>
   @if (action.visible(data)) {
-  @if (action.tooltip) {
+    @if (action.tooltip) {
-  <button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button"
+      <button
-    [class]="action.btnClass" [style]="action.btnStyle" [ngbTooltip]="action.tooltip.text | abpLocalization"
+        *abpPermission="action.permission; runChangeDetection: false"
-    [placement]="action.tooltip.placement || 'auto'" triggers="hover" container="body">
+        (click)="action.action(data)"
-    <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container>
+        type="button"
-  </button>
+        [class]="action.btnClass"
-  } @else {
+        [style]="action.btnStyle"
-  <button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button"
+        [ngbTooltip]="action.tooltip.text | abpLocalization"
-    [class]="action.btnClass" [style]="action.btnStyle">
+        [placement]="action.tooltip.placement || 'auto'"
-    <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container>
+        triggers="hover"
-  </button>
+        container="body"
-  }
+      >
+        <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }" />
+      </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 }" />
+      </button>
+    }
   }
-</ng-template>
+</ng-template>