feat(registration): update ui for submited

src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.ts

@@ -61,10 +61,11 @@ export class ConfirmRegistrationDialogComponent {
   }
 
   submit(): void {
+    const embargoDate = this.form.value.embargoDate ? new Date(this.form.value.embargoDate)?.toISOString() : '';
     this.actions
       .registerDraft(
         this.config.data.draftId,
-        this.form.value.embargoDate,
+        embargoDate,
         this.config.data.providerId,
         this.config.data.projectId,
         this.config.data.components

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

@@ -177,7 +177,10 @@ export class ReviewComponent {
         modal: true,
         data: {
           draftId: this.draftId(),
-          projectId: this.draftRegistration()?.branchedFrom?.id,
+          projectId:
+            this.draftRegistration()?.branchedFrom?.type === 'nodes'
+              ? this.draftRegistration()?.branchedFrom?.id
+              : null,
           providerId: this.draftRegistration()?.providerId,
           components,
         },

src/app/features/registries/pages/my-registrations/my-registrations.component.html

@@ -38,7 +38,11 @@
               <ng-container *ngTemplateOutlet="noRegistration"></ng-container>
             }
             @for (registration of draftRegistrations(); track registration.id) {
-              <osf-registration-card [registrationData]="registration" (deleteDraft)="onDeleteDraft($event)" />
+              <osf-registration-card
+                [isDraft]="true"
+                [registrationData]="registration"
+                (deleteDraft)="onDeleteDraft($event)"
+              />
             }
             @if (draftRegistrationsTotalCount() > itemsPerPage) {
               <osf-custom-paginator
@@ -65,7 +69,7 @@
             @if (submittedRegistrationsTotalCount() > itemsPerPage) {
               <osf-custom-paginator
                 [first]="submittedFirst"
-                [totalCount]="draftRegistrationsTotalCount()"
+                [totalCount]="submittedRegistrationsTotalCount()"
                 (pageChanged)="onSubmittedPageChange($event)"
               />
             }

src/app/shared/components/data-resources/data-resources.component.html

@@ -1,4 +1,4 @@
-<div class="flex column-gap-5 row-gap-3 flex-wrap">
+<div class="flex" [class]="vertical() ? 'flex-column row-gap-2 m-auto min-w-max' : 'column-gap-5 row-gap-3 flex-wrap'">
   <a class="icon-container" [href]="resourceId() + '/resources'">
     @if (hasData()) {
       <img src="assets/icons/colored/data-colored.svg" alt="data-resource" />

src/app/shared/components/data-resources/data-resources.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular
 })
 export class DataResourcesComponent {
   @HostBinding('class') classes = 'flex-1 flex';
+  vertical = input<boolean>(false);
   resourceId = input<string>();
   hasData = input<boolean>();
   hasAnalyticCode = input<boolean>();

src/app/shared/components/registration-card/registration-card.component.html

@@ -3,26 +3,17 @@
     @if (registrationData()) {
       <div class="flex gap-3 flex-column">
         <div class="flex flex-wrap gap-2 w-full">
-          <!--  @if (registrationData().status === RegistrationStatus.PendingWithdrawRequest) {
+          @if (registrationData().public) {
+            <i class="osf-icon-padlock-unlock"></i>
+          } @else {
             <i class="osf-icon-padlock"></i>
           }
-
-          @if (registrationData().status === RegistrationStatus.InProgress) {
-            <i class="osf-icon-padlock-unlock"></i>
-            }
-          -->
           <h2 class="align-self-center">
             {{ registrationData().title || 'project.registrations.card.noTitle' | translate }}
           </h2>
-          <!--
-          @if (registrationData().status === RegistrationStatus.InProgress) {
-            <p-tag severity="warn" value="Update In Progress" />
+          @if (!isDraft()) {
+            <osf-status-badge [status]="registrationData().status" />
           }
-
-          @if (registrationData().status === RegistrationStatus.PendingWithdraw) {
-            <p-tag severity="secondary" value="Withdrawn" />
-          } 
-          -->
         </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">
@@ -63,7 +54,7 @@ <h2 class="align-self-center">
               <p>{{ registrationData().description || 'project.registrations.card.noDescription' | translate }}</p>
             </div>
             <div class="flex gap-2 mt-1">
-              @if (registrationData().status === RegistrationStatus.None) {
+              @if (isDraft()) {
                 <p-button
                   severity="primary"
                   [label]="'common.buttons.review' | translate"
@@ -82,42 +73,33 @@ <h2 class="align-self-center">
                   (click)="deleteDraft.emit(registrationData().id)"
                 ></p-button>
               } @else {
-                <p-button severity="primary" [label]="'common.buttons.view' | translate"></p-button>
+                <p-button
+                  severity="primary"
+                  [routerLink]="['../', registrationData().id, 'overview']"
+                  routerLinkActive="router-link-active"
+                  [label]="'common.buttons.view' | translate"
+                ></p-button>
                 @if (registrationData().status === RegistrationStatus.InProgress) {
                   <p-button severity="secondary" [label]="'common.buttons.update' | translate"></p-button>
                 }
               }
             </div>
           </div>
 
-          <!-- @if (registrationData().status !== RegistrationStatus.Pending) {
-            <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>{{ '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>
+          @if (registrationData().revisionState === RevisionReviewStates.Approved) {
+            <div class="flex flex-column min-w-max">
+              <h3 class="mb-1">{{ 'shared.resources.title' | translate }}</h3>
+              <osf-data-resources
+                [vertical]="true"
+                [resourceId]="registrationData().id"
+                [hasData]="registrationData().hasData"
+                [hasAnalyticCode]="registrationData().hasAnalyticCode"
+                [hasMaterials]="registrationData().hasMaterials"
+                [hasPapers]="registrationData().hasPapers"
+                [hasSupplements]="registrationData().hasSupplements"
+              ></osf-data-resources>
             </div>
-          } -->
+          }
         </div>
       </div>
     }

src/app/shared/components/registration-card/registration-card.component.ts

@@ -7,18 +7,23 @@ import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-import { RegistryStatus } from '@osf/shared/enums';
+import { RegistryStatus, RevisionReviewStates } from '@osf/shared/enums';
 import { RegistrationCard } from '@osf/shared/models';
 
+import { DataResourcesComponent } from '../data-resources/data-resources.component';
+import { StatusBadgeComponent } from '../status-badge/status-badge.component';
+
 @Component({
   selector: 'osf-registration-card',
-  imports: [Card, Button, TranslatePipe, DatePipe, RouterLink],
+  imports: [Card, Button, TranslatePipe, DatePipe, RouterLink, StatusBadgeComponent, DataResourcesComponent],
   templateUrl: './registration-card.component.html',
   styleUrl: './registration-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegistrationCardComponent {
   RegistrationStatus = RegistryStatus;
+  RevisionReviewStates = RevisionReviewStates;
+  readonly isDraft = input<boolean>(false);
   readonly registrationData = input.required<RegistrationCard>();
   readonly deleteDraft = output<string>();
 }

src/app/shared/components/status-badge/default-statuses.ts

@@ -0,0 +1,20 @@
+import { RegistryStatus } from '@osf/shared/enums';
+import { StatusInfo } from '@osf/shared/models';
+
+export const RegistryStatusMap: Record<RegistryStatus, StatusInfo> = {
+  [RegistryStatus.None]: { label: '', severity: null },
+  [RegistryStatus.PendingRegistrationApproval]: { label: 'statuses.pendingRegistrationApproval', severity: 'warn' },
+  [RegistryStatus.PendingEmbargoApproval]: { label: 'statuses.pendingEmbargoApproval', severity: 'warn' },
+  [RegistryStatus.Pending]: { label: 'statuses.pending', severity: 'info' },
+  [RegistryStatus.Accepted]: { label: 'statuses.accepted', severity: 'success' },
+  [RegistryStatus.Embargo]: { label: 'statuses.embargo', severity: 'info' },
+  [RegistryStatus.PendingEmbargoTerminationApproval]: {
+    label: 'statuses.pendingEmbargoTerminationApproval',
+    severity: 'warn',
+  },
+  [RegistryStatus.PendingWithdrawRequest]: { label: 'statuses.pendingWithdrawRequest', severity: 'info' },
+  [RegistryStatus.PendingWithdraw]: { label: 'statuses.pendingWithdraw', severity: 'warn' },
+  [RegistryStatus.Unapproved]: { label: 'statuses.unapproved', severity: 'danger' },
+  [RegistryStatus.InProgress]: { label: 'statuses.inProgress', severity: 'info' },
+  [RegistryStatus.PendingModeration]: { label: 'statuses.pendingModeration', severity: 'warn' },
+};

src/app/shared/components/status-badge/status-badge.component.html

@@ -0,0 +1,3 @@
+@if (label) {
+  <p-tag [value]="label" [severity]="severity"></p-tag>
+}

src/app/shared/components/status-badge/status-badge.component.spec.ts

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

src/app/shared/components/status-badge/status-badge.component.ts

@@ -0,0 +1,26 @@
+import { Tag } from 'primeng/tag';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { RegistryStatus } from '@osf/shared/enums';
+import { SeverityType } from '@osf/shared/models';
+
+import { RegistryStatusMap } from './default-statuses';
+
+@Component({
+  selector: 'osf-status-badge',
+  imports: [Tag],
+  templateUrl: './status-badge.component.html',
+  styleUrl: './status-badge.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StatusBadgeComponent {
+  status = input.required<RegistryStatus>();
+  get label(): string {
+    return RegistryStatusMap[this.status()]?.label ?? 'Unknown';
+  }
+
+  get severity(): SeverityType | null {
+    return RegistryStatusMap[this.status()]?.severity ?? null;
+  }
+}

src/app/shared/mappers/registration/registration.mapper.ts

@@ -7,6 +7,8 @@ import {
   RegistrationModel,
 } from '@osf/shared/models';
 
+import { MapRegistryStatus } from '../registry';
+
 export class RegistrationMapper {
   static fromDraftRegistrationResponse(response: DraftRegistrationDataJsonApi): DraftRegistrationModel {
     return {
@@ -30,11 +32,13 @@ export class RegistrationMapper {
             id: response.embeds.branched_from.data.id,
             title: response.embeds.branched_from.data.attributes.title,
             filesLink: response.embeds?.branched_from?.data.relationships?.files?.links?.related?.href,
+            type: response.embeds.branched_from.data.type,
           }
         : {
             id: response.relationships.branched_from?.data?.id || '',
             title: response.attributes.title,
             filesLink: response.relationships.branched_from?.links?.related.href + 'files/',
+            type: response.relationships.branched_from?.data?.type,
           },
       providerId: response.relationships.provider?.data?.id || '',
       hasProject: !!response.attributes.has_project,
@@ -59,6 +63,7 @@ export class RegistrationMapper {
       dateModified: registration.attributes.datetime_updated,
       registrationTemplate: registration.embeds?.registration_schema?.data?.attributes?.name || '',
       registry: registration.embeds?.provider?.data?.attributes?.name || '',
+      public: registration.attributes.public,
       contributors:
         registration.embeds?.bibliographic_contributors?.data.map((contributor) => ({
           id: contributor.id,
@@ -72,11 +77,14 @@ export class RegistrationMapper {
       id: registration.id,
       title: registration.attributes.title,
       description: registration.attributes.description || '',
-      status: RegistryStatus.InProgress, // [NM] TODO: map status accordingly
+      status: MapRegistryStatus(registration.attributes),
       dateCreated: registration.attributes.datetime_initiated,
       dateModified: registration.attributes.date_modified,
       registrationTemplate: registration.embeds?.registration_schema?.data?.attributes?.name || '',
       registry: registration.embeds?.provider?.data?.attributes?.name || '',
+      public: registration.attributes.public,
+      reviewsState: registration.attributes.review_state,
+      revisionState: registration.attributes.revision_state,
       contributors:
         registration.embeds?.bibliographic_contributors?.data.map((contributor) => ({
           id: contributor.id,
@@ -96,7 +104,7 @@ export class RegistrationMapper {
       data: {
         type: 'registrations',
         attributes: {
-          embargo_end_date: embargoDate,
+          embargo_end_date: embargoDate || null,
           draft_registration: draftId,
           included_node_ids: components,
         },

src/app/shared/mappers/registry/map-registry-status.mapper.ts

@@ -1,7 +1,10 @@
 import { RegistryOverviewJsonApiAttributes } from '@osf/features/registry/models';
+import { RegistrationAttributesJsonApi } from '@osf/shared/models';
 import { RegistrationReviewStates, RegistryStatus, RevisionReviewStates } from '@shared/enums';
 
-export function MapRegistryStatus(registry: RegistryOverviewJsonApiAttributes): RegistryStatus {
+export function MapRegistryStatus(
+  registry: RegistryOverviewJsonApiAttributes | RegistrationAttributesJsonApi
+): RegistryStatus {
   if (registry.pending_embargo_approval) {
     return RegistryStatus.PendingEmbargoApproval;
   } else if (registry.pending_embargo_termination_approval) {

src/app/shared/models/index.ts

@@ -30,6 +30,7 @@ export * from './search';
 export * from './select-option.model';
 export * from './severity.type';
 export * from './social-icon.model';
+export * from './status-info.model';
 export * from './step-option.model';
 export * from './store';
 export * from './subject';

src/app/shared/models/registration/registration-card.model.ts

@@ -1,4 +1,4 @@
-import { RegistryStatus } from '@osf/shared/enums';
+import { RegistrationReviewStates, RegistryStatus, RevisionReviewStates } from '@osf/shared/enums';
 
 import { ContributorModel } from '../contributors';
 
@@ -13,4 +13,12 @@ export interface RegistrationCard {
   registrationTemplate: string;
   registry: string;
   resources?: Record<string, string>;
+  public: boolean | undefined;
+  reviewsState?: RegistrationReviewStates;
+  revisionState?: RevisionReviewStates;
+  hasData?: boolean;
+  hasAnalyticCode?: boolean;
+  hasMaterials?: boolean;
+  hasPapers?: boolean;
+  hasSupplements?: boolean;
 }

src/app/shared/models/registration/registration-json-api.model.ts

@@ -1,4 +1,5 @@
 import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+import { RegistrationReviewStates, RevisionReviewStates } from '@osf/shared/enums';
 import { LicenseRecordJsonApi } from '@osf/shared/models';
 
 export interface DraftRegistrationResponseJsonApi {
@@ -39,6 +40,7 @@ export interface DraftRegistrationAttributesJsonApi {
   registration_responses: Record<string, unknown>;
   tags: string[];
   title: string;
+  public?: boolean;
 }
 
 export interface RegistrationAttributesJsonApi {
@@ -48,7 +50,13 @@ export interface RegistrationAttributesJsonApi {
   description: string;
   embargoed: boolean;
   archiving: boolean;
+  public: boolean;
   title: string;
+  revision_state: RevisionReviewStates;
+  review_state: RegistrationReviewStates;
+  pending_registration_approval: boolean;
+  pending_embargo_approval: boolean;
+  pending_embargo_termination_approval: boolean;
 }
 
 export interface DraftRegistrationRelationshipsJsonApi {

src/app/shared/models/status-info.model.ts

@@ -0,0 +1,6 @@
+import { SeverityType } from './severity.type';
+
+export interface StatusInfo {
+  label: string;
+  severity: SeverityType | null;
+}