membership-panel.component.html

<div id="domain-member-panel" class="mat-elevation-z2">
  <mat-toolbar class="mat-elevation-z2">
    <mat-toolbar-row class="smp-toolbar-row">
      <button id="addMemberButton" mat-raised-button
              (click)="onAddMemberButtonClicked()" color="primary"
              [disabled]="inviteMemberDisabled"
              matTooltip="Invite new member"
      >
        <mat-icon>people</mat-icon>
        <span>Invite member</span>
      </button>
      <button id="editButton" mat-raised-button (click)="onEditSelectedButtonClicked()" color="primary"
              [disabled]="!selectedMember"
              matTooltip="Edit membership of selected user"
      >
        <mat-icon>edit</mat-icon>
        <span>Edit</span>
      </button>
      <button id="deleteButton" mat-raised-button (click)="onDeleteSelectedButtonClicked()" color="primary"
              matTooltip="Delete selected membership"
              [disabled]="!selectedMember">
        <mat-icon>delete</mat-icon>
        <span>Remove</span>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>
  <h3 style="word-wrap: break-word; max-width: 750px">{{title}}</h3>
  <div class="domain-member-container mat-elevation-z2">
    <div class="domain-member-loading-shade"
         *ngIf="isLoadingResults">
      <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
    </div>

    <div class="domain-member-table-container">

      <mat-form-field id="domain-member-filter">
        <mat-label>Member filter</mat-label>
        <input matInput (keyup)="applyMemberFilter($event)"
               placeholder="Member filter"
               [disabled]="entityNotSelected"
               #inputDomainMemberFilter>
      </mat-form-field>

      <table class="mat-elevation-z2" mat-table [dataSource]="data">

        <ng-container matColumnDef="username">
          <th mat-header-cell *matHeaderCellDef>Username</th>
          <td mat-cell *matCellDef="let row">{{row.username}}</td>
        </ng-container>

        <ng-container matColumnDef="fullName">
          <th mat-header-cell *matHeaderCellDef>Full name</th>
          <td mat-cell *matCellDef="let row">{{row.fullName}}</td>
        </ng-container>

        <ng-container matColumnDef="roleType">
          <th mat-header-cell *matHeaderCellDef>Role type</th>
          <td mat-cell *matCellDef="let row">{{row.roleType}}</td>
        </ng-container>

        <ng-container matColumnDef="memberOf">
          <th mat-header-cell *matHeaderCellDef>Member of</th>
          <td mat-cell *matCellDef="let row">{{row.memberOf}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let odd = odd; let row; columns: displayedColumns;"
            (click)="memberSelected(row)"
            (dblclick)="showEditDialogForMember(row)"
            [ngClass]="{'datatable-row-selected': row==selectedMember,'datatable-row-odd': odd}"
        ></tr>

        <tr class="mat-row" *matNoDataRow>
          <td *ngIf="inputDomainMemberFilter.value;else noDataFound" class="mat-cell" colspan="2">No direct members
            matching the filter
            "{{inputDomainMemberFilter.value}}"
          </td>
          <ng-template #noDataFound>
            <td class="mat-cell" colspan="2">No direct members for the domain</td>
          </ng-template>
        </tr>
      </table>
    </div>

    <mat-paginator class="mat-elevation-z2" [length]="resultsLength" #memberPaginator
                   (page)="onPageChanged($event)"
                   [hidePageSize]="true"
                   [pageSize]="pageSize"
                   [showFirstLastButtons]="true"
                   [disabled]="entityNotSelected"
                   aria-label="Select pages"></mat-paginator>
  </div>
</div>