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

  <div class="page-content">
    <div class="container-fluid">
      <div class="row mt-2 mb-2">
        <div class="col-lg-6">
          <div class="col-6">
            <div class="mt-0 mb-2 d-sm-flex align-items-center justify-content-between font-edit-13">
                <h5 class="text-muted fw-bold mt-3">{{'permissionManagement' | translate}}</h5>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
             <form [formGroup]="permission">
                
                <div class="form-group row mb-2">
                    <label for="userCode" class="form-label font-edit-13">{{ 'userCode' |
                        translate
                        }}</label>
                    <div class="input-group">
                        <select class="form-select" id="userCode" formControlName="userCode" (change)="onUserChange()">
                            <option selected disabled value="">{{ 'choose' |
                                translate }}
                            </option>
                            <option *ngFor="let user of users" [value]="user.userId">
                                {{user.userName}}
                            </option>
                        </select>
                    </div>
                 
                </div> 
                
             </form> 
            </div>
          </div>
          <div class="card" *ngIf="showPermissions">
            <div class="card-body">
                <h4 class="card-title">{{ 'permissions' | translate}}</h4>
                <hr>
                <ul>
                    <li *ngFor="let node of permissions">
                      <input 
                        type="checkbox" 
                        [checked]="node.checked" 
                        (change)="toggleNode(node, $event)">
                        {{node.name | translate}}
                      <span (click)="toggleExpand(node)">
                        <span *ngIf="node.children && node.children.length">
                          <span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
                          <span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
                        </span>
                      </span>
                      <ul *ngIf="node.children && node.children.length > 0 && node.expanded">
                        <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
                      </ul>
                      <ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
                        <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
                      </ul>
                    </li>
                </ul>
                  
                  <ng-template #treeTemplate let-nodes>
                    <ul>
                      <li *ngFor="let node of nodes">
                        <input 
                          type="checkbox" 
                          [checked]="node.checked" 
                          (change)="toggleNode(node, $event)">
                          {{node.name | translate}}
                        <span (click)="toggleExpand(node)">
                            <span *ngIf="node.children && node.children.length">
                              <span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
                              <span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
                            </span>
                            <span *ngIf="node.buttons && node.buttons.length">
                              <span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
                              <span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
                            </span>
                          </span>
                        <ul *ngIf="node.children && node.children.length > 0 && node.expanded">
                          <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
                        </ul>
                        <ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
                          <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
                        </ul>
                      </li>
                    </ul>
                  </ng-template>
                  <div class="row float-end me-4 mb-3 mt-2 font-edit-13">
                    <button type="button" class="btn btn-primary font-edit-13 px-3 btn-sm" (click)="savePermissions()">{{ 'save' | translate }}</button>
                  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>