fix(preprint-details): updated views and downloads

Author: nsemets

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

@@ -5,6 +5,7 @@ export { GeneralInformationComponent } from './preprint-details/general-informat
 export { ModerationStatusBannerComponent } from './preprint-details/moderation-status-banner/moderation-status-banner.component';
 export { PreprintFileSectionComponent } from './preprint-details/preprint-file-section/preprint-file-section.component';
 export { PreprintMakeDecisionComponent } from './preprint-details/preprint-make-decision/preprint-make-decision.component';
+export { PreprintMetricsInfoComponent } from './preprint-details/preprint-metrics-info/preprint-metrics-info.component';
 export { PreprintTombstoneComponent } from './preprint-details/preprint-tombstone/preprint-tombstone.component';
 export { PreprintWarningBannerComponent } from './preprint-details/preprint-warning-banner/preprint-warning-banner.component';
 export { ShareAndDownloadComponent } from './preprint-details/share-and-download/share-and-download.component';

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

@@ -1,7 +1,20 @@
 <p-card>
   @if (preprint()) {
     @let preprintValue = preprint()!;
+
     <div class="flex flex-column gap-4">
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate }}</h3>
+
+        <div class="flex flex-column gap-1 line-height-2 md:flex-row">
+          <osf-contributors-list [contributors]="bibliographicContributors()"></osf-contributors-list>
+
+          @if (areContributorsLoading()) {
+            <p-skeleton width="10rem" height="1.25rem" />
+          }
+        </div>
+      </section>
+
       <section class="flex flex-column gap-2">
         <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
         <osf-truncated-text [maxVisibleLines]="2" [text]="preprintValue.description" />
@@ -21,18 +34,6 @@ <h3>{{ 'preprints.details.supplementalMaterials' | translate }}</h3>
         </section>
       }
 
-      <section class="flex flex-column gap-2">
-        <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate }}</h3>
-
-        <div class="flex flex-column gap-1 line-height-2 md:flex-row">
-          <osf-contributors-list [contributors]="bibliographicContributors()"></osf-contributors-list>
-
-          @if (areContributorsLoading()) {
-            <p-skeleton width="10rem" height="1.25rem" />
-          }
-        </div>
-      </section>
-
       @if (preprintProvider()?.assertionsEnabled) {
         <section class="flex flex-column gap-2">
           <h3>{{ 'preprints.preprintStepper.review.sections.authorAssertions.conflictOfInterest' | translate }}</h3>

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

@@ -1,15 +1,10 @@
-<section
-  class="p-card p-card-body card gap-4 file-section-height"
-  [class.medium]="isMedium()"
-  [class.large]="isLarge()"
-  [class.small]="!isMedium() && !isLarge()"
->
+<section class="p-card p-card-body card gap-4 file-section-height">
   @if (safeLink()) {
     <iframe
       [src]="safeLink()"
       (load)="isIframeLoading = false"
       [hidden]="isIframeLoading"
-      title="Rendering of document"
+      [title]="'preprints.details.file.renderingDocument' | translate"
       allowfullscreen=""
       width="100%"
       class="flex-1 border-none"

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

@@ -0,0 +1,9 @@
+<p-card>
+  @if (metrics()) {
+    <div class="flex flex-row gap-1 font-bold">
+      <span>{{ 'preprints.details.share.views' | translate }}: {{ metrics()!.views }}</span>
+      <span>|</span>
+      <span>{{ 'preprints.details.share.downloads' | translate }}: {{ metrics()!.downloads }}</span>
+    </div>
+  }
+</p-card>

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

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

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

@@ -0,0 +1,18 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { PreprintMetrics } from '@osf/features/preprints/models';
+
+@Component({
+  selector: 'osf-preprint-metrics-info',
+  imports: [Card, TranslatePipe],
+  templateUrl: './preprint-metrics-info.component.html',
+  styleUrl: './preprint-metrics-info.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PreprintMetricsInfoComponent {
+  metrics = input<PreprintMetrics>();
+}

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

@@ -42,9 +42,11 @@ <h1>{{ preprint()?.title }}</h1>
 
     <div class="flex flex-column justify-content-end gap-2 md:flex-row">
       @if (isPreprintLoading() || isPreprintProviderLoading() || areContributorsLoading()) {
-        <p-skeleton width="10rem" height="2.25rem" />
-        <p-skeleton width="10rem" height="2.25rem" />
-        <p-skeleton width="10rem" height="2.25rem" />
+        <p-skeleton width="11rem" height="2.75rem" />
+        <p-skeleton width="11rem" height="2.75rem" />
+        <p-skeleton width="11rem" height="2.75rem" />
+        <p-skeleton width="2.75rem" height="2.75rem" />
+        <p-skeleton width="5rem" height="2.75rem" />
       } @else {
         @if (editButtonVisible()) {
           <p-button
@@ -71,6 +73,8 @@ <h1>{{ preprint()?.title }}</h1>
             (click)="handleWithdrawClicked()"
           />
         }
+
+        <osf-preprint-share-and-download [preprintProvider]="preprintProvider()" />
       }
     </div>
   </section>
@@ -99,16 +103,18 @@ <h1>{{ preprint()?.title }}</h1>
 
     @if (!preprint()?.dateWithdrawn) {
       <section class="flex-1 flex flex-column gap-4 align-items-start lg:flex-row">
-        <section class="w-12 lg:w-6">
+        <section class="w-12 lg:w-8">
           <osf-preprint-file-section [providerReviewsWorkflow]="preprintProvider()?.reviewsWorkflow || null" />
         </section>
 
-        <section class="flex flex-column gap-4 w-12 lg:w-6">
-          <osf-preprint-share-and-download [preprintProvider]="preprintProvider()" />
+        <section class="flex flex-column gap-4 w-12 lg:w-4">
           <osf-preprint-general-information
             [preprintProvider]="preprintProvider()"
             (preprintVersionSelected)="fetchPreprint($event)"
           />
+
+          <osf-preprint-metrics-info [metrics]="preprint()?.metrics"></osf-preprint-metrics-info>
+
           <osf-preprint-additional-info [preprintProviderId]="providerId()" />
         </section>
       </section>

src/app/features/preprints/pages/preprint-details/preprint-details.component.html

@@ -33,6 +33,7 @@ import {
   ModerationStatusBannerComponent,
   PreprintFileSectionComponent,
   PreprintMakeDecisionComponent,
+  PreprintMetricsInfoComponent,
   PreprintTombstoneComponent,
   ShareAndDownloadComponent,
   StatusBannerComponent,
@@ -73,6 +74,7 @@ import { PreprintWarningBannerComponent } from '../../components/preprint-detail
     PreprintWarningBannerComponent,
     ModerationStatusBannerComponent,
     PreprintMakeDecisionComponent,
+    PreprintMetricsInfoComponent,
     RouterLink,
   ],
   templateUrl: './preprint-details.component.html',

src/app/features/preprints/pages/preprint-details/preprint-details.component.ts

@@ -2317,6 +2317,7 @@
         "noDoi": "No DOI"
       },
       "file": {
+        "renderingDocument": "Rendering document",
         "version": "Version: {{version}}",
         "downloadVersion": "Version {{version}}, {{date}}",
         "downloadPreviousVersion": "Download previous version",