Skip to content

src/app/health/health-event.component.ts (fixes #9290) #9293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

src/app/health/health-event.component.ts (fixes #9290) #9293

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7409ef
Refactor health event form to typed controls
Saby-Bishops Oct 31, 2025
3fcc9e4
Guard typed health form conversions
Saby-Bishops Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 107 additions & 60 deletions src/app/health/health-event.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Component, OnInit, HostListener } from '@angular/core';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { HealthService } from './health.service';
import { conditions, conditionAndTreatmentFields } from './health.constants';
import { UserService } from '../shared/user.service';
Expand All @@ -16,21 +16,47 @@ import { CanComponentDeactivate } from '../shared/unsaved-changes.guard';
import { warningMsg } from '../shared/unsaved-changes.component';
import { debounce } from 'rxjs/operators';

interface HealthEventFormModel {
temperature: FormControl<number | null>;
pulse: FormControl<number | null>;
bp: FormControl<string | null>;
height: FormControl<number | null>;
weight: FormControl<number | null>;
vision: FormControl<string | null>;
hearing: FormControl<string | null>;
notes: FormControl<string | null>;
diagnosis: FormControl<string | null>;
treatments: FormControl<string | null>;
medications: FormControl<string | null>;
immunizations: FormControl<string | null>;
allergies: FormControl<string | null>;
xrays: FormControl<string | null>;
tests: FormControl<string | null>;
referrals: FormControl<string | null>;
conditions: FormControl<Record<string, boolean>>;
}

type HealthEventFormValue = {
[Key in keyof HealthEventFormModel]: HealthEventFormModel[Key] extends FormControl<infer Value>
? Value
: never;
};

@Component({
templateUrl: './health-event.component.html',
styleUrls: [ './health-update.scss' ]
})
export class HealthEventComponent implements OnInit, CanComponentDeactivate {

healthForm: UntypedFormGroup;
healthForm: FormGroup<HealthEventFormModel>;
conditions = conditions;
dialogPrompt: MatDialogRef<DialogsPromptComponent>;
event: any = {};
initialFormValues: any;
hasUnsavedChanges = false;

constructor(
private fb: UntypedFormBuilder,
private fb: FormBuilder,
private healthService: HealthService,
private router: Router,
private route: ActivatedRoute,
Expand All @@ -40,24 +66,24 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
private dialog: MatDialog,
private planetMessageService: PlanetMessageService
) {
this.healthForm = this.fb.group({
temperature: [ '', Validators.min(1) ],
pulse: [ '', Validators.min(1) ],
bp: [ '', CustomValidators.bpValidator ],
height: [ '', Validators.min(1) ],
weight: [ '', Validators.min(1) ],
vision: [ '' ],
hearing: [ '' ],
notes: '',
diagnosis: '',
treatments: '',
medications: '',
immunizations: '',
allergies: '',
xrays: '',
tests: '',
referrals: '',
conditions: {}
this.healthForm = this.fb.group<HealthEventFormModel>({
temperature: this.fb.control<number | null>(null, { validators: Validators.min(1) }),
pulse: this.fb.control<number | null>(null, { validators: Validators.min(1) }),
bp: this.fb.control<string | null>('', { validators: CustomValidators.bpValidator }),
height: this.fb.control<number | null>(null, { validators: Validators.min(1) }),
weight: this.fb.control<number | null>(null, { validators: Validators.min(1) }),
vision: this.fb.control<string | null>(''),
hearing: this.fb.control<string | null>(''),
notes: this.fb.control<string | null>(''),
diagnosis: this.fb.control<string | null>(''),
treatments: this.fb.control<string | null>(''),
medications: this.fb.control<string | null>(''),
immunizations: this.fb.control<string | null>(''),
allergies: this.fb.control<string | null>(''),
xrays: this.fb.control<string | null>(''),
tests: this.fb.control<string | null>(''),
referrals: this.fb.control<string | null>(''),
conditions: this.fb.control<Record<string, boolean>>({})
});
}

Expand Down Expand Up @@ -85,25 +111,15 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
}

private captureInitialState() {
const formValue = this.healthForm.value;
const numericFields = [ 'temperature', 'pulse', 'height', 'weight' ];
const processedForm = Object.keys(formValue).reduce((acc, key) => {
if (numericFields.includes(key)) {
acc[key] = formValue[key] === '' || formValue[key] === null ? undefined : Number(formValue[key]);
} else if (key === 'conditions') {
acc[key] = this.processConditions(formValue[key] || {});
} else {
acc[key] = formValue[key];
}
return acc;
}, {});
const formValue = this.healthForm.getRawValue();
const processedForm = this.transformFormValue(formValue);

this.initialFormValues = JSON.stringify(processedForm);
}

private processConditions(inputConditions: any) {
const processedConditions = Object.keys(inputConditions || {}).reduce((acc, key) => {
if (inputConditions[key]) {
private processConditions(inputConditions: Record<string, boolean> | null | undefined): Record<string, boolean> {
const processedConditions = Object.keys(inputConditions || {}).reduce<Record<string, boolean>>((acc, key) => {
if (inputConditions && inputConditions[key]) {
acc[key] = true;
}
return acc;
Expand All @@ -116,18 +132,8 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
.pipe(
debounce(() => race(interval(200), of(true)))
)
.subscribe(formValue => {
const numericFields = [ 'temperature', 'pulse', 'height', 'weight' ];
const processedForm = Object.keys(formValue).reduce((acc, key) => {
if (numericFields.includes(key)) {
acc[key] = formValue[key] === '' || formValue[key] === null ? undefined : Number(formValue[key]);
} else if (key === 'conditions') {
acc[key] = this.processConditions(formValue[key] || {});
} else {
acc[key] = formValue[key];
}
return acc;
}, {});
.subscribe((formValue: HealthEventFormValue) => {
const processedForm = this.transformFormValue(formValue);

const currentState = JSON.stringify(processedForm);
this.hasUnsavedChanges = currentState !== this.initialFormValues;
Expand All @@ -138,7 +144,7 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
if (!this.healthForm.valid) {
return;
}
const checkFields = [ 'temperature', 'pulse', 'bp', 'height', 'weight' ];
const checkFields: Array<keyof HealthEventFormModel> = [ 'temperature', 'pulse', 'bp', 'height', 'weight' ];
const promptFields = checkFields.filter((field) => !this.isFieldValueExpected(field))
.map(field => ({ field, value: this.healthForm.controls[field].value }));
if (promptFields.length) {
Expand All @@ -151,20 +157,37 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
}
}

isEmptyForm() {
const isConditionsEmpty = (values) => typeof values === 'object' && Object.values(values).every(value => !value);
isEmptyForm() {
const isConditionsEmpty = (values: Record<string, boolean>) =>
typeof values === 'object' && Object.values(values).every(value => !value);

return Object.values(this.healthForm.controls)
.every(({ value }) => value === null || /^\s*$/.test(value) || isConditionsEmpty(value));
.every((control) => {
const value = control.value;
if (value === null || value === undefined) {
return true;
}
if (typeof value === 'string') {
return /^\s*$/.test(value);
}
if (typeof value === 'number') {
return false;
}
return isConditionsEmpty(value as Record<string, boolean>);
});
}

goBack() {
// Let the router guard handle the unsaved changes prompt
this.router.navigate([ '..' ], { relativeTo: this.route });
}

conditionChange(condition) {
const currentConditions = this.healthForm.controls.conditions.value;
this.healthForm.controls.conditions.setValue({ ...currentConditions, [condition]: currentConditions[condition] !== true });
conditionChange(condition: string) {
const currentConditions = this.healthForm.controls.conditions.value || {};
this.healthForm.controls.conditions.setValue({
...currentConditions,
[condition]: currentConditions[condition] !== true
});
}

showWarning(invalidFields) {
Expand All @@ -190,7 +213,7 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
});
}

isFieldValueExpected(field) {
isFieldValueExpected(field: keyof HealthEventFormModel) {
const value = this.healthForm.controls[field].value;
const limits = {
'temperature': { min: 30, max: 45 },
Expand All @@ -203,26 +226,50 @@ export class HealthEventComponent implements OnInit, CanComponentDeactivate {
return true;
}
if (field === 'bp') {
return /^(([6-9])(\d)|([1-2])(\d){2}|(300))\/(([4-9])(\d)|(1)(\d){2}|(200))$/.test(value);
return typeof value === 'string'
? /^(([6-9])(\d)|([1-2])(\d){2}|(300))\/(([4-9])(\d)|(1)(\d){2}|(200))$/.test(value)
: true;
}
return value >= limits[field].min && value <= limits[field].max;
const fieldLimit = limits[field] as { min: number; max: number };
return (value as number) >= fieldLimit.min && (value as number) <= fieldLimit.max;
}

saveEvent() {
const formValue = this.healthForm.getRawValue();

return this.healthService.addEvent(
this.route.snapshot.params.id,
this.userService.get()._id,
this.event,
{
...this.healthForm.value,
...formValue,
selfExamination: this.route.snapshot.params.id === this.userService.get()._id,
createdBy: this.userService.get()._id,
planetCode: this.stateService.configuration.code,
hasInfo: conditionAndTreatmentFields.some(key => this.healthForm.value[key] !== '')
hasInfo: conditionAndTreatmentFields.some(key => {
const value = formValue[key as keyof HealthEventFormValue];
return typeof value === 'string' ? value !== null && value !== '' : value !== null;
})
}
);
}

private transformFormValue(formValue: HealthEventFormValue) {
const numericFieldSet = new Set<keyof HealthEventFormValue>([ 'temperature', 'pulse', 'height', 'weight' ]);

return (Object.keys(formValue) as Array<keyof HealthEventFormValue>).reduce((acc, key) => {
const value = formValue[key];
if (numericFieldSet.has(key)) {
acc[key] = value === null ? undefined : Number(value);
} else if (key === 'conditions') {
acc[key] = this.processConditions(value as Record<string, boolean> | null | undefined);
} else {
acc[key] = value;
}
return acc;
}, {} as Record<keyof HealthEventFormValue, unknown>);
}

canDeactivate(): boolean {
return !this.hasUnsavedChanges;
}
Expand Down
Loading