Merge pull request #2535 from bcgov/2416-create-complaint-referral-tab-from-submission-qa-2

2415 QA 2: Add form validation to overview

Author: trslater

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.html

@@ -25,8 +25,8 @@ <h3>Submitters</h3>
   <section class="file-section">
     <app-compliance-and-enforcement-documents
       #submissionDocumentsComponent
-      [title]="'Complaint/Referral Submission'"
-      [noDocumentsText]="'No Complaint/Referral'"
+      title="Complaint/Referral Submission"
+      noDocumentsText="No Complaint/Referral"
       [fileNumber]="fileNumber"
       [options]="submissionDocumentOptions"
       [section]="Section.SUBMISSION"
@@ -38,12 +38,16 @@ <h3>Submitters</h3>
   <form [formGroup]="form">
     <section class="form-section">
       <h3>Complaint / Referral > Edit Overview</h3>
-      <app-compliance-and-enforcement-overview #overviewComponent [parentForm]="form" [file]="file" />
+      <app-compliance-and-enforcement-overview
+        #overviewComponent
+        [file]="file"
+        (formReady)="registerFormGroup('overview', $event)"
+      />
     </section>
 
     <div class="button-container">
       <a mat-stroked-button color="warn" [routerLink]="'../..'">Cancel</a>
-      <button mat-flat-button color="primary" (click)="saveOverview()">Save</button>
+      <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="saveOverview()">Save</button>
     </div>
   </form>
 </ng-container>
@@ -53,15 +57,15 @@ <h3>Complaint / Referral > Edit Overview</h3>
     <section class="form-section">
       <h3>Complaint / Referral > Edit Submitters</h3>
 
-      <div class="submitter-container" *ngFor="let submitter of file?.submitters; let i = index">
+      <div class="submitter-container" *ngFor="let submitter of file?.submitters; let i = index; trackBy: trackByUuid">
         <app-compliance-and-enforcement-submitter
           #submitterComponents
           [title]="'#' + (i + 1)"
           [showDeleteButton]="true"
           [submitter]="submitter"
           [initialSubmissionType]="file?.initialSubmissionType ?? undefined"
           (deleteButtonClicked)="deleteSubmitter(submitter.uuid)"
-          (formReady)="registerFormGroup('submitter-' + i, $event.formGroup)"
+          (formReady)="registerFormGroup('submitter-' + submitter.uuid, $event)"
         />
       </div>
     </section>

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.spec.ts

@@ -60,11 +60,12 @@ describe('ComplaintReferralComponent', () => {
   });
 
   it('should set editing from route data on ngOnInit', () => {
-    const dataSubject = new Subject<any>();
-    mockActivatedRoute.data = dataSubject as any;
+    const editing = 'overview';
+    mockActivatedRoute.snapshot.data = { editing };
+
     component.ngOnInit();
-    dataSubject.next({ editing: 'overview' });
-    expect(component.editing).toBe('overview');
+
+    expect(component.editing).toBe(editing);
   });
 
   it('should set file, fileNumber, and submissionDocumentOptions.fileId from service.$file', () => {

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.ts

@@ -12,7 +12,10 @@ import { submissionDocumentOptions } from '../../draft/draft.component';
 import { OverviewComponent } from '../../overview/overview.component';
 import { ToastService } from '../../../../services/toast/toast.service';
 import { SubmitterComponent } from '../../submitter/submitter.component';
-import { UpdateComplianceAndEnforcementSubmitterDto } from '../../../../services/compliance-and-enforcement/submitter/submitter.dto';
+import {
+  ComplianceAndEnforcementSubmitterDto,
+  UpdateComplianceAndEnforcementSubmitterDto,
+} from '../../../../services/compliance-and-enforcement/submitter/submitter.dto';
 import { ComplianceAndEnforcementSubmitterService } from '../../../../services/compliance-and-enforcement/submitter/submitter.service';
 import { AddSubmitterDialogComponent } from './submitters/add-submitter-dialog/add-submitter-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
@@ -51,9 +54,7 @@ export class ComplaintReferralComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.route.data.pipe(takeUntil(this.$destroy)).subscribe(async (data) => {
-      this.editing = data['editing'];
-    });
+    this.editing = this.route.snapshot.data['editing'];
 
     this.service.$file.pipe(takeUntil(this.$destroy)).subscribe((file) => {
       if (file) {
@@ -152,10 +153,14 @@ export class ComplaintReferralComponent implements OnInit, OnDestroy {
 
   registerFormGroup(name: string, formGroup: FormGroup) {
     setTimeout(() => {
-      this.form.addControl(name, formGroup);
+      this.form.setControl(name, formGroup);
     });
   }
 
+  trackByUuid(_: number, item: ComplianceAndEnforcementSubmitterDto) {
+    return item.uuid;
+  }
+
   ngOnDestroy() {
     this.$destroy.next();
     this.$destroy.complete();

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/submitters/add-submitter-dialog/add-submitter-dialog.component.html

@@ -1,10 +1,10 @@
 <form [formGroup]="form">
   <app-compliance-and-enforcement-submitter
     #submitterComponent
-    [title]="'Add Submitter'"
+    title="Add Submitter"
     [submitter]="undefined"
     [initialSubmissionType]="data?.initialSubmissionType"
-    (formReady)="registerFormGroup($event)"
+    (formReady)="registerFormGroup('submitter', $event)"
   />
 
   <div class="button-container">

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/submitters/add-submitter-dialog/add-submitter-dialog.component.ts

@@ -50,7 +50,9 @@ export class AddSubmitterDialogComponent {
     this.isSaving = false;
   }
 
-  registerFormGroup({ name, formGroup }: { name: string; formGroup: FormGroup }) {
-    this.form.addControl(name, formGroup);
+  registerFormGroup(name: string, formGroup: FormGroup) {
+    setTimeout(() => {
+      this.form.setControl(name, formGroup);
+    });
   }
 }

alcs-frontend/src/app/features/compliance-and-enforcement/draft/draft.component.html

@@ -5,19 +5,24 @@ <h2>C&E File ID: {{ file?.fileNumber }}</h2>
     <section class="form-section">
       <div>
         <h3>Overview</h3>
-        <app-compliance-and-enforcement-overview #overviewComponent [parentForm]="form" [file]="file" />
+        <app-compliance-and-enforcement-overview
+          #overviewComponent
+          [file]="file"
+          (formReady)="registerFormGroup('overview', $event)"
+        />
       </div>
       <app-compliance-and-enforcement-submitter
         #submitterComponent
+        title="Submitter"
         [submitter]="submitter"
         [initialSubmissionType]="initialSubmissionType"
-        (formReady)="registerFormGroup($event)"
+        (formReady)="registerFormGroup('submitter', $event)"
       />
 
       <app-compliance-and-enforcement-documents
         #submissionDocumentsComponent
-        [title]="'Complaint/Referral Submission'"
-        [noDocumentsText]="'No Complaint/Referral'"
+        title="Complaint/Referral Submission"
+        noDocumentsText="No Complaint/Referral"
         [fileNumber]="fileNumber"
         [options]="submissionDocumentOptions"
         [section]="Section.SUBMISSION"
@@ -36,8 +41,8 @@ <h3>Overview</h3>
       />
       <app-compliance-and-enforcement-documents
         #ownershipDocumentsComponent
-        [title]="'Property Ownership Documents'"
-        [noDocumentsText]="'No owner information'"
+        title="Property Ownership Documents"
+        noDocumentsText="No owner information"
         [fileNumber]="fileNumber"
         [options]="ownershipDocumentOptions"
         [section]="Section.OWNERSHIP"

alcs-frontend/src/app/features/compliance-and-enforcement/draft/draft.component.ts

@@ -373,7 +373,13 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
 
   async onFinishCreateFileClicked() {
     // Ensure child components and file exist
-    if (!this.overviewComponent || !this.submitterComponent || !this.propertyComponent || !this.file?.uuid || !this.responsiblePartiesComponent) {
+    if (
+      !this.overviewComponent ||
+      !this.submitterComponent ||
+      !this.propertyComponent ||
+      !this.file?.uuid ||
+      !this.responsiblePartiesComponent
+    ) {
       this.toastService.showErrorToast('Something went wrong, please refresh the page and try again');
       return;
     }
@@ -422,13 +428,13 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
     if (hasInvalid) {
       this.toastService.showErrorToast('Please correct all errors before submitting the form');
       // Attempt to scroll to first element with .ng-invalid within the form ( will check with SO if this is necessary)
-      
-        const el = document.getElementsByClassName('ng-invalid');
-        if (el && el.length > 0) {
-          const target = Array.from(el).find((n) => n.nodeName !== 'FORM') as HTMLElement | undefined;
-          target?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-      
+
+      const el = document.getElementsByClassName('ng-invalid');
+      if (el && el.length > 0) {
+        const target = Array.from(el).find((n) => n.nodeName !== 'FORM') as HTMLElement | undefined;
+        target?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+
       return;
     }
 
@@ -441,12 +447,16 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
       await firstValueFrom(this.complianceAndEnforcementService.update(this.file.uuid, overviewUpdate));
 
       if (this.submitter?.uuid) {
-        await firstValueFrom(this.complianceAndEnforcementSubmitterService.update(this.submitter.uuid, submitterUpdate));
+        await firstValueFrom(
+          this.complianceAndEnforcementSubmitterService.update(this.submitter.uuid, submitterUpdate),
+        );
       } else {
-        this.submitter = await firstValueFrom(this.complianceAndEnforcementSubmitterService.create({
-          ...submitterUpdate,
-          fileUuid: this.file.uuid,
-        }));
+        this.submitter = await firstValueFrom(
+          this.complianceAndEnforcementSubmitterService.create({
+            ...submitterUpdate,
+            fileUuid: this.file.uuid,
+          }),
+        );
       }
 
       if (this.property?.uuid) {
@@ -461,10 +471,12 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
       }
 
       // Mark file as submitted
-      await firstValueFrom(this.complianceAndEnforcementService.update(this.file.uuid, { 
-        dateOpened: Date.now() 
-      }));
-            // Now submit the form - this will run backend validation
+      await firstValueFrom(
+        this.complianceAndEnforcementService.update(this.file.uuid, {
+          dateOpened: Date.now(),
+        }),
+      );
+      // Now submit the form - this will run backend validation
       await this.complianceAndEnforcementService.submit(this.file.uuid);
 
       this.toastService.showSuccessToast('C&E file created');
@@ -473,10 +485,10 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
       // Check if it's a validation error from the backend
       if (error.status === 400 && error.error?.message?.includes('Validation failed')) {
         this.toastService.showErrorToast('Please correct all errors before submitting the form');
-        
+
         // Trigger client-side validation to show field errors
         this.triggerClientSideValidation();
-        
+
         // Scroll to first error
         setTimeout(() => {
           const el = document.getElementsByClassName('ng-invalid');
@@ -520,7 +532,7 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
       this.responsiblePartiesComponent.form.controls.forEach((group) => {
         group.markAllAsTouched();
         group.updateValueAndValidity({ onlySelf: false, emitEvent: false });
-        
+
         const directors = group.get('directors') as FormArray | null;
         if (directors) {
           directors.controls.forEach((dg) => {
@@ -532,8 +544,10 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  registerFormGroup({ name, formGroup }: { name: string; formGroup: FormGroup }) {
-    this.form.addControl(name, formGroup);
+  registerFormGroup(name: string, formGroup: FormGroup) {
+    setTimeout(() => {
+      this.form.setControl(name, formGroup);
+    });
   }
 
   ngOnDestroy(): void {

alcs-frontend/src/app/features/compliance-and-enforcement/overview/overview.component.spec.ts

@@ -70,13 +70,6 @@ describe('OverviewComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should add overview control to parent form', () => {
-    const parentForm = new FormGroup({ overview: new FormGroup({}) });
-    component.parentForm = parentForm;
-
-    expect(parentForm.contains('overview')).toBe(true);
-  });
-
   it('should patch form values and enable form when file input is set', () => {
     component.file = mockFile;
 

alcs-frontend/src/app/features/compliance-and-enforcement/overview/overview.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
 import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 import {
   AllegedActivity,
@@ -37,13 +37,7 @@ export class OverviewComponent implements OnDestroy {
     intakeNotes: new FormControl<string>({ value: '', disabled: true }),
   });
 
-  @Input() set parentForm(parentForm: FormGroup) {
-    if (!parentForm || parentForm.contains('overview')) {
-      return;
-    }
-
-    parentForm.addControl('overview', this.form);
-  }
+  @Output() formReady = new EventEmitter<FormGroup>();
 
   $changes: BehaviorSubject<UpdateComplianceAndEnforcementDto> = new BehaviorSubject<UpdateComplianceAndEnforcementDto>(
     {},
@@ -81,6 +75,8 @@ export class OverviewComponent implements OnDestroy {
         });
       });
 
+      this.formReady.emit(this.form);
+
       this.isSubscribed = true;
     }
   }

alcs-frontend/src/app/features/compliance-and-enforcement/submitter/submitter.component.ts

@@ -35,7 +35,7 @@ export class SubmitterComponent implements OnDestroy {
     additionalContactInformation: new FormControl<string>(''),
   });
 
-  @Output() formReady = new EventEmitter<{ name: string; formGroup: FormGroup }>();
+  @Output() formReady = new EventEmitter<FormGroup>();
 
   $changes: BehaviorSubject<[string | undefined, UpdateComplianceAndEnforcementSubmitterDto]> = new BehaviorSubject<
     [string | undefined, UpdateComplianceAndEnforcementSubmitterDto]
@@ -82,7 +82,7 @@ export class SubmitterComponent implements OnDestroy {
         ]);
       });
 
-      this.formReady.emit({ name: 'submitter', formGroup: this.form });
+      this.formReady.emit(this.form);
 
       this.isSubscribed = true;
     }