admin-user.component.html

<div id="admin-user-panel">
  <data-panel id="admin-user-data-panel"
              title="{{ 'admin.user.title' | translate }}"
              text="{{ 'admin.user.text' | translate }}"
              [labelColumnContent]="searchUserPanel">
    <ng-template #noDataFound>
      <div class="empty-data-panel">{{ "admin.user.label.no.user.selected" | translate }}</div>
    </ng-template>
    <user-profile-panel *ngIf="managedUserData;else noDataFound"
      [showDataPanelTitles] =false
      [managedUserData]="managedUserData"
      (onSaveUserEvent)="onSaveUserEvent($event)"
      (onDiscardNew)="onDiscardNew()"
      (onChangeUserPasswordEvent)="changeUserPasswordEvent($event)"
      ></user-profile-panel>
  </data-panel>
</div>

<ng-template #searchUserPanel>
  <mat-form-field id="user-filter">
    <mat-label>{{ "admin.user.label.filter" | translate }}</mat-label>
    <input matInput (keyup)="applyUserFilter($event)" placeholder="{{ 'admin.user.placeholder.filter' | translate }}" #inputUserFilter>
  </mat-form-field>

  <mat-toolbar class="mat-elevation-z2">
    <mat-toolbar-row class="smp-toolbar-row">
      <button mat-raised-button
              mat-flat-button color="primary"
              (click)="onCreateUserClicked()"
      >{{ "admin.user.button.create" | translate }}
      </button>

      <button mat-raised-button
              [disabled]="canNotDelete"
              color="primary"
              (click)="onDeleteSelectedUserClicked()">
        <mat-icon>delete</mat-icon>
        <span>{{ "admin.user.button.delete" | translate }}</span>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>
  <table class="mat-elevation-z2" id="admin-user-table" mat-table [dataSource]="userData" >
    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef class="user-table-cell-header" >{{ "admin.user.label.username" | translate }}</th>
      <td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.username}}</td>
    </ng-container>

    <ng-container matColumnDef="fullName">
      <th mat-header-cell *matHeaderCellDef class="user-table-cell-header" >{{ "admin.user.label.full.name" | translate }}</th>
      <td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.fullName}}</td>
    </ng-container>

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


    <tr class="mat-row" *matNoDataRow>
      <td *ngIf="inputUserFilter.value;else noDataFound" class="mat-cell" colspan="2">
        {{ "admin.user.label.no.filter.results" | translate: { filterValue: inputUserFilter.value } }}
      </td>
      <ng-template #noDataFound>
        <td class="mat-cell" colspan="2">{{ "admin.user.label.no.data.found" | translate }}</td>
      </ng-template>
    </tr>
  </table>

  <mat-paginator class="mat-elevation-z2" id="extension-paginator"
                 [length]="resultsLength"
                 (page)="onPageChanged($event)"
                 [hidePageSize]="true"
                 [pageSize]="5"
                 attr.aria-label="{{ 'admin.user.label.select.page' | translate }}"></mat-paginator>
</ng-template>