Feat/240 update registration

src/app/core/interceptors/auth.interceptor.ts

@@ -6,9 +6,10 @@ export const authInterceptor: HttpInterceptorFn = (
   req: HttpRequest<unknown>,
   next: HttpHandlerFn
 ): Observable<HttpEvent<unknown>> => {
-  const authToken = 'UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm';
+  const authToken = '2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
   // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm kyrylo
   // 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt roman nastyuk
+  // yZ485nN6MfhqvGrfU4Xk5BEnq0T6LM50nQ6H9VrYaMTaZUQNTuxnIwlp0Wpz879RCsK9GQ NM stage3
   const localStorageToken = localStorage.getItem('authToken');
   const token = localStorageToken || authToken;
   if (token) {

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

@@ -6,73 +6,71 @@ <h2>{{ currentPage().title }}</h2>
 
     @if (currentPage().sections?.length) {
       @for (section of currentPage().sections; track section.id) {
-        questions = section.questions;
         <p-card>
           <h3 class="mb-2">{{ section.title }}</h3>
           @if (section.description) {
             <p class="mb-3">{{ section.description }}</p>
           }
-          <ng-container *ngTemplateOutlet="questionList"></ng-container>
+          <ng-container *ngTemplateOutlet="questionList; context: { $implicit: section.questions }"></ng-container>
         </p-card>
       }
     } @else {
-      <ng-container *ngTemplateOutlet="questionList"></ng-container>
+      <ng-container *ngTemplateOutlet="questionList; context: { $implicit: questions }"></ng-container>
     }
 
-    <ng-template #questionList>
-      @for (question of questions; track question.id) {
+    <ng-template #questionList let-questions>
+      @for (q of questions; track q.id) {
         <form [formGroup]="stepForm">
           <p-card>
-            <label [for]="question.groupKey">
+            <label [for]="q.groupKey">
               <h3 class="mb-2">
-                {{ question.displayText }}
-                @if (question.required) {
+                {{ q.displayText }}
+                @if (q.required) {
                   <span class="text-red-500">*</span>
                 }
               </h3>
-              @if (question.helpText) {
-                <p class="mb-3">{{ question.helpText }}</p>
+              @if (q.helpText) {
+                <p class="mb-3">{{ q.helpText }}</p>
               }
-              @if (question.paragraphText) {
-                <p class="mb-3">{{ question.paragraphText }}</p>
+              @if (q.paragraphText) {
+                <p class="mb-3">{{ q.paragraphText }}</p>
               }
             </label>
-            @if (question.exampleText) {
+            @if (q.exampleText) {
               <p-inplace #inplaceRef styleClass="mb-4">
                 <ng-template #display>
-                  <span class="text-primary">{{ 'common.links.showExample' | translate }} </span>
+                  <span class="text-primary font-medium">{{ 'common.links.showExample' | translate }} </span>
                 </ng-template>
                 <ng-template #content>
-                  <div class="p-inplace-display">
-                    <button
-                      class="text-primary border-none cursor-pointer bg-transparent text-sm"
-                      tabindex="0"
-                      role="button"
-                      (click)="inplaceRef.deactivate()"
-                      (keyup.enter)="inplaceRef.deactivate()"
-                      (keyup.space)="inplaceRef.deactivate()"
-                    >
+                  <div
+                    class="p-inplace-display"
+                    tabindex="0"
+                    (click)="inplaceRef.deactivate()"
+                    (keyup.enter)="inplaceRef.deactivate()"
+                    (keyup.space)="inplaceRef.deactivate()"
+                  >
+                    <button class="text-primary border-none cursor-pointer bg-transparent text-sm">
                       {{ 'common.links.hideExample' | translate }}
                     </button>
                   </div>
-                  <p class="m-0">{{ question.exampleText }}</p>
+                  <p class="m-0">{{ q.exampleText }}</p>
                 </ng-template>
               </p-inplace>
             }
 
-            @switch (question.fieldType) {
+            @switch (q.fieldType) {
               @case (FieldType.TextArea) {
                 <textarea
-                  id="{{ question.groupKey }}"
+                  id="{{ q.groupKey }}"
                   class="w-full"
                   rows="5"
                   cols="30"
                   pTextarea
-                  [formControlName]="question.responseKey!"
+                  [formControlName]="q.responseKey!"
                 ></textarea>
                 @if (
-                  stepForm.controls[question.responseKey!].errors?.['required'] &&
-                  (stepForm.controls[question.responseKey!].touched || stepForm.controls[question.responseKey!].dirty)
+                  stepForm.controls[q.responseKey!].errors?.['required'] &&
+                  (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
                 ) {
                   <p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
                     {{ INPUT_VALIDATION_MESSAGES.required | translate }}
@@ -81,10 +79,10 @@ <h3 class="mb-2">
               }
               @case (FieldType.Radio) {
                 <div class="flex flex-column gap-2">
-                  @for (option of question.options; track option) {
+                  @for (option of q.options; track option) {
                     <div class="flex align -items-center gap-2">
                       <p-radioButton
-                        [formControlName]="question.responseKey!"
+                        [formControlName]="q.responseKey!"
                         [inputId]="option.value"
                         [value]="option.value"
                       ></p-radioButton>
@@ -96,8 +94,8 @@ <h3 class="mb-2">
                   }
                 </div>
                 @if (
-                  stepForm.controls[question.responseKey!].errors?.['required'] &&
-                  (stepForm.controls[question.responseKey!].touched || stepForm.controls[question.responseKey!].dirty)
+                  stepForm.controls[q.responseKey!].errors?.['required'] &&
+                  (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
                 ) {
                   <p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
                     {{ INPUT_VALIDATION_MESSAGES.required | translate }}
@@ -106,20 +104,23 @@ <h3 class="mb-2">
               }
               @case (FieldType.Checkbox) {
                 <div class="flex flex-column gap-2">
-                  @for (option of question.options; track option) {
+                  @for (option of q.options; track option) {
                     <div class="flex align-items-center gap-2">
                       <p-checkbox
                         [inputId]="option.value"
-                        [formControlName]="question.responseKey!"
+                        [formControlName]="q.responseKey!"
                         [value]="option.value"
                       ></p-checkbox>
                       <label [for]="option.value" class="ml-2">{{ option.label }}</label>
+                      @if (option.helpText) {
+                        <osf-info-icon [tooltipText]="option.helpText"></osf-info-icon>
+                      }
                     </div>
                   }
                 </div>
                 @if (
-                  stepForm.controls[question.responseKey!].errors?.['required'] &&
-                  (stepForm.controls[question.responseKey!].touched || stepForm.controls[question.responseKey!].dirty)
+                  stepForm.controls[q.responseKey!].errors?.['required'] &&
+                  (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
                 ) {
                   <p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
                     {{ INPUT_VALIDATION_MESSAGES.required | translate }}
@@ -129,15 +130,15 @@ <h3 class="mb-2">
 
               @case (FieldType.Text) {
                 <input
-                  [formControlName]="question.responseKey!"
+                  [formControlName]="q.responseKey!"
                   type="text"
                   class="w-full"
-                  [placeholder]="question.exampleText"
+                  [placeholder]="q.exampleText"
                   pInputText
                 />
                 @if (
-                  stepForm.controls[question.responseKey!].errors?.['required'] &&
-                  (stepForm.controls[question.responseKey!].touched || stepForm.controls[question.responseKey!].dirty)
+                  stepForm.controls[q.responseKey!].errors?.['required'] &&
+                  (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
                 ) {
                   <p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
                     {{ INPUT_VALIDATION_MESSAGES.required | translate }}
@@ -153,22 +154,22 @@ <h3 class="mb-2">{{ 'project.files.actions.uploadFile' | translate }}</h3>
                   {{ 'shared.files.description' | translate }}
                 </p>
                 <div class="flex flex-wrap gap-2 mt-3 mb-3">
-                  @for (file of attachedFiles[question.responseKey!] || []; track file) {
+                  @for (file of attachedFiles[q.responseKey!] || []; track file) {
                     <p-chip
                       [label]="file.name"
                       severity="info"
                       removable="true"
-                      (onRemove)="removeFromAttachedFiles(file, question.responseKey!)"
+                      (onRemove)="removeFromAttachedFiles(file, q.responseKey!)"
                     />
                   }
                 </div>
                 <div class="-ml-3 -mr-3">
                   <osf-files-control
-                    [attachedFiles]="attachedFiles[question.responseKey!]"
+                    [attachedFiles]="attachedFiles[q.responseKey!]"
                     [filesLink]="filesLink()"
                     [projectId]="projectId()"
                     [provider]="provider()"
-                    (attachFile)="onAttachFile($event, question.responseKey!)"
+                    (attachFile)="onAttachFile($event, q.responseKey!)"
                     [filesViewOnly]="filesViewOnly()"
                   ></osf-files-control>
                 </div>

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

@@ -115,7 +115,11 @@ export class CustomStepComponent implements OnDestroy {
 
   private initStepForm(page: PageSchema): void {
     this.stepForm = this.fb.group({});
-    page.questions?.forEach((q) => {
+    let questions = page.questions || [];
+    if (page.sections?.length) {
+      questions = page.sections.flatMap((section) => section.questions || []);
+    }
+    questions?.forEach((q) => {
       const controlName = q.responseKey as string;
       let control: FormControl;
 
@@ -183,8 +187,11 @@ export class CustomStepComponent implements OnDestroy {
       this.stepForm.patchValue({
         [questionKey]: [...(this.attachedFiles[questionKey] || []), file],
       });
+      const otherFormValues = { ...this.stepForm.value };
+      delete otherFormValues[questionKey];
       this.updateAction.emit({
         [questionKey]: [...this.attachedFiles[questionKey].map((f) => FilesMapper.toFilePayload(f as OsfFile))],
+        ...otherFormValues,
       });
     }
   }

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

@@ -28,50 +28,25 @@ <h2 class="mb-4">{{ page.title }}</h2>
       @if (page.description) {
         <p class="mb-4">{{ page.description }}</p>
       }
-
-      @if (page.questions?.length) {
-        @for (question of page.questions; track question.responseKey) {
-          <div [class.mb-4]="!$last">
-            <h4 class="mb-2">{{ question.displayText }}</h4>
-            @if (schemaResponseRevisionData()[question.responseKey!]) {
-              @switch (question.fieldType) {
-                @case (FieldType.Text) {
-                  <p>{{ schemaResponseRevisionData()[question.responseKey!] }}</p>
-                }
-                @case (FieldType.Checkbox) {
-                  @for (option of schemaResponseRevisionData()[question.responseKey!]; track option) {
-                    <p class="mb-1">{{ option }}</p>
-                  }
-                }
-                @case (FieldType.File) {
-                  @if (schemaResponseRevisionData()[question.responseKey!].length) {
-                    <div class="flex flex-wrap gap-2">
-                      @for (file of schemaResponseRevisionData()[question.responseKey!]; track file.id) {
-                        <p-tag [value]="file.file_name" severity="info"></p-tag>
-                      }
-                    </div>
-                  } @else {
-                    <p class="font-italic">{{ 'common.labels.noFiles' | translate }}</p>
-                  }
-                }
-                @default {
-                  <p>{{ schemaResponseRevisionData()[question.responseKey!] }}</p>
-                }
-              }
-            } @else {
-              @if (question.fieldType === FieldType.File) {
-                <p class="font-italic">{{ 'common.labels.noFiles' | translate }}</p>
-              } @else {
-                <p class="font-italic">{{ 'common.labels.noData' | translate }}</p>
-              }
-              @if (question.required) {
-                <p-message class="mt-1" severity="error" variant="simple" size="small">
-                  {{ INPUT_VALIDATION_MESSAGES.required | translate }}
-                </p-message>
-              }
+      @if (page.sections?.length) {
+        @for (section of page.sections; track section.id) {
+          <div class="mb-4">
+            <h3 class="mb-2">{{ section.title }}</h3>
+            @if (section.description) {
+              <p class="mb-4">{{ section.description }}</p>
+            }
+            @if (section.questions?.length) {
+              <osf-review-data
+                [questions]="section.questions"
+                [reviewData]="schemaResponseRevisionData()"
+              ></osf-review-data>
             }
           </div>
         }
+      } @else {
+        @if (page.questions?.length) {
+          <osf-review-data [questions]="page.questions" [reviewData]="schemaResponseRevisionData()"></osf-review-data>
+        }
       }
     </p-card>
   }

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

@@ -6,7 +6,6 @@ import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Message } from 'primeng/message';
-import { Tag } from 'primeng/tag';
 
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -18,10 +17,11 @@ import { CustomConfirmationService, ToastService } from '@osf/shared/services';
 import { FieldType, SchemaActionTrigger } from '../../enums';
 import { DeleteSchemaResponse, HandleSchemaResponse, RegistriesSelectors } from '../../store';
 import { ConfirmContinueEditingDialogComponent } from '../confirm-continue-editing-dialog/confirm-continue-editing-dialog.component';
+import { ReviewDataComponent } from '../review-data/review-data.component';
 
 @Component({
   selector: 'osf-justification-review',
-  imports: [Button, Card, TranslatePipe, Tag, Message],
+  imports: [Button, Card, TranslatePipe, Message, ReviewDataComponent],
   templateUrl: './justification-review.component.html',
   styleUrl: './justification-review.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -0,0 +1,44 @@
+@for (question of questions(); track question.responseKey) {
+  <div [class.mb-4]="!$last">
+    <h4 class="mb-2">{{ question.displayText }}</h4>
+    @if (reviewData()[question.responseKey!]) {
+      @switch (question.fieldType) {
+        @case (FieldType.Text) {
+          <p>{{ reviewData()[question.responseKey!] }}</p>
+        }
+        @case (FieldType.Checkbox) {
+          @for (option of reviewData()[question.responseKey!]; track option) {
+            <p class="mb-1">{{ option }}</p>
+          }
+        }
+        @case (FieldType.File) {
+          @if (reviewData()[question.responseKey!].length) {
+            <div class="flex flex-wrap gap-2">
+              @for (file of reviewData()[question.responseKey!]; track file.id) {
+                <p-tag [value]="file.file_name" severity="info"></p-tag>
+              }
+            </div>
+          } @else {
+            <p class="font-italic">{{ 'common.labels.noFiles' | translate }}</p>
+          }
+        }
+        @default {
+          <p>{{ reviewData()[question.responseKey!] }}</p>
+        }
+      }
+    } @else {
+      @if (question.fieldType === FieldType.File) {
+        <p class="font-italic">{{ 'common.labels.noFiles' | translate }}</p>
+      } @else if (question.fieldType === FieldType.Paragraph) {
+        <p>{{ question.paragraphText! | translate }}</p>
+      } @else {
+        <p class="font-italic">{{ 'common.labels.noData' | translate }}</p>
+      }
+      @if (question.required) {
+        <p-message class="mt-1" severity="error" variant="simple" size="small">
+          {{ INPUT_VALIDATION_MESSAGES.required | translate }}
+        </p-message>
+      }
+    }
+  </div>
+}

src/app/features/registries/components/review-data/review-data.component.spec.ts

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