dspace-angular/src/app/access-control/group-registry/group-form/members-list/members-list.component.html at 3bf96c3eb4e806b36892b6b0c23e892bfcfe33cd · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<ng-container>
  <h2 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h2>

  <h3>{{messagePrefix + '.headMembers' | translate}}</h3>

  @if ((ePeopleMembersOfGroup | async)?.totalElements > 0) {
    <ds-pagination
      [paginationOptions]="config"
      [collectionSize]="(ePeopleMembersOfGroup | async)?.totalElements"
      [hideGear]="true"
      [hidePagerWhenSinglePage]="true">
      <div class="table-responsive">
        <table id="ePeopleMembersOfGroup" class="table table-striped table-hover table-bordered">
          <thead>
            <tr>
              <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
              <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
              <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
              <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            @for (epersonDTO of (ePeopleMembersOfGroup | async)?.page; track epersonDTO) {
              <tr>
                <td class="align-middle">{{epersonDTO.eperson.id}}</td>
                <td class="align-middle">
                  <a [routerLink]="getEPersonEditRoute(epersonDTO.eperson.id)">
                    {{ dsoNameService.getName(epersonDTO.eperson) }}
                  </a>
                </td>
                <td class="align-middle">
                  {{messagePrefix + '.table.email' | translate}}: {{ epersonDTO.eperson.email ? epersonDTO.eperson.email : '-' }}<br/>
                  {{messagePrefix + '.table.netid' | translate}}: {{ epersonDTO.eperson.netid ? epersonDTO.eperson.netid : '-' }}
                </td>
                <td class="align-middle">
                  <div class="btn-group edit-field">
                    @if (epersonDTO.ableToDelete) {
                      <button (click)="deleteMemberFromGroup(epersonDTO.eperson)"
                        [dsBtnDisabled]="actionConfig.remove.disabled"
                        [ngClass]="['btn btn-sm', actionConfig.remove.css]"
                        title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                        <i [ngClass]="actionConfig.remove.icon"></i>
                      </button>
                    }
                    @if (!epersonDTO.ableToDelete) {
                      <button
                        (click)="addMemberToGroup(epersonDTO.eperson)"
                        [dsBtnDisabled]="actionConfig.add.disabled"
                        [ngClass]="['btn btn-sm', actionConfig.add.css]"
                        title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                        <i [ngClass]="actionConfig.add.icon"></i>
                      </button>
                    }
                  </div>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </ds-pagination>
  }

  @if ((ePeopleMembersOfGroup | async) === undefined || (ePeopleMembersOfGroup | async)?.totalElements === 0) {
    <div class="alert alert-info w-100 mb-2"
      role="alert">
      {{messagePrefix + '.no-members-yet' | translate}}
    </div>
  }

  <h3 id="search" class="border-bottom pb-2">
    <span
      *dsContextHelp="{
        content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
        id: 'edit-group-add-epeople',
        iconPlacement: 'right',
        tooltipPlacement: ['top', 'right', 'bottom']
      }"
      >
      {{messagePrefix + '.search.head' | translate}}
    </span>
  </h3>

  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
    <div class="flex-grow-1 me-3">
      <div class="mb-3 input-group me-3">
        <label for="members-list-query" class="visually-hidden">{{messagePrefix + '.search.input' | translate}}</label>
        <input type="text" name="query" id="members-list-query" formControlName="query"
          class="form-control" [attr.aria-label]="messagePrefix + '.search.input' | translate">
        <span class="input-group-append">
          <button type="submit" class="search-button btn btn-primary">
            <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}</button>
          </span>
        </div>
      </div>
      <div>
        <button (click)="clearFormAndResetResult();"
        class="btn btn-secondary">{{messagePrefix + '.button.see-all' | translate}}</button>
      </div>
    </form>

    @if ((ePeopleSearch | async)?.totalElements > 0) {
      <ds-pagination
        [paginationOptions]="configSearch"
        [collectionSize]="(ePeopleSearch | async)?.totalElements"
        [hideGear]="true"
        [hidePagerWhenSinglePage]="true">
        <div class="table-responsive">
          <table id="epersonsSearch" class="table table-striped table-hover table-bordered">
            <thead>
              <tr>
                <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
                <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
                <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
                <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
              </tr>
            </thead>
            <tbody>
              @for (eperson of (ePeopleSearch | async)?.page; track eperson) {
                <tr>
                  <td class="align-middle">{{eperson.id}}</td>
                  <td class="align-middle">
                    <a [routerLink]="getEPersonEditRoute(eperson.id)">
                      {{ dsoNameService.getName(eperson) }}
                    </a>
                  </td>
                  <td class="align-middle">
                    {{messagePrefix + '.table.email' | translate}}: {{ eperson.email ? eperson.email : '-' }}<br/>
                    {{messagePrefix + '.table.netid' | translate}}: {{ eperson.netid ? eperson.netid : '-' }}
                  </td>
                  <td class="align-middle">
                    <div class="btn-group edit-field">
                      <button (click)="addMemberToGroup(eperson)"
                        [dsBtnDisabled]="actionConfig.add.disabled"
                        [ngClass]="['btn btn-sm', actionConfig.add.css]"
                        title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(eperson) } }}">
                        <i [ngClass]="actionConfig.add.icon"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      </ds-pagination>
    }

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

  </ng-container>