Merge pull request #19661 from abpframework/auto-merge/prerel-8-2/2664

Merge branch dev with prerel-8.2
abpframework · Apr 30, 2024 · efa0fa7 · efa0fa7
2 parents 5e75295 + 8ec253f
commit efa0fa7
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 92 deletions.
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
@@ -6,62 +6,68 @@
   (activate)="tableActivate.emit($event)"
 >
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
-  <ngx-datatable-column
-    [name]="actionsText | abpLocalization"
-    [maxWidth]="columnWidths[0]"
-    [width]="columnWidths[0]"
-    [sortable]="false"
-  >
-    <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
-      <ng-container
-        *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
-      ></ng-container>
-      <ng-template #gridActions>
-        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-      </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>
+    <ngx-datatable-column
+      [name]="actionsText | abpLocalization"
+      [maxWidth]="columnWidths[0]"
+      [width]="columnWidths[0]"
+      [sortable]="false"
+    >
+      <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+        <ng-container
+          *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
+        ></ng-container>
+        <ng-template #gridActions>
+          @if (hasAvailableActions(i, row)) {
+            <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
           }
+        </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>
-  </ngx-datatable-column>
+      </ng-template>
+    </ngx-datatable-column>
   }
 </ngx-datatable>
diff --git a/...s/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/...s/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);
+  }
 }
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
@@ -1,42 +1,44 @@
 @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 [ngClass]="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 [ngClass]="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>
   </div>
-</div>
-} @if (actionList.length === 1) {
-<ng-container
-  [ngTemplateOutlet]="btnTmp"
-  [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"
-></ng-container>
+}
+
+@if (actionList.length === 1) {
+  <ng-container
+    [ngTemplateOutlet]="btnTmp"
+    [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"
+  ></ng-container>
 }
 
 <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 }"
+      ></ng-container>
+    </button>
   }
 </ng-template>
 
@@ -60,7 +62,9 @@
         type="button"
         [class]="action.btnClass"
         [style]="action.btnStyle"
-        [ngbTooltip]="action.tooltip.text | abpLocalization" [placement]="action.tooltip.placement || 'auto'"  container="body" 
+        [ngbTooltip]="action.tooltip.text | abpLocalization"
+        [placement]="action.tooltip.placement || 'auto'"
+        container="body"
       >
         <ng-container
           *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"

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
@@ -23,7 +23,7 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
     NgClass,
     LocalizationModule,
     NgTemplateOutlet,
-    NgbTooltipModule
+    NgbTooltipModule,
   ],
   selector: 'abp-grid-actions',
   templateUrl: './grid-actions.component.html',