WEB-223 Make Date of Birth handling for Client Creation consistent

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -32,11 +32,7 @@
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
-      <input type="number" formControlName="age" matInput [min]="0" />
-      <mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
-        {{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
-      </mat-error>
+      <input type="number" formControlName="age" matInput [min]="0" disabled />
     </mat-form-field>
 
     <mat-checkbox formControlName="isDependent" labelPosition="before" class="flex-48"
@@ -89,19 +85,22 @@
 
     <mat-form-field class="flex-98" (click)="dueDatePicker.open()">
       <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
-      <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
+      <input
+        formControlName="dateOfBirth"
+        matInput
+        [max]="maxDate"
+        [matDatepicker]="dueDatePicker"
+        placeholder="Optional"
+      />
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dueDatePicker></mat-datepicker>
-      <mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
-        {{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
     </mat-form-field>
   </div>
 
   <mat-dialog-actions align="center">
-    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+    <button type="button" mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
     <button
+      type="button"
       mat-raised-button
       color="primary"
       [disabled]="!familyMemberForm.valid"

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.scss

@@ -0,0 +1,6 @@
+.mat-form-field-hint {
+  font-size: 75%;
+  color: rgb(0 0 0 / 60%);
+  margin-top: 4px;
+  margin-bottom: 8px;
+}

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -70,6 +70,41 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
         dateOfBirth: this.data.member.dateOfBirth && new Date(this.data.member.dateOfBirth)
       });
     }
+
+    // Add subscription to date of birth changes to update age
+    this.familyMemberForm.get('dateOfBirth').valueChanges.subscribe((dateOfBirth: any) => {
+      if (dateOfBirth) {
+        const age = this.calculateAge(dateOfBirth);
+        this.familyMemberForm.get('age').setValue(age);
+      } else {
+        this.familyMemberForm.get('age').setValue('');
+      }
+    });
+
+    // If a date of birth is already set, calculate the age
+    const currentDob = this.familyMemberForm.get('dateOfBirth').value;
+    if (currentDob) {
+      const age = this.calculateAge(currentDob);
+      this.familyMemberForm.get('age').setValue(age);
+    }
+  }
+
+  /**
+   * Calculates age from date of birth
+   * @param {Date} dateOfBirth Date of Birth
+   * @returns {number} Age
+   */
+  calculateAge(dateOfBirth: Date): number {
+    const today = new Date(this.settingsService.businessDate);
+    const birthDate = new Date(dateOfBirth);
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const monthDiff = today.getMonth() - birthDate.getMonth();
+
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+      age--;
+    }
+
+    return age;
   }
 
   /**
@@ -88,9 +123,7 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
       ],
       qualification: [''],
       age: [
-        '',
-        Validators.required
-      ],
+        { value: '', disabled: true }],
       isDependent: [''],
       relationshipId: [
         '',
@@ -102,10 +135,7 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
       ],
       professionId: [''],
       maritalStatusId: [''],
-      dateOfBirth: [
-        '',
-        Validators.required
-      ]
+      dateOfBirth: ['']
     });
   }
 
@@ -113,22 +143,43 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
    * Returns Formatted Family Member
    */
   get familyMember() {
-    const familyMemberFormData = this.familyMemberForm.value;
+    // Get form values including disabled controls like age
+    const formValue = {
+      ...this.familyMemberForm.getRawValue()
+    };
+
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    if (familyMemberFormData.dateOfBirth instanceof Date) {
-      familyMemberFormData.dateOfBirth = this.dateUtils.formatDate(familyMemberFormData.dateOfBirth, dateFormat);
+    const prevDateOfBirth: Date = formValue.dateOfBirth;
+
+    // Calculate age from dateOfBirth if present
+    if (prevDateOfBirth) {
+      if (formValue.dateOfBirth instanceof Date) {
+        formValue.dateOfBirth = this.dateUtils.formatDate(prevDateOfBirth, dateFormat);
+      }
+      // Ensure age is calculated even if it wasn't already
+      if (!formValue.age && prevDateOfBirth) {
+        formValue.age = this.calculateAge(prevDateOfBirth);
+      }
+    } else {
+      // If no date of birth, remove age and dateOfBirth from submission
+      delete formValue.age;
+      delete formValue.dateOfBirth;
     }
+
     const familyMember = {
-      ...familyMemberFormData,
+      ...formValue,
       dateFormat,
       locale
     };
+
+    // Remove empty fields
     for (const key in familyMember) {
       if (familyMember[key] === '' || familyMember[key] === undefined) {
         delete familyMember[key];
       }
     }
+
     return familyMember;
   }
 }