Review step for registration

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

@@ -0,0 +1,57 @@
+<p class="mb-2">{{ 'registries.review.confirmation.remember' | translate }}</p>
+<ul class="mb-4 pl-5">
+  <li class="list-disc">{{ 'registries.review.confirmation.text1' | translate }}</li>
+  <li class="list-disc">{{ 'registries.review.confirmation.text2' | translate }}</li>
+  <li class="list-disc">{{ 'registries.review.confirmation.text3' | translate }}</li>
+  <li class="list-disc">{{ 'registries.review.confirmation.text4' | translate }}</li>
+</ul>
+<form [formGroup]="form">
+  <div class="flex align-items-center gap-2 mb-2">
+    <p-radioButton
+      formControlName="submitOption"
+      [inputId]="SubmitType.Public"
+      [value]="SubmitType.Public"
+    ></p-radioButton>
+    <label [for]="SubmitType.Public" class="ml-1 font-bold">{{
+      'registries.review.confirmation.options.public' | translate
+    }}</label>
+  </div>
+  <div class="flex align-items-center gap-2">
+    <p-radioButton
+      formControlName="submitOption"
+      [inputId]="SubmitType.Embargo"
+      [value]="SubmitType.Embargo"
+    ></p-radioButton>
+    <label [for]="SubmitType.Embargo" class="ml-1 font-bold">{{
+      'registries.review.confirmation.options.embargo' | translate
+    }}</label>
+  </div>
+  @if (showDateControl) {
+    <p-datePicker
+      styleClass="mt-2"
+      id="embargoDate"
+      formControlName="embargoDate"
+      dataType="string"
+      dateFormat="yy-mm-dd"
+      appendTo="body"
+      [minDate]="minEmbargoDate()"
+      [placeholder]="'registries.review.confirmation.embargoPlaceholder' | translate"
+    />
+  }
+  <div class="flex justify-content-end gap-2 mt-4">
+    <p-button
+      class="w-12rem btn-full-width"
+      [label]="'common.buttons.back' | translate"
+      severity="info"
+      (click)="dialogRef.close()"
+      [disabled]="isRegistrationSubmitting()"
+    />
+    <p-button
+      class="w-12rem btn-full-width"
+      [label]="'common.buttons.submit' | translate"
+      [disabled]="form.invalid || isRegistrationSubmitting()"
+      [loading]="isRegistrationSubmitting()"
+      (click)="submit()"
+    />
+  </div>
+</form>

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

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

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

@@ -0,0 +1,77 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DatePicker } from 'primeng/datepicker';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { RadioButton } from 'primeng/radiobutton';
+
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { SubmitType } from '../../enums';
+import { RegisterDraft, RegistriesSelectors } from '../../store';
+
+@Component({
+  selector: 'osf-confirm-registration-dialog',
+  imports: [Button, TranslatePipe, ReactiveFormsModule, RadioButton, DatePicker],
+  templateUrl: './confirm-registration-dialog.component.html',
+  styleUrl: './confirm-registration-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmRegistrationDialogComponent {
+  protected readonly dialogRef = inject(DynamicDialogRef);
+  private readonly fb = inject(FormBuilder);
+  readonly config = inject(DynamicDialogConfig);
+
+  protected readonly isRegistrationSubmitting = select(RegistriesSelectors.isRegistrationSubmitting);
+  protected actions = createDispatchMap({
+    registerDraft: RegisterDraft,
+  });
+  SubmitType = SubmitType;
+  showDateControl = false;
+  minEmbargoDate = computed(() => {
+    const date = new Date();
+    date.setDate(date.getDate() + 3);
+    return date;
+  });
+
+  form: FormGroup = this.fb.group({
+    submitOption: [null, Validators.required],
+    embargoDate: [{ value: null, disabled: true }],
+  });
+
+  constructor() {
+    this.form.get('submitOption')!.valueChanges.subscribe((value) => {
+      this.showDateControl = value === SubmitType.Embargo;
+      const dateControl = this.form.get('embargoDate');
+
+      if (this.showDateControl) {
+        dateControl!.enable();
+        dateControl!.setValidators(Validators.required);
+      } else {
+        dateControl!.disable();
+        dateControl!.clearValidators();
+        dateControl!.reset();
+      }
+
+      dateControl!.updateValueAndValidity();
+    });
+  }
+
+  submit(): void {
+    this.actions
+      .registerDraft(
+        this.config.data.draftId,
+        this.form.value.embargoDate,
+        this.config.data.providerId,
+        this.config.data.projectId
+      )
+      .subscribe({
+        complete: () => {
+          this.dialogRef.close();
+        },
+      });
+  }
+}

src/app/features/registries/components/custom-step/custom-step.component.html

@@ -1,4 +1,4 @@
-<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+<section class="flex flex-column bg-white flex-1 p-5 gap-4 w-full">
   @if (currentPage()) {
     <h2>{{ currentPage().title }}</h2>
 

src/app/features/registries/components/custom-step/custom-step.component.scss

@@ -0,0 +1,4 @@
+:host {
+  flex: 1;
+  background: var(--white);
+}

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

@@ -1,3 +1,5 @@
 :host {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }

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

@@ -102,7 +102,7 @@ export class DraftsComponent {
     }
     effect(() => {
       const registrationSchemaId = this.draftRegistration()?.registrationSchemaId;
-      if (registrationSchemaId && !this.pages().length) {
+      if (registrationSchemaId) {
         this.actions
           .getSchemaBlocks(registrationSchemaId || '')
           .pipe(

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

@@ -16,11 +16,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TextInputComponent } from '@osf/shared/components';
 import { INPUT_VALIDATION_MESSAGES, InputLimits } from '@osf/shared/constants';
 import { SubjectModel } from '@osf/shared/models';
+import { DraftRegistrationModel } from '@osf/shared/models/registration';
 import { CustomConfirmationService } from '@osf/shared/services';
 import { SubjectsSelectors } from '@osf/shared/stores';
 import { CustomValidators, findChangedFields } from '@osf/shared/utils';
 
-import { Registration } from '../../models';
 import { DeleteDraft, RegistriesSelectors, UpdateDraft, UpdateStepValidation } from '../../store';
 
 import { ContributorsComponent } from './contributors/contributors.component';
@@ -85,7 +85,7 @@ export class MetadataComponent implements OnDestroy {
     });
   }
 
-  private initForm(data: Registration): void {
+  private initForm(data: DraftRegistrationModel): void {
     this.metadataForm.patchValue({
       title: data.title,
       description: data.description,
@@ -118,7 +118,7 @@ export class MetadataComponent implements OnDestroy {
       onConfirm: () => {
         this.actions.deleteDraft(this.draftId).subscribe({
           next: () => {
-            this.router.navigateByUrl('/registries/new');
+            this.router.navigateByUrl(`/registries/${this.draftRegistration()?.providerId}/new`);
           },
         });
       },

src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.html

@@ -1,4 +1,4 @@
-<p-card>
+<p-card (focusout)="onFocusOut()">
   <osf-subjects
     [areSubjectsUpdating]="isSubjectsUpdating()"
     [selected]="selectedSubjects()"

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

@@ -1,73 +1,75 @@
-<osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
-<section class="flex flex-column lg:flex-row bg-white flex-1 h-full p-5 gap-4 w-full">
-  <p>
-    {{ 'registries.new.infoText1' | translate }}
-    <a href="https://help.osf.io/"> {{ 'common.links.clickHere' | translate }}</a>
-    {{ 'registries.new.infoText2' | translate }}
-  </p>
-</section>
-<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
-  <p-card class="w-full">
-    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '1' }}</h2>
-    <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step1' | translate }}</p>
-    <div class="flex gap-2">
-      <p-button
-        class="btn-full-width w-2 font-bold"
-        severity="info"
-        [label]="'common.buttons.yes' | translate"
-        [raised]="fromProject"
-        (click)="toggleFromProject()"
-      />
-      <p-button
-        class="btn-full-width w-2"
-        severity="info"
-        [label]="'common.buttons.no' | translate"
-        [raised]="!fromProject"
-        (click)="toggleFromProject()"
-      />
-    </div>
-  </p-card>
-  <form [formGroup]="draftForm" (ngSubmit)="createDraft()" class="flex flex-column gap-4">
-    @if (fromProject) {
+<section class="bg-white h-full">
+  <osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
+  <section class="flex flex-column lg:flex-row flex-1 p-5 gap-4 w-full">
+    <p>
+      {{ 'registries.new.infoText1' | translate }}
+      <a href="https://help.osf.io/"> {{ 'common.links.clickHere' | translate }}</a>
+      {{ 'registries.new.infoText2' | translate }}
+    </p>
+  </section>
+  <section class="flex flex-column flex-1 p-5 gap-4 w-full">
+    <p-card class="w-full">
+      <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '1' }}</h2>
+      <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step1' | translate }}</p>
+      <div class="flex gap-2">
+        <p-button
+          class="btn-full-width w-2 font-bold"
+          severity="info"
+          [label]="'common.buttons.yes' | translate"
+          [raised]="fromProject"
+          (click)="toggleFromProject()"
+        />
+        <p-button
+          class="btn-full-width w-2"
+          severity="info"
+          [label]="'common.buttons.no' | translate"
+          [raised]="!fromProject"
+          (click)="toggleFromProject()"
+        />
+      </div>
+    </p-card>
+    <form [formGroup]="draftForm" (ngSubmit)="createDraft()" class="flex flex-column gap-4">
+      @if (fromProject) {
+        <p-card class="w-full">
+          <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
+          <p class="mb-3 text-lg font-bold">{{ 'registries.new.steps.step2' | translate }}</p>
+          <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
+          <div class="flex">
+            <p-select
+              formControlName="project"
+              [options]="projects()"
+              [placeholder]="'registries.new.selectProject' | translate"
+              optionLabel="title"
+              optionValue="id"
+              (onChange)="onSelectProject($event.value)"
+              class="w-6"
+            />
+          </div>
+        </p-card>
+      }
       <p-card class="w-full">
-        <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
-        <p class="mb-3 text-lg font-bold">{{ 'registries.new.steps.step2' | translate }}</p>
-        <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
+        <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ? '3' : '2') }}</h2>
+        <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
         <div class="flex">
           <p-select
-            formControlName="project"
-            [options]="projects()"
-            [placeholder]="'registries.new.selectProject' | translate"
-            optionLabel="title"
+            formControlName="providerSchema"
+            [options]="providerSchemas()"
+            optionLabel="name"
             optionValue="id"
-            (onChange)="onSelectProject($event.value)"
+            [loading]="isProvidersLoading()"
+            (onChange)="onSelectProviderSchema($event.value)"
             class="w-6"
           />
         </div>
       </p-card>
-    }
-    <p-card class="w-full">
-      <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ? '3' : '2') }}</h2>
-      <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
-      <div class="flex">
-        <p-select
-          formControlName="provider"
-          [options]="providers()"
-          optionLabel="name"
-          optionValue="id"
-          [loading]="isProvidersLoading()"
-          (onChange)="onSelectProvider($event.value)"
-          class="w-6"
+      <div class="flex justify-content-end">
+        <p-button
+          [label]="'registries.new.createDraft' | translate"
+          [disabled]="draftForm.invalid"
+          type="submit"
+          [loading]="isDraftSubmitting()"
         />
       </div>
-    </p-card>
-    <div class="flex justify-content-end">
-      <p-button
-        [label]="'registries.new.createDraft' | translate"
-        [disabled]="draftForm.invalid"
-        type="submit"
-        [loading]="isDraftSubmitting()"
-      />
-    </div>
-  </form>
+    </form>
+  </section>
 </section>