D-Net

<p-accordion>

  <p-accordionTab header="Existing User's Roles">

    <p-card *ngIf="!userIPowerClient">

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

        No selected user

      </h4>

    </p-card>

    <div *ngIf="userIPowerClient?.length > 0 && this.checkIfUserHasValue === true">

      <p><strong>{{'ROLES-ASSIGNED-TO-USER' | translate}} {{(user ? user.name : "")}}</strong></p>

      <p-confirmDialog message="{{'DELETE-MESSAGE' | translate}}"

                       header="{{'DELETE-CONFIRMATION' | translate}}"

                       acceptLabel="{{'ACCEPT_LABEL' | translate}}"

                       rejectLabel="{{'REJECT_LABEL' | translate}}"

                       acceptButtonStyleClass="p-button-primary"

                       rejectButtonStyleClass="p-button-warning"

                       acceptIcon="null"

                       rejectIcon="null"

                       appendTo="body">

      </p-confirmDialog>

      <p-table [value]="userIPowerClient"

               dataKey="id"

               [paginator]="false"

               [rows]="10"

               styleClass="p-datatable-gridlines"

               [loading]="loading"

               [rowHover]="true"

               [autoLayout]="true">

        <ng-template pTemplate="header">

          <tr>

            <th>iPower Client Code</th>

            <th>iPower Client Name</th>

            <th>Role Code</th>

            <th>Status</th>

            <th class="one-button"></th>

          </tr>

        </ng-template>

        <ng-template pTemplate="body"

                     let-userIPowerClient>

          <tr *ngIf="userIPowerClient.status == 'Active'">

            <td>{{userIPowerClient.ipowerClient.id}}</td>

            <td>{{userIPowerClient.ipowerClient.name}}</td>

            <td>{{userIPowerClient.role.name}}</td>

            <td>{{(userIPowerClient.role.status ? 'ENABLE' : 'DISABLE') | translate}}</td>

            <td>

              <button pButton

                      pRipple

                      type="button"

                      (click)="disableUserRole(userIPowerClient.id)"

                      pTooltip="{{'DELETE-ROLE' | translate}}"

                      icon="pi pi pi-trash"

                      class="p-button-danger p-button-rounded p-button-outlined">

              </button>

            </td>

          </tr>

        </ng-template>

      </p-table>

    </div>

    <p-card *ngIf="this.checkIfUserHasValue === false">

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

        {{(user ? user.name : "This user")}} has not existing roles

      </h4>

    </p-card>

  </p-accordionTab>

  <p-accordionTab header="Assignment of a new role">

    <div class="p-formgroup-inline p-jc-center p-mt-0">

      <div class="p-field p-m-0">

        <label for="receivedFrom">Select Role</label>

        <p-dropdown [(ngModel)]="selectedRole"

                    [options]="roles"

                    placeholder="Select"

                    optionLabel="name"

                    [showClear]="true">

        </p-dropdown>

      </div>

    </div>

    <div class="p-formgroup-inline p-jc-center"

          *ngIf="!selectedRole?.isGlobal && selectedRole != null">

      <div class="p-field p-m-0">

        <label for="receivedFrom">Select iPower Client Code</label>

        <span class="p-input-icon-left">

          <i class="pi pi-search"></i>

          <p-autoComplete id="receivedFrom"

                          size="18"

                          [(ngModel)]="selectedIpowerClient"

                          [suggestions]="ipowerClientCodeSuggestions"

                          (completeMethod)="autosuggestIPowerClientCode($event)"

                          [forceSelection]="true">

          </p-autoComplete>

        </span>

      </div>

    </div>

    <div class="p-formgroup-inline p-mt-5 p-jc-center">

      <p-button (onClick)="assignmentNewRole()"

                label="Assign"

                styleClass="p-button-primary"

                [disabled]="isDisabled(this.user)">

      </p-button>

    </div>

  </p-accordionTab>

</p-accordion>