Skip to content

Form placeholder values #220

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

Closed
naa-siuuuu-ff wants to merge 6 commits into from
Closed

Form placeholder values #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
28c35c1
Remove placeholder text to default values in Vitals
naa-siuuuu-ff Dec 11, 2025
18f1cdd
Linting
naa-siuuuu-ff Dec 11, 2025
fb80cc6
Linting
naa-siuuuu-ff Dec 11, 2025
6556b02
Linting fr
naa-siuuuu-ff Dec 11, 2025
e2cae40
Linting fr
naa-siuuuu-ff Dec 11, 2025
6aca6ee
Linting fr
naa-siuuuu-ff Dec 11, 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
111 changes: 52 additions & 59 deletions src/components/records/patient/PatientForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { VillageOptionDropdown } from '@/components/VillageOptionDropdown';
import { VillageContext } from '@/context/VillageContext';
import { getPatientAge } from '@/types/Patient';
import { VillagePrefix } from '@/types/VillagePrefixEnum';
import { EMPTY_VITAL } from '@/types/Vital';
import { DateTime } from 'luxon';
import { FormEventHandler, useContext } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
Expand Down Expand Up @@ -91,16 +90,8 @@ export function PatientForm({
/>
)}
/>
<RHFBinaryOption
label="POOR Card"
name="poor"
defaultValue={'No'}
/>
<RHFBinaryOption
label="BS2 Card"
name="bs2"
defaultValue={'No'}
/>
<RHFBinaryOption label="POOR Card" name="poor" defaultValue={'No'} />
<RHFBinaryOption label="BS2 Card" name="bs2" defaultValue={'No'} />
<RHFBinaryOption
label="Sabai Card"
name="sabai"
Expand All @@ -116,58 +107,60 @@ export function PatientForm({
label="Drug Allergies"
type="textarea"
isRequired={true}
className='col-span-2'
className="col-span-2"
/>
</div>
{!isEditing && (<div>
<Divider />
<h2>Vitals</h2>
<RHFUnitInputField
name="temperature"
label="Temperature"
unit="°C"
type="number"
/>
<h2 className='mt-2'>Child Vitals</h2>
{showChildVitals ? (<div>
{/* <div className={gridStyle}> */}
<div className="flex flex-row gap-6">
<RHFCustomSelect
name="scoliosis"
label="Scoliosis"
defaultValue={NAOption}
options={[
{ label: 'Normal', value: 'Normal' },
{ label: 'Abnormal', value: 'Abnormal' },
]}
unselectedValue={NAOption}
/>
<RHFCustomSelect
name="pallor"
label="Pallor"
defaultValue={NAOption}
options={[
{ label: 'Yes', value: 'Yes' },
{ label: 'No', value: 'No' },
]}
unselectedValue={NAOption}
/>
</div>
<ChildPubertySection
curVital={EMPTY_VITAL}
pubertyFields={allPubertyFields.filter(
field =>
(field[0].gender == undefined || field[0].gender == gender) &&
field[0].age.includes(age)
)}
{!isEditing && (
<div>
<Divider />
<h2>Vitals</h2>
<RHFUnitInputField
name="temperature"
label="Temperature"
unit="°C"
type="number"
/>
<h2 className="mt-2">Child Vitals</h2>
{showChildVitals ? (
<div>
{/* <div className={gridStyle}> */}
<div className="flex flex-row gap-6">
<RHFCustomSelect
name="scoliosis"
label="Scoliosis"
defaultValue={NAOption}
options={[
{ label: 'Normal', value: 'Normal' },
{ label: 'Abnormal', value: 'Abnormal' },
]}
unselectedValue={NAOption}
/>
<RHFCustomSelect
name="pallor"
label="Pallor"
defaultValue={NAOption}
options={[
{ label: 'Yes', value: 'Yes' },
{ label: 'No', value: 'No' },
]}
unselectedValue={NAOption}
/>
</div>
<ChildPubertySection
pubertyFields={allPubertyFields.filter(
field =>
(field[0].gender == undefined ||
field[0].gender == gender) &&
field[0].age.includes(age)
)}
/>
</div>
) : (
<p className="w-full">
{age ? 'Not within child age range' : 'Age not specified'}
</p>
)}
</div>
) : (
<p className="w-full">
{age ? "Not within child age range" : "Age not specified"}
</p>
)}
</div>
)}
<Controller
name={'picture'}
Expand Down
74 changes: 16 additions & 58 deletions src/components/records/vital/ChildVitalsFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,10 +248,8 @@ export const allPubertyFields: InputFieldData[][] = [

export function ChildVitalsFields({
patient,
curVital,
}: {
patient: Pick<Patient, 'date_of_birth' | 'gender'>;
curVital: Vital;
}) {
const patientYearsOld = getPatientAge(patient).year;

Expand All @@ -269,48 +267,37 @@ export function ChildVitalsFields({
() =>
allPubertyFields
.filter(
field => field[0].gender == undefined || field[0].gender == patient.gender
field =>
field[0].gender == undefined || field[0].gender == patient.gender
)
.filter(field => field[0].age.includes(patientYearsOld)),
[patient.gender, patientYearsOld]
);
return (
<div>
{childVitalsFields.length == 0 || (
<ChildVitalsSection
childVitalsFields={childVitalsFields}
curVital={curVital}
/>
<ChildVitalsSection childVitalsFields={childVitalsFields} />
)}

{pubertyFields.length == 0 || (
<ChildPubertySection
pubertyFields={pubertyFields}
curVital={curVital}
/>
<ChildPubertySection pubertyFields={pubertyFields} />
)}
</div>
);
}

function ChildVitalsSection({
childVitalsFields,
curVital,
}: {
childVitalsFields: InputFieldData[];
curVital: Vital;
}) {
return (
<div>
<h2>Child Vitals</h2>
<div className="flex flex-row flex-wrap">
{/* <div className="grids-col-1 grid gap-2 md:grid-cols-2"> */}
{childVitalsFields.map(field => (
<VitalFieldRenderer
key={field.name}
field={field}
curVital={curVital}
/>
<VitalFieldRenderer key={field.name} field={field} />
))}
</div>
</div>
Expand All @@ -319,10 +306,8 @@ function ChildVitalsSection({

export function ChildPubertySection({
pubertyFields,
curVital,
}: {
pubertyFields: InputFieldData[][];
curVital: Vital;
}) {
return (
<div>
Expand All @@ -335,18 +320,16 @@ export function ChildPubertySection({
{/* <div className="flex flex-col gap-2"> */}
{pubertyFields.map(field => (
// <div className='flex flex-row gap-4 rounded-lg mr-6 p-2 border-2 border-gray-50'>
<div className='flex flex-row gap-4 rounded-lg mr-6 p-2 bg-gray-50 shadow-sm mb-2' key={field[0].name}>
<div
className="mb-2 mr-6 flex flex-row gap-4 rounded-lg bg-gray-50 p-2 shadow-sm"
key={field[0].name}
>
<VitalFieldRenderer
key={field[0].name}
field={field[0]}
curVital={curVital}
className='min-w-24'
/>
<VitalFieldRenderer
key={field[1].name}
field={field[1]}
curVital={curVital}
className="min-w-24"
/>
<VitalFieldRenderer key={field[1].name} field={field[1]} />
</div>
))}
</div>
Expand All @@ -357,46 +340,21 @@ export function ChildPubertySection({

function VitalFieldRenderer({
field,
curVital,
className
className,
}: {
field: InputFieldData;
curVital: Vital;
className?: string;
}) {
switch (field.type) {
case 'dropdown':
return (
<RHFCustomSelect
defaultValue={curVital[field.name]?.toString()}
className={className}
{...field}
/>
);
return <RHFCustomSelect className={className} {...field} />;
case 'text':
return (
<RHFInputField
placeholder={curVital[field.name]?.toString()}
className={className}
{...field}
/>
);
return <RHFInputField className={className} {...field} />;
case 'number':
return (
<RHFInputField
placeholder={curVital[field.name]?.toString()}
className={className}
{...field}
/>
);
return <RHFInputField className={className} {...field} />;
case 'yesNoOption':
return (
<RHFBinaryOption
defaultValue={curVital[field.name]?.toString()}
className={className}
isRequired={false}
{...field}
/>
<RHFBinaryOption className={className} isRequired={false} {...field} />
);
}
}
7 changes: 5 additions & 2 deletions src/components/records/vital/VitalsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export function VitalsForm({
const useFormReturn = useForm({
mode: 'onBlur',
reValidateMode: 'onBlur',
defaultValues: curVital,
});
const { handleSubmit, reset, watch } = useFormReturn;
const [formHeight, formWeight] = watch(['height', 'weight']);
Expand All @@ -36,7 +37,9 @@ export function VitalsForm({
// the new values in curVitals. The RHFCustomSelect and Dropdown components will have
// their values set to these new values via the defaultValue prop.
useEffect(() => {
reset({})
if (curVital) {
reset(curVital);
}
}, [curVital, reset])

// if the user hasn’t provided a new height/weight, fall back
Expand Down Expand Up @@ -217,7 +220,7 @@ export function VitalsForm({
options={['Yes', 'No']}
/>
</div>
<ChildVitalsFields patient={patient} curVital={curVital} />
<ChildVitalsFields patient={patient} />
<h2>Other notes</h2>
<RHFInputField
name="others"
Expand Down