From 96590285e75896b741be5896c1e41d2b6b082dd4 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 29 Apr 2024 16:53:11 +0300 Subject: [PATCH 1/5] add: hasAvailableActions functionality to handle both visibility and permission for a specific action --- .../grid-actions/grid-actions.component.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts index f74d36dd794..8435f6e7a40 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts @@ -4,12 +4,13 @@ import { Injector, Input, TrackByFunction, + inject, } from '@angular/core'; 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, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; -import { LocalizationModule, PermissionDirective } from '@abp/ng.core'; +import { LocalizationModule, PermissionDirective, PermissionService } from '@abp/ng.core'; import { EllipsisDirective } from '@abp/ng.theme.shared'; import { NgClass, NgTemplateOutlet } from '@angular/common'; @@ -23,7 +24,7 @@ import { NgClass, NgTemplateOutlet } from '@angular/common'; NgClass, LocalizationModule, NgTemplateOutlet, - NgbTooltipModule + NgbTooltipModule, ], selector: 'abp-grid-actions', templateUrl: './grid-actions.component.html', @@ -43,8 +44,19 @@ export class GridActionsComponent extends AbstractActionsComponent> = (_, item) => item.text; + public readonly permissionService = inject(PermissionService); constructor(injector: Injector) { super(injector); } + + hasAvailableActions(): boolean { + return this.actionList.toArray().some(action => { + if (!action) return false; + + const { permission, visible } = action; + + return this.permissionService.getGrantedPolicy(permission) && visible(this.data); + }); + } } From 6d4ed1bf422ab8661f34d388c023277dc681a6a3 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 29 Apr 2024 16:54:04 +0300 Subject: [PATCH 2/5] add: hasAvailableActions condition to check the related availibility beforehand --- .../grid-actions/grid-actions.component.html | 76 ++++++++++--------- 1 file changed, 41 insertions(+), 35 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html index 4fcf67fcfc9..08eb4ed2294 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html @@ -1,42 +1,46 @@ -@if (actionList.length > 1) { -
- -
- @for (action of actionList; track action.text) { - 1) { +
+
-
-} @if (actionList.length === 1) { - + {{ text | abpLocalization }} + +
+ @for (action of actionList; track action.text) { + + + } +
+
+ } + + @if (actionList.length === 1) { + + } } @if (action.visible(data)) { - + } @@ -60,7 +64,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" > Date: Tue, 30 Apr 2024 10:14:33 +0300 Subject: [PATCH 3/5] update: permission service injection is generalized and action list check is added --- .../extensible-table.component.html | 116 +++++++++--------- .../extensible-table.component.ts | 9 +- 2 files changed, 68 insertions(+), 57 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 5b286270851..59d50a40ecb 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/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)) { - - - - - - - - - } @for (prop of propList; track prop.name; let i = $index) { - - - @if (prop.tooltip) { - - {{ column.name }} - - }@else{ - {{ column.name }} - } - - - - - @if (!row['_' + prop.name].component) { -
- }@else{ - + + + + + @if (hasAvailableActions(i, row)) { + } + + + + } + @for (prop of propList; track prop.name; let i = $index) { + + + @if (prop.tooltip) { + + {{ column.name }} + + } @else { + {{ column.name }} + } + + + + + @if (!row['_' + prop.name].component) { +
+ } @else { + + } + - - - + + } diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts index 0018f90985b..8ed24133f22 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts @@ -109,6 +109,7 @@ export class ExtensibleTableComponent 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 implements OnChanges { this.actionList = extensions['entityActions'].get(name) .actions as unknown as EntityActionList; - 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 implements OnChanges { return record; }); } + + hasAvailableActions(index, row): boolean { + const { permission, visible } = this.actionList.get(index).value; + return this.permissionService.getGrantedPolicy(permission) && visible(row); + } } From a5ca93741b209ebd1202ecdc5c35fce3ec9e0d6e Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Tue, 30 Apr 2024 10:14:58 +0300 Subject: [PATCH 4/5] update: unused references are removed --- .../grid-actions/grid-actions.component.html | 52 +++++++++---------- .../grid-actions/grid-actions.component.ts | 10 ---- 2 files changed, 25 insertions(+), 37 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html index 08eb4ed2294..9991336bf93 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html @@ -1,32 +1,30 @@ -@if (hasAvailableActions()) { - @if (actionList.length > 1) { -
- -
- @for (action of actionList; track action.text) { - - - } -
+@if (actionList.length > 1) { +
+ +
+ @for (action of actionList; track action.text) { + + + }
- } +
+} - @if (actionList.length === 1) { - - } +@if (actionList.length === 1) { + } diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts index 8435f6e7a40..1ad7c6de3de 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts @@ -49,14 +49,4 @@ export class GridActionsComponent extends AbstractActionsComponent { - if (!action) return false; - - const { permission, visible } = action; - - return this.permissionService.getGrantedPolicy(permission) && visible(this.data); - }); - } } From 8bf08ea248c222c0bb76807b387e0ea747e53527 Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Tue, 30 Apr 2024 10:17:34 +0300 Subject: [PATCH 5/5] Update grid-actions.component.ts --- .../src/lib/components/grid-actions/grid-actions.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts index 1ad7c6de3de..7a537c6eb8a 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts @@ -4,13 +4,12 @@ import { Injector, Input, TrackByFunction, - inject, } from '@angular/core'; 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, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; -import { LocalizationModule, PermissionDirective, PermissionService } from '@abp/ng.core'; +import { LocalizationModule, PermissionDirective } from '@abp/ng.core'; import { EllipsisDirective } from '@abp/ng.theme.shared'; import { NgClass, NgTemplateOutlet } from '@angular/common'; @@ -44,7 +43,6 @@ export class GridActionsComponent extends AbstractActionsComponent> = (_, item) => item.text; - public readonly permissionService = inject(PermissionService); constructor(injector: Injector) { super(injector);