Added a component that show a paginated list of eperson or group

src/app/shared/resource-policies/form/eperson-group-list/eperson-group-list.component.html

@@ -0,0 +1,34 @@
+<div class="mt-3">
+  <ds-pagination *ngIf="(getList() | async)?.payload?.totalElements > 0"
+                 [paginationOptions]="paginationOptions"
+                 [collectionSize]="(getList() | async)?.payload?.totalElements"
+                 [disableRouteParameterUpdate]="true"
+                 [hideGear]="true"
+                 (pageChange)="onPageChange($event)">
+
+    <div class="table-responsive">
+      <table id="groups" class="table table-sm table-striped table-hover table-bordered">
+        <thead>
+        <tr class="text-center">
+          <th>{{'resource-policies.form.eperson-group-list.table.headers.id' | translate}}</th>
+          <th>{{'resource-policies.form.eperson-group-list.table.headers.name' | translate}}</th>
+          <th>{{'resource-policies.form.eperson-group-list.table.headers.action' | translate}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let entry of (getList() | async)?.payload?.page"
+            [class.table-primary]="isSelected(entry) | async">
+          <td>{{entry.id}}</td>
+          <td>{{dsoNameService.getName(entry)}}</td>
+          <td class="text-center">
+            <button class="btn btn-sm btn-outline-primary" (click)="emitSelect(entry)">
+              {{'resource-policies.form.eperson-group-list.select.btn' | translate}}
+            </button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </ds-pagination>
+</div>

src/app/shared/resource-policies/form/eperson-group-list/eperson-group-list.component.ts

@@ -0,0 +1,154 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { uniqueId } from 'lodash'
+
+import { RemoteData } from '../../../../core/data/remote-data';
+import { PaginatedList } from '../../../../core/data/paginated-list';
+import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
+import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
+import { DataService } from '../../../../core/data/data.service';
+import { hasValue, isNotEmpty } from '../../../empty.util';
+import { FindListOptions } from '../../../../core/data/request.models';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+
+@Component({
+  selector: 'ds-eperson-group-list',
+  styleUrls: ['./eperson-group-list.component.scss'],
+  templateUrl: './eperson-group-list.component.html'
+})
+/**
+ * Component that shows a list of eperson or group
+ */
+export class EpersonGroupListComponent implements OnInit, OnDestroy {
+
+  /**
+   * A boolean representing id component should list eperson or group
+   */
+  @Input() isListOfEPerson = true;
+
+  /**
+   * The uuid of eperson or group initially selected
+   */
+  @Input() initSelected: string;
+
+  /**
+   * An event fired when a eperson or group is selected.
+   * Event's payload equals to DSpaceObject.
+   */
+  @Output() select: EventEmitter<DSpaceObject> = new EventEmitter<DSpaceObject>();
+
+  /**
+   * Pagination config used to display the list
+   */
+  public paginationOptions: PaginationComponentOptions = new PaginationComponentOptions();
+
+  /**
+   * The data service used to make request.
+   * It could be EPersonDataService or GroupDataService
+   */
+  private dataService: DataService<DSpaceObject>;
+
+  /**
+   * A list of eperson or group
+   */
+  private list$: BehaviorSubject<RemoteData<PaginatedList<DSpaceObject>>> = new BehaviorSubject<RemoteData<PaginatedList<DSpaceObject>>>({} as any);
+
+  /**
+   * The eperson or group's id selected
+   * @type {string}
+   */
+  private entrySelectedId: BehaviorSubject<string> = new BehaviorSubject<string>('');
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  private subs: Subscription[] = [];
+
+  constructor(public dsoNameService: DSONameService,
+              private epersonService: EPersonDataService,
+              private groupsService: GroupDataService) {
+  }
+
+  /**
+   * Initialize the component
+   */
+  ngOnInit(): void {
+    this.paginationOptions.id = uniqueId('eperson-group-list-pagination');
+    this.paginationOptions.pageSize = 5;
+    this.dataService = (this.isListOfEPerson) ? this.epersonService : this.groupsService;
+
+    if (this.initSelected) {
+      this.entrySelectedId.next(this.initSelected);
+    }
+
+    this.updateList(this.paginationOptions);
+  }
+
+  /**
+   * Method called when an entry is selected.
+   * Emit a new select Event
+   *
+   * @param entry The eperson or group selected
+   */
+  emitSelect(entry: DSpaceObject): void {
+    this.select.emit(entry);
+    this.entrySelectedId.next(entry.id);
+  }
+
+  /**
+   * Return the list of eperson or group
+   */
+  getList(): Observable<RemoteData<PaginatedList<DSpaceObject>>> {
+    return this.list$.asObservable();
+  }
+
+  /**
+   * Return a boolean representing if a table row is selected
+   *
+   * @return {boolean}
+   */
+  isSelected(entry: DSpaceObject): Observable<boolean> {
+    return this.entrySelectedId.asObservable().pipe(
+      map((selectedId) => isNotEmpty(selectedId) && selectedId === entry.id)
+    )
+  }
+
+  /**
+   * Method called on page change
+   */
+  onPageChange(page: number): void {
+    this.paginationOptions.currentPage = page;
+    this.updateList(this.paginationOptions);
+  }
+
+  /**
+   * Retrieve a paginate list of eperson or group
+   */
+  updateList(config: PaginationComponentOptions): void {
+    const options: FindListOptions = Object.assign({}, new FindListOptions(), {
+      elementsPerPage: config.pageSize,
+      currentPage: config.currentPage
+    });
+
+    this.subs.push(this.dataService.findAll(options).pipe(take(1))
+      .subscribe((list: RemoteData<PaginatedList<DSpaceObject>>) => {
+        this.list$.next(list)
+      })
+    );
+  }
+
+  /**
+   * Unsubscribe from all subscriptions
+   */
+  ngOnDestroy(): void {
+    this.subs
+      .filter((subscription) => hasValue(subscription))
+      .forEach((subscription) => subscription.unsubscribe())
+  }
+
+}