dspace-angular/src/app/access-control/epeople-registry/epeople-registry.component.html at b3639c8d54bbb120ea767c90d3742118957ab129 · dataquest-dev/dspace-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<div class="container">
  <div class="epeople-registry row">
    <div class="col-12">
      <div class="d-flex justify-content-between border-bottom mb-3">
        <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>

        <div>
          <button class="me-auto btn btn-success addEPerson-button"
            [routerLink]="'create'">
            <i class="fas fa-plus"></i>
            <span class="d-none d-sm-inline ms-1">{{labelPrefix + 'button.add' | translate}}</span>
          </button>
        </div>
      </div>

      <h2 id="search" class="border-bottom pb-2">
        {{labelPrefix + 'search.head' | translate}}
      </h2>
      <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
        <div>
          <select name="scope" id="scope" formControlName="scope" class="form-select" 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="flex-grow-1 me-3 ms-3">
          <div class="mb-3 input-group">
            <input type="text" name="query" id="query" formControlName="query"
              class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
              [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
            <span class="input-group-append">
              <button type="submit" class="search-button btn btn-primary">
                <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
              </button>
            </span>
          </div>
        </div>
        <div>
          <button (click)="clearFormAndResetResult();"
          class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
        </div>
      </form>

      @if (searching$ | async) {
        <ds-loading></ds-loading>
      }
      @if ((pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true) {
        <ds-pagination
          [paginationOptions]="config"
          [collectionSize]="(pageInfoState$ | async)?.totalElements"
          [hideGear]="true"
          [hidePagerWhenSinglePage]="true">
          <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>
                @for (epersonDto of (ePeopleDto$ | async)?.page; track epersonDto) {
                  <tr
                    [ngClass]="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson}">
                    <td>{{epersonDto.eperson.id}}</td>
                    <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
                    <td>{{epersonDto.eperson.email}}</td>
                    <td>
                      <div class="btn-group edit-field">
                        <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
                          class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
                          title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                          <i class="fas fa-edit fa-fw"></i>
                        </button>
                        @if (epersonDto.ableToDelete && currentAuthenticatedUserId) {
                          @if (isCurrentUser(epersonDto.eperson)) {
                            <span tabindex="0" [ngbTooltip]="selfDeleteWarningLabel | translate" container="body">
                              <button [dsBtnDisabled]="true"
                                tabindex="-1"
                                [attr.aria-label]="selfDeleteWarningLabel | translate"
                                class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
                                type="button">
                                <i class="fas fa-trash-alt fa-fw"></i>
                              </button>
                            </span>
                          } @else {
                            <button (click)="deleteEPerson(epersonDto.eperson)"
                              class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
                              title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                              <i class="fas fa-trash-alt fa-fw"></i>
                            </button>
                          }
                        }
                      </div>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        </ds-pagination>
      }

      @if ((pageInfoState$ | async)?.totalElements === 0) {
        <div class="alert alert-info w-100 mb-2" role="alert">
          {{labelPrefix + 'no-items' | translate}}
        </div>
      }
    </div>
  </div>
</div>