All files / projects/organization-management/src/app/components/user-roles-selection user-roles-selection.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<fieldset>
  <legend class="visually-hidden">{{ 'account.user.details.profile.role_permissions.heading' | translate }}</legend>
  <div class="row">
    <div class="col-md-4 col-form-label">{{ 'account.user.details.profile.role_permissions.heading' | translate }}</div>
    <div class="col-md-8">
      <div *ngIf="form$ | async as form" class="row" [formGroup]="form">
        <ng-container *ngFor="let item of form.controls | keyvalue : unsorted; let i = index">
          <div
            *ngIf="role$(item.key) | async as role"
            [ngClass]="{ 'd-none': hideRole(form.get(item.key)) }"
            class="col-12"
          >
            <div class="form-control-checkbox">
              <div class="form-check form-control">
                <label [for]="item.key" class="mb-2">
                  <input type="checkbox" [id]="item.key" [formControlName]="item.key" class="form-check-input" />
                  <span>{{ role.displayName }}</span
                  ><br />
                  <span *ngIf="role.description" class="input-help">{{ role.description }}</span>
                </label>
              </div>
            </div>
 
            <ul *ngIf="isExpanded[i]" data-testing-id="user_permissions">
              <li *ngFor="let p of role.permissionDisplayNames">{{ p }}</li>
            </ul>
            <p>
              <!-- Expand/Collapse user permissions -->
              <button type="button" (click)="toggleExpanded(i)" class="btn btn-link btn-link-with-icon btn-link-action">
                <ng-container *ngIf="isExpanded[i]; else show_permissions_link">
                  {{ 'account.user.details.profile.role.hide_permissions.link' | translate
                  }}<fa-icon [icon]="['fas', 'angle-up']" />
                </ng-container>
 
                <ng-template #show_permissions_link>
                  {{ 'account.user.details.profile.role.show_permissions.link' | translate
                  }}<fa-icon [icon]="['fas', 'angle-down']" />
                </ng-template>
              </button>
            </p>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</fieldset>