Feat - Preprint details

src/app/core/handlers/state-error.handler.ts

@@ -7,6 +7,7 @@ export function handleSectionError<T>(ctx: StateContext<T>, section: keyof T, er
     [section]: {
       ...ctx.getState()[section],
       isLoading: false,
+      isSubmitting: false,
       error: error.message,
     },
   } as Partial<T>);

src/app/features/moderation/mappers/registry-moderation.mapper.ts

@@ -41,6 +41,7 @@ export class RegistryModerationMapper {
         id: response.embeds.creator.data.id,
         name: response.embeds.creator.data.attributes.full_name,
       },
+      trigger: response.attributes.trigger,
     };
   }
 }

src/app/features/moderation/models/index.ts

@@ -11,7 +11,6 @@ export * from './preprint-review-action.model';
 export * from './preprint-review-action-json-api.model';
 export * from './preprint-submission.model';
 export * from './preprint-submission-json-api.model';
-export * from './preprint-withdrawal-action.model';
 export * from './preprint-withdrawal-submission.model';
 export * from './preprint-withdrawal-submission-json-api.model';
 export * from './registry-json-api.model';

src/app/features/moderation/models/review-action.model.ts

@@ -2,6 +2,7 @@ import { IdName } from '@osf/shared/models';
 
 export interface ReviewAction {
   id: string;
+  trigger: string;
   fromState: string;
   toState: string;
   dateModified: string;

src/app/features/preprints/components/index.ts

@@ -4,6 +4,11 @@ export { PreprintsCreatorsFilterComponent } from './filters/preprints-creators-f
 export { PreprintsDateCreatedFilterComponent } from './filters/preprints-date-created-filter/preprints-date-created-filter.component';
 export { PreprintsInstitutionFilterComponent } from './filters/preprints-institution-filter/preprints-institution-filter.component';
 export { PreprintsLicenseFilterComponent } from './filters/preprints-license-filter/preprints-license-filter.component';
+export { AdditionalInfoComponent } from './preprint-details/additional-info/additional-info.component';
+export { GeneralInformationComponent } from './preprint-details/general-information/general-information.component';
+export { PreprintFileSectionComponent } from './preprint-details/preprint-file-section/preprint-file-section.component';
+export { ShareAndDownloadComponent } from './preprint-details/share-and-downlaod/share-and-download.component';
+export { StatusBannerComponent } from './preprint-details/status-banner/status-banner.component';
 export { PreprintProviderFooterComponent } from './preprint-provider-footer/preprint-provider-footer.component';
 export { PreprintProviderHeroComponent } from './preprint-provider-hero/preprint-provider-hero.component';
 export { PreprintServicesComponent } from './preprint-services/preprint-services.component';
@@ -14,6 +19,7 @@ export { PreprintsFilterChipsComponent } from '@osf/features/preprints/component
 export { PreprintsResourcesComponent } from '@osf/features/preprints/components/filters/preprints-resources/preprints-resources.component';
 export { PreprintsResourcesFiltersComponent } from '@osf/features/preprints/components/filters/preprints-resources-filters/preprints-resources-filters.component';
 export { PreprintsSubjectFilterComponent } from '@osf/features/preprints/components/filters/preprints-subject-filter/preprints-subject-filter.component';
+export { WithdrawDialogComponent } from '@osf/features/preprints/components/preprint-details/withdraw-dialog/withdraw-dialog.component';
 export { FileStepComponent } from '@osf/features/preprints/components/stepper/file-step/file-step.component';
 export { MetadataStepComponent } from '@osf/features/preprints/components/stepper/metadata-step/metadata-step.component';
 export { ReviewStepComponent } from '@osf/features/preprints/components/stepper/review-step/review-step.component';

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

@@ -1,7 +1,24 @@
 <p-card>
   @if (preprint()) {
     @let preprintValue = preprint()!;
+
     <div class="flex flex-column gap-4">
+      @if (preprintValue.customPublicationCitation) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'preprints.preprintStepper.review.sections.metadata.publicationCitation' | translate }}</h3>
+
+          {{ preprintValue.customPublicationCitation }}
+        </section>
+      }
+
+      @if (preprintValue.originalPublicationDate) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'preprints.preprintStepper.review.sections.metadata.publicationDate' | translate }}</h3>
+
+          {{ preprintValue.originalPublicationDate | date: 'MMM d, y, h:mm a' }}
+        </section>
+      }
+
       <section class="license flex flex-column gap-2">
         <h3>{{ 'preprints.preprintStepper.review.sections.metadata.license' | translate }}</h3>
 
@@ -11,7 +28,7 @@ <h3>{{ 'preprints.preprintStepper.review.sections.metadata.license' | translate
               <p class="font-normal">{{ license()!.name }}</p>
             </p-accordion-header>
             <p-accordion-content>
-              <p>{{ license()!.text | interpolate: licenseOptionsRecord() }}</p>
+              <p class="white-space-pre-line">{{ license()!.text | interpolate: licenseOptionsRecord() }}</p>
             </p-accordion-content>
           </p-accordion-panel>
         </p-accordion>
@@ -43,29 +60,7 @@ <h3>{{ 'preprints.preprintStepper.review.sections.metadata.tags' | translate }}<
         </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>
+      <osf-preprint-citation-section [preprintId]="preprintValue.id" />
     </div>
   }
 

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

@@ -0,0 +1,3 @@
+.white-space-pre-line {
+  white-space: pre-line;
+}

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

@@ -10,11 +10,11 @@ import { Tag } from 'primeng/tag';
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect } from '@angular/core';
 
+import { CitationSectionComponent } from '@osf/features/preprints/components/preprint-details/citation-section/citation-section.component';
 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';
+import { FetchSelectedSubjects, SubjectsSelectors } from '@shared/stores';
 
 @Component({
   selector: 'osf-preprint-additional-info',
@@ -29,18 +29,15 @@ import { FetchSelectedSubjects, GetAllContributors, SubjectsSelectors } from '@s
     AccordionHeader,
     AccordionContent,
     InterpolatePipe,
+    CitationSectionComponent,
   ],
   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);

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

@@ -0,0 +1,47 @@
+<div class="metadata-accordion">
+  <p-accordion>
+    <p-accordion-panel value="0">
+      <p-accordion-header class="p-0 justify-content-between">
+        <h3>{{ 'project.overview.metadata.citation' | translate }}</h3>
+      </p-accordion-header>
+      <p-accordion-content>
+        @if (areCitationsLoading()) {
+          <p-skeleton height="3.5rem"></p-skeleton>
+        } @else {
+          <div class="flex flex-column gap-3">
+            @for (citation of defaultCitations(); track citation.id) {
+              <div class="flex flex-column gap-1">
+                <h3>{{ citation.title }}</h3>
+                <p>{{ citation.citation }}</p>
+              </div>
+            }
+          </div>
+
+          <p-divider />
+          <p>{{ 'project.overview.metadata.getMoreCitations' | translate }}</p>
+          <p-select
+            class="mt-2 w-full"
+            [placeholder]="'project.overview.metadata.citationInputPlaceholder' | translate"
+            [loading]="areCitationStylesLoading()"
+            [options]="citationStylesOptions()"
+            [filter]="true"
+            (onFilter)="handleCitationStyleFilterSearch($event)"
+            optionLabel="label"
+            optionValue="value"
+            appendTo="body"
+            [emptyFilterMessage]="filterMessage()"
+            [emptyMessage]="'project.overview.metadata.citationInputPlaceholder' | translate"
+            (onChange)="handleGetStyledCitation($event)"
+          >
+            <ng-template #selectedItem let-selectedOption>
+              {{ selectedOption.label }}
+            </ng-template>
+          </p-select>
+          @if (styledCitation()) {
+            <p class="mt-2">{{ styledCitation()?.citation }}</p>
+          }
+        }
+      </p-accordion-content>
+    </p-accordion-panel>
+  </p-accordion>
+</div>

src/app/features/preprints/components/preprint-details/citation-section/citation-section.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TranslateServiceMock } from '@shared/mocks';
+
+import { CitationSectionComponent } from './citation-section.component';
+
+describe.skip('CitationSectionComponent', () => {
+  let component: CitationSectionComponent;
+  let fixture: ComponentFixture<CitationSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CitationSectionComponent],
+      providers: [TranslateServiceMock],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CitationSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,106 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
+import { Divider } from 'primeng/divider';
+import { Select, SelectChangeEvent, SelectFilterEvent } from 'primeng/select';
+import { Skeleton } from 'primeng/skeleton';
+
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  OnInit,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { CitationStyle, CustomOption } from '@shared/models';
+import {
+  CitationsSelectors,
+  GetCitationStyles,
+  GetDefaultCitations,
+  GetStyledCitation,
+  UpdateCustomCitation,
+} from '@shared/stores';
+
+@Component({
+  selector: 'osf-preprint-citation-section',
+  imports: [Accordion, AccordionPanel, AccordionHeader, TranslatePipe, AccordionContent, Skeleton, Divider, Select],
+  templateUrl: './citation-section.component.html',
+  styleUrl: './citation-section.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CitationSectionComponent implements OnInit {
+  preprintId = input.required<string>();
+
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly translateService = inject(TranslateService);
+  private readonly filterSubject = new Subject<string>();
+  private actions = createDispatchMap({
+    getDefaultCitations: GetDefaultCitations,
+    getCitationStyles: GetCitationStyles,
+    getStyledCitation: GetStyledCitation,
+    updateCustomCitation: UpdateCustomCitation,
+  });
+
+  protected defaultCitations = select(CitationsSelectors.getDefaultCitations);
+  protected areCitationsLoading = select(CitationsSelectors.getDefaultCitationsLoading);
+  protected citationStyles = select(CitationsSelectors.getCitationStyles);
+  protected areCitationStylesLoading = select(CitationsSelectors.getCitationStylesLoading);
+  protected styledCitation = select(CitationsSelectors.getStyledCitation);
+  protected citationStylesOptions = signal<CustomOption<CitationStyle>[]>([]);
+
+  protected filterMessage = computed(() => {
+    const isLoading = this.areCitationStylesLoading();
+    return isLoading
+      ? this.translateService.instant('project.overview.metadata.citationLoadingPlaceholder')
+      : this.translateService.instant('project.overview.metadata.noCitationStylesFound');
+  });
+  private PreprintResourceType = 'preprints';
+
+  constructor() {
+    this.setupFilterDebounce();
+    this.setupCitationStylesEffect();
+  }
+
+  ngOnInit() {
+    this.actions.getDefaultCitations(this.PreprintResourceType, this.preprintId());
+  }
+
+  protected handleCitationStyleFilterSearch(event: SelectFilterEvent) {
+    event.originalEvent.preventDefault();
+    this.filterSubject.next(event.filter);
+  }
+
+  protected handleGetStyledCitation(event: SelectChangeEvent) {
+    this.actions.getStyledCitation(this.PreprintResourceType, this.preprintId(), event.value.id);
+  }
+
+  private setupFilterDebounce(): void {
+    this.filterSubject
+      .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+      .subscribe((filterValue) => {
+        this.actions.getCitationStyles(filterValue);
+      });
+  }
+
+  private setupCitationStylesEffect(): void {
+    effect(() => {
+      const styles = this.citationStyles();
+
+      const options = styles.map((style: CitationStyle) => ({
+        label: style.title,
+        value: style,
+      }));
+      this.citationStylesOptions.set(options);
+    });
+  }
+}