fix(contributors): updated contributors table with see more

Author: nsemets

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,6 +158,10 @@ export class ProjectContributorsStepComponent {
     this.stepChange.emit(this.targetStepValue());
   }
 
+  loadMoreContributors(): void {
+    this.actions.loadMoreContributors(this.projectId(), ResourceType.Project);
+  }
+
   private openAddContributorDialog() {
     const addedContributorIds = this.projectContributors().map((x) => x.userId);
 

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';
@@ -60,7 +61,9 @@ import {
   GetRequestAccessContributors,
   GetResourceDetails,
   GetResourceWithChildren,
+  LoadMoreContributors,
   RejectRequestAccess,
+  ResetContributorsState,
   UpdateBibliographyFilter,
   UpdateContributorsSearchValue,
   UpdatePermissionFilter,
@@ -87,7 +90,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);
@@ -123,14 +126,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(),
   }));
 
@@ -153,6 +157,7 @@ export class ContributorsComponent implements OnInit {
     getViewOnlyLinks: FetchViewOnlyLinks,
     getResourceDetails: GetResourceDetails,
     getContributors: GetAllContributors,
+    loadMoreContributors: LoadMoreContributors,
     updateSearchValue: UpdateContributorsSearchValue,
     updatePermissionFilter: UpdatePermissionFilter,
     updateBibliographyFilter: UpdateBibliographyFilter,
@@ -166,6 +171,7 @@ export class ContributorsComponent implements OnInit {
     acceptRequestAccess: AcceptRequestAccess,
     rejectRequestAccess: RejectRequestAccess,
     getResourceWithChildren: GetResourceWithChildren,
+    resetContributorsState: ResetContributorsState,
   });
 
   get hasChanges(): boolean {
@@ -187,6 +193,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))
@@ -383,11 +393,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/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) {

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

@@ -4,7 +4,6 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { TablePageEvent } from 'primeng/table';
 
 import { filter } from 'rxjs';
 
@@ -41,6 +40,7 @@ import {
   ContributorsSelectors,
   DeleteContributor,
   GetAllContributors,
+  LoadMoreContributors,
   UpdateBibliographyFilter,
   UpdateContributorsSearchValue,
   UpdatePermissionFilter,
@@ -70,16 +70,17 @@ export class ContributorsDialogComponent implements OnInit {
   contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
   hasAdminAccess = select(MetadataSelectors.hasAdminAccess);
   contributors = signal<ContributorModel[]>([]);
-  page = select(ContributorsSelectors.getContributorsPageNumber);
+  isLoadingMore = select(ContributorsSelectors.isContributorsLoadingMore);
   pageSize = select(ContributorsSelectors.getContributorsPageSize);
 
   currentUser = select(UserSelectors.getCurrentUser);
 
   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(),
   }));
 
@@ -92,6 +93,7 @@ export class ContributorsDialogComponent implements OnInit {
     addContributor: AddContributor,
     bulkAddContributors: BulkAddContributors,
     bulkUpdateContributors: BulkUpdateContributors,
+    loadMoreContributors: LoadMoreContributors,
   });
 
   private readonly resourceType: ResourceType;
@@ -117,6 +119,7 @@ export class ContributorsDialogComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.actions.getContributors(this.resourceId, this.resourceType);
     this.setSearchSubscription();
   }
 
@@ -206,11 +209,8 @@ export class ContributorsDialogComponent 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);
   }
 
   cancel() {

src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-contributors/preprints-contributors.component.html

@@ -12,8 +12,9 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
     [(contributors)]="contributors"
     [tableParams]="tableParams()"
     [isLoading]="isContributorsLoading()"
+    [isLoadingMore]="isLoadingMore()"
     (remove)="removeContributor($event)"
-    (pageChanged)="pageChanged($event)"
+    (loadMore)="loadMoreContributors()"
   />
   <div class="flex justify-content-end mt-3">
     @if (hasChanges) {