EMBCESSMOD-5146 Fix needs form to preserve the current form updates i…

…n the step ess file wizard (bcgov#2046)

responders/src/UI/embc-responder/src/app/feature-components/wizard/ess-file-components/needs/needs.component.spec.ts

@@ -10,27 +10,26 @@ import { MaterialModule } from 'src/app/material.module';
 import { MockAppBaseService } from 'src/app/unit-tests/mockAppBase.service';
 
 import { NeedsComponent } from './needs.component';
+import { StepEssFileService } from '../../step-ess-file/step-ess-file.service';
+import { MockStepEssFileService } from 'src/app/unit-tests/mockStepEssFile.service';
 
 describe('NeedsComponent', () => {
   let component: NeedsComponent;
   let fixture: ComponentFixture<NeedsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        MatDialogModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule
-      ],
+      imports: [RouterTestingModule, MatDialogModule, ReactiveFormsModule, HttpClientTestingModule, MaterialModule, BrowserAnimationsModule],
       declarations: [NeedsComponent],
       providers: [
         { provide: computeInterfaceToken, useValue: {} },
         {
           provide: AppBaseService,
           useClass: MockAppBaseService
+        },
+        {
+          provide: StepEssFileService,
+          useClass: MockStepEssFileService
         }
       ]
     }).compileComponents();

responders/src/UI/embc-responder/src/app/feature-components/wizard/ess-file-components/needs/needs.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { StepEssFileService } from '../../step-ess-file/step-ess-file.service';
+import { ShelterType, StepEssFileService } from '../../step-ess-file/step-ess-file.service';
 import * as globalConst from '../../../../core/services/global-constants';
 import { WizardService } from '../../wizard.service';
 import { TabModel } from 'src/app/core/models/tab.model';
@@ -13,35 +13,27 @@ import { DialogContent } from 'src/app/core/models/dialog-content.model';
 import { InformationDialogComponent } from 'src/app/shared/components/dialog-components/information-dialog/information-dialog.component';
 import { DialogComponent } from 'src/app/shared/components/dialog/dialog.component';
 
-enum ShelterType {
-  allowance = 'shelterAllowance',
-  referral = 'shelterReferral'
-}
+
 
 @Component({
   selector: 'app-needs',
   templateUrl: './needs.component.html',
   styleUrls: ['./needs.component.scss']
 })
 export class NeedsComponent implements OnInit, OnDestroy {
-  needsForm: UntypedFormGroup;
+  needsForm: UntypedFormGroup = this.stepEssFileService.needsForm;
   tabUpdateSubscription: Subscription;
   tabMetaData: TabModel;
 
   constructor(
     private router: Router,
     private stepEssFileService: StepEssFileService,
-    private formBuilder: UntypedFormBuilder,
     private wizardService: WizardService,
     private evacueeSessionService: EvacueeSessionService,
-    private customValidationService: CustomValidationService,
     private dialog: MatDialog
   ) {}
 
   ngOnInit(): void {
-    // Creates the main form
-    this.createNeedsForm();
-
     // Set "update tab status" method, called for any tab navigation
     this.tabUpdateSubscription = this.stepEssFileService.nextTabUpdate.subscribe(() => {
       this.updateTabStatus();
@@ -50,13 +42,6 @@ export class NeedsComponent implements OnInit, OnDestroy {
     this.tabMetaData = this.stepEssFileService.getNavLinks('needs');
   }
 
-  /**
-   * Returns the control of the form
-   */
-  get needsFormControl(): { [key: string]: AbstractControl } {
-    return this.needsForm.controls;
-  }
-
   /**
    * Goes back to the previous ESS File Tab
    */
@@ -120,67 +105,6 @@ export class NeedsComponent implements OnInit, OnDestroy {
     });
   }
 
-  private createNeedsForm(): void {
-    this.needsForm = this.formBuilder.group({
-      requiresShelter: [this.stepEssFileService.requiresShelterAllowance || this.stepEssFileService.requiresShelterReferral],
-      requiresShelterType: [
-        this.stepEssFileService.requiresShelterReferral ? ShelterType.referral : this.stepEssFileService.requiresShelterAllowance ? ShelterType.allowance : undefined,
-        this.customValidationService.conditionalValidation(() => this.needsFormControl.requiresShelter.value === true, Validators.required)
-      ],
-      requiresFood: [this.stepEssFileService.requiresFood ?? false],
-      requiresClothing: [this.stepEssFileService.requiresClothing ?? false],
-      requiresTransportation: [this.stepEssFileService.requiresTransportation ?? false],
-      requiresIncidentals: [this.stepEssFileService.requiresIncidentals ?? false],
-      requiresNothing: [this.stepEssFileService.requiresNothing ?? false]
-    });
-    this.needsForm.addValidators(this.customValidationService.needsValidator());
-    this.needsFormControl.requiresNothing.valueChanges.subscribe((data) => {
-      if (data) {
-        this.disableNeeds();
-      } else {
-        this.enableNeeds();
-      }
-    });
-    this.needsFormControl.requiresShelter.valueChanges.subscribe((checked) => {
-      if (!checked) {
-        this.needsFormControl.requiresShelterType.reset();
-      }
-    });
-    if (this.stepEssFileService.requiresNothing) {
-      this.disableNeeds();
-    }
-  }
-
-  private disableNeeds() {
-    this.disableFormControl('requiresIncidentals');
-    this.disableFormControl('requiresTransportation');
-    this.disableFormControl('requiresClothing');
-    this.disableFormControl('requiresFood');
-    this.disableFormControl('requiresShelter');
-    this.disableFormControl('requiresShelterType');
-  }
-
-  private enableNeeds() {
-    this.enableFormControl('requiresIncidentals');
-    this.enableFormControl('requiresTransportation');
-    this.enableFormControl('requiresClothing');
-    this.enableFormControl('requiresFood');
-    this.enableFormControl('requiresShelter');
-    this.enableFormControl('requiresShelterType');
-  }
-
-  private disableFormControl(formControlName: string) {
-    const formControl = this.needsFormControl[formControlName];
-    formControl.disable();
-    formControl.reset();
-  }
-
-  private enableFormControl(formControlName: string) {
-    const formControl = this.needsFormControl[formControlName];
-    formControl.enable();
-    formControl.reset();
-  }
-
   /**
    * Updates the Tab Status from Incomplete, Complete or in Progress
    */
@@ -199,12 +123,12 @@ export class NeedsComponent implements OnInit, OnDestroy {
    * Saves information inserted inthe form into the service
    */
   private saveFormData() {
-    this.stepEssFileService.requiresClothing = this.needsFormControl.requiresClothing.value;
-    this.stepEssFileService.requiresFood = this.needsFormControl.requiresFood.value;
-    this.stepEssFileService.requiresIncidentals = this.needsFormControl.requiresIncidentals.value;
-    this.stepEssFileService.requiresTransportation = this.needsFormControl.requiresTransportation.value;
-    this.stepEssFileService.requiresShelterAllowance = this.needsFormControl.requiresShelterType.value === ShelterType.allowance;
-    this.stepEssFileService.requiresShelterReferral = this.needsFormControl.requiresShelterType.value === ShelterType.referral;
-    this.stepEssFileService.requiresNothing = this.needsFormControl.requiresNothing.value;
+    this.stepEssFileService.requiresClothing = this.needsForm.controls.requiresClothing.value;
+    this.stepEssFileService.requiresFood = this.needsForm.controls.requiresFood.value;
+    this.stepEssFileService.requiresIncidentals = this.needsForm.controls.requiresIncidentals.value;
+    this.stepEssFileService.requiresTransportation = this.needsForm.controls.requiresTransportation.value;
+    this.stepEssFileService.requiresShelterAllowance = this.needsForm.controls.requiresShelterType.value === ShelterType.allowance;
+    this.stepEssFileService.requiresShelterReferral = this.needsForm.controls.requiresShelterType.value === ShelterType.referral;
+    this.stepEssFileService.requiresNothing = this.needsForm.controls.requiresNothing.value;
   }
 }

responders/src/UI/embc-responder/src/app/feature-components/wizard/step-ess-file/step-ess-file.component.spec.ts

@@ -10,6 +10,7 @@ import { WizardDataService } from '../wizard-data.service';
 import { StepEssFileService } from './step-ess-file.service';
 import { MockStepEssFileService } from 'src/app/unit-tests/mockStepEssFile.service';
 import { computeInterfaceToken } from 'src/app/app.module';
+import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 
 describe('StepEssFileComponent', () => {
   let component: StepEssFileComponent;
@@ -26,9 +27,10 @@ describe('StepEssFileComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, MatDialogModule, HttpClientTestingModule],
+      imports: [RouterTestingModule, MatDialogModule, HttpClientTestingModule, ReactiveFormsModule],
       declarations: [StepEssFileComponent],
       providers: [
+        UntypedFormBuilder,
         WizardDataService,
         { provide: Router, useValue: routerMock },
         {

responders/src/UI/embc-responder/src/app/feature-components/wizard/step-ess-file/step-ess-file.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { TabModel } from 'src/app/core/models/tab.model';
 import { StepEssFileService } from './step-ess-file.service';
@@ -8,7 +8,7 @@ import { StepEssFileService } from './step-ess-file.service';
   templateUrl: './step-ess-file.component.html',
   styleUrls: ['./step-ess-file.component.scss']
 })
-export class StepEssFileComponent {
+export class StepEssFileComponent implements OnInit {
   stepId: string;
   stepName: string;
   tabs: Array<TabModel> = new Array<TabModel>();
@@ -31,6 +31,10 @@ export class StepEssFileComponent {
     this.tabs = this.stepEssFileService.essTabs;
   }
 
+  ngOnInit() {
+    this.stepEssFileService.createNeedsForm();
+  }
+
   /**
    * Determines if the tab navigation is allowed or not
    *

responders/src/UI/embc-responder/src/app/feature-components/wizard/step-ess-file/step-ess-file.service.ts

@@ -6,7 +6,7 @@ import { DialogComponent } from 'src/app/shared/components/dialog/dialog.compone
 import { InformationDialogComponent } from 'src/app/shared/components/dialog-components/information-dialog/information-dialog.component';
 import { Subject } from 'rxjs';
 import { EvacuationFile, HouseholdMemberType, IdentifiedNeed, InsuranceOption, NeedsAssessment, Pet } from 'src/app/core/api/models';
-import { UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { AddressModel } from 'src/app/core/models/address.model';
 import { HouseholdMemberModel } from 'src/app/core/models/household-member.model';
 import { EvacuationFileModel } from 'src/app/core/models/evacuation-file.model';
@@ -21,6 +21,12 @@ import { WizardSteps, WizardType } from 'src/app/core/models/wizard-type.model';
 import { AppBaseService } from 'src/app/core/services/helper/appBase.service';
 import { ComputeRulesService } from 'src/app/core/services/computeRules.service';
 import { LoadEvacueeListService } from 'src/app/core/services/load-evacuee-list.service';
+import { CustomValidationService } from 'src/app/core/services/customValidation.service';
+
+export enum ShelterType {
+  allowance = 'shelterAllowance',
+  referral = 'shelterReferral'
+}
 
 @Injectable({ providedIn: 'root' })
 export class StepEssFileService {
@@ -78,7 +84,9 @@ export class StepEssFileService {
         private evacueeSearchService: EvacueeSearchService,
         private appBaseService: AppBaseService,
         private computeState: ComputeRulesService,
-        private loadEvacueeListService: LoadEvacueeListService
+        private loadEvacueeListService: LoadEvacueeListService,
+        private formBuilder: UntypedFormBuilder,
+        private customValidationService: CustomValidationService
     ) {}
 
     // Selected ESS File Model getter and setter
@@ -385,6 +393,70 @@ export class StepEssFileService {
         this.editedSecurityPhraseVal = editedSecurityPhraseVal;
     }
 
+    needsForm: UntypedFormGroup;
+    createNeedsForm(): UntypedFormGroup {
+      this.needsForm = this.formBuilder.group({
+        requiresShelter: [this.requiresShelterAllowance || this.requiresShelterReferral],
+        requiresShelterType: [
+          this.requiresShelterReferral ? ShelterType.referral : this.requiresShelterAllowance ? ShelterType.allowance : undefined,
+          this.customValidationService.conditionalValidation(() => this.needsForm.controls.requiresShelter.value === true, Validators.required)
+        ],
+        requiresFood: [this.requiresFood ?? false],
+        requiresClothing: [this.requiresClothing ?? false],
+        requiresTransportation: [this.requiresTransportation ?? false],
+        requiresIncidentals: [this.requiresIncidentals ?? false],
+        requiresNothing: [this.requiresNothing ?? false]
+      });
+      this.needsForm.addValidators(this.customValidationService.needsValidator());
+      this.needsForm.controls.requiresNothing.valueChanges.subscribe((data) => {
+        if (data) {
+          this.disableNeeds();
+        } else {
+          this.enableNeeds();
+        }
+      });
+      this.needsForm.controls.requiresShelter.valueChanges.subscribe((checked) => {
+        if (!checked) {
+          this.needsForm.controls.requiresShelterType.reset();
+        }
+      });
+      if (this.requiresNothing) {
+        this.disableNeeds();
+      }
+
+      return this.needsForm;
+    }
+
+    private disableNeeds() {
+      this.disableFormControl('requiresIncidentals');
+      this.disableFormControl('requiresTransportation');
+      this.disableFormControl('requiresClothing');
+      this.disableFormControl('requiresFood');
+      this.disableFormControl('requiresShelter');
+      this.disableFormControl('requiresShelterType');
+    }
+
+    private enableNeeds() {
+      this.enableFormControl('requiresIncidentals');
+      this.enableFormControl('requiresTransportation');
+      this.enableFormControl('requiresClothing');
+      this.enableFormControl('requiresFood');
+      this.enableFormControl('requiresShelter');
+      this.enableFormControl('requiresShelterType');
+    }
+
+    private disableFormControl(formControlName: string) {
+      const formControl = this.needsForm.controls[formControlName];
+      formControl.disable();
+      formControl.reset();
+    }
+
+    private enableFormControl(formControlName: string) {
+      const formControl = this.needsForm.controls[formControlName];
+      formControl.enable();
+      formControl.reset();
+    }
+
     /**
      * Set the given status to the given tab
      *