My registrations page

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

@@ -32,7 +32,7 @@ export const MENU_ITEMS: MenuItem[] = [
         routerLinkActiveOptions: { exact: true },
       },
       {
-        routerLink: '/my-registrations',
+        routerLink: '/registries/my-registrations',
         label: 'navigation.registriesSubRoutes.myRegistrations',
         routerLinkActiveOptions: { exact: true },
       },

src/app/features/project/registrations/registrations.component.ts

@@ -12,8 +12,8 @@ import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 import { LoadingSpinnerComponent, SubHeaderComponent } from '@osf/shared/components';
+import { RegistrationCardComponent } from '@osf/shared/components/registration-card/registration-card.component';
 
-import { RegistrationCardComponent } from './components';
 import { GetRegistrations, RegistrationsSelectors } from './store';
 
 @Component({

src/app/features/project/registrations/services/registrations.service.ts

@@ -2,33 +2,34 @@ import { map, Observable } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { JsonApiResponse } from '@osf/core/models';
+import { JsonApiResponseWithPaging } from '@osf/core/models';
 import { JsonApiService } from '@osf/core/services';
-
-import { submittedRegistrations } from '../mock-data';
-import { RegistrationModel, RegistrationsGetResponse } from '../models';
-
-import { RegistrationsMapper } from './../mappers';
+import { RegistrationMapper } from '@osf/shared/mappers/registration';
+import { RegistrationCard, RegistrationDataJsonApi } from '@osf/shared/models';
 
 import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class RegistrationsService {
-  #jsonApiService = inject(JsonApiService);
+  private readonly jsonApiService = inject(JsonApiService);
 
-  getRegistrations(projectId: string): Observable<RegistrationModel[]> {
+  getRegistrations(projectId: string): Observable<{ data: RegistrationCard[]; totalCount: number }> {
     const params: Record<string, unknown> = {
       embed: 'contributors',
     };
     const url = `${environment.apiUrl}/nodes/${projectId}/linked_by_registrations/`;
 
-    return this.#jsonApiService.get<JsonApiResponse<RegistrationsGetResponse[], null>>(url, params).pipe(
+    return this.jsonApiService.get<JsonApiResponseWithPaging<RegistrationDataJsonApi[], null>>(url, params).pipe(
       map((response) => {
-        return response.data.length
-          ? response.data.map((registration) => RegistrationsMapper.fromResponse(registration))
-          : submittedRegistrations;
+        const data = response.data.map((registration: RegistrationDataJsonApi) =>
+          RegistrationMapper.fromRegistrationToRegistrationCard(registration)
+        );
+        return {
+          data,
+          totalCount: response.links.meta?.total,
+        };
       })
     );
   }

src/app/features/project/registrations/store/registrations.model.ts

@@ -1,7 +1,6 @@
-import { AsyncStateModel } from '@osf/shared/models/store';
-
-import { RegistrationModel } from '../models';
+import { RegistrationCard } from '@osf/shared/models';
+import { AsyncStateWithTotalCount } from '@osf/shared/models/store';
 
 export interface RegistrationsStateModel {
-  registrations: AsyncStateModel<RegistrationModel[]>;
+  registrations: AsyncStateWithTotalCount<RegistrationCard[]>;
 }

src/app/features/project/registrations/store/registrations.state.ts

@@ -15,13 +15,14 @@ import { RegistrationsStateModel } from './registrations.model';
     registrations: {
       data: [],
       isLoading: false,
-      error: '',
+      error: null,
+      totalCount: 0,
     },
   },
 })
 @Injectable()
 export class RegistrationsState {
-  #registrationsService = inject(RegistrationsService);
+  private readonly registrationsService = inject(RegistrationsService);
 
   @Action(GetRegistrations)
   getRegistrations(ctx: StateContext<RegistrationsStateModel>, action: GetRegistrations) {
@@ -31,15 +32,16 @@ export class RegistrationsState {
       registrations: { ...state.registrations, isLoading: true, error: null },
     });
 
-    return this.#registrationsService.getRegistrations(action.projectId).pipe(
+    return this.registrationsService.getRegistrations(action.projectId).pipe(
       tap((registrations) => {
         const state = ctx.getState();
         ctx.setState({
           ...state,
           registrations: {
-            data: registrations,
+            data: registrations.data,
             isLoading: false,
-            error: '',
+            error: null,
+            totalCount: registrations.totalCount,
           },
         });
       }),

src/app/features/registries/components/drafts/drafts.component.ts

@@ -13,7 +13,7 @@ import { StepOption } from '@osf/shared/models';
 import { LoaderService } from '@osf/shared/services';
 import { ContributorsSelectors, SubjectsSelectors } from '@osf/shared/stores';
 
-import { defaultSteps } from '../../constants';
+import { DEFAULT_STEPS } from '../../constants';
 import { FetchDraft, FetchSchemaBlocks, RegistriesSelectors, UpdateStepValidation } from '../../store';
 
 @Component({
@@ -62,7 +62,7 @@ export class DraftsComponent {
   isLoaded = false;
 
   steps: Signal<StepOption[]> = computed(() => {
-    this.defaultSteps = defaultSteps.map((step) => ({
+    this.defaultSteps = DEFAULT_STEPS.map((step) => ({
       ...step,
       label: this.translateService.instant(step.label),
       invalid: this.stepsValidation()?.[step.index]?.invalid || false,

src/app/features/registries/components/metadata/metadata.component.ts

@@ -15,8 +15,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { TextInputComponent } from '@osf/shared/components';
 import { INPUT_VALIDATION_MESSAGES, InputLimits } from '@osf/shared/constants';
-import { ContributorModel, SubjectModel } from '@osf/shared/models';
-import { DraftRegistrationModel } from '@osf/shared/models/registration';
+import { ContributorModel, DraftRegistrationModel, SubjectModel } from '@osf/shared/models';
 import { CustomConfirmationService } from '@osf/shared/services';
 import { ContributorsSelectors, SubjectsSelectors } from '@osf/shared/stores';
 import { CustomValidators, findChangedFields } from '@osf/shared/utils';

src/app/features/registries/constants/defaultSteps.ts → src/app/features/registries/constants/default-steps.ts

@@ -1,6 +1,6 @@
 import { StepOption } from '@osf/shared/models';
 
-export const defaultSteps: StepOption[] = [
+export const DEFAULT_STEPS: StepOption[] = [
   {
     index: 0,
     label: 'navigation.project.metadata',

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

@@ -1 +1,2 @@
-export * from './defaultSteps';
+export * from './default-steps';
+export * from './registrations-tabs';

src/app/features/registries/constants/registrations-tabs.ts

@@ -0,0 +1,14 @@
+import { TabOption } from '@osf/shared/models';
+
+import { RegistrationTab } from '../enums';
+
+export const REGISTRATIONS_TABS: TabOption[] = [
+  {
+    label: 'common.labels.drafts',
+    value: RegistrationTab.Drafts,
+  },
+  {
+    label: 'common.labels.submitted',
+    value: RegistrationTab.Submitted,
+  },
+];

src/app/features/registries/enums/index.ts

@@ -1,3 +1,4 @@
 export * from './block-type.enum';
 export * from './field-type.enum';
+export * from './registration-tab.enum';
 export * from './submit-type.enum';

src/app/features/registries/enums/registration-tab.enum.ts

@@ -0,0 +1,4 @@
+export enum RegistrationTab {
+  Drafts,
+  Submitted,
+}