[CST-11178][CST-11179] fixed pagination for relationship management

src/app/shared/correction-suggestion/correction-types/manage-relation-correction-type/manage-relation-correction-type.component.html

@@ -11,26 +11,28 @@
         [placeholder]="'correction-type.manage-relation.search.placeholder' | translate" aria-label="" aria-describedby="">
       <div class="input-group-append">
         <button type="button" class="btn btn-outline-secondary" [disabled]="projectTitle === ''"
-          (click)="projectTitle = ''">{{('correction-type.manage-relation.search.btn.clear' | translate)}}</button>
+          (click)="projectTitle = ''; search('')">{{('correction-type.manage-relation.search.btn.clear' | translate)}}</button>
         <button type="button" class="btn btn-primary" [disabled]="projectTitle === ''"
           (click)="search(projectTitle)">{{('correction-type.manage-relation.search.btn.search' | translate)}}</button>
       </div>
     </div>
 
     <ds-loading *ngIf="(isLoading$ | async)" message="{{'loading.search-results' | translate}}"></ds-loading>
-    <ds-search-results *ngIf="(localEntitiesRD$ | async)?.payload?.page?.length > 0 && !(isLoading$ | async)"
+
-                        [searchResults]="(localEntitiesRD$ | async)"
+    <ds-viewable-collection
-                        [sortConfig]="this.searchOptions?.sort"
+      *ngIf="(localEntitiesRD$ | async)?.payload?.page?.length > 0 && !(isLoading$ | async)"
-                        [searchConfig]="this.searchOptions"
+      [config]="pagination"
+      [sortConfig]="searchOptions?.sort"
+      [objects]="(localEntitiesRD$ | async)"
+      [hideGear]="true"
       [selectable]="true"
-                        [disableHeader]="true"
-                        [hidePaginationDetail]="false"
       [selectionConfig]="{ repeatable: false, listId: entityListId }"
-                        [linkType]="linkTypes.ExternalLink"
+      [linkType]="linkTypes.Link"
       [context]="context"
+      [hidePaginationDetail]="false"
       (deselectObject)="deselectEntity()"
       (selectObject)="selectEntity($event)">
-    </ds-search-results>
+   </ds-viewable-collection>
 
     <div *ngIf="(localEntitiesRD$ | async)?.payload?.page?.length < 1 && !(isLoading$ | async)">
       <ds-alert [type]="'alert-info'">

src/app/shared/correction-suggestion/correction-types/manage-relation-correction-type/manage-relation-correction-type.component.ts

@@ -20,7 +20,7 @@ import { renderCorrectionFor } from '../../correction-suggestion-page.decorator'
 import { CorrectionType } from '../../../../core/submission/models/correction-type-mode.model';
 import { CorrectionTypeForms } from '../correction-type-forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable, of as observableOf, Subscription, switchMap } from 'rxjs';
+import { finalize, Observable, of as observableOf, Subscription, switchMap } from 'rxjs';
 import { hasValue, isNotEmpty } from '../../../empty.util';
 import { ListableObject } from '../../../object-collection/shared/listable-object.model';
 import { Item } from '../../../../core/shared/item.model';
@@ -57,7 +57,7 @@ export class ManageRelationCorrectionTypeComponent implements OnInit, OnDestroy
    */
   pagination: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'csmr',
-    pageSize: 3,
+    pageSize: 10,
     currentPage: 1
   });
 
@@ -99,11 +99,11 @@ export class ManageRelationCorrectionTypeComponent implements OnInit, OnDestroy
   /**
    * List ID for selecting local entities
    */
-  entityListId = 'correction-suggestion-manage-relation';
+  entityListId = 'csmr';
   /**
    * List ID for selecting local authorities
    */
-  authorityListId = 'correction-suggestion-manage-relation-authority';
+  authorityListId = 'csmr-authority';
 
   /**
  * ImportType enum
@@ -134,23 +134,33 @@ export class ManageRelationCorrectionTypeComponent implements OnInit, OnDestroy
    * Get the search results
    */
   ngOnInit(): void {
+    this.getData();
+  }
+
+  private getData(){
+    this.localEntitiesRD$ = this.aroute.queryParams
+    .pipe(
+      switchMap((params) => {
+        if (hasValue(params)) {
+          this.pagination = Object.assign(new PaginationComponentOptions(),{
+             ...this.pagination,
+            currentPage: params[`${this.pagination.id}.page`] || 1
+          });
+        }
+
         this.searchOptions = Object.assign(new PaginatedSearchOptions(
           {
             configuration: this.correctionType.discoveryConfiguration,
              scope: this.itemUuid,
-        pagination: this.pagination
+            pagination: this.pagination,
           }
         ));
 
-    this.localEntitiesRD$ = this.searchService.search(this.searchOptions);
+        return this.searchService.search(this.searchOptions).pipe(
-    this.subs.push(
-      this.localEntitiesRD$.pipe(
           getFirstCompletedRemoteData(),
-      ).subscribe(
+          finalize(() => this.isLoading$ = observableOf(false))
-        () => {
+        );
-          this.isLoading$ = observableOf(false);
+      })
-        }
-      )
     );
   }
 
@@ -169,6 +179,16 @@ export class ManageRelationCorrectionTypeComponent implements OnInit, OnDestroy
           pagination: this.pagination
         }
       ));
+    } else {
+      this.searchOptions = Object.assign(new PaginatedSearchOptions(
+        {
+          configuration: this.correctionType.discoveryConfiguration,
+          scope: this.itemUuid,
+          pagination: this.pagination
+        }
+      ));
+    }
+
     this.localEntitiesRD$ = this.searchService.search(this.searchOptions);
     this.subs.push(
       this.localEntitiesRD$.pipe(
@@ -178,7 +198,6 @@ export class ManageRelationCorrectionTypeComponent implements OnInit, OnDestroy
       )
     );
   }
-  }
 
   /**
    * Deselected a local entity