role-detail.component.html

<div class="card">

  <div *ngIf="isLoading" class="spinner-container">
    <p-progressSpinner></p-progressSpinner>
  </div>
  <div *ngIf="isError && !isLoading" class="error-message-container">
    <p>{{ 'Data Loading Error' | translate }}</p>
  </div>

  <div *ngIf="!isLoading && !isError">
    <p-toolbar styleClass="p-mb-4">
      <ng-template | translate }} pTemplate="left"></ng-template>
      <ng-template pTemplate="right">
        <p-button *ngIf="role.type && role.type.value !== 'SYSTEM'" (onClick)="save()"
          [disabled]="!roleForm || !roleForm.valid">{{ 'Save' | translate }}</p-button>
        <p-button (click)="cancel()">{{ 'Cancel' | translate }}</p-button>
      </ng-template>
    </p-toolbar>
    <h5>{{ 'Role detail' | translate }}</h5>

    <br>

    <p-tabView>
      <p-tabPanel header="Dati di base">
        <form [formGroup]='roleForm'>
          <span class="p-float-label" *ngIf="role.type && role.type.value === 'SYSTEM'">
            <input id="float-input-name" type="text" pInputText [(ngModel)]="role.name" disabled formControlName='name'>
            <label for="float-input-name">{{ 'Name *' | translate }}</label>
          </span>
          <span class="p-float-label" *ngIf="role.type && role.type.value !== 'SYSTEM'">
            <input id="float-input-name" type="text" pInputText [(ngModel)]="role.name" formControlName='name'>
            <label for="float-input-name">{{ 'Name *' | translate }}</label>
          </span>
          <small *ngIf="!roleForm.get('name').valid && roleForm.get('name').touched" class="p-invalid">{{ 'Name field is
            required' | translate }}</small>

          <span class="p-float-label">
            <p-dropdown [options]="types" [(ngModel)]="role.type" optionLabel="name" [style]="style" [disabled]="1"
              [autoDisplayFirst]="false" formControlName='type'></p-dropdown>
            <label for="float-input-type">{{ 'Type *' | translate }}</label>
          </span>

          <div class="inline-box-container" *ngIf="showDomains">
            <div class="viewer-box">
              <span class="p-float-label">
                <p-chips id="float-input-domain" [readonly]="true" [disabled]="true" [(ngModel)]="selectedDomains"
                  class="p-fluid p-inputwrapper-filled" formControlName='domains'>
                  <ng-template let-item pTemplate="item">
                    {{ item.name }}
                  </ng-template>
                </p-chips>
                <label for="float-input-domain">{{ 'Domains' | translate }}</label>
              </span>
            </div>
            <div class="button-box">
              <p-button [disabled]="role.type && role.type.value === 'SYSTEM'" (click)="displayDomainsDialog = true"
                label="{{'Select domains' | translate }}">
              </p-button>
            </div>
          </div>

          <div class="select-domains" *ngIf="showDomains"></div>

          <span class="p-float-label" *ngIf="showVisibilitySections">
            <p-multiSelect id="float-input-visibility" [options]="visibilitySections"
              [(ngModel)]="selectedVisibilitySections" optionLabel="name" display="chip"
              [disabled]="role.type && role.type.value === 'SYSTEM'" [style]="style"
              formControlName='visibilitySections'></p-multiSelect>
            <label for="float-input-visibility">{{ 'Visibility sections *' | translate }}</label>
          </span>
          <small *ngIf="!roleForm.get('visibilitySections').valid && roleForm.get('visibilitySections').touched"
            class="p-invalid">{{ 'Visibility field is required' | translate }}</small>

          <span class="p-float-label">
            <input id="float-input-role-mapping-name" type="text" pInputText formControlName='roleMappingName'>
            <label for="float-input-role-mapping-name">{{ 'Role mapping name' | translate }}</label>
          </span>

          <span class="p-float-label">
            <p-checkbox type="checkbox" id="float-input-isDefaultRoleForProvidedUser"
              [(ngModel)]="isDefaultRoleForProvidedUser" [disabled]="role.type && role.type.value === 'SYSTEM'"
              [style]="style" [binary]="true" formControlName='isDefaultRole'>
            </p-checkbox>
            <label [style]="checkboxStyle" for="float-input-isDefaultRoleForProvidedUser">{{ 'It is default role for
              provided user' | translate }}</label>
          </span>
        </form>
      </p-tabPanel>
    </p-tabView>
  </div>
</div>

<app-node-tree *ngIf="showDomains" [treeNodes]="domainsTree" [selectionMode]="'checkbox'"
  (selectedTreeNodes)="onChangeSelectedDomains($event)" [(showDialog)]="displayDomainsDialog"
  (closedDialog)="displayDomainsDialog = false" [(selectedNodes)]="selectedDomains">
</app-node-tree>