[ANG-9238] P3.3 - Contributors displays are not displaying when there are > 10 listed

jest.config.js

@@ -50,10 +50,10 @@ module.exports = {
   extensionsToTreatAsEsm: ['.ts'],
   coverageThreshold: {
     global: {
-      branches: 24.1,
-      functions: 28.73,
-      lines: 56.52,
-      statements: 56.82,
+      branches: 29.01,
+      functions: 32.75,
+      lines: 60.28,
+      statements: 60.77,
     },
   },
   watchPathIgnorePatterns: [

src/app/core/constants/ngxs-states.constant.ts

@@ -6,7 +6,7 @@ import { FilesState } from '@osf/features/files/store';
 import { MetadataState } from '@osf/features/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
-import { AddonsState, CurrentResourceState, WikiState } from '@osf/shared/stores';
+import { AddonsState, ContributorsState, CurrentResourceState, WikiState } from '@osf/shared/stores';
 import { BannersState } from '@osf/shared/stores/banners';
 import { GlobalSearchState } from '@shared/stores/global-search';
 import { InstitutionsState } from '@shared/stores/institutions';
@@ -36,4 +36,5 @@ export const STATES = [
   GlobalSearchState,
   BannersState,
   LinkedProjectsState,
+  ContributorsState,
 ];

src/app/features/collections/collections.routes.ts

@@ -6,14 +6,7 @@ import { authGuard } from '@osf/core/guards';
 import { AddToCollectionState } from '@osf/features/collections/store/add-to-collection';
 import { CollectionsModerationState } from '@osf/features/moderation/store/collections-moderation';
 import { ConfirmLeavingGuard } from '@shared/guards';
-import {
-  BookmarksState,
-  CitationsState,
-  ContributorsState,
-  NodeLinksState,
-  ProjectsState,
-  SubjectsState,
-} from '@shared/stores';
+import { BookmarksState, CitationsState, NodeLinksState, ProjectsState, SubjectsState } from '@shared/stores';
 import { CollectionsState } from '@shared/stores/collections';
 
 export const collectionsRoutes: Routes = [
@@ -47,7 +40,7 @@ export const collectionsRoutes: Routes = [
           import('@osf/features/collections/components/add-to-collection/add-to-collection.component').then(
             (mod) => mod.AddToCollectionComponent
           ),
-        providers: [provideStates([ProjectsState, CollectionsState, AddToCollectionState, ContributorsState])],
+        providers: [provideStates([ProjectsState, CollectionsState, AddToCollectionState])],
         canActivate: [authGuard],
         canDeactivate: [ConfirmLeavingGuard],
       },

src/app/features/collections/components/add-to-collection/add-to-collection.component.html

@@ -32,6 +32,7 @@ <h1 class="collections-heading flex align-items-center">{{ collectionProvider()?
         />
 
         <osf-project-contributors-step
+          [projectId]="selectedProject()?.id"
           [stepperActiveValue]="stepperActiveValue()"
           [targetStepValue]="AddToCollectionSteps.ProjectContributors"
           [isDisabled]="isProjectContributorsDisabled()"

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.html

@@ -42,7 +42,9 @@ <h3>{{ 'collections.addToCollection.projectContributors' | translate }}</h3>
           [(contributors)]="projectContributors"
           [tableParams]="tableParams()"
           [isLoading]="isContributorsLoading()"
+          [isLoadingMore]="isLoadingMore()"
           (remove)="handleRemoveContributor($event)"
+          (loadMore)="loadMoreContributors()"
         ></osf-contributors-table>
 
         <div class="flex justify-content-end gap-3 mt-4 w-full">

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.ts

@@ -40,6 +40,7 @@ import {
   BulkUpdateContributors,
   ContributorsSelectors,
   DeleteContributor,
+  LoadMoreContributors,
   ProjectsSelectors,
 } from '@osf/shared/stores';
 
@@ -61,20 +62,26 @@ export class ProjectContributorsStepComponent {
   readonly contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
   readonly selectedProject = select(ProjectsSelectors.getSelectedProject);
   readonly currentUser = select(UserSelectors.getCurrentUser);
+  isLoadingMore = select(ContributorsSelectors.isContributorsLoadingMore);
 
   private initialContributors = select(ContributorsSelectors.getContributors);
   readonly projectContributors = signal<ContributorModel[]>([]);
+  pageSize = select(ContributorsSelectors.getContributorsPageSize);
 
   readonly tableParams = computed<TableParameters>(() => ({
     ...DEFAULT_TABLE_PARAMS,
     totalRecords: this.contributorsTotalCount(),
-    paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+    paginator: false,
+    scrollable: true,
+    firstRowIndex: 0,
+    rows: this.pageSize(),
   }));
 
   stepperActiveValue = input.required<number>();
   targetStepValue = input.required<number>();
   isDisabled = input.required<boolean>();
   isProjectMetadataSaved = input<boolean>(false);
+  projectId = input<string | undefined>();
 
   stepChange = output<number>();
   contributorsSaved = output<void>();
@@ -84,6 +91,7 @@ export class ProjectContributorsStepComponent {
     bulkAddContributors: BulkAddContributors,
     bulkUpdateContributors: BulkUpdateContributors,
     deleteContributor: DeleteContributor,
+    loadMoreContributors: LoadMoreContributors,
   });
 
   constructor() {
@@ -150,14 +158,15 @@ export class ProjectContributorsStepComponent {
     this.stepChange.emit(this.targetStepValue());
   }
 
-  private openAddContributorDialog() {
-    const addedContributorIds = this.projectContributors().map((x) => x.userId);
+  loadMoreContributors(): void {
+    this.actions.loadMoreContributors(this.projectId(), ResourceType.Project);
+  }
 
+  private openAddContributorDialog() {
     this.customDialogService
       .open(AddContributorDialogComponent, {
         header: 'project.contributors.addDialog.addRegisteredContributor',
         width: '448px',
-        data: addedContributorIds,
       })
       .onClose.pipe(
         filter((res: ContributorDialogAddModel) => !!res),

src/app/features/contributors/contributors.component.html

@@ -63,14 +63,15 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.contributors' | translate }
     class="w-full"
     [(contributors)]="contributors"
     [isLoading]="isContributorsLoading()"
+    [isLoadingMore]="isLoadingMore()"
     [tableParams]="tableParams()"
     [hasAdminAccess]="hasAdminAccess()"
     [currentUserId]="currentUser()?.id"
     [showCurator]="true"
     [showInfo]="true"
     [resourceType]="resourceType()"
     (remove)="removeContributor($event)"
-    (pageChanged)="pageChanged($event)"
+    (loadMore)="loadMoreContributors()"
   ></osf-contributors-table>
 
   @if (hasChanges) {

src/app/features/contributors/contributors.component.ts

@@ -4,7 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Select } from 'primeng/select';
-import { TableModule, TablePageEvent } from 'primeng/table';
+import { TableModule } from 'primeng/table';
 
 import { debounceTime, distinctUntilChanged, filter, map, of, switchMap } from 'rxjs';
 
@@ -15,6 +15,7 @@ import {
   DestroyRef,
   effect,
   inject,
+  OnDestroy,
   OnInit,
   signal,
 } from '@angular/core';
@@ -61,7 +62,9 @@ import {
   GetRequestAccessContributors,
   GetResourceDetails,
   GetResourceWithChildren,
+  LoadMoreContributors,
   RejectRequestAccess,
+  ResetContributorsState,
   UpdateBibliographyFilter,
   UpdateContributorsSearchValue,
   UpdatePermissionFilter,
@@ -88,7 +91,7 @@ import { ResourceInfoModel } from './models';
   styleUrl: './contributors.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ContributorsComponent implements OnInit {
+export class ContributorsComponent implements OnInit, OnDestroy {
   searchControl = new FormControl<string>('');
 
   readonly destroyRef = inject(DestroyRef);
@@ -124,14 +127,15 @@ export class ContributorsComponent implements OnInit {
   readonly hasAdminAccess = select(CurrentResourceSelectors.hasResourceAdminAccess);
   readonly resourceAccessRequestEnabled = select(CurrentResourceSelectors.resourceAccessRequestEnabled);
   readonly currentUser = select(UserSelectors.getCurrentUser);
-  page = select(ContributorsSelectors.getContributorsPageNumber);
   pageSize = select(ContributorsSelectors.getContributorsPageSize);
+  isLoadingMore = select(ContributorsSelectors.isContributorsLoadingMore);
 
   readonly tableParams = computed<TableParameters>(() => ({
     ...DEFAULT_TABLE_PARAMS,
     totalRecords: this.contributorsTotalCount(),
-    paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
-    firstRowIndex: (this.page() - 1) * this.pageSize(),
+    paginator: false,
+    scrollable: true,
+    firstRowIndex: 0,
     rows: this.pageSize(),
   }));
 
@@ -154,6 +158,7 @@ export class ContributorsComponent implements OnInit {
     getViewOnlyLinks: FetchViewOnlyLinks,
     getResourceDetails: GetResourceDetails,
     getContributors: GetAllContributors,
+    loadMoreContributors: LoadMoreContributors,
     updateSearchValue: UpdateContributorsSearchValue,
     updatePermissionFilter: UpdatePermissionFilter,
     updateBibliographyFilter: UpdateBibliographyFilter,
@@ -168,6 +173,7 @@ export class ContributorsComponent implements OnInit {
     acceptRequestAccess: AcceptRequestAccess,
     rejectRequestAccess: RejectRequestAccess,
     getResourceWithChildren: GetResourceWithChildren,
+    resetContributorsState: ResetContributorsState,
   });
 
   get hasChanges(): boolean {
@@ -189,6 +195,10 @@ export class ContributorsComponent implements OnInit {
     this.setSearchSubscription();
   }
 
+  ngOnDestroy(): void {
+    this.actions.resetContributorsState();
+  }
+
   private setSearchSubscription() {
     this.searchControl.valueChanges
       .pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
@@ -247,7 +257,6 @@ export class ContributorsComponent implements OnInit {
   }
 
   openAddContributorDialog() {
-    const addedContributorIds = this.initialContributors().map((x) => x.userId);
     const resourceDetails = this.resourceDetails();
     const resourceId = this.resourceId();
     const rootParentId = resourceDetails.rootParentId ?? resourceId;
@@ -267,7 +276,6 @@ export class ContributorsComponent implements OnInit {
             header: 'project.contributors.addDialog.addRegisteredContributor',
             width: '448px',
             data: {
-              addedContributorIds,
               components,
               resourceName: resourceDetails.title,
               parentResourceName: resourceDetails.parent?.title,
@@ -401,11 +409,8 @@ export class ContributorsComponent implements OnInit {
     });
   }
 
-  pageChanged(event: TablePageEvent) {
-    const page = Math.floor(event.first / event.rows) + 1;
-    const pageSize = event.rows;
-
-    this.actions.getContributors(this.resourceId(), this.resourceType(), page, pageSize);
+  loadMoreContributors(): void {
+    this.actions.loadMoreContributors(this.resourceId(), this.resourceType());
   }
 
   createViewLink() {

src/app/features/metadata/components/metadata-contributors/metadata-contributors.component.html

@@ -12,9 +12,14 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
     }
   </div>
 
-  @if (contributors()) {
-    <div class="inline-flex flex-wrap gap-1 line-height-2 mt-4">
-      <osf-contributors-list [contributors]="contributors()"></osf-contributors-list>
+  @if (contributors().length) {
+    <div class="flex mt-4">
+      <osf-contributors-list
+        [contributors]="contributors()"
+        [isLoading]="isLoading()"
+        [hasLoadMore]="hasMoreContributors()"
+        (loadMoreContributors)="loadMoreContributors.emit()"
+      ></osf-contributors-list>
     </div>
   }
 </p-card>

src/app/features/metadata/components/metadata-contributors/metadata-contributors.component.ts

@@ -15,7 +15,11 @@ import { ContributorModel } from '@osf/shared/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MetadataContributorsComponent {
-  openEditContributorDialog = output<void>();
   contributors = input<ContributorModel[]>([]);
+  isLoading = input(false);
+  hasMoreContributors = input(false);
   readonly = input<boolean>(false);
+
+  openEditContributorDialog = output<void>();
+  loadMoreContributors = output<void>();
 }

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.html

@@ -19,12 +19,13 @@
     [(contributors)]="contributors"
     [tableParams]="tableParams()"
     [isLoading]="isLoading()"
+    [isLoadingMore]="isLoadingMore()"
     [showEmployment]="false"
     [showEducation]="false"
     [hasAdminAccess]="hasAdminAccess()"
     [currentUserId]="currentUser()?.id"
     (remove)="removeContributor($event)"
-    (pageChanged)="pageChanged($event)"
+    (loadMore)="loadMoreContributors()"
   ></osf-contributors-table>
 
   @if (hasChanges) {