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

* Add - groups paginated on profile page

* Add - groups paginated on profile page

* Add - groups paginated on profile page

* Add - groups paginated on profile page

* Fix UPDATE - Add pagination message error and loader

* Update BRANCH

* Fix - LINT ERRORS

* Fix: Error declaring variable for group pagination

* Fix: Remove unnecessary translations for paging groups

* Fix: Lint erros

* Fix: Remove unnecessary translations

---------

Co-authored-by: VictorDuranEscire <victor@escire.lat>

Author: 2 people

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

@@ -32,13 +32,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.ts

@@ -9,7 +9,12 @@ import { RemoteData } from '../core/data/remote-data';
 import { PaginatedList } from '../core/data/paginated-list.model';
 import { filter, switchMap, tap } from 'rxjs/operators';
 import { EPersonDataService } from '../core/eperson/eperson-data.service';
-import { getAllSucceededRemoteData, getFirstCompletedRemoteData, getRemoteDataPayload } from '../core/shared/operators';
+import {
+  getAllCompletedRemoteData,
+  getAllSucceededRemoteData,
+  getFirstCompletedRemoteData,
+  getRemoteDataPayload
+} from '../core/shared/operators';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { followLink } from '../shared/utils/follow-link-config.model';
 import { AuthService } from '../core/auth/auth.service';
@@ -19,6 +24,8 @@ import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { ConfigurationDataService } from '../core/data/configuration-data.service';
 import { ConfigurationProperty } from '../core/shared/configuration-property.model';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
+import { PaginationService } from '../core/pagination/pagination.service';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
 @Component({
   selector: 'ds-profile-page',
@@ -79,6 +86,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,
@@ -88,6 +104,7 @@ export class ProfilePageComponent implements OnInit {
               private authorizationService: AuthorizationDataService,
               private configurationService: ConfigurationDataService,
               public dsoNameService: DSONameService,
+              private paginationService: PaginationService,
   ) {
   }
 
@@ -99,7 +116,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

@@ -1622,6 +1622,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.",