[ENG-6719] Show Funder and Grant ID information on registries moderation cards

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

@@ -1,5 +1,5 @@
 <div class="resource">
-  <p-accordion (onOpen)="handleOpen()">
+  <p-accordion (onOpen)="handleOpen()" (onClose)="handleClose()">
     <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">
@@ -71,6 +71,15 @@ <h4>{{ submission().title }}</h4>
           </osf-contributors-list>
         </div>
       </p-accordion-content>
+
+      <p-accordion-content>
+        <div>
+          @if (isOpen()) {
+            <p>{{ submission().id }}</p>
+            <osf-funder-awards-list [registryId]="submission().id"></osf-funder-awards-list>
+          }
+        </div>
+      </p-accordion-content>
     </p-accordion-panel>
   </p-accordion>
 </div>

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

@@ -4,12 +4,13 @@ import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'pr
 import { Button } from 'primeng/button';
 
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
 
 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 { DateAgoPipe } from '@osf/shared/pipes/date-ago.pipe';
+import { FunderAwardsListComponent } from '@shared/funder-awards-list/funder-awards-list.component';
 
 import { REGISTRY_ACTION_LABEL, ReviewStatusIcon } from '../../constants';
 import { ActionStatus, SubmissionReviewStatus } from '../../enums';
@@ -29,6 +30,7 @@ import { RegistryModeration } from '../../models';
     AccordionHeader,
     AccordionContent,
     ContributorsListComponent,
+    FunderAwardsListComponent,
   ],
   templateUrl: './registry-submission-item.component.html',
   styleUrl: './registry-submission-item.component.scss',
@@ -39,6 +41,7 @@ export class RegistrySubmissionItemComponent {
   submission = input.required<RegistryModeration>();
   loadContributors = output<void>();
   loadMoreContributors = output<void>();
+  isOpen = signal<boolean>(false);
 
   selected = output<void>();
 
@@ -67,6 +70,11 @@ export class RegistrySubmissionItemComponent {
   });
 
   handleOpen() {
+    this.isOpen.set(true);
     this.loadContributors.emit();
   }
+
+  handleClose() {
+    this.isOpen.set(false);
+  }
 }

src/app/shared/funder-awards-list/funder-awards-list.component.html

@@ -0,0 +1,19 @@
+<div class="flex align-content-start gap-1 p-3 pt-0 ml-3">
+  @let funders = customItemMetadata()?.funders;
+  @if (funders?.length) {
+    <p>{{ 'resourceCard.labels.funderAwards' | translate }}</p>
+    <div class="flex flex-wrap gap-4">
+      @for (funder of funders; track $index) {
+        <a
+          [routerLink]="['/', registryId(), 'metadata', 'osf']"
+          class="font-bold block line-height-3 mb-3"
+          target="_blank"
+        >
+          <div>{{ funder.funderName }}</div>
+
+          <div>{{ funder.awardNumber }}</div>
+        </a>
+      }
+    </div>
+  }
+</div>

src/app/shared/funder-awards-list/funder-awards-list.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FunderAwardsListComponent } from './funder-awards-list.component';
+
+describe('FunderAwardsListComponent', () => {
+  let component: FunderAwardsListComponent;
+  let fixture: ComponentFixture<FunderAwardsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FunderAwardsListComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FunderAwardsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/funder-awards-list/funder-awards-list.component.ts

@@ -0,0 +1,30 @@
+import { Store } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component, effect, inject, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { GetCustomItemMetadata, MetadataSelectors } from '@osf/features/metadata/store';
+
+@Component({
+  selector: 'osf-funder-awards-list',
+  imports: [RouterLink, TranslatePipe],
+  templateUrl: './funder-awards-list.component.html',
+  styleUrl: './funder-awards-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FunderAwardsListComponent {
+  registryId = input<string | null>(null);
+  private store = inject(Store);
+  customItemMetadata = this.store.selectSignal(MetadataSelectors.getCustomItemMetadata);
+
+  constructor() {
+    effect(() => {
+      const registryId = this.registryId();
+      if (registryId) {
+        this.store.dispatch(new GetCustomItemMetadata(registryId));
+      }
+    });
+  }
+}

src/assets/i18n/en.json

@@ -2778,6 +2778,7 @@
       "withdrawn": "Withdrawn",
       "from": "From:",
       "funder": "Funder:",
+      "funderAwards": "Funder awards:",
       "resourceNature": "Resource type:",
       "dateCreated": "Date created",
       "dateModified": "Date modified",