dspace-angular/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.html

<div class="container">
  <div class="epeople-registry row">
    <div class="col-12">

      <h2 id="header" class="border-bottom pb-2">{{labelPrefix + 'head' | translate}}</h2>

      <ds-eperson-form *ngIf="isEPersonFormShown" (submitForm)="forceUpdateEPeople()"
                       (cancelForm)="isEPersonFormShown = false"></ds-eperson-form>

      <div *ngIf="!isEPersonFormShown" class="button-row top d-flex pb-2">
        <button class="mr-auto btn btn-success addEPerson-button"
                (click)="isEPersonFormShown = true">
          <i class="fas fa-plus"></i>
          <span class="d-none d-sm-inline">{{labelPrefix + 'button.add' | translate}}</span>
        </button>
      </div>

      <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
        <button (click)="clearFormAndResetResult();"
                class="btn btn-primary float-right">{{labelPrefix + 'button.see-all' | translate}}</button>
      </h3>
      <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="row">
        <div class="col-12 col-sm-3">
          <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
            <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
            <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
          </select>
        </div>
        <div class="col-sm-9 col-12">
          <div class="form-group input-group">
            <input type="text" name="query" id="query" formControlName="query"
                   class="form-control" aria-label="Search input">
            <span class="input-group-append">
            <button type="submit"
                    class="search-button btn btn-secondary">{{ labelPrefix + 'search.button' | translate }}</button>
        </span>
          </div>
        </div>
      </form>

      <ds-pagination
        *ngIf="(ePeople | async)?.payload?.totalElements > 0"
        [paginationOptions]="config"
        [pageInfoState]="(ePeople | async)?.payload"
        [collectionSize]="(ePeople | async)?.payload?.totalElements"
        [hideGear]="true"
        [hidePagerWhenSinglePage]="true"
        (pageChange)="onPageChange($event)">

        <div class="table-responsive">
          <table id="epeople" class="table table-striped table-hover table-bordered">
            <thead>
            <tr>
              <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
              <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
              <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
              <th>{{labelPrefix + 'table.edit' | translate}}</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let eperson of (ePeople | async)?.payload?.page"
                [ngClass]="{'table-primary' : isActive(eperson) | async}">
              <td>{{eperson.id}}</td>
              <td>{{eperson.name}}</td>
              <td>{{eperson.email}}</td>
              <td>
                <div class="btn-group edit-field">
                  <button (click)="toggleEditEPerson(eperson)"
                          class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
                          title="{{labelPrefix + 'table.edit.buttons.edit' | translate: {name: eperson.name} }}">
                    <i class="fas fa-edit fa-fw"></i>
                  </button>
                  <button (click)="deleteEPerson(eperson)"
                          class="btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
                          title="{{labelPrefix + 'table.edit.buttons.remove' | translate: {name: eperson.name} }}">
                    <i class="fas fa-trash-alt fa-fw"></i>
                  </button>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

      </ds-pagination>

      <div *ngIf="(ePeople | async)?.payload?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
        {{labelPrefix + 'no-items' | translate}}
      </div>

    </div>
  </div>
</div>