Feat - Preprint Details

src/app/core/models/json-api.model.ts

@@ -3,6 +3,10 @@ export interface JsonApiResponse<Data, Included> {
   included?: Included;
 }
 
+export interface JsonApiResponseWithMeta<Data, Meta, Included> extends JsonApiResponse<Data, Included> {
+  meta: Meta;
+}
+
 export interface JsonApiResponseWithPaging<Data, Included> extends JsonApiResponse<Data, Included> {
   links: {
     meta: MetaJsonApi;

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

@@ -0,0 +1,82 @@
+<p-card>
+  @if (preprint()) {
+    @let preprintValue = preprint()!;
+    <div class="flex flex-column gap-4">
+      <section class="license flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.review.sections.metadata.license' | translate }}</h3>
+
+        <p-accordion>
+          <p-accordion-panel value="0">
+            <p-accordion-header class="p-0 justify-content-start gap-2">
+              <p class="font-normal">{{ license()!.name }}</p>
+            </p-accordion-header>
+            <p-accordion-content>
+              <p>{{ license()!.text | interpolate: licenseOptionsRecord() }}</p>
+            </p-accordion-content>
+          </p-accordion-panel>
+        </p-accordion>
+      </section>
+
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.review.sections.metadata.subjects' | translate }}</h3>
+
+        <div class="flex flex-wrap gap-2">
+          @for (subject of subjects(); track subject.id) {
+            <p-tag [value]="subject.name" severity="info" />
+          }
+
+          @if (areSelectedSubjectsLoading()) {
+            <p-skeleton width="10rem" height="1.7rem" />
+          }
+        </div>
+      </section>
+
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.review.sections.metadata.tags' | translate }}</h3>
+
+        <div class="flex flex-wrap gap-2">
+          @for (tag of preprintValue.tags; track tag) {
+            <p-tag [value]="tag" severity="info" />
+          } @empty {
+            <p>{{ 'common.labels.none' | translate }}</p>
+          }
+        </div>
+      </section>
+
+      <!-- [RNi] TODO: Not sure where to place, waiting response from product team -->
+      @if (preprintValue.originalPublicationDate) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'Original Publication Date' | translate }}</h3>
+
+          {{ preprintValue.originalPublicationDate | date: 'MMM d, y, h:mm a' }}
+        </section>
+      }
+
+      <!-- [RNi] TODO: Not sure where to place, waiting response from product team -->
+      @if (preprintValue.customPublicationCitation) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'preprints.preprintStepper.review.sections.metadata.publicationCitation' | translate }}</h3>
+
+          {{ preprintValue.customPublicationCitation }}
+        </section>
+      }
+
+      <!-- [RNi] TODO: Implement citation using shared component -->
+      <section>
+        <h3>Citation</h3>
+        <p>Use shared component here</p>
+      </section>
+    </div>
+  }
+
+  @if (isPreprintLoading()) {
+    <div class="flex flex-column gap-4">
+      @for (i of skeletonData; track $index) {
+        <section class="flex flex-column gap-2">
+          <p-skeleton width="5rem" height="1.3rem" />
+          <p-skeleton width="25rem" height="5rem" />
+        </section>
+      }
+    </div>
+  }
+</p-card>

src/app/features/preprints/components/preprint-details/additional-info/additional-info.component.spec.ts

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

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

@@ -0,0 +1,71 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
+import { Card } from 'primeng/card';
+import { Skeleton } from 'primeng/skeleton';
+import { Tag } from 'primeng/tag';
+
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, effect } from '@angular/core';
+
+import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
+import { FetchLicenses, FetchPreprintProject, SubmitPreprint } from '@osf/features/preprints/store/preprint-stepper';
+import { ResourceType } from '@shared/enums';
+import { InterpolatePipe } from '@shared/pipes';
+import { FetchSelectedSubjects, GetAllContributors, SubjectsSelectors } from '@shared/stores';
+
+@Component({
+  selector: 'osf-preprint-additional-info',
+  imports: [
+    Card,
+    TranslatePipe,
+    Tag,
+    Skeleton,
+    DatePipe,
+    Accordion,
+    AccordionPanel,
+    AccordionHeader,
+    AccordionContent,
+    InterpolatePipe,
+  ],
+  templateUrl: './additional-info.component.html',
+  styleUrl: './additional-info.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdditionalInfoComponent {
+  private actions = createDispatchMap({
+    getContributors: GetAllContributors,
+    fetchSubjects: FetchSelectedSubjects,
+    fetchLicenses: FetchLicenses,
+    fetchPreprintProject: FetchPreprintProject,
+    submitPreprint: SubmitPreprint,
+  });
+
+  preprint = select(PreprintSelectors.getPreprint);
+  isPreprintLoading = select(PreprintSelectors.isPreprintLoading);
+
+  subjects = select(SubjectsSelectors.getSelectedSubjects);
+  areSelectedSubjectsLoading = select(SubjectsSelectors.areSelectedSubjectsLoading);
+
+  license = computed(() => {
+    const preprint = this.preprint();
+    if (!preprint) return null;
+    return preprint.embeddedLicense;
+  });
+  licenseOptionsRecord = computed(() => {
+    return (this.preprint()?.licenseOptions ?? {}) as Record<string, string>;
+  });
+
+  skeletonData = Array.from({ length: 5 }, () => null);
+
+  constructor() {
+    effect(() => {
+      const preprint = this.preprint();
+      if (!preprint) return;
+
+      this.actions.fetchSubjects(this.preprint()!.id, ResourceType.Preprint);
+    });
+  }
+}

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

@@ -0,0 +1,133 @@
+<p-card>
+  @if (preprint()) {
+    @let preprintValue = preprint()!;
+    <div class="flex flex-column gap-4">
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
+        <osf-truncated-text [maxVisibleLines]="2" [text]="preprintValue.description" />
+      </section>
+
+      @if (affiliatedInstitutions().length) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'preprints.preprintStepper.review.sections.metadata.affiliatedInstitutions' | translate }}</h3>
+
+          <div class="flex gap-2">
+            @for (institution of affiliatedInstitutions(); track institution.id) {
+              <img alt="Institution logo" [src]="institution.assets.logo" height="45" />
+            }
+          </div>
+        </section>
+      }
+
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'Authors' | translate }}</h3>
+
+        <div class="flex flex-column gap-1 line-height-2 md:flex-row">
+          @for (contributor of bibliographicContributors(); track contributor.id) {
+            <div>
+              <a class="font-bold"> {{ contributor.fullName }}</a>
+              <span>{{ $last ? '' : ',' }}</span>
+            </div>
+          }
+
+          @if (areContributorsLoading()) {
+            <p-skeleton width="10rem" height="1.25rem" />
+          }
+        </div>
+      </section>
+
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.review.sections.authorAssertions.conflictOfInterest' | translate }}</h3>
+
+        @if (!preprintValue.hasCoi) {
+          <p>{{ 'preprints.preprintStepper.review.sections.authorAssertions.noCoi' | translate }}</p>
+        } @else {
+          {{ preprintValue.coiStatement }}
+        }
+      </section>
+
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.review.sections.authorAssertions.publicData' | translate }}</h3>
+
+        @switch (preprintValue.hasDataLinks) {
+          @case (ApplicabilityStatus.NotApplicable) {
+            <p>{{ 'preprints.preprintStepper.review.sections.authorAssertions.noData' | translate }}</p>
+          }
+          @case (ApplicabilityStatus.Unavailable) {
+            {{ preprintValue.whyNoData }}
+          }
+          @case (ApplicabilityStatus.Applicable) {
+            @for (link of preprintValue.dataLinks; track $index) {
+              <p>{{ link }}</p>
+            }
+          }
+        }
+      </section>
+
+      <section class="flex flex-column gap-2">
+        <h3>
+          {{ 'preprints.preprintStepper.review.sections.authorAssertions.publicPreregistration' | translate }}
+        </h3>
+
+        @switch (preprintValue.hasPreregLinks) {
+          @case (ApplicabilityStatus.NotApplicable) {
+            <p>
+              {{ 'preprints.preprintStepper.review.sections.authorAssertions.noPrereg' | translate }}
+            </p>
+          }
+          @case (ApplicabilityStatus.Unavailable) {
+            {{ preprintValue.whyNoPrereg }}
+          }
+          @case (ApplicabilityStatus.Applicable) {
+            @switch (preprintValue.preregLinkInfo) {
+              @case (PreregLinkInfo.Analysis) {
+                <p>
+                  {{ 'preprints.preprintStepper.common.labels.preregTypes.analysis' | translate }}
+                </p>
+              }
+              @case (PreregLinkInfo.Designs) {
+                <p>
+                  {{ 'preprints.preprintStepper.common.labels.preregTypes.designs' | translate }}
+                </p>
+              }
+              @case (PreregLinkInfo.Both) {
+                <p>
+                  {{ 'preprints.preprintStepper.common.labels.preregTypes.both' | translate }}
+                </p>
+              }
+            }
+            @for (link of preprintValue.preregLinks; track $index) {
+              <p>{{ link }}</p>
+            }
+          }
+        }
+      </section>
+
+      <section class="flex flex-column gap-2">
+        <h3>Preprint DOI</h3>
+
+        <p-select
+          class="w-full"
+          appendTo="body"
+          optionLabel="label"
+          optionValue="value"
+          [ngModel]="preprintValue.id"
+          [options]="versionsDropdownOptions()"
+          [loading]="arePreprintVersionIdsLoading()"
+          (onChange)="selectPreprintVersion($event.value)"
+        />
+      </section>
+    </div>
+  }
+
+  @if (isPreprintLoading()) {
+    <div class="flex flex-column gap-4">
+      @for (i of skeletonData; track $index) {
+        <section class="flex flex-column gap-2">
+          <p-skeleton width="5rem" height="1.3rem" />
+          <p-skeleton width="25rem" height="5rem" />
+        </section>
+      }
+    </div>
+  }
+</p-card>

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

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