[ENG-9807] show contributors for moderation cards for registry and collections

src/app/features/moderation/components/collection-submission-item/collection-submission-item.component.html

@@ -2,53 +2,81 @@
 @let attributes = currentSubmissionAttributes();
 
 @if (action && attributes) {
-  <div class="p-3">
-    <div class="flex align-items-center gap-2">
-      <osf-icon
-        [class]="reviewStatusIcon[submission().reviewsState].value"
-        [iconClass]="reviewStatusIcon[submission().reviewsState].icon"
-      ></osf-icon>
+  <div class="resource">
+    <p-accordion (onOpen)="handleOpen()">
+      <p-accordion-panel value="0">
+        <p-accordion-header class="flex flex-row align-items-start gap-3 p-3">
+          <div osfStopPropagation class="flex align-items-baseline gap-2 font-normal">
+            <div class="p-3">
+              <div class="flex align-items-center gap-2">
+                <osf-icon
+                  [class]="reviewStatusIcon[submission().reviewsState].value"
+                  [iconClass]="reviewStatusIcon[submission().reviewsState].icon"
+                ></osf-icon>
 
-      <p-button class="link-btn-no-padding" link (onClick)="handleNavigation()" [label]="submission().title" />
-    </div>
+                <p-button
+                  class="link-btn-no-padding"
+                  link
+                  (onClick)="handleNavigation()"
+                  [label]="submission().title"
+                />
+              </div>
 
-    <p class="flex flex-wrap gap-1 mt-2">
-      @switch (action.toState) {
-        @case (SubmissionReviewStatus.Pending) {
-          <span class="capitalize">{{ 'moderation.submissionReview.submitted' | translate }}</span>
-        }
-        @case (SubmissionReviewStatus.Accepted) {
-          @if (!collectionProvider()?.reviewsWorkflow) {
-            <span class="capitalize">{{ 'moderation.submissionReview.submitted' | translate }}</span>
-          } @else {
-            <span class="capitalize">{{ 'moderation.submissionReview.accepted' | translate }}</span>
-          }
-        }
-        @case (SubmissionReviewStatus.Rejected) {
-          <span class="capitalize">{{ 'moderation.submissionReview.rejected' | translate }}</span>
-        }
-        @case (SubmissionReviewStatus.Removed) {
-          <span class="capitalize">{{ 'moderation.submissionReview.withdrawn' | translate }}</span>
-        }
-      }
-      <span>{{ action.dateCreated | dateAgo }}</span>
-      <span>{{ 'moderation.submissionReview.by' | translate }}</span>
-      <span>{{ action.createdBy }}</span>
-    </p>
+              <p class="flex flex-wrap gap-1 mt-2">
+                @switch (action.toState) {
+                  @case (SubmissionReviewStatus.Pending) {
+                    <span class="capitalize">{{ 'moderation.submissionReview.submitted' | translate }}</span>
+                  }
+                  @case (SubmissionReviewStatus.Accepted) {
+                    @if (!collectionProvider()?.reviewsWorkflow) {
+                      <span class="capitalize">{{ 'moderation.submissionReview.submitted' | translate }}</span>
+                    } @else {
+                      <span class="capitalize">{{ 'moderation.submissionReview.accepted' | translate }}</span>
+                    }
+                  }
+                  @case (SubmissionReviewStatus.Rejected) {
+                    <span class="capitalize">{{ 'moderation.submissionReview.rejected' | translate }}</span>
+                  }
+                  @case (SubmissionReviewStatus.Removed) {
+                    <span class="capitalize">{{ 'moderation.submissionReview.withdrawn' | translate }}</span>
+                  }
+                }
+                <span>{{ action.dateCreated | dateAgo }}</span>
+                <span>{{ 'moderation.submissionReview.by' | translate }}</span>
+                <span>{{ action.createdBy }}</span>
+              </p>
 
-    <div class="flex mt-2 flex-wrap">
-      @for (attribute of attributes; track attribute.key) {
-        @if (!$first) {
-          <span class="mx-1 flex align-items-start">|</span>
-        }
-        <p class="font-normal">
-          <span class="font-bold">{{ attribute.label }}:</span> {{ attribute.value }}
-        </p>
-      }
-    </div>
+              <div class="flex mt-2 flex-wrap">
+                @for (attribute of attributes; track attribute.key) {
+                  @if (!$first) {
+                    <span class="mx-1 flex align-items-start">|</span>
+                  }
+                  <p class="font-normal">
+                    <span class="font-bold">{{ attribute.label }}:</span> {{ attribute.value }}
+                  </p>
+                }
+              </div>
 
-    @if (action.comment) {
-      <osf-truncated-text class="block font-italic mt-2" [text]="action.comment" />
-    }
+              @if (action.comment) {
+                <osf-truncated-text class="block font-italic mt-2" [text]="action.comment" />
+              }
+            </div>
+          </div>
+        </p-accordion-header>
+
+        <p-accordion-content>
+          <div class="flex align-content-start gap-1 p-3 pt-0 ml-3">
+            <p>{{ 'common.labels.contributors' | translate }}:</p>
+            <osf-contributors-list
+              [contributors]="submission().contributors!"
+              [isLoading]="!!submission().contributorsLoading"
+              [hasLoadMore]="hasMoreContributors()"
+              (loadMoreContributors)="loadMoreContributors.emit()"
+            >
+            </osf-contributors-list>
+          </div>
+        </p-accordion-content>
+      </p-accordion-panel>
+    </p-accordion>
   </div>
 }

src/app/features/moderation/components/collection-submission-item/collection-submission-item.component.ts

@@ -2,12 +2,14 @@ import { select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
 import { Button } from 'primeng/button';
 
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { collectionFilterNames } from '@osf/features/collections/constants';
+import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
 import { TruncatedTextComponent } from '@osf/shared/components/truncated-text/truncated-text.component';
 import { CollectionSubmissionWithGuid } from '@osf/shared/models/collections/collections.models';
@@ -19,7 +21,18 @@ import { SubmissionReviewStatus } from '../../enums';
 
 @Component({
   selector: 'osf-submission-item',
-  imports: [TranslatePipe, IconComponent, DateAgoPipe, Button, TruncatedTextComponent],
+  imports: [
+    TranslatePipe,
+    IconComponent,
+    DateAgoPipe,
+    Button,
+    TruncatedTextComponent,
+    Accordion,
+    AccordionPanel,
+    AccordionHeader,
+    AccordionContent,
+    ContributorsListComponent,
+  ],
   templateUrl: './collection-submission-item.component.html',
   styleUrl: './collection-submission-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,7 +42,8 @@ export class CollectionSubmissionItemComponent {
   private activatedRoute = inject(ActivatedRoute);
 
   submission = input.required<CollectionSubmissionWithGuid>();
-
+  loadContributors = output<void>();
+  loadMoreContributors = output<void>();
   collectionProvider = select(CollectionsSelectors.getCollectionProvider);
 
   readonly reviewStatusIcon = ReviewStatusIcon;
@@ -55,6 +69,15 @@ export class CollectionSubmissionItemComponent {
       .filter((attribute) => attribute.value);
   });
 
+  hasMoreContributors = computed(() => {
+    const submission = this.submission();
+    if (submission.contributors && submission.totalContributors) {
+      return submission.contributors.length < submission.totalContributors;
+    }
+
+    return false;
+  });
+
   handleNavigation() {
     const currentStatus = this.activatedRoute.snapshot.queryParams['status'];
     const queryParams = currentStatus ? { status: currentStatus, mode: 'moderation' } : {};
@@ -68,4 +91,8 @@ export class CollectionSubmissionItemComponent {
 
     window.open(url, '_blank');
   }
+
+  handleOpen() {
+    this.loadContributors.emit();
+  }
 }

src/app/features/moderation/components/collection-submissions-list/collection-submissions-list.component.html

@@ -2,7 +2,12 @@
   <div class="submission-container mt-5">
     @for (item of submissions(); track $index) {
       <div class="submission-item">
-        <osf-submission-item [submission]="item"></osf-submission-item>
+        <osf-submission-item
+          [submission]="item"
+          (loadContributors)="loadContributors(item)"
+          (loadMoreContributors)="loadMoreContributors(item)"
+        >
+        </osf-submission-item>
       </div>
     }
   </div>

src/app/features/moderation/components/collection-submissions-list/collection-submissions-list.component.ts

@@ -1,9 +1,15 @@
-import { select } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import {
+  GetCollectionSubmissionContributors,
+  LoadMoreCollectionSubmissionContributors,
+} from '@osf/features/moderation/store/collections-moderation';
+import { CollectionSubmissionWithGuid } from '@shared/models/collections/collections.models';
+
 import { CollectionsModerationSelectors } from '../../store/collections-moderation';
 import { CollectionSubmissionItemComponent } from '../collection-submission-item/collection-submission-item.component';
 
@@ -16,4 +22,17 @@ import { CollectionSubmissionItemComponent } from '../collection-submission-item
 })
 export class CollectionSubmissionsListComponent {
   submissions = select(CollectionsModerationSelectors.getCollectionSubmissions);
+
+  readonly actions = createDispatchMap({
+    getCollectionSubmissionContributors: GetCollectionSubmissionContributors,
+    loadMoreCollectionSubmissionContributors: LoadMoreCollectionSubmissionContributors,
+  });
+
+  loadContributors(item: CollectionSubmissionWithGuid) {
+    this.actions.getCollectionSubmissionContributors(item.id, 1);
+  }
+
+  loadMoreContributors(item: CollectionSubmissionWithGuid) {
+    this.actions.loadMoreCollectionSubmissionContributors(item.id);
+  }
 }

src/app/features/moderation/components/registry-pending-submissions/registry-pending-submissions.component.html

@@ -39,6 +39,8 @@
             [submission]="item"
             [status]="selectedReviewOption()"
             (selected)="navigateToRegistration(item)"
+            (loadContributors)="loadContributors(item)"
+            (loadMoreContributors)="loadMoreContributors(item)"
           ></osf-registry-submission-item>
         </div>
       }

src/app/features/moderation/components/registry-pending-submissions/registry-pending-submissions.component.ts

@@ -24,7 +24,12 @@ import { Primitive } from '@osf/shared/helpers/types.helper';
 import { PENDING_SUBMISSION_REVIEW_OPTIONS, REGISTRY_SORT_OPTIONS } from '../../constants';
 import { RegistrySort, SubmissionReviewStatus } from '../../enums';
 import { RegistryModeration } from '../../models';
-import { GetRegistrySubmissions, RegistryModerationSelectors } from '../../store/registry-moderation';
+import {
+  GetRegistrySubmissionContributors,
+  GetRegistrySubmissions,
+  LoadMoreRegistrySubmissionContributors,
+  RegistryModerationSelectors,
+} from '../../store/registry-moderation';
 import { RegistrySubmissionItemComponent } from '../registry-submission-item/registry-submission-item.component';
 
 @Component({
@@ -54,7 +59,11 @@ export class RegistryPendingSubmissionsComponent implements OnInit {
     this.route.parent?.params.pipe(map((params) => params['providerId'])) ?? of(undefined)
   );
 
-  readonly actions = createDispatchMap({ getRegistrySubmissions: GetRegistrySubmissions });
+  readonly actions = createDispatchMap({
+    getRegistrySubmissions: GetRegistrySubmissions,
+    getRegistrySubmissionContributors: GetRegistrySubmissionContributors,
+    loadMoreRegistrySubmissionContributors: LoadMoreRegistrySubmissionContributors,
+  });
 
   readonly submissions = select(RegistryModerationSelectors.getRegistrySubmissions);
   readonly isLoading = select(RegistryModerationSelectors.areRegistrySubmissionLoading);
@@ -112,6 +121,14 @@ export class RegistryPendingSubmissionsComponent implements OnInit {
     window.open(url, '_blank');
   }
 
+  loadContributors(item: RegistryModeration) {
+    this.actions.getRegistrySubmissionContributors(item.id);
+  }
+
+  loadMoreContributors(item: RegistryModeration) {
+    this.actions.loadMoreRegistrySubmissionContributors(item.id);
+  }
+
   private getStatusFromQueryParams() {
     const queryParams = this.route.snapshot.queryParams;
     const statusValues = Object.values(SubmissionReviewStatus);