Skip to content

Commit

Permalink
update: permission service injection is generalized and action list c…
Browse files Browse the repository at this point in the history 
…heck is added
  • Loading branch information
@sumeyyeKurtulus
sumeyyeKurtulus committed Apr 30, 2024
1 parent 6d4ed1b commit 08d7ac3
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 57 deletions.
116 changes: 61 additions & 55 deletions ...components/extensible/src/lib/components/extensible-table/extensible-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
9 changes: 7 additions & 2 deletions ...s/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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);
}
}

0 comments on commit 08d7ac3

Please sign in to comment.