aConnect-UX/src/app/user-permissions/user-permissions.component.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]="true"
              [dropdownPosition]="'auto'"
              [virtualScroll]="true"
              [bufferAmount]="10">
            </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>