fix(contributors): added see more for contributors list

Author: nsemets

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.ts

@@ -72,6 +72,7 @@ export class ContributorsDialogComponent implements OnInit {
   contributors = signal<ContributorModel[]>([]);
   isLoadingMore = select(ContributorsSelectors.isContributorsLoadingMore);
   pageSize = select(ContributorsSelectors.getContributorsPageSize);
+  changesMade = signal<boolean>(false);
 
   currentUser = select(UserSelectors.getCurrentUser);
 
@@ -150,9 +151,10 @@ export class ContributorsDialogComponent implements OnInit {
             this.actions
               .bulkAddContributors(this.resourceId, this.resourceType, res.data)
               .pipe(takeUntilDestroyed(this.destroyRef))
-              .subscribe(() =>
-                this.toastService.showSuccess('project.contributors.toastMessages.multipleAddSuccessMessage')
-              );
+              .subscribe(() => {
+                this.changesMade.set(true);
+                this.toastService.showSuccess('project.contributors.toastMessages.multipleAddSuccessMessage');
+              });
           }
         }
       });
@@ -175,7 +177,10 @@ export class ContributorsDialogComponent implements OnInit {
           const params = { name: res.data[0].fullName };
 
           this.actions.addContributor(this.resourceId, this.resourceType, res.data[0]).subscribe({
-            next: () => this.toastService.showSuccess('project.contributors.toastMessages.addSuccessMessage', params),
+            next: () => {
+              this.changesMade.set(true);
+              this.toastService.showSuccess('project.contributors.toastMessages.addSuccessMessage', params);
+            },
           });
         }
       });
@@ -195,12 +200,13 @@ export class ContributorsDialogComponent implements OnInit {
           .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe({
             next: () => {
+              this.changesMade.set(true);
               this.toastService.showSuccess('project.contributors.removeDialog.successMessage', {
                 name: contributor.fullName,
               });
 
               if (isDeletingSelf) {
-                this.dialogRef.close();
+                this.dialogRef.close(this.changesMade());
                 this.router.navigate(['/']);
               }
             },
@@ -218,7 +224,7 @@ export class ContributorsDialogComponent implements OnInit {
   }
 
   onClose(): void {
-    this.dialogRef.close();
+    this.dialogRef.close(this.changesMade());
   }
 
   onSave(): void {
@@ -227,8 +233,9 @@ export class ContributorsDialogComponent implements OnInit {
     this.actions
       .bulkUpdateContributors(this.resourceId, this.resourceType, updatedContributors)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() =>
-        this.toastService.showSuccess('project.contributors.toastMessages.multipleUpdateSuccessMessage')
-      );
+      .subscribe(() => {
+        this.changesMade.set(true);
+        this.toastService.showSuccess('project.contributors.toastMessages.multipleUpdateSuccessMessage');
+      });
   }
 }

src/app/features/metadata/metadata.component.html

@@ -38,7 +38,10 @@
         <osf-metadata-contributors
           (openEditContributorDialog)="openEditContributorDialog()"
           [contributors]="bibliographicContributors()"
+          [isLoading]="isContributorsLoading()"
+          [hasMoreContributors]="hasMoreContributors()"
           [readonly]="!hasWriteAccess()"
+          (loadMoreContributors)="handleLoadMoreContributors()"
         />
 
         <osf-metadata-resource-information

src/app/features/metadata/metadata.component.ts

@@ -28,8 +28,9 @@ import {
   FetchResourceInstitutions,
   FetchSelectedSubjects,
   FetchSubjects,
-  GetAllContributors,
+  GetBibliographicContributors,
   InstitutionsSelectors,
+  LoadMoreBibliographicContributors,
   SubjectsSelectors,
   UpdateContributorsSearchValue,
   UpdateResourceInstitutions,
@@ -124,8 +125,9 @@ export class MetadataComponent implements OnInit {
   metadata = select(MetadataSelectors.getResourceMetadata);
   isMetadataLoading = select(MetadataSelectors.getLoading);
   customItemMetadata = select(MetadataSelectors.getCustomItemMetadata);
-  bibliographicContributors = select(ContributorsSelectors.getBibliographicContributors);
-  isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
+  bibliographicContributors = select(ContributorsSelectors.getBibliographicContributorsList);
+  isContributorsLoading = select(ContributorsSelectors.isBibliographicContributorsLoading);
+  hasMoreContributors = select(ContributorsSelectors.hasMoreBibliographicContributors);
   cedarRecords = select(MetadataSelectors.getCedarRecords);
   cedarTemplates = select(MetadataSelectors.getCedarTemplates);
   selectedSubjects = select(SubjectsSelectors.getSelectedSubjects);
@@ -152,7 +154,8 @@ export class MetadataComponent implements OnInit {
     updateResourceLicense: UpdateResourceLicense,
     getCustomItemMetadata: GetCustomItemMetadata,
     updateCustomItemMetadata: UpdateCustomItemMetadata,
-    getContributors: GetAllContributors,
+    getContributors: GetBibliographicContributors,
+    loadMoreBibliographicContributors: LoadMoreBibliographicContributors,
     updateResourceInstitutions: UpdateResourceInstitutions,
     fetchResourceInstitutions: FetchResourceInstitutions,
     createDoi: CreateDoi,
@@ -172,7 +175,6 @@ export class MetadataComponent implements OnInit {
   isLoading = computed(
     () =>
       this.isMetadataLoading() ||
-      this.isContributorsLoading() ||
       this.areInstitutionsLoading() ||
       this.isSubmitting() ||
       this.areResourceInstitutionsSubmitting()
@@ -320,23 +322,24 @@ export class MetadataComponent implements OnInit {
     this.actions.updateMetadata(this.resourceId, this.resourceType(), { tags });
   }
 
+  handleLoadMoreContributors(): void {
+    this.actions.loadMoreBibliographicContributors(this.resourceId, this.resourceType());
+  }
+
   openEditContributorDialog(): void {
     this.customDialogService
       .open(ContributorsDialogComponent, {
         header: 'project.metadata.contributors.editContributors',
-        width: '600px',
+        width: '800px',
         data: {
           resourceId: this.resourceId,
           resourceType: this.resourceType(),
         },
       })
-      .onClose.subscribe((result) => {
-        if (result) {
-          this.actions.getResourceMetadata(this.resourceId, this.resourceType());
-          this.toastService.showSuccess('project.metadata.contributors.updateSucceed');
+      .onClose.subscribe((changesMade) => {
+        if (changesMade) {
+          this.actions.getContributors(this.resourceId, this.resourceType());
         }
-
-        this.actions.updateContributorsSearchValue(null);
       });
   }
 

src/app/features/preprints/components/preprint-details/general-information/general-information.component.html

@@ -7,11 +7,12 @@
         <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate }}</h3>
 
         <div class="flex flex-column gap-1 line-height-2 md:flex-row">
-          <osf-contributors-list [contributors]="bibliographicContributors()"></osf-contributors-list>
-
-          @if (areContributorsLoading()) {
-            <p-skeleton width="10rem" height="1.25rem" />
-          }
+          <osf-contributors-list
+            [contributors]="bibliographicContributors()"
+            [isLoading]="areContributorsLoading()"
+            [hasLoadMore]="hasMoreBibliographicContributors()"
+            (loadMoreContributors)="handleLoadMoreContributors()"
+          ></osf-contributors-list>
         </div>
       </section>
 

src/app/features/preprints/components/preprint-details/general-information/general-information.component.ts

@@ -22,8 +22,9 @@ import { ResourceType } from '@osf/shared/enums';
 import {
   ContributorsSelectors,
   FetchResourceInstitutions,
-  GetAllContributors,
+  GetBibliographicContributors,
   InstitutionsSelectors,
+  LoadMoreBibliographicContributors,
   ResetContributorsState,
 } from '@osf/shared/stores';
 
@@ -53,10 +54,11 @@ export class GeneralInformationComponent implements OnDestroy {
   readonly PreregLinkInfo = PreregLinkInfo;
 
   private actions = createDispatchMap({
-    getContributors: GetAllContributors,
+    getBibliographicContributors: GetBibliographicContributors,
     resetContributorsState: ResetContributorsState,
     fetchPreprintById: FetchPreprintById,
     fetchResourceInstitutions: FetchResourceInstitutions,
+    loadMoreBibliographicContributors: LoadMoreBibliographicContributors,
   });
 
   preprintProvider = input.required<PreprintProviderDetails | undefined>();
@@ -67,9 +69,9 @@ export class GeneralInformationComponent implements OnDestroy {
 
   affiliatedInstitutions = select(InstitutionsSelectors.getResourceInstitutions);
 
-  contributors = select(ContributorsSelectors.getContributors);
-  areContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
-  bibliographicContributors = computed(() => this.contributors().filter((contributor) => contributor.isBibliographic));
+  bibliographicContributors = select(ContributorsSelectors.getBibliographicContributorsList);
+  areContributorsLoading = select(ContributorsSelectors.isBibliographicContributorsLoading);
+  hasMoreBibliographicContributors = select(ContributorsSelectors.hasMoreBibliographicContributors);
 
   skeletonData = Array.from({ length: 5 }, () => null);
 
@@ -80,12 +82,16 @@ export class GeneralInformationComponent implements OnDestroy {
       const preprint = this.preprint();
       if (!preprint) return;
 
-      this.actions.getContributors(this.preprint()!.id, ResourceType.Preprint);
+      this.actions.getBibliographicContributors(this.preprint()!.id, ResourceType.Preprint);
       this.actions.fetchResourceInstitutions(this.preprint()!.id, ResourceType.Preprint);
     });
   }
 
   ngOnDestroy(): void {
     this.actions.resetContributorsState();
   }
+
+  handleLoadMoreContributors(): void {
+    this.actions.loadMoreBibliographicContributors(this.preprint()?.id, ResourceType.Preprint);
+  }
 }

src/app/features/preprints/components/preprint-details/preprint-tombstone/preprint-tombstone.component.html

@@ -13,11 +13,12 @@ <h3>{{ 'preprints.details.reasonForWithdrawal' | translate }}</h3>
         <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate }}</h3>
 
         <div class="flex flex-column gap-1 line-height-2 md:flex-row">
-          <osf-contributors-list [contributors]="bibliographicContributors()"></osf-contributors-list>
-
-          @if (areContributorsLoading()) {
-            <p-skeleton width="10rem" height="1.25rem" />
-          }
+          <osf-contributors-list
+            [contributors]="bibliographicContributors()"
+            [isLoading]="areContributorsLoading()"
+            [hasLoadMore]="hasMoreBibliographicContributors()"
+            (loadMoreContributors)="loadMoreContributors()"
+          ></osf-contributors-list>
         </div>
       </section>
 

src/app/features/preprints/components/preprint-details/preprint-tombstone/preprint-tombstone.component.ts

@@ -20,7 +20,8 @@ import { InterpolatePipe } from '@osf/shared/pipes';
 import {
   ContributorsSelectors,
   FetchSelectedSubjects,
-  GetAllContributors,
+  GetBibliographicContributors,
+  LoadMoreBibliographicContributors,
   ResetContributorsState,
   SubjectsSelectors,
 } from '@osf/shared/stores';
@@ -53,10 +54,11 @@ export class PreprintTombstoneComponent implements OnDestroy {
   readonly PreregLinkInfo = PreregLinkInfo;
 
   private actions = createDispatchMap({
-    getContributors: GetAllContributors,
+    getBibliographicContributors: GetBibliographicContributors,
     resetContributorsState: ResetContributorsState,
     fetchPreprintById: FetchPreprintById,
     fetchSubjects: FetchSelectedSubjects,
+    loadMoreBibliographicContributors: LoadMoreBibliographicContributors,
   });
   private router = inject(Router);
 
@@ -67,9 +69,9 @@ export class PreprintTombstoneComponent implements OnDestroy {
   preprint = select(PreprintSelectors.getPreprint);
   isPreprintLoading = select(PreprintSelectors.isPreprintLoading);
 
-  contributors = select(ContributorsSelectors.getContributors);
-  areContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
-  bibliographicContributors = computed(() => this.contributors().filter((contributor) => contributor.isBibliographic));
+  bibliographicContributors = select(ContributorsSelectors.getBibliographicContributorsList);
+  areContributorsLoading = select(ContributorsSelectors.isBibliographicContributorsLoading);
+  hasMoreBibliographicContributors = select(ContributorsSelectors.hasMoreBibliographicContributors);
   subjects = select(SubjectsSelectors.getSelectedSubjects);
   areSelectedSubjectsLoading = select(SubjectsSelectors.areSelectedSubjectsLoading);
 
@@ -88,7 +90,7 @@ export class PreprintTombstoneComponent implements OnDestroy {
       const preprint = this.preprint();
       if (!preprint) return;
 
-      this.actions.getContributors(this.preprint()!.id, ResourceType.Preprint);
+      this.actions.getBibliographicContributors(this.preprint()?.id, ResourceType.Preprint);
       this.actions.fetchSubjects(this.preprint()!.id, ResourceType.Preprint);
     });
   }
@@ -100,4 +102,8 @@ export class PreprintTombstoneComponent implements OnDestroy {
   tagClicked(tag: string) {
     this.router.navigate(['/search'], { queryParams: { search: tag } });
   }
+
+  loadMoreContributors(): void {
+    this.actions.loadMoreBibliographicContributors(this.preprint()?.id, ResourceType.Preprint);
+  }
 }

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

@@ -62,7 +62,12 @@ <h2>{{ 'preprints.preprintStepper.review.sections.metadata.title' | translate }}
     <section class="flex flex-column gap-2">
       <h3>{{ 'common.labels.contributors' | translate }}</h3>
 
-      <osf-contributors-list [contributors]="bibliographicContributors()"></osf-contributors-list>
+      <osf-contributors-list
+        [contributors]="bibliographicContributors()"
+        [isLoading]="areContributorsLoading()"
+        [hasLoadMore]="hasMoreBibliographicContributors()"
+        (loadMoreContributors)="loadMoreContributors()"
+      ></osf-contributors-list>
     </section>
 
     @if (affiliatedInstitutions().length) {