aConnect-UX/src/app/user-permissions/user-permissions.component.html

<div class="page-content">
  <div class="container-fluid">

    <!-- User Selection -->
    <div class="card mb-3">
      <div class="card-body">
        <form [formGroup]="permission">

          <div class="row mb-2 align-items-center">
            <label class="col-sm-2 col-form-label pe-1">
              {{ 'userCode' | translate }}
            </label>

            <div class="col-sm-4">
              <ng-select class="form-select" formControlName="userCode" [items]="users" bindLabel="userName" bindValue="userId"
                placeholder="{{ 'choose' | translate }}" (change)="onUserChange()">
              </ng-select>

            </div>
          </div>

        </form>
      </div>
    </div>

    <!-- Permission Table -->
    <div class="card" *ngIf="showPermissions">
      <div class="card-body">

        <h4 class="card-title">
          {{ 'permissions' | translate }}
        </h4>
        <hr>

        <table class="table table-bordered table-sm align-middle 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 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>
      <!-- Expand / Collapse -->
      <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>

      <!-- Permission Name -->
      <td
        class="permission-cell"
        [style.--level]="level">
        {{ node.name | translate }}
      </td>

      <!-- Checkbox -->
      <td class="text-center">
        <input
          type="checkbox"
          [checked]="node.checked"
          (change)="toggleNode(node, $event)">
      </td>
    </tr>

    <!-- Children -->
    <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>