feat(registration): add link to create registration from project

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

@@ -9,7 +9,7 @@ import { map, of } from 'rxjs';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { LoadingSpinnerComponent, SubHeaderComponent } from '@osf/shared/components';
 import { RegistrationCardComponent } from '@osf/shared/components/registration-card/registration-card.component';
@@ -26,20 +26,20 @@ import { GetRegistrations, RegistrationsSelectors } from './store';
 })
 export class RegistrationsComponent implements OnInit {
   private readonly route = inject(ActivatedRoute);
-
+  private readonly router = inject(Router);
   readonly projectId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
-
   protected registrations = select(RegistrationsSelectors.getRegistrations);
   protected isRegistrationsLoading = select(RegistrationsSelectors.isRegistrationsLoading);
-
   protected actions = createDispatchMap({ getRegistrations: GetRegistrations });
+  private readonly OSF_PROVIDER_ID = 'osf';
 
   ngOnInit(): void {
     this.actions.getRegistrations(this.projectId());
   }
 
   addRegistration(): void {
-    //TODO: Implement the logic to add a new registration.
-    console.log('Add Registration clicked');
+    this.router.navigate([`registries/${this.OSF_PROVIDER_ID}/new`], {
+      queryParams: { projectId: this.projectId() },
+    });
   }
 }

src/app/features/registries/components/new-registration/new-registration.component.html

@@ -41,6 +41,7 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
               [placeholder]="'registries.new.selectProject' | translate"
               optionLabel="title"
               optionValue="id"
+              [loading]="isProjectsLoading()"
               (onChange)="onSelectProject($event.value)"
               class="w-6"
             />

src/app/features/registries/components/new-registration/new-registration.component.ts

@@ -32,19 +32,21 @@ export class NewRegistrationComponent {
   protected readonly isDraftSubmitting = select(RegistriesSelectors.isDraftSubmitting);
   protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
   protected readonly isProvidersLoading = select(RegistriesSelectors.isProvidersLoading);
+  protected readonly isProjectsLoading = select(RegistriesSelectors.isProjectsLoading);
   protected actions = createDispatchMap({
     getProjects: GetProjects,
     getProviderSchemas: GetProviderSchemas,
     createDraft: CreateDraft,
   });
 
   protected readonly providerId = this.route.snapshot.params['providerId'];
+  protected readonly projectId = this.route.snapshot.queryParams['projectId'];
 
-  fromProject = false;
+  fromProject = this.projectId !== undefined;
 
   draftForm = this.fb.group({
     providerSchema: ['', Validators.required],
-    project: [''],
+    project: [this.projectId || ''],
   });
 
   constructor() {

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

@@ -37,10 +37,21 @@ <h4 class="mb-2">{{ 'navigation.registration.contributors' | translate }}</h4>
         }
       </div>
     </div>
-    <div class="mb-4">
+
+    <div class="license mb-4">
       <h4 class="mb-2">{{ 'shared.license.title' | translate }}</h4>
-      <p>{{ draftRegistration()?.license?.id }}</p>
-      @if (!draftRegistration()?.license) {
+      @if (draftRegistration()?.license && license()) {
+        <p-accordion>
+          <p-accordion-panel value="0">
+            <p-accordion-header class="p-0 justify-content-start gap-2">
+              <div>{{ license()?.name }}</div>
+            </p-accordion-header>
+            <p-accordion-content>
+              <div>{{ license()!.text | interpolate: licenseOptionsRecord() }}</div>
+            </p-accordion-content>
+          </p-accordion-panel>
+        </p-accordion>
+      } @else {
         <p class="font-italic">{{ 'common.labels.noData' | translate }}</p>
         <p-message class="mt-1" severity="error" variant="simple" size="small">
           {{ INPUT_VALIDATION_MESSAGES.required | translate }}

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

@@ -2,6 +2,7 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { DialogService } from 'primeng/dynamicdialog';
@@ -16,6 +17,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { INPUT_VALIDATION_MESSAGES } from '@osf/shared/constants';
 import { ResourceType } from '@osf/shared/enums';
+import { InterpolatePipe } from '@osf/shared/pipes';
 import { CustomConfirmationService, ToastService } from '@osf/shared/services';
 import {
   ContributorsSelectors,
@@ -25,13 +27,25 @@ import {
 } from '@osf/shared/stores';
 
 import { FieldType } from '../../enums';
-import { DeleteDraft, FetchProjectChildren, RegistriesSelectors } from '../../store';
+import { DeleteDraft, FetchLicenses, FetchProjectChildren, RegistriesSelectors } from '../../store';
 import { ConfirmRegistrationDialogComponent } from '../confirm-registration-dialog/confirm-registration-dialog.component';
 import { SelectComponentsDialogComponent } from '../select-components-dialog/select-components-dialog.component';
 
 @Component({
   selector: 'osf-review',
-  imports: [TranslatePipe, Card, Message, RouterLink, Tag, Button],
+  imports: [
+    TranslatePipe,
+    Card,
+    Message,
+    RouterLink,
+    Tag,
+    Button,
+    Accordion,
+    AccordionContent,
+    AccordionHeader,
+    AccordionPanel,
+    InterpolatePipe,
+  ],
   templateUrl: './review.component.html',
   styleUrl: './review.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -54,13 +68,17 @@ export class ReviewComponent {
   protected readonly contributors = select(ContributorsSelectors.getContributors);
   protected readonly subjects = select(SubjectsSelectors.getSelectedSubjects);
   protected readonly components = select(RegistriesSelectors.getRegistrationComponents);
+  protected readonly license = select(RegistriesSelectors.getRegistrationLicense);
+  private readonly OSF_PROVIDER_ID = 'osf';
+
   protected readonly FieldType = FieldType;
 
   protected actions = createDispatchMap({
     getContributors: GetAllContributors,
     getSubjects: FetchSelectedSubjects,
     deleteDraft: DeleteDraft,
     getProjectsComponents: FetchProjectChildren,
+    fetchLicenses: FetchLicenses,
   });
 
   private readonly draftId = toSignal(this.route.params.pipe(map((params) => params['id'])) ?? of(undefined));
@@ -71,6 +89,10 @@ export class ReviewComponent {
     return Object.values(this.stepsValidation()).some((step) => step.invalid);
   });
 
+  licenseOptionsRecord = computed(() => {
+    return (this.draftRegistration()?.license.options ?? {}) as Record<string, string>;
+  });
+
   constructor() {
     if (!this.contributors()?.length) {
       this.actions.getContributors(this.draftId(), ResourceType.DraftRegistration);
@@ -79,6 +101,12 @@ export class ReviewComponent {
       this.actions.getSubjects(this.draftId(), ResourceType.DraftRegistration);
     }
 
+    effect(() => {
+      if (this.draftRegistration()) {
+        this.actions.fetchLicenses(this.draftRegistration()?.providerId ?? this.OSF_PROVIDER_ID);
+      }
+    });
+
     let componentsLoaded = false;
     effect(() => {
       if (!this.isDraftSubmitting()) {

src/app/features/registries/store/registries.selectors.ts

@@ -23,6 +23,11 @@ export class RegistriesSelectors {
     return state.projects.data;
   }
 
+  @Selector([RegistriesState])
+  static isProjectsLoading(state: RegistriesStateModel): boolean {
+    return state.projects.isLoading;
+  }
+
   @Selector([RegistriesState])
   static isDraftSubmitting(state: RegistriesStateModel): boolean {
     return state.draftRegistration.isSubmitting ?? false;
@@ -63,6 +68,11 @@ export class RegistriesSelectors {
     return state.draftRegistration.data?.license || null;
   }
 
+  @Selector([RegistriesState])
+  static getRegistrationLicense(state: RegistriesStateModel): License | null {
+    return state.licenses.data.find((l) => l.id === state.draftRegistration.data?.license.id) || null;
+  }
+
   @Selector([RegistriesState])
   static getPagesSchema(state: RegistriesStateModel): PageSchema[] {
     return state.pagesSchema.data;