69111: Added list of groups that EPerson is member of in Edit EPerson form, linking to edit group page

resources/i18n/en.json5

@@ -226,6 +226,16 @@
 
   "admin.access-control.epeople.form.notification.edited.failure": "Failed to edit EPerson \"{{name}}\"",
 
+  "admin.access-control.epeople.form.groupsEPersonIsMemberOf": "Member of these groups:",
+
+  "admin.access-control.epeople.form.table.id": "ID",
+
+  "admin.access-control.epeople.form.table.name": "Name",
+
+  "admin.access-control.epeople.form.memberOfNoGroups": "This EPerson is not a member of any groups",
+
+  "admin.access-control.epeople.form.goToGroups": "Add to groups",
+
   "admin.access-control.epeople.notification.deleted.failure": "Failed to delete EPerson: \"{{name}}\"",
 
   "admin.access-control.epeople.notification.deleted.success": "Successfully deleted EPerson: \"{{name}}\"",

src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.html

@@ -15,3 +15,43 @@
          (cancel)="onCancel()"
          (submitForm)="onSubmit()">
 </ds-form>
+
+<div *ngIf="epersonService.getActiveEPerson() | async">
+  <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
+
+  <ds-pagination
+    *ngIf="(groups | async)?.payload?.totalElements > 0"
+    [paginationOptions]="config"
+    [pageInfoState]="(groups | async)?.payload"
+    [collectionSize]="(groups | async)?.payload?.totalElements"
+    [hideGear]="true"
+    [hidePagerWhenSinglePage]="true"
+    (pageChange)="onPageChange($event)">
+
+    <div class="table-responsive">
+      <table id="groups" class="table table-striped table-hover table-bordered">
+        <thead>
+        <tr>
+          <th scope="col">{{messagePrefix + '.table.id' | translate}}</th>
+          <th scope="col">{{messagePrefix + '.table.name' | translate}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let group of (groups | async)?.payload?.page">
+          <td>{{group.id}}</td>
+          <td><a [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group.id)]">{{group.name}}</a></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </ds-pagination>
+
+  <div *ngIf="(groups | async)?.payload?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
+    <div>{{messagePrefix + '.memberOfNoGroups' | translate}}</div>
+    <div>
+      <button [routerLink]="[groupsDataService.getGroupRegistryRouterLink()]"
+              class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
+    </div>
+  </div>
+</div>

src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.ts

@@ -7,17 +7,21 @@ import {
   DynamicInputModel
 } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs/internal/observable/combineLatest';
-import { Subscription } from 'rxjs/internal/Subscription';
+import { Subscription, combineLatest } from 'rxjs';
+import { Observable } from 'rxjs/internal/Observable';
 import { take } from 'rxjs/operators';
 import { RestResponse } from '../../../../core/cache/response.models';
 import { PaginatedList } from '../../../../core/data/paginated-list';
+import { RemoteData } from '../../../../core/data/remote-data';
 import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
 import { EPerson } from '../../../../core/eperson/models/eperson.model';
+import { Group } from '../../../../core/eperson/models/group.model';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
 import { hasValue } from '../../../../shared/empty.util';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
 
 @Component({
   selector: 'ds-eperson-form',
@@ -106,12 +110,27 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    */
   subs: Subscription[] = [];
 
+  /**
+   * A list of all the groups this EPerson is a member of
+   */
+  groups: Observable<RemoteData<PaginatedList<Group>>>;
+
+  /**
+   * Pagination config used to display the list of groups
+   */
+  config: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'groups-ePersonMemberOf-list-pagination',
+    pageSize: 5,
+    currentPage: 1
+  });
+
   /**
    * Try to retrieve initial active eperson, to fill in checkboxes at component creation
    */
   epersonInitial: EPerson;
 
   constructor(public epersonService: EPersonDataService,
+              public groupsDataService: GroupDataService,
               private formBuilderService: FormBuilderService,
               private translateService: TranslateService,
               private notificationsService: NotificationsService,) {
@@ -181,6 +200,10 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       ];
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
       this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
+        this.groups = this.groupsDataService.findAllByHref(eperson._links.groups.href, {
+          currentPage: 1,
+          elementsPerPage: this.config.pageSize
+        });
         this.formGroup.patchValue({
           firstName: eperson != null ? eperson.firstMetadataValue('eperson.firstname') : '',
           lastName: eperson != null ? eperson.firstMetadataValue('eperson.lastname') : '',
@@ -333,6 +356,26 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     });
   }
 
+  /**
+   * Event triggered when the user changes page
+   * @param event
+   */
+  onPageChange(event) {
+    this.updateGroups({
+      currentPage: event,
+      elementsPerPage: this.config.pageSize
+    });
+  }
+
+  /**
+   * Update the list of groups by fetching it from the rest api or cache
+   */
+  private updateGroups(options) {
+    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
+      this.groups = this.groupsDataService.findAllByHref(eperson._links.groups.href, options);
+    }));
+  }
+
   /**
    * Cancel the current edit when component is destroyed & unsub all subscriptions
    */

src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.html

@@ -24,7 +24,7 @@
       <ds-members-list [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
 
       <div>
-        <button [routerLink]="['/admin/access-control/groups']" class="btn btn-primary">{{messagePrefix + '.return' | translate}}</button>
+        <button [routerLink]="[this.groupDataService.getGroupRegistryRouterLink()]" class="btn btn-primary">{{messagePrefix + '.return' | translate}}</button>
       </div>
 
     </div>

src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.ts

@@ -134,7 +134,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   onCancel() {
     this.groupDataService.cancelEditGroup();
     this.cancelForm.emit();
-    this.router.navigate(['/admin/access-control/groups']);
+    this.router.navigate([this.groupDataService.getGroupRegistryRouterLink()]);
   }
 
   /**

src/app/core/eperson/group-data.service.ts

@@ -255,4 +255,12 @@ export class GroupDataService extends DataService<Group> {
     });
   }
 
+  public getGroupRegistryRouterLink(): string {
+    return '/admin/access-control/groups';
+  }
+
+  public getGroupEditPageRouterLink(groupId: string): string {
+    return '/admin/access-control/groups/' + groupId;
+  }
+
 }