D-Net

<ng-container *ngIf="role; else noRole">

  <h4 class="p-text-center">

    Role: {{role.name}}

  </h4>

  <label>

    <strong>{{(!role.readOnly ? 'NOTIFYENABLE' : '') | translate}}</strong>

  </label>

  <p-toolbar styleClass="p-mb-4">

    <ng-template pTemplate="left">

      <p-button label="{{(isSelectedAll ? 'DISELECT-ALL' : 'SELECT-ALL') | translate}}"

      (onClick)="checkAllCheckBoxes()"

      [disabled]="rightsIsDisabled()"

      styleClass="p-button-primary">

</p-button>

    </ng-template>

    <ng-template pTemplate="right">

      <p-button label="{{'UPDATE-RIGHTS' | translate}}"

      (onClick)="updateRights()"

      [disabled]="rightsIsDisabled()"

      styleClass="p-button-primary">

</p-button>

    </ng-template>

</p-toolbar>

  <div class="p-grid p-nogutter p-mt-3">

    <div class="p-col-12">

      <p-accordion>

        <p-accordionTab *ngFor="let category of filterCategories(categories)"

                        header="{{category.name}}">

          <div *ngFor="let right of filterRights(category.rights)"

                class="p-field-checkbox">

            <p-checkbox name="group2"

                        value="right.id"

                        [value]="right.id"

                        [(ngModel)]="selectedValues"

                        [disabled]="rightsIsDisabled()">

            </p-checkbox>

            <label class="p-mr-0">{{right.name}}</label>

        </div>

        </p-accordionTab>

      </p-accordion>

    </div>

  </div>

</ng-container>

<ng-template #noRole>

  <p-card>

    <h4 class="p-text-center">

      No role selected

    </h4>

  </p-card>

</ng-template>