You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.2 KiB
HTML
102 lines
3.2 KiB
HTML
<div class="page-content">
|
|
<div class="container-fluid">
|
|
|
|
<!-- User Selection Card -->
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<form [formGroup]="permission" class="row align-items-center">
|
|
|
|
<label class="col-md-2 col-form-label fw-semibold">
|
|
{{ 'userCode' | translate }}
|
|
</label>
|
|
|
|
<div class="col-md-6">
|
|
<ng-select
|
|
class="form-select"
|
|
formControlName="userCode"
|
|
[items]="users"
|
|
bindLabel="userName"
|
|
bindValue="userId"
|
|
placeholder="{{ 'choose' | translate }}"
|
|
(change)="onUserChange()"
|
|
[searchable]="true"
|
|
[clearable]="false"
|
|
[dropdownPosition]="'auto'"
|
|
[virtualScroll]="true"
|
|
[bufferAmount]="20"
|
|
appendTo="body">
|
|
</ng-select>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permissions Table Card -->
|
|
<div class="card shadow-sm" *ngIf="showPermissions">
|
|
<div class="card-body">
|
|
|
|
<h4 class="card-title mb-3">{{ 'permissions' | translate }}</h4>
|
|
|
|
<div class="table-responsive scrollable-table">
|
|
<table class="table table-hover table-bordered table-sm permission-table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width: 40px;"></th>
|
|
<th>{{ 'Permissions' | translate }}</th>
|
|
<th style="width: 120px;" class="text-center">{{ 'allow' | translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<ng-container *ngTemplateOutlet="permissionRow; context: { nodes: permissions, level: 0 }"></ng-container>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="text-end mt-3">
|
|
<button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
|
|
{{ 'save' | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recursive Permission Rows -->
|
|
<ng-template #permissionRow let-nodes="nodes" let-level="level">
|
|
<ng-container *ngFor="let node of nodes">
|
|
|
|
<tr>
|
|
<td class="text-center">
|
|
<span *ngIf="node.children?.length || node.buttons?.length"
|
|
class="expand-icon"
|
|
(click)="toggleExpand(node)">
|
|
<i class="bx" [ngClass]="node.expanded ? 'bx-chevron-down' : 'bx-chevron-right'"></i>
|
|
</span>
|
|
</td>
|
|
|
|
<td class="permission-cell" [style.--level]="level">
|
|
{{ node.name | translate }}
|
|
</td>
|
|
|
|
<td class="text-center">
|
|
<input type="checkbox" [checked]="node.checked" (change)="toggleNode(node, $event)">
|
|
</td>
|
|
</tr>
|
|
|
|
<ng-container *ngIf="node.expanded">
|
|
<ng-container *ngIf="node.children?.length">
|
|
<ng-container *ngTemplateOutlet="permissionRow; context: { nodes: node.children, level: level + 1 }"></ng-container>
|
|
</ng-container>
|
|
<ng-container *ngIf="node.buttons?.length">
|
|
<ng-container *ngTemplateOutlet="permissionRow; context: { nodes: node.buttons, level: level + 1 }"></ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
</ng-template>
|