Fix for User profile (/profile): only 20 group memberships shown instead of all

src/app/profile-page/profile-page.component.html

@@ -33,13 +33,29 @@ <h1>{{'profile.title' | translate}}</h1>
       <button class="btn btn-primary" (click)="updateProfile()"><i class="fas fa-edit"></i> {{'profile.form.submit' | translate}}</button>
     </div>
 
-    <ng-container *ngVar="(groupsRD$ | async)?.payload?.page as groups">
-      <div *ngIf="groups?.length > 0">
-        <h2 class="mt-4">{{'profile.groups.head' | translate}}</h2>
-        <ul class="list-group list-group-flush">
-          <li *ngFor="let group of groups" class="list-group-item">{{ dsoNameService.getName(group) }}</li>
-        </ul>
-      </div>
+    <ng-container *ngIf="(groupsRD$ | async) as groupsRD;">
+      <ng-container *ngTemplateOutlet="groupsRD?.isLoading ? loader : content"></ng-container>
+      <ng-template #content>
+        <ds-pagination *ngIf="groupsRD?.payload"
+                       [hideGear]="true"
+                       [hidePagerWhenSinglePage]="true"
+                       [hidePaginationDetail]="true"
+                       [paginationOptions]="optionsGroupsPagination"
+                       [collectionSize]="groupsRD?.payload?.totalElements">
+          <ng-container *ngIf="groupsRD?.payload?.page as groups">
+            <div *ngIf="groups?.length > 0">
+              <h2 class="mt-4">{{ 'profile.groups.head' | translate }}</h2>
+              <ul class="list-group list-group-flush">
+                <li *ngFor="let group of groups" class="list-group-item">{{ dsoNameService.getName(group) }}</li>
+              </ul>
+            </div>
+          </ng-container>
+        </ds-pagination>
+      </ng-template>
+      <ng-template #loader>
+        <ds-loading [showMessage]="false"></ds-loading>
+      </ng-template>
+      <ds-error *ngIf="groupsRD?.hasFailed" message="{{ 'error.profile-groups' | translate }}"></ds-error>
     </ng-container>
 
     <ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups">

src/app/profile-page/profile-page.component.spec.ts

@@ -1,3 +1,4 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
@@ -29,7 +30,10 @@ import { EPersonDataService } from '../core/eperson/eperson-data.service';
 import { EPerson } from '../core/eperson/models/eperson.model';
 import { ConfigurationProperty } from '../core/shared/configuration-property.model';
 import { SuggestionsNotificationComponent } from '../notifications/suggestions-notification/suggestions-notification.component';
+import { ErrorComponent } from '../shared/error/error.component';
+import { ThemedLoadingComponent } from '../shared/loading/themed-loading.component';
 import { NotificationsService } from '../shared/notifications/notifications.service';
+import { PaginationComponent } from '../shared/pagination/pagination.component';
 import {
   createFailedRemoteDataObject$,
   createSuccessfulRemoteDataObject$,
@@ -134,6 +138,10 @@ describe('ProfilePageComponent', () => {
             ProfilePageSecurityFormComponent,
             ProfilePageResearcherFormComponent,
             SuggestionsNotificationComponent,
+            NgTemplateOutlet,
+            PaginationComponent,
+            ThemedLoadingComponent,
+            ErrorComponent,
           ],
         },
       })

src/app/profile-page/profile-page.component.ts

@@ -2,6 +2,7 @@ import {
   AsyncPipe,
   NgForOf,
   NgIf,
+  NgTemplateOutlet,
 } from '@angular/common';
 import {
   Component,
@@ -33,8 +34,10 @@ import { RemoteData } from '../core/data/remote-data';
 import { EPersonDataService } from '../core/eperson/eperson-data.service';
 import { EPerson } from '../core/eperson/models/eperson.model';
 import { Group } from '../core/eperson/models/group.model';
+import { PaginationService } from '../core/pagination/pagination.service';
 import { ConfigurationProperty } from '../core/shared/configuration-property.model';
 import {
+  getAllCompletedRemoteData,
   getAllSucceededRemoteData,
   getFirstCompletedRemoteData,
   getRemoteDataPayload,
@@ -44,7 +47,11 @@ import {
   hasValue,
   isNotEmpty,
 } from '../shared/empty.util';
+import { ErrorComponent } from '../shared/error/error.component';
+import { ThemedLoadingComponent } from '../shared/loading/themed-loading.component';
 import { NotificationsService } from '../shared/notifications/notifications.service';
+import { PaginationComponent } from '../shared/pagination/pagination.component';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { followLink } from '../shared/utils/follow-link-config.model';
 import { VarDirective } from '../shared/utils/var.directive';
 import { ThemedProfilePageMetadataFormComponent } from './profile-page-metadata-form/themed-profile-page-metadata-form.component';
@@ -65,6 +72,10 @@ import { ProfilePageSecurityFormComponent } from './profile-page-security-form/p
     NgIf,
     NgForOf,
     SuggestionsNotificationComponent,
+    NgTemplateOutlet,
+    PaginationComponent,
+    ThemedLoadingComponent,
+    ErrorComponent,
   ],
   standalone: true,
 })
@@ -122,6 +133,15 @@ export class ProfilePageComponent implements OnInit {
   private currentUser: EPerson;
   canChangePassword$: Observable<boolean>;
 
+  /**
+   * Default configuration for group pagination
+   **/
+  optionsGroupsPagination = Object.assign(new PaginationComponentOptions(),{
+    id: 'page_groups',
+    currentPage: 1,
+    pageSize: 20,
+  });
+
   isResearcherProfileEnabled$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   constructor(private authService: AuthService,
@@ -131,6 +151,7 @@ export class ProfilePageComponent implements OnInit {
               private authorizationService: AuthorizationDataService,
               private configurationService: ConfigurationDataService,
               public dsoNameService: DSONameService,
+              private paginationService: PaginationService,
   ) {
   }
 
@@ -142,7 +163,18 @@ export class ProfilePageComponent implements OnInit {
       getRemoteDataPayload(),
       tap((user: EPerson) => this.currentUser = user),
     );
-    this.groupsRD$ = this.user$.pipe(switchMap((user: EPerson) => user.groups));
+    this.groupsRD$ = this.paginationService.getCurrentPagination(this.optionsGroupsPagination.id, this.optionsGroupsPagination).pipe(
+      switchMap((pageOptions: PaginationComponentOptions) => {
+        return this.epersonService.findById(this.currentUser.id, true, true, followLink('groups',{
+          findListOptions: {
+            elementsPerPage: pageOptions.pageSize,
+            currentPage: pageOptions.currentPage,
+          } }));
+      }),
+      getAllCompletedRemoteData(),
+      getRemoteDataPayload(),
+      switchMap((user: EPerson) => user?.groups),
+    );
     this.canChangePassword$ = this.user$.pipe(switchMap((user: EPerson) => this.authorizationService.isAuthorized(FeatureID.CanChangePassword, user._links.self.href)));
     this.specialGroupsRD$ = this.authService.getSpecialGroupsFromAuthStatus();
 

src/assets/i18n/en.json5

@@ -1844,6 +1844,8 @@
 
   "error.recent-submissions": "Error fetching recent submissions",
 
+  "error.profile-groups": "Error retrieving profile groups",
+
   "error.search-results": "Error fetching search results",
 
   "error.invalid-search-query": "Search query is not valid. Please check <a href=\"https://solr.apache.org/guide/query-syntax-and-parsing.html\" target=\"_blank\">Solr query syntax</a> best practices for further information about this error.",

src/themes/custom/app/profile-page/profile-page.component.ts

@@ -11,6 +11,9 @@ import { ProfilePageComponent as BaseComponent } from '../../../../app/profile-p
 import { ThemedProfilePageMetadataFormComponent } from '../../../../app/profile-page/profile-page-metadata-form/themed-profile-page-metadata-form.component';
 import { ProfilePageResearcherFormComponent } from '../../../../app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component';
 import { ProfilePageSecurityFormComponent } from '../../../../app/profile-page/profile-page-security-form/profile-page-security-form.component';
+import { ErrorComponent } from '../../../../app/shared/error/error.component';
+import { ThemedLoadingComponent } from '../../../../app/shared/loading/themed-loading.component';
+import { PaginationComponent } from '../../../../app/shared/pagination/pagination.component';
 import { VarDirective } from '../../../../app/shared/utils/var.directive';
 
 @Component({
@@ -30,6 +33,9 @@ import { VarDirective } from '../../../../app/shared/utils/var.directive';
     NgIf,
     NgForOf,
     SuggestionsNotificationComponent,
+    PaginationComponent,
+    ThemedLoadingComponent,
+    ErrorComponent,
   ],
 })
 /**