Feat - My Preprints (#184)

* feat(my-preprints): Implemented My Preprints page

* fix(conflicts): Fixes after merge conflicts

* fix(preprint-service): Using dynamic query params for getMyPreprints method

* fix(my-preprints): Preventing second api call while initializing page

* feat(my-preprints): Extracted string to en.json

* fix(comments): Fixed PR comments

Author: rrromchIk

src/app/core/constants/nav-items.constant.ts

@@ -56,7 +56,7 @@ export const MENU_ITEMS: MenuItem[] = [
         routerLinkActiveOptions: { exact: false },
       },
       {
-        routerLink: '/my-preprints',
+        routerLink: 'preprints/my-preprints',
         label: 'navigation.preprintsSubRoutes.myPreprints',
         routerLinkActiveOptions: { exact: false },
       },

src/app/features/preprints/components/stepper/metadata-step/metadata-step.component.html

@@ -96,7 +96,9 @@ <h2 class="m-b-24">{{ 'preprints.preprintStepper.metadata.publicationCitationTit
     class="w-6 md:w-9rem"
     styleClass="w-full"
     [label]="'common.buttons.next' | translate"
-    [pTooltip]="metadataForm.invalid ? ('preprintStepper.common.validation.fillRequiredFields' | translate) : ''"
+    [pTooltip]="
+      metadataForm.invalid ? ('preprints.preprintStepper.common.validation.fillRequiredFields' | translate) : ''
+    "
     tooltipPosition="top"
     [disabled]="metadataForm.invalid || !createdPreprint()?.licenseId"
     [loading]="isUpdatingPreprint()"

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

@@ -1,5 +1,6 @@
 export * from './create-new-version-steps.const';
 export * from './form-input-limits.const';
+export * from './preprints-fields.const';
 export * from './prereg-link-options.const';
 export * from './submit-preprint-steps.const';
 export * from './update-preprint-steps.const';

src/app/features/preprints/constants/preprints-fields.const.ts

@@ -0,0 +1,4 @@
+export const preprintSortFieldMap: Record<string, string> = {
+  title: 'title',
+  dateModified: 'date_modified',
+};

src/app/features/preprints/mappers/preprints.mapper.ts

@@ -1,5 +1,11 @@
-import { ApiData } from '@core/models';
-import { Preprint, PreprintJsonApi, PreprintsRelationshipsJsonApi } from '@osf/features/preprints/models';
+import { ApiData, JsonApiResponseWithPaging } from '@core/models';
+import {
+  Preprint,
+  PreprintAttributesJsonApi,
+  PreprintEmbedsJsonApi,
+  PreprintRelationshipsJsonApi,
+  PreprintShortInfoWithTotalCount,
+} from '@osf/features/preprints/models';
 
 export class PreprintsMapper {
   static toCreatePayload(title: string, abstract: string, providerId: string) {
@@ -22,7 +28,9 @@ export class PreprintsMapper {
     };
   }
 
-  static fromPreprintJsonApi(response: ApiData<PreprintJsonApi, null, PreprintsRelationshipsJsonApi, null>): Preprint {
+  static fromPreprintJsonApi(
+    response: ApiData<PreprintAttributesJsonApi, null, PreprintRelationshipsJsonApi, null>
+  ): Preprint {
     return {
       id: response.id,
       dateCreated: response.attributes.date_created,
@@ -76,4 +84,25 @@ export class PreprintsMapper {
       },
     };
   }
+
+  static fromMyPreprintJsonApi(
+    response: JsonApiResponseWithPaging<ApiData<PreprintAttributesJsonApi, PreprintEmbedsJsonApi, null, null>[], null>
+  ): PreprintShortInfoWithTotalCount {
+    return {
+      data: response.data.map((preprintData) => {
+        return {
+          id: preprintData.id,
+          title: preprintData.attributes.title,
+          dateModified: preprintData.attributes.date_modified,
+          contributors: preprintData.embeds.bibliographic_contributors.data.map((contrData) => {
+            return {
+              id: contrData.id,
+              name: contrData.embeds.users.data.attributes.full_name,
+            };
+          }),
+        };
+      }),
+      totalCount: response.links.meta.total,
+    };
+  }
 }

src/app/features/preprints/models/preprint-json-api.models.ts

@@ -1,8 +1,8 @@
 import { BooleanOrNull, StringOrNull } from '@core/helpers';
 import { ApplicabilityStatus, PreregLinkInfo } from '@osf/features/preprints/enums';
-import { LicenseRecordJsonApi } from '@shared/models';
+import { ContributorResponse, LicenseRecordJsonApi } from '@shared/models';
 
-export interface PreprintJsonApi {
+export interface PreprintAttributesJsonApi {
   date_created: string;
   date_modified: string;
   date_published: Date | null;
@@ -34,7 +34,7 @@ export interface PreprintJsonApi {
   prereg_link_info: PreregLinkInfo | null;
 }
 
-export interface PreprintsRelationshipsJsonApi {
+export interface PreprintRelationshipsJsonApi {
   primary_file: {
     data: {
       id: string;
@@ -54,3 +54,9 @@ export interface PreprintsRelationshipsJsonApi {
     };
   };
 }
+
+export interface PreprintEmbedsJsonApi {
+  bibliographic_contributors: {
+    data: ContributorResponse[];
+  };
+}

src/app/features/preprints/models/preprint.models.ts

@@ -1,6 +1,6 @@
 import { BooleanOrNull, StringOrNull } from '@core/helpers';
 import { ApplicabilityStatus, PreregLinkInfo } from '@osf/features/preprints/enums';
-import { LicenseOptions } from '@shared/models';
+import { IdName, LicenseOptions } from '@shared/models';
 
 export interface Preprint {
   id: string;
@@ -35,3 +35,15 @@ export interface PreprintFilesLinks {
   filesLink: string;
   uploadFileLink: string;
 }
+
+export interface PreprintShortInfo {
+  id: string;
+  title: string;
+  dateModified: string;
+  contributors: IdName[];
+}
+
+export interface PreprintShortInfoWithTotalCount {
+  data: PreprintShortInfo[];
+  totalCount: number;
+}

src/app/features/preprints/pages/my-preprints/my-preprints.component.html

@@ -0,0 +1,74 @@
+<osf-sub-header
+  [title]="'preprints.myPreprints.title' | translate"
+  [icon]="'preprints'"
+  [showButton]="true"
+  [buttonLabel]="'preprints.addPreprint' | translate: { preprintWord: 'preprint' | titlecase }"
+  (buttonClick)="addPreprintBtnClicked()"
+/>
+
+<section class="flex-1 flex flex-column bg-white p-3 md:p-4">
+  <osf-search-input
+    class="w-full"
+    [control]="searchControl"
+    [placeholder]="'preprints.myPreprints.searchPlaceholder' | translate"
+  />
+
+  <p-table
+    class="mt-4"
+    [value]="areMyPreprintsLoading() ? skeletonData : preprints()"
+    [rows]="tableParams().rows"
+    [first]="tableParams().firstRowIndex"
+    [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+    [paginator]="true"
+    [totalRecords]="tableParams().totalRecords"
+    paginatorDropdownAppendTo="body"
+    [resizableColumns]="true"
+    [autoLayout]="true"
+    [scrollable]="true"
+    [sortMode]="'single'"
+    [lazy]="true"
+    [lazyLoadOnInit]="true"
+    (onPage)="onPageChange($event)"
+    (onSort)="onSort($event)"
+    [sortField]="sortColumn()"
+    [sortOrder]="sortOrder() === 0 ? 1 : -1"
+    [customSort]="true"
+    [resetPageOnSort]="false"
+  >
+    <ng-template #header>
+      <tr>
+        <th pSortableColumn="title">
+          {{ 'preprints.myPreprints.table.titleLabel' | translate }}
+          <p-sortIcon field="title" />
+        </th>
+        <th>{{ 'preprints.myPreprints.table.contributorsLabel' | translate }}</th>
+        <th pSortableColumn="dateModified">
+          {{ 'preprints.myPreprints.table.modifiedLabel' | translate }}
+          <p-sortIcon field="dateModified" />
+        </th>
+      </tr>
+    </ng-template>
+    <ng-template #body let-item>
+      @if (item?.id) {
+        <tr class="cursor-pointer" (click)="navigateToPreprintDetails(item)">
+          <td>{{ item.title }}</td>
+          <td>
+            <osf-list-info-shortener [data]="item.contributors" />
+          </td>
+          <td>{{ item.dateModified | date: 'MMM d, y, h:mm a' }}</td>
+        </tr>
+      } @else {
+        <tr class="loading-row">
+          <td colspan="4">
+            <p-skeleton width="100%" height="3.3rem" borderRadius="0" />
+          </td>
+        </tr>
+      }
+    </ng-template>
+    <ng-template pTemplate="emptymessage">
+      <tr>
+        <td colspan="4" class="text-center">{{ 'common.search.noResultsFound' | translate }}</td>
+      </tr>
+    </ng-template>
+  </p-table>
+</section>

src/app/features/preprints/pages/my-preprints/my-preprints.component.scss

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