update: permission service injection is generalized and action list check is added

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

@@ -6,62 +6,68 @@
   (activate)="tableActivate.emit($event)"
 >
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
-  <ngx-datatable-column
+    <ngx-datatable-column
-    [name]="actionsText | abpLocalization"
+      [name]="actionsText | abpLocalization"
-    [maxWidth]="columnWidths[0]"
+      [maxWidth]="columnWidths[0]"
-    [width]="columnWidths[0]"
+      [width]="columnWidths[0]"
-    [sortable]="false"
+      [sortable]="false"
-  >
+    >
-    <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+      <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
-      <ng-container
+        <ng-container
-        *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
+          *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
-      ></ng-container>
+        ></ng-container>
-      <ng-template #gridActions>
+        <ng-template #gridActions>
-        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
+          @if (hasAvailableActions(i, row)) {
-      </ng-template>
+            <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-    </ng-template>
-  </ngx-datatable-column>
-  } @for (prop of propList; track prop.name; let i = $index) {
-  <ngx-datatable-column
-    *abpVisible="prop.columnVisible(getInjected)"
-    [width]="columnWidths[i + 1] || 200"
-    [name]="prop.displayName | abpLocalization"
-    [prop]="prop.name"
-    [sortable]="prop.sortable"
-  >
-    <ng-template ngx-datatable-header-template let-column="column">
-      @if (prop.tooltip) {
-      <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 }}
-      }
-    </ng-template>
-    <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-      <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-        <ng-container *abpVisible="row['_' + prop.name]?.visible">
-          @if (!row['_' + prop.name].component) {
-          <div
-            [innerHTML]="row['_' + prop.name]?.value | async"
-            (click)="
-              prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-            "
-            [ngClass]="entityPropTypeClasses[prop.type]"
-            [class.pointer]="prop.action"
-          ></div>
-          }@else{
-          <ng-container
-            *ngComponentOutlet="
-              row['_' + prop.name].component;
-              injector: row['_' + prop.name].injector
-            "
-          ></ng-container>
           }
+        </ng-template>
+      </ng-template>
+    </ngx-datatable-column>
+  }
+  @for (prop of propList; track prop.name; let i = $index) {
+    <ngx-datatable-column
+      *abpVisible="prop.columnVisible(getInjected)"
+      [width]="columnWidths[i + 1] || 200"
+      [name]="prop.displayName | abpLocalization"
+      [prop]="prop.name"
+      [sortable]="prop.sortable"
+    >
+      <ng-template ngx-datatable-header-template let-column="column">
+        @if (prop.tooltip) {
+          <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 }}
+        }
+      </ng-template>
+      <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+        <ng-container *abpPermission="prop.permission; runChangeDetection: false">
+          <ng-container *abpVisible="row['_' + prop.name]?.visible">
+            @if (!row['_' + prop.name].component) {
+              <div
+                [innerHTML]="row['_' + prop.name]?.value | async"
+                (click)="
+                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
+                "
+                [ngClass]="entityPropTypeClasses[prop.type]"
+                [class.pointer]="prop.action"
+              ></div>
+            } @else {
+              <ng-container
+                *ngComponentOutlet="
+                  row['_' + prop.name].component;
+                  injector: row['_' + prop.name].injector
+                "
+              ></ng-container>
+            }
+          </ng-container>
         </ng-container>
-      </ng-container>
+      </ng-template>
-    </ng-template>
+    </ngx-datatable-column>
-  </ngx-datatable-column>
   }
 </ngx-datatable>

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -109,6 +109,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
   entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
   #injector = inject(Injector);
   getInjected = this.#injector.get.bind(this.#injector);
+  permissionService = this.#injector.get(PermissionService);
 
   constructor() {
     const extensions = this.#injector.get(ExtensionsService);
@@ -117,9 +118,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     this.actionList = extensions['entityActions'].get(name)
       .actions as unknown as EntityActionList<R>;
 
-    const permissionService = this.#injector.get(PermissionService);
     this.hasAtLeastOnePermittedAction =
-      permissionService.filterItemsByPolicy(
+      this.permissionService.filterItemsByPolicy(
         this.actionList.toArray().map(action => ({ requiredPolicy: action.permission })),
       ).length > 0;
     this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
@@ -205,4 +205,9 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
       return record;
     });
   }
+
+  hasAvailableActions(index, row): boolean {
+    const { permission, visible } = this.actionList.get(index).value;
+    return this.permissionService.getGrantedPolicy(permission) && visible(row);
+  }
 }