Feat/Project overview collections (#219)

* feat(project-overview-collections): added collections info to project overview page

* feat(project-overview-collections): fixed collection moderation bug

Author: rnastyuk

src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.ts

@@ -4,7 +4,7 @@ import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { collectionFilterNames } from '@osf/features/collections/constants';
-import { CollectionSubmission } from '@shared/models';
+import { CollectionSubmissionWithGuid } from '@shared/models';
 
 @Component({
   selector: 'osf-collections-search-result-card',
@@ -14,7 +14,7 @@ import { CollectionSubmission } from '@shared/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsSearchResultCardComponent {
-  cardItem = input.required<CollectionSubmission>();
+  cardItem = input.required<CollectionSubmissionWithGuid>();
 
   protected presentSubmissionAttributes = computed(() => {
     const item = this.cardItem();
@@ -23,7 +23,7 @@ export class CollectionsSearchResultCardComponent {
     return collectionFilterNames
       .map((attribute) => ({
         ...attribute,
-        value: item[attribute.key as keyof CollectionSubmission] as string,
+        value: item[attribute.key as keyof CollectionSubmissionWithGuid] as string,
       }))
       .filter((attribute) => attribute.value);
   });

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

@@ -32,7 +32,7 @@ import {
   SetPageNumber,
 } from '@shared/stores';
 
-import { SUBMISSION_REVIEW_OPTIONS } from '../../constants';
+import { COLLECTIONS_SUBMISSIONS_REVIEW_OPTIONS } from '../../constants';
 import { SubmissionReviewStatus } from '../../enums';
 import { CollectionSubmissionsListComponent } from '../collection-submissions-list/collection-submissions-list.component';
 
@@ -55,7 +55,7 @@ import { CollectionSubmissionsListComponent } from '../collection-submissions-li
 export class CollectionModerationSubmissionsComponent {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  readonly submissionReviewOptions = SUBMISSION_REVIEW_OPTIONS;
+  readonly submissionReviewOptions = COLLECTIONS_SUBMISSIONS_REVIEW_OPTIONS;
 
   protected collectionProvider = select(CollectionsSelectors.getCollectionProvider);
   protected isCollectionProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);

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

@@ -12,7 +12,7 @@ import { collectionFilterNames } from '@osf/features/collections/constants';
 import { SubmissionReviewStatus } from '@osf/features/moderation/enums';
 import { IconComponent } from '@osf/shared/components';
 import { DateAgoPipe } from '@osf/shared/pipes';
-import { CollectionSubmission } from '@shared/models';
+import { CollectionSubmissionWithGuid } from '@shared/models';
 import { CollectionsSelectors } from '@shared/stores';
 
 import { ReviewStatusIcon } from '../../constants';
@@ -28,7 +28,7 @@ import { ReviewStatusIcon } from '../../constants';
 export class CollectionSubmissionItemComponent {
   private router = inject(Router);
   private activatedRoute = inject(ActivatedRoute);
-  submission = input.required<CollectionSubmission>();
+  submission = input.required<CollectionSubmissionWithGuid>();
   collectionProvider = select(CollectionsSelectors.getCollectionProvider);
 
   protected readonly reviewStatusIcon = ReviewStatusIcon;
@@ -48,7 +48,7 @@ export class CollectionSubmissionItemComponent {
     return collectionFilterNames
       .map((attribute) => ({
         ...attribute,
-        value: item[attribute.key as keyof CollectionSubmission] as string,
+        value: item[attribute.key as keyof CollectionSubmissionWithGuid] as string,
       }))
       .filter((attribute) => attribute.value);
   });

src/app/features/moderation/constants/submission.const.ts

@@ -28,6 +28,33 @@ export const SUBMISSION_REVIEW_OPTIONS: SubmissionReviewOption[] = [
   },
 ];
 
+export const COLLECTIONS_SUBMISSIONS_REVIEW_OPTIONS: SubmissionReviewOption[] = [
+  {
+    value: SubmissionReviewStatus.Pending,
+    icon: 'fas fa-hourglass',
+    label: 'moderation.submissionReviewStatus.pending',
+    count: 0,
+  },
+  {
+    value: SubmissionReviewStatus.Accepted,
+    icon: 'fas fa-circle-check',
+    label: 'moderation.submissionReviewStatus.accepted',
+    count: 0,
+  },
+  {
+    value: SubmissionReviewStatus.Rejected,
+    icon: 'fas fa-circle-xmark',
+    label: 'moderation.submissionReviewStatus.rejected',
+    count: 0,
+  },
+  {
+    value: SubmissionReviewStatus.Removed,
+    icon: 'fas fa-circle-minus',
+    label: 'moderation.submissionReviewStatus.withdrawn',
+    count: 0,
+  },
+];
+
 export const WITHDRAWAL_SUBMISSION_REVIEW_OPTIONS: SubmissionReviewOption[] = [
   {
     value: SubmissionReviewStatus.Pending,

src/app/features/moderation/store/collections-moderation/collections-moderation.model.ts

@@ -1,8 +1,8 @@
 import { CollectionSubmissionReviewAction } from '@osf/features/moderation/models';
-import { AsyncStateModel, AsyncStateWithTotalCount, CollectionSubmission } from '@shared/models';
+import { AsyncStateModel, AsyncStateWithTotalCount, CollectionSubmissionWithGuid } from '@shared/models';
 
 export interface CollectionsModerationStateModel {
-  collectionSubmissions: AsyncStateWithTotalCount<CollectionSubmission[]>;
+  collectionSubmissions: AsyncStateWithTotalCount<CollectionSubmissionWithGuid[]>;
   currentReviewAction: AsyncStateModel<CollectionSubmissionReviewAction | null>;
 }
 

src/app/features/project/overview/components/overview-collections/overview-collections.component.html

@@ -0,0 +1,63 @@
+@let project = currentProject();
+@let submissions = projectSubmissions();
+
+@if (project) {
+  <h3 class="mb-3">{{ 'project.overview.metadata.collection' | translate }}</h3>
+  @if (isProjectSubmissionsLoading()) {
+    <p-skeleton height="3rem" width="100%"></p-skeleton>
+  } @else {
+    <div class="flex flex-column gap-3">
+      @if (submissions.length) {
+        @for (submission of submissions; track submission.id) {
+          <div class="metadata-accordion">
+            <p-accordion>
+              <p-accordion-panel value="0">
+                <p-accordion-header class="py-0 gap-2 justify-content-between">
+                  <div class="flex align-items-center gap-3">
+                    <p-button
+                      link
+                      class="link-btn-no-padding"
+                      styleClass="text-left"
+                      (click)="navigateToCollection($event, submission)"
+                      [label]="submission.collectionTitle"
+                    ></p-button>
+
+                    @let status = submission.reviewsState;
+                    @switch (status) {
+                      @case (SubmissionReviewStatus.Accepted) {
+                        <p-tag class="capitalize" [value]="status" severity="success"></p-tag>
+                      }
+                      @case (SubmissionReviewStatus.Rejected) {
+                        <p-tag class="capitalize" [value]="status" severity="danger"></p-tag>
+                      }
+                      @case (SubmissionReviewStatus.Pending) {
+                        <p-tag class="capitalize" [value]="status" severity="warn"></p-tag>
+                      }
+                      @case (SubmissionReviewStatus.Removed) {
+                        <p-tag class="capitalize" [value]="status" severity="secondary"></p-tag>
+                      }
+                    }
+                  </div>
+                </p-accordion-header>
+                <p-accordion-content>
+                  @let attributes = submissionAttributes(submission);
+                  @if (attributes.length) {
+                    <div class="flex flex-column gap-2 mt-2">
+                      @for (attribute of attributes; track attribute.key) {
+                        <p class="font-normal">
+                          <span class="font-bold">{{ attribute.label }}:</span> {{ attribute.value }}
+                        </p>
+                      }
+                    </div>
+                  }
+                </p-accordion-content>
+              </p-accordion-panel>
+            </p-accordion>
+          </div>
+        }
+      } @else {
+        <p>{{ 'project.overview.metadata.noCollections' | translate }}</p>
+      }
+    </div>
+  }
+}

src/app/features/project/overview/components/overview-collections/overview-collections.component.scss

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

src/app/features/project/overview/components/overview-collections/overview-collections.component.spec.ts

@@ -0,0 +1,68 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
+import { Button } from 'primeng/button';
+import { Skeleton } from 'primeng/skeleton';
+import { Tag } from 'primeng/tag';
+
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { collectionFilterNames } from '@osf/features/collections/constants';
+import { SubmissionReviewStatus } from '@osf/features/moderation/enums';
+import { CollectionSubmission, ResourceOverview } from '@shared/models';
+import { CollectionsSelectors, GetProjectSubmissions } from '@shared/stores';
+
+@Component({
+  selector: 'osf-overview-collections',
+  imports: [Accordion, AccordionPanel, AccordionHeader, AccordionContent, TranslatePipe, Skeleton, Tag, Button],
+  templateUrl: './overview-collections.component.html',
+  styleUrl: './overview-collections.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OverviewCollectionsComponent {
+  private readonly router = inject(Router);
+  protected readonly SubmissionReviewStatus = SubmissionReviewStatus;
+  currentProject = input.required<ResourceOverview | null>();
+  projectSubmissions = select(CollectionsSelectors.getCurrentProjectSubmissions);
+  isProjectSubmissionsLoading = select(CollectionsSelectors.getCurrentProjectSubmissionsLoading);
+
+  protected projectId = computed(() => {
+    const resource = this.currentProject();
+    return resource ? resource.id : null;
+  });
+
+  protected actions = createDispatchMap({
+    getProjectSubmissions: GetProjectSubmissions,
+  });
+
+  constructor() {
+    effect(() => {
+      const projectId = this.projectId();
+
+      if (projectId) {
+        this.actions.getProjectSubmissions(projectId);
+      }
+    });
+  }
+
+  protected get submissionAttributes() {
+    return (submission: CollectionSubmission) => {
+      if (!submission) return [];
+
+      return collectionFilterNames
+        .map((attribute) => ({
+          ...attribute,
+          value: submission[attribute.key as keyof CollectionSubmission] as string,
+        }))
+        .filter((attribute) => attribute.value);
+    };
+  }
+
+  navigateToCollection($event: Event, submission: CollectionSubmission) {
+    $event.stopPropagation();
+    this.router.navigate([`collections/${submission.collectionId}/`]);
+  }
+}

src/app/features/project/overview/components/overview-collections/overview-collections.component.ts

@@ -138,6 +138,10 @@ <h3>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h3>
       </div>
     </div>
 
+    @if (resource.type === resourceTypes.Projects) {
+      <osf-overview-collections [currentProject]="currentResource()"></osf-overview-collections>
+    }
+
     <div class="flex flex-column gap-2">
       <h3>{{ 'project.overview.metadata.subjects' | translate }}</h3>