fix: sorting and pagination in works and research resources

see the issue for details

fixes issue #1110

src/app/core/record-research-resource/record-research-resource.service.ts

@@ -18,6 +18,7 @@ import { DEFAULT_PAGE_SIZE } from 'src/app/constants'
 })
 export class RecordResearchResourceService {
   researchResourcesSubject = new ReplaySubject<ResearchResourcesEndpoint>(1)
+  $research: ReplaySubject<ResearchResourcesEndpoint>
 
   headers = new HttpHeaders({
     'Access-Control-Allow-Origin': '*',
@@ -65,6 +66,12 @@ export class RecordResearchResourceService {
         )
         .subscribe()
     } else {
+      if (!this.$research) {
+        this.$research = new ReplaySubject(1)
+      } else if (!options.forceReload) {
+        return this.$research
+      }
+
       this._http
         .get<ResearchResourcesEndpoint>(
           environment.API_WEB +
@@ -78,6 +85,7 @@ export class RecordResearchResourceService {
             options.pageSize
         )
         .pipe(
+          retry(3),
           catchError((error) => this._errorHandler.handleError(error)),
           catchError(() => of({ groups: [] } as ResearchResourcesEndpoint)),
           map((data) => {
@@ -88,23 +96,16 @@ export class RecordResearchResourceService {
             return data
           }),
           tap((value) => {
-            this.researchResourcesSubject.next(value)
+            this.$research.next(value)
           })
         )
         .subscribe()
     }
-    return this.researchResourcesSubject.asObservable()
-  }
-
-  changeUserRecordContext(event: UserRecordOptions): void {
-    this.getResearchResourcePage(event).pipe(take(1)).subscribe()
+    return this.$research.asObservable()
   }
 
-  loadMore(offset: number, publicRecordId?: string) {
-    this.getResearchResourcePage({
-      offset,
-      publicRecordId,
-    })
+  changeUserRecordContext(event: UserRecordOptions): Observable<ResearchResourcesEndpoint> {
+    return this.getResearchResourcePage(event).pipe(take(1))
   }
 
   getResearchResourceById(putCode: string): Observable<ResearchResource> {

src/app/core/record-works/record-works.service.ts

@@ -130,8 +130,8 @@ export class RecordWorksService {
     }
   }
 
-  changeUserRecordContext(event: UserRecordOptions): void {
-    this.getWorks(event).pipe(take(1)).subscribe()
+  changeUserRecordContext(userRecordOptions: UserRecordOptions): Observable<WorksEndpoint> {
+    return this.getWorks(userRecordOptions).pipe(take(1))
   }
 
   /**

src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts

@@ -55,7 +55,6 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
   } = {}
 
   ngOrcidResearchResources = $localize`:@@researchResources.researchResources:Research resources`
-  offset: number
   isMobile: boolean
 
   paginationTotalAmountOfResearchResources: number
@@ -89,15 +88,12 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
 
   private getRecord() {
     this._record
-      .getRecord({
-        publicRecordId: this.isPublicRecord || undefined,
-      })
+      .getRecord({ publicRecordId: this.isPublicRecord })
       .pipe(takeUntil(this.$destroy))
       .subscribe((userRecord) => {
         if (!isEmpty(userRecord?.researchResources)) {
           this.paginationLoading = false
           this.researchResources = userRecord.researchResources
-          this.offset = userRecord.researchResources.offset
           this.total.emit(this.researchResources.groups.length)
           this.paginationTotalAmountOfResearchResources =
             userRecord.researchResources.totalGroups
@@ -109,23 +105,33 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
   }
 
   pageEvent(event: PageEvent) {
+    this.paginationLoading = true
     this.userRecordContext.offset = event.pageIndex * event.pageSize
     this.userRecordContext.pageSize = event.pageSize
     this.userRecordContext.publicRecordId = this.isPublicRecord
-    this._recordResearchResourceService.changeUserRecordContext(
-      this.userRecordContext
-    )
-    this.paginationLoading = true
+    this.loadResearchResources()
   }
 
   sortEvent(event: SortData) {
+    this.paginationLoading = true
     this.userRecordContext.publicRecordId = this.isPublicRecord
     this.userRecordContext.sort = event.type
     this.userRecordContext.sortAsc = event.direction === 'asc'
+    this.loadResearchResources()
+  }
+
+  loadResearchResources(): void {
+    if (
+      this.researchResources.totalGroups > this.researchResources.groups.length ||
+      this.paginationPageSize !== this.defaultPageSize
+    ) {
+      this.userRecordContext.forceReload = true
+    }
     this._recordResearchResourceService.changeUserRecordContext(
       this.userRecordContext
-    )
-    this.paginationLoading = true
+    ).subscribe(() => {
+      this.paginationLoading = false
+    })
   }
 
   expandedClicked(expanded: boolean) {

src/app/record/components/work-stack-group/work-stack-group.component.ts

@@ -125,15 +125,28 @@ export class WorkStackGroupComponent implements OnInit {
     this.userRecordContext.offset = event.pageIndex * event.pageSize
     this.userRecordContext.pageSize = event.pageSize
     this.userRecordContext.publicRecordId = this.isPublicRecord
-    this._works.changeUserRecordContext(this.userRecordContext)
+    this.loadWorks()
   }
 
   sortEvent(event: SortData) {
     this.paginationLoading = true
     this.userRecordContext.publicRecordId = this.isPublicRecord
     this.userRecordContext.sort = event.type
     this.userRecordContext.sortAsc = event.direction === 'asc'
+    this.loadWorks()
+  }
+
+  loadWorks(): void {
+    if (
+      this.workGroup.totalGroups > this.workGroup.groups.length ||
+      this.paginationPageSize !== this.defaultPageSize
+    ) {
+      this.userRecordContext.forceReload = true
+    }
     this._works.changeUserRecordContext(this.userRecordContext)
+      .subscribe(() => {
+        this.paginationLoading = false
+      })
   }
 
   combine() {