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
48
49
50
51
52
53
54
55
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">
      @if (form$ | async; as form) {
        <div class="row" [formGroup]="form">
          @for (item of form.controls | keyvalue: unsorted; track item.key; let i = $index) {
            @if (role$(item.key) | async; as role) {
              <div class="col-12" [ngClass]="{ 'd-none': hideRole(form.get(item.key)) }">
                <div class="form-control-checkbox">
                  <div class="form-check form-control">
                    <label class="mb-2" [for]="item.key">
                      <input class="form-check-input" type="checkbox" [formControlName]="item.key" [id]="item.key" />
                      <span>{{ role.displayName }}</span
                      ><br />
                      @if (role.description) {
                        <span class="input-help">{{ role.description }}</span>
                      }
                    </label>
                  </div>
                </div>
 
                @if (isExpanded[i]) {
                  <ul data-testing-id="user_permissions">
                    @for (p of role.permissionDisplayNames; track p) {
                      <li>{{ p }}</li>
                    }
                  </ul>
                }
                <p>
                  <!-- Expand/Collapse user permissions -->
                  <button
                    class="btn btn-link btn-link-with-icon btn-link-action"
                    type="button"
                    (click)="toggleExpanded(i)"
                  >
                    @if (isExpanded[i]) {
                      {{ 'account.user.details.profile.role.hide_permissions.link' | translate
                      }}<i class="bi bi-chevron-up"></i>
                    } @else {
                      {{ 'account.user.details.profile.role.show_permissions.link' | translate
                      }}<i class="bi bi-chevron-down"></i>
                    }
                  </button>
                </p>
              </div>
            }
          }
        </div>
      }
    </div>
  </div>
</fieldset>