2466 Validation C&E Form Part II (#2489)

* feat: added frontend validation and finalize button to send to homepage

* feat: added backend validator service and responsible parties debounce time

* chore: updated tests

* chore: chanege dateSubmitted to dateOpened

Author: PaulGreywal

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

@@ -45,7 +45,7 @@ <h2>C&E File ID: {{ file?.fileNumber }}</h2>
       </div>
       <div class="right-actions">
         <button type="button" mat-stroked-button color="primary" (click)="onSaveDraftClicked()">Save Draft & Exit</button>
-        <button type="button" mat-flat-button color="primary">Finish & Create File</button>
+        <button type="button" mat-flat-button color="primary" (click)="onFinishCreateFileClicked()">Finish & Create File</button>
       </div>
     </div>
   </form>

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

@@ -20,7 +20,7 @@ import {
 import { ComplianceAndEnforcementService } from '../../../services/compliance-and-enforcement/compliance-and-enforcement.service';
 import { OverviewComponent } from '../overview/overview.component';
 import { ToastService } from '../../../services/toast/toast.service';
-import { FormGroup } from '@angular/forms';
+import { FormArray, FormGroup } from '@angular/forms';
 import { SubmitterComponent } from '../submitter/submitter.component';
 import { ComplianceAndEnforcementSubmitterDto } from '../../../services/compliance-and-enforcement/submitter/submitter.dto';
 import { ComplianceAndEnforcementSubmitterService } from '../../../services/compliance-and-enforcement/submitter/submitter.service';
@@ -257,7 +257,9 @@ export class DraftComponent implements OnInit, AfterViewInit, OnDestroy {
       // Load property data
       if (this.file.uuid) {
         try {
-          this.property = await this.complianceAndEnforcementPropertyService.fetchByFileUuid(this.file.uuid);
+          const properties = await this.complianceAndEnforcementPropertyService.fetchParcels(this.file.uuid);
+          
+          this.property = properties[0];
 
           if (this.propertyComponent && this.property) {
             this.propertyComponent.property = this.property;
@@ -354,6 +356,167 @@ 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) {
+      this.toastService.showErrorToast('Something went wrong, please refresh the page and try again');
+      return;
+    }
+
+    // Trigger validation across all child forms
+    const controlsToValidate: FormGroup[] = [
+      this.overviewComponent.form,
+      this.submitterComponent.form,
+      this.propertyComponent.form,
+    ];
+
+    controlsToValidate.forEach((fg) => {
+      fg.markAllAsTouched();
+      fg.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+    });
+
+    // Ensure property local government display control syncs validation (may have to go back to the local gov validation)
+    try {
+      this.propertyComponent.onLocalGovernmentBlur();
+    } catch {}
+    this.propertyComponent.localGovernmentControl.markAsTouched();
+    this.propertyComponent.localGovernmentControl.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+
+    // Trigger validation for Responsible Parties form array and nested director forms
+    if (this.responsiblePartiesComponent?.form) {
+      this.responsiblePartiesComponent.form.controls.forEach((group) => {
+        group.markAllAsTouched();
+        group.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+        const directors = group.get('directors') as FormArray | null;
+        directors?.controls.forEach((dg) => {
+          dg.markAllAsTouched();
+          dg.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+        });
+      });
+    }
+
+    // Validate that at least one responsible party is added
+    const hasValidResponsibleParties = this.responsiblePartiesComponent?.validateRequiredParties() ?? false;
+
+    // If any form is invalid, show error toast and scroll to first error
+    const hasInvalid =
+      controlsToValidate.some((fg) => fg.invalid) ||
+      this.propertyComponent.localGovernmentControl.invalid ||
+      (this.responsiblePartiesComponent?.form.controls.some((g) => g.invalid) ?? false) ||
+      !hasValidResponsibleParties;
+    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' });
+        }
+      
+      return;
+    }
+
+    // Persist latest values before finalizing (same as save but without navigate)
+    const overviewUpdate = this.overviewComponent.$changes.getValue();
+    const submitterUpdate = this.submitterComponent.$changes.getValue();
+    const propertyUpdate = this.propertyComponent.$changes.getValue();
+
+    try {
+      await firstValueFrom(this.complianceAndEnforcementService.update(this.file.uuid, overviewUpdate));
+
+      if (this.submitter?.uuid) {
+        await firstValueFrom(this.complianceAndEnforcementSubmitterService.update(this.submitter.uuid, submitterUpdate));
+      } else {
+        this.submitter = await firstValueFrom(this.complianceAndEnforcementSubmitterService.create({
+          ...submitterUpdate,
+          fileUuid: this.file.uuid,
+        }));
+      }
+
+      if (this.property?.uuid) {
+        await firstValueFrom(this.complianceAndEnforcementPropertyService.update(this.property.uuid, propertyUpdate));
+      } else {
+        this.property = await firstValueFrom(
+          this.complianceAndEnforcementPropertyService.create({
+            fileUuid: this.file.uuid,
+            ...cleanPropertyUpdate(propertyUpdate),
+          }),
+        );
+      }
+
+      // 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 this.complianceAndEnforcementService.submit(this.file.uuid);
+
+      this.toastService.showSuccessToast('C&E file created');
+      await this.router.navigate(['/home']);
+    } catch (error: any) {
+      // 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');
+          if (el && el.length > 0) {
+            const target = Array.from(el).find((n) => n.nodeName !== 'FORM') as HTMLElement | undefined;
+            target?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 100);
+      } else {
+        this.toastService.showErrorToast('Failed to create C&E file. Please try again.');
+      }
+    }
+  }
+
+  private triggerClientSideValidation() {
+    // Trigger validation across all child forms to show field errors
+    const controlsToValidate: FormGroup[] = [
+      this.overviewComponent?.form,
+      this.submitterComponent?.form,
+      this.propertyComponent?.form,
+    ].filter(Boolean) as FormGroup[];
+
+    controlsToValidate.forEach((fg) => {
+      fg.markAllAsTouched();
+      fg.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+    });
+
+    // Ensure property local government display control syncs validation
+    if (this.propertyComponent) {
+      try {
+        this.propertyComponent.onLocalGovernmentBlur();
+      } catch (error) {
+        // Local government blur validation failed, continue
+      }
+      this.propertyComponent.localGovernmentControl.markAsTouched();
+      this.propertyComponent.localGovernmentControl.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+    }
+
+    // Trigger validation for Responsible Parties form array and nested director forms
+    if (this.responsiblePartiesComponent?.form) {
+      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) => {
+            dg.markAllAsTouched();
+            dg.updateValueAndValidity({ onlySelf: false, emitEvent: false });
+          });
+        }
+      });
+    }
+  }
+
   ngOnDestroy(): void {
     this.$destroy.next();
     this.$destroy.complete();

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

@@ -226,17 +226,24 @@ <h4 class="party-type-title">{{ partyForm.get('partyType')?.value }}</h4>
     </form>
   </div>
 
-  <!-- Add Party Button -->
-  <button
-    mat-flat-button
-    color="primary"
-    [matMenuTriggerFor]="addPartyMenu"
-    class="add-party-button"
-  >
-    <span *ngIf="form.length === 0">+ ADD PARTY</span>
-    <span *ngIf="form.length > 0">+ ADD ANOTHER PARTY</span>
-    <mat-icon class="dropdown-arrow">arrow_drop_down</mat-icon>
-  </button>
+  <!-- Add Party Button with Error Message -->
+  <div class="add-party-section">
+    <button
+      mat-flat-button
+      color="primary"
+      [matMenuTriggerFor]="addPartyMenu"
+      class="add-party-button"
+    >
+      <span *ngIf="form.length === 0">+ ADD PARTY</span>
+      <span *ngIf="form.length > 0">+ ADD ANOTHER PARTY</span>
+      <mat-icon class="dropdown-arrow">arrow_drop_down</mat-icon>
+    </button>
+    
+    <div *ngIf="showRequiredError && !isPropertyCrown" class="validation-error">
+      <mat-icon class="error-icon">warning</mat-icon>
+      <span>This field is required</span>
+    </div>
+  </div>
 
 
 

alcs-frontend/src/app/features/compliance-and-enforcement/responsible-parties/responsible-parties.component.scss

@@ -301,8 +301,28 @@
   }
 }
 
-.add-party-button {
+.add-party-section {
   margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .validation-error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: $error-color;
+    font-size: 0.875rem;
+
+    .error-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.add-party-button {
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { BehaviorSubject, Subject, takeUntil, firstValueFrom, EMPTY, catchError } from 'rxjs';
+import { BehaviorSubject, Subject, takeUntil, firstValueFrom, EMPTY, catchError, debounceTime } from 'rxjs';
 import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import moment, { Moment } from 'moment';
@@ -15,6 +15,7 @@ import { ResponsiblePartiesService } from '../../../services/compliance-and-enfo
 import { ConfirmationDialogService } from '../../../shared/confirmation-dialog/confirmation-dialog.service';
 import { ToastService } from '../../../services/toast/toast.service';
 import { strictEmailValidator } from '../../../shared/validators/email-validator';
+import { C_E_AUTOSAVE_DEBOUNCE_MS } from '../constants';
 
 @Component({
   selector: 'app-compliance-and-enforcement-responsible-parties',
@@ -37,6 +38,7 @@ export class ResponsiblePartiesComponent implements OnInit, OnDestroy {
   form = new FormArray<FormGroup>([]);
 
   isLoading = false;
+  showRequiredError = false;
 
   // Prevent duplicate create calls for the same form during rapid value changes
   private creatingForms = new WeakSet<FormGroup>();
@@ -165,6 +167,7 @@ export class ResponsiblePartiesComponent implements OnInit, OnDestroy {
   subscribeToFormChanges(partyForm: FormGroup, existingParty?: ResponsiblePartyDto) {
     partyForm.valueChanges
       .pipe(
+        debounceTime(C_E_AUTOSAVE_DEBOUNCE_MS),
         takeUntil(this.$destroy),
         catchError((error) => {
           console.error('Error in form changes', error);
@@ -411,6 +414,22 @@ export class ResponsiblePartiesComponent implements OnInit, OnDestroy {
     this.buildFormArray();
   }
 
+  validateRequiredParties(): boolean {
+    // Only require parties for fee simple (non-Crown) properties
+    if (this.isPropertyCrown) {
+      this.showRequiredError = false;
+      return true;
+    }
+    
+    const hasParties = this.form.length > 0;
+    this.showRequiredError = !hasParties;
+    return hasParties;
+  }
+
+  markAsRequiredError() {
+    this.showRequiredError = true;
+  }
+
   ngOnDestroy(): void {
     this.$destroy.next();
     this.$destroy.complete();

alcs-frontend/src/app/services/compliance-and-enforcement/compliance-and-enforcement.service.ts

@@ -78,4 +78,8 @@ export class ComplianceAndEnforcementService {
   async delete(uuid: string): Promise<UpdateComplianceAndEnforcementDto> {
     return await firstValueFrom(this.http.delete<UpdateComplianceAndEnforcementDto>(`${this.url}/${uuid}`));
   }
+
+  async submit(uuid: string): Promise<ComplianceAndEnforcementDto> {
+    return await firstValueFrom(this.http.post<ComplianceAndEnforcementDto>(`${this.url}/${uuid}/submit`, {}));
+  }
 }