Browse Source

fix: use index for tracking actions

pull/25792/head
sumeyye 1 week ago
parent
commit
e799a941c1
  1. 94
      npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html

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

Loading…
Cancel
Save