feat(registration-api): Add API integration, refactored UI

src/app/core/constants/ngxs-states.constant.ts

@@ -7,6 +7,7 @@ import { MyProjectsState } from '@osf/features/my-projects/store';
 import { PreprintsState } from '@osf/features/preprints/store';
 import { AnalyticsState } from '@osf/features/project/analytics/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
+import { RegistrationsState } from '@osf/features/project/registrations/store';
 import { SettingsState } from '@osf/features/project/settings/store';
 import { WikiState } from '@osf/features/project/wiki/store/wiki.state';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
@@ -33,5 +34,6 @@ export const STATES = [
   CollectionsState,
   WikiState,
   MeetingsState,
+  RegistrationsState,
   PreprintsState,
 ];

src/app/features/project/registrations/components/registration-card/registration-card.component.html

@@ -1,115 +1,108 @@
-@if (registrationData()) {
-  <section class="registration-card">
-    <p-card>
-      <div class="flex gap-3 flex-column">
-        <div class="flex gap-2 w-full">
-          @if (registrationData()?.status === 'withdrawn') {
-            <i class="osf-icon-padlock"></i>
-          }
+<section class="registration-card">
+  <p-card>
+    <div class="flex gap-3 flex-column">
+      <div class="flex flex-wrap gap-2 w-full">
+        @if (registrationData().status === RegistrationStatus.WITHDRAWN) {
+          <i class="osf-icon-padlock"></i>
+        }
 
-          @if (registrationData()?.status === 'in_progress') {
-            <i class="osf-icon-padlock-unlock"></i>
-          }
+        @if (registrationData().status === RegistrationStatus.IN_PROGRESS) {
+          <i class="osf-icon-padlock-unlock"></i>
+        }
 
-          <h2 class="align-self-center">{{ registrationData()?.title }}</h2>
+        <h2 class="align-self-center">{{ registrationData().title }}</h2>
 
-          @if (registrationData()?.status === 'in_progress') {
-            <p-tag class="ml-3" severity="warn" value="Update In Progress" />
-          }
+        @if (registrationData().status === RegistrationStatus.IN_PROGRESS) {
+          <p-tag severity="warn" value="Update In Progress" />
+        }
 
-          @if (registrationData()?.status === 'withdrawn') {
-            <p-tag class="ml-3" severity="secondary" value="Withdrawn" />
-          }
-        </div>
+        @if (registrationData().status === RegistrationStatus.WITHDRAWN) {
+          <p-tag severity="secondary" value="Withdrawn" />
+        }
+      </div>
 
-        <div [class.mobile]="isMobile()" class="flex sm:flex-column lg:flex-row justify-content-between gap-5">
-          <div class="flex gap-3 flex-column w-full">
-            <div class="flex gap-2 mt-1">
-              <strong>Registration template:</strong>
-              <span>{{ registrationData()?.template }}</span>
-            </div>
+      <div class="flex flex-wrap flex-column lg:flex-nowrap lg:flex-row justify-content-between gap-5">
+        <div class="flex gap-3 flex-column w-full">
+          <div class="flex gap-2 mt-1">
+            <strong>{{ 'project.registrations.card.registrationTemplate' | translate }}</strong>
+            <span>{{ registrationData().registrationSupplement }}</span>
+          </div>
 
-            <div class="flex gap-2">
-              <strong>Registry:</strong>
-              <span>{{ registrationData()?.registry }}</span>
-            </div>
+          <div class="flex gap-2">
+            <strong>{{ 'project.registrations.card.registry' | translate }}</strong>
+            <span>{{ registrationData().registry }}</span>
+          </div>
 
-            <div class="flex gap-2">
-              <strong>Registered:</strong>
-              <span>{{ registrationData()?.registeredDate }}</span>
-            </div>
+          <div class="flex gap-2">
+            <strong>{{ 'project.registrations.card.registered' | translate }}</strong>
+            <span>{{ registrationData().dateRegistered }}</span>
+          </div>
 
-            <div class="flex gap-2">
-              <strong>Last Updated:</strong>
-              <span>{{ registrationData()?.lastUpdated }}</span>
-            </div>
+          <div class="flex gap-2">
+            <strong>{{ 'project.registrations.card.lastUpdated' | translate }}</strong>
+            <span>{{ registrationData().dateModified }}</span>
+          </div>
 
-            <div class="flex gap-2">
-              <strong>Contributors:</strong>
-              <span class="contributors">
-                @for (contributor of registrationData()?.contributors; track contributor.name) {
-                  <a [href]="">{{ contributor.name }}</a>
-                  @if (!$last) {
-                    <span>, </span>
-                  }
+          <div class="flex gap-2">
+            <strong>{{ 'project.overview.metadata.contributors' | translate }}:</strong>
+            <span class="contributors">
+              @for (contributor of registrationData().contributors; track contributor.name) {
+                <a [href]="">{{ contributor.name }}</a>
+                @if (!$last) {
+                  <span>, </span>
                 }
-              </span>
-            </div>
+              }
+            </span>
+          </div>
 
-            <div class="flex gap-2">
-              <strong>Description:</strong>
-              <p>{{ registrationData()?.description }}</p>
-            </div>
+          <div class="flex gap-2">
+            <strong>{{ 'project.registrations.card.description' | translate }}</strong>
+            <p>{{ registrationData().description }}</p>
+          </div>
 
-            <div class="flex gap-2 mt-1">
-              @if (registrationData()?.status === 'draft') {
-                <p-button severity="primary" label="Review" [class.btn-full-width]="isMobile()"></p-button>
-                <p-button severity="secondary" label="Edit" [class.btn-full-width]="isMobile()"></p-button>
-                <p-button
-                  severity="danger"
-                  label="Delete"
-                  class="md:ml-auto"
-                  [class.btn-full-width]="isMobile()"
-                ></p-button>
-              } @else {
-                <p-button severity="primary" label="View"></p-button>
-                @if (registrationData()?.status === 'in_progress') {
-                  <p-button severity="secondary" label="Update"></p-button>
-                }
+          <div class="flex gap-2 mt-1">
+            @if (registrationData().status === RegistrationStatus.DRAFT) {
+              <p-button severity="primary" label="Review"></p-button>
+              <p-button severity="secondary" label="Edit"></p-button>
+              <p-button severity="danger" label="Delete" class="md:ml-auto"></p-button>
+            } @else {
+              <p-button severity="primary" label="View"></p-button>
+              @if (registrationData().status === RegistrationStatus.IN_PROGRESS) {
+                <p-button severity="secondary" label="Update"></p-button>
               }
-            </div>
+            }
           </div>
+        </div>
 
-          @if (registrationData()?.status !== 'draft') {
-            <div class="flex flex-column gap-3 pr-4 w-auto">
-              <h3 class="mb-2">Open Resources</h3>
+        @if (registrationData().status !== RegistrationStatus.DRAFT) {
+          <div class="flex flex-column gap-3 w-auto">
+            <h3 class="mb-2">{{ 'project.registrations.card.openResources' | translate }}</h3>
 
-              <div class="icon-links flex flex-wrap lg:flex-column gap-3">
-                <a class="icon-container" [href]="">
-                  <i class="osf-icon-data text-4xl"></i>
-                  <h3>Data</h3>
-                </a>
-                <a class="icon-container" [href]="">
-                  <i class="osf-icon-code text-4xl"></i>
-                  <h3>Analytic Code</h3>
-                </a>
-                <a class="icon-container" [href]="">
-                  <i class="osf-icon-materials text-4xl"></i>
-                  <h3>Materials</h3>
-                </a>
-                <a class="icon-container" [href]="">
-                  <i class="osf-icon-papers text-4xl"></i>
-                  <h3>Papers</h3>
-                </a>
-                <a class="icon-container" [href]="">
-                  <i class="osf-icon-supplements text-4xl"></i>
-                  <h3>Supplements</h3>
-                </a>
-              </div>
+            <div class="icon-links flex flex-wrap lg:flex-column gap-3">
+              <a class="icon-container" [href]="">
+                <i class="osf-icon-data text-4xl"></i>
+                <h3>{{ 'shared.resources.data' | translate }}</h3>
+              </a>
+              <a class="icon-container" [href]="">
+                <i class="osf-icon-code text-4xl"></i>
+                <h3>{{ 'shared.resources.analyticCode' | translate }}</h3>
+              </a>
+              <a class="icon-container" [href]="">
+                <i class="osf-icon-materials text-4xl"></i>
+                <h3>{{ 'shared.resources.materials' | translate }}</h3>
+              </a>
+              <a class="icon-container" [href]="">
+                <i class="osf-icon-papers text-4xl"></i>
+                <h3>{{ 'shared.resources.papers' | translate }}</h3>
+              </a>
+              <a class="icon-container" [href]="">
+                <i class="osf-icon-supplements text-4xl"></i>
+                <h3>{{ 'shared.resources.supplements' | translate }}</h3>
+              </a>
             </div>
-          }
-        </div>
+          </div>
+        }
       </div>
-    </p-card>
-  </section>
-}
+    </div>
+  </p-card>
+</section>

src/app/features/project/registrations/components/registration-card/registration-card.component.scss

@@ -11,16 +11,3 @@
     }
   }
 }
-.mobile {
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-//.mobile-btns {
-//  p-button {
-//    width: 100%;
-//   button {
-//     width: 100%;
-//   }
-//  }
-//}

src/app/features/project/registrations/components/registration-card/registration-card.component.ts

@@ -1,23 +1,21 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Tag } from 'primeng/tag';
 
-import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-
-import { IS_XSMALL } from '@shared/utils';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
-import { RegistrationCard } from '../../models';
+import { RegistrationModel, RegistrationStatus } from '../../models';
 
 @Component({
   selector: 'osf-registration-card',
-  imports: [Card, Button, Tag],
+  imports: [Card, Button, Tag, TranslatePipe],
   templateUrl: './registration-card.component.html',
   styleUrl: './registration-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegistrationCardComponent {
-  protected readonly isMobile = toSignal(inject(IS_XSMALL));
-
-  registrationData = input<RegistrationCard>();
+  readonly RegistrationStatus = RegistrationStatus;
+  readonly registrationData = input.required<RegistrationModel>();
 }

src/app/features/project/registrations/mappers/index.ts

@@ -0,0 +1 @@
+export { RegistrationsMapper } from './registrations.mapper';

src/app/features/project/registrations/mappers/registrations.mapper.ts

@@ -0,0 +1,23 @@
+import { RegistrationModel, RegistrationsGetResponse, RegistrationStatus } from '../models';
+
+export class RegistrationsMapper {
+  static fromResponse(response: RegistrationsGetResponse): RegistrationModel {
+    return {
+      id: response.id,
+      type: response.type,
+      title: response.attributes?.title,
+      dateRegistered: response.attributes?.date_registered,
+      dateModified: response.attributes?.date_modified,
+      registrationSupplement: response.attributes?.registration_supplement,
+      registry: '',
+      description: response.attributes?.description,
+      withdrawn: response.attributes?.withdrawn,
+      lastFetched: Date.now(),
+      status: response.attributes?.withdrawn
+        ? RegistrationStatus.WITHDRAWN
+        : response.attributes?.date_modified
+          ? RegistrationStatus.IN_PROGRESS
+          : RegistrationStatus.DRAFT,
+    };
+  }
+}

src/app/features/project/registrations/mock-data.ts

@@ -0,0 +1,69 @@
+import { RegistrationModel, RegistrationStatus } from './models';
+
+export const draftRegistrations: unknown = [
+  {
+    title: 'Registration Name Example',
+    template: 'Open-Ended Registration',
+    registry: 'OSF Registries',
+    registeredDate: '6 Feb, 2025 15:30 GMT-0500',
+    lastUpdated: '13 Feb, 2025 12:13 GMT-0500',
+    contributors: [
+      { name: 'Michael Pasek', link: '' },
+      { name: 'Jeremy Ginges', link: '' },
+      { name: 'Crystal Shackleford', link: '' },
+      { name: 'ALLON VISHKIN', link: '' },
+    ],
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+    status: 'draft',
+  },
+  {
+    title: 'Registration Name Example 2',
+    template: 'Open-Ended Registration 2',
+    registry: 'OSF Registries 2',
+    registeredDate: '6 Feb, 2025 15:30 GMT-0500',
+    lastUpdated: '13 Feb, 2025 12:13 GMT-0500',
+    contributors: [
+      { name: 'Michael Pasek', link: '' },
+      { name: 'Crystal Shackleford', link: '' },
+      { name: 'ALLON VISHKIN', link: '' },
+    ],
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+    status: 'draft',
+  },
+];
+
+export const submittedRegistrations: RegistrationModel[] = [
+  {
+    id: '1',
+    type: 'registration',
+    withdrawn: false,
+    title: 'Registration 1',
+    registrationSupplement: 'Open-Ended Registration',
+    registry: 'OSF Registries',
+    dateRegistered: '16 Jan, 2022 15:30 GMT-0500',
+    dateModified: '11 May, 2023 12:13 GMT-0500',
+    contributors: [
+      { name: 'Crystal Shackleford', link: '' },
+      { name: 'ALLON VISHKIN', link: '' },
+    ],
+    description:
+      'Lorem ipsum dolor sit amet elit, sed do eiusmod tempor incididunt. Lorem elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do.',
+    status: RegistrationStatus.IN_PROGRESS,
+  },
+  {
+    id: '2',
+    type: 'registration',
+    withdrawn: true,
+    title: 'Registration Name Example 2',
+    registrationSupplement: 'Open-Ended Registration 2',
+    registry: 'OSF Registries 2',
+    dateRegistered: '2 Jan, 2023 11:30 GMT-0500',
+    dateModified: '4 Mar, 2024 12:55 GMT-0500',
+    contributors: [
+      { name: 'Crystal Shackleford', link: '' },
+      { name: 'Michael Pasek', link: '' },
+    ],
+    description: 'Lorem consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    status: RegistrationStatus.WITHDRAWN,
+  },
+];

src/app/features/project/registrations/models/index.ts

@@ -1 +1 @@
-export * from './registration-card.interface';
+export * from './registrations.model';