Skip to content

Commit

Permalink
[Closes #191] Patient form UI tweaks (#192)
Browse files Browse the repository at this point in the history 
* Allow all hosts to connect to vite dev server

* Fix typo in filename

* [Closes #191] Tweak Patient form UI
  • Loading branch information
@francisli
francisli authored Jan 29, 2025
1 parent 40c49ac commit d8505b9
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 130 deletions.
270 changes: 140 additions & 130 deletions client/src/pages/patients/register/PatientRegistrationAccordion.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';

import { Accordion, TextInput, Select, InputBase } from '@mantine/core';
import { Accordion, TextInput, Select, Stack, InputBase } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { TbCircleCheck as IconCircleCheck } from 'react-icons/tb';
import { IMaskInput } from 'react-imask';
Expand All @@ -9,7 +9,7 @@ import { humanize } from 'inflection';
import MedicalDataSearch from './inputs/MedicalDataSearch';
import HealthcareChoicesSearch from './inputs/HealthcareChoicesSearch';

import classes from './PatientRegistationAccordion.module.css';
import classes from './PatientRegistrationAccordion.module.css';

const PatientRegistrationAccordionProps = {
form: PropTypes.object.isRequired,
Expand Down Expand Up @@ -66,60 +66,62 @@ export default function PatientRegistrationAccordion ({
: null}
</Accordion.Control>
<Accordion.Panel>
<TextInput
label='First Name'
placeholder='First Name'
withAsterisk
key={form.key('patientData.firstName')}
{...form.getInputProps('patientData.firstName')}
/>
<TextInput
label='Middle Name'
placeholder='Middle Name'
key={form.key('patientData.middleName')}
{...form.getInputProps('patientData.middleName')}
/>
<TextInput
label='Last Name'
placeholder='Last Name'
withAsterisk
key={form.key('patientData.lastName')}
{...form.getInputProps('patientData.lastName')}
/>
<Select
label='Gender'
placeholder='Select Gender'
withAsterisk
data={FORM_SELECT_ENUM_VALUES.gender.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('patientData.gender')}
{...form.getInputProps('patientData.gender')}
/>
<Select
label='Language'
placeholder='Select Language'
withAsterisk
data={FORM_SELECT_ENUM_VALUES.language.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('patientData.language')}
{...form.getInputProps('patientData.language')}
/>
<DateInput
label='Date of Birth'
valueFormat='YYYY-MM-DD'
placeholder='YYYY-MM-DD'
defaultLevel='decade'
maxDate={new Date()}
withAsterisk
key={form.key('patientData.dateOfBirth')}
{...form.getInputProps('patientData.dateOfBirth')}
/>
<Stack>
<TextInput
label='First Name'
placeholder='First Name'
withAsterisk
key={form.key('patientData.firstName')}
{...form.getInputProps('patientData.firstName')}
/>
<TextInput
label='Middle Name'
placeholder='Middle Name'
key={form.key('patientData.middleName')}
{...form.getInputProps('patientData.middleName')}
/>
<TextInput
label='Last Name'
placeholder='Last Name'
withAsterisk
key={form.key('patientData.lastName')}
{...form.getInputProps('patientData.lastName')}
/>
<Select
label='Gender'
placeholder='Select Gender'
withAsterisk
data={FORM_SELECT_ENUM_VALUES.gender.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('patientData.gender')}
{...form.getInputProps('patientData.gender')}
/>
<Select
label='Language'
placeholder='Select Language'
withAsterisk
data={FORM_SELECT_ENUM_VALUES.language.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('patientData.language')}
{...form.getInputProps('patientData.language')}
/>
<DateInput
label='Date of Birth'
valueFormat='YYYY-MM-DD'
placeholder='YYYY-MM-DD'
defaultLevel='decade'
maxDate={new Date()}
withAsterisk
key={form.key('patientData.dateOfBirth')}
{...form.getInputProps('patientData.dateOfBirth')}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>

Expand All @@ -133,49 +135,51 @@ export default function PatientRegistrationAccordion ({
: null}
</Accordion.Control>
<Accordion.Panel>
<TextInput
label='First Name'
placeholder='First Name'
key={form.key('contactData.firstName')}
{...form.getInputProps('contactData.firstName')}
/>
<TextInput
label='Middle Name'
placeholder='Middle Name'
key={form.key('contactData.middleName')}
{...form.getInputProps('contactData.middleName')}
/>
<TextInput
label='Last Name'
placeholder='Last Name'
key={form.key('contactData.lastName')}
{...form.getInputProps('contactData.lastName')}
/>
<InputBase
label='Phone Number'
component={IMaskInput}
mask='(000) 000-0000'
placeholder='(000) 000-0000'
key={form.key('contactData.phone')}
{...form.getInputProps('contactData.phone')}
/>
<TextInput
label='Email'
placeholder='Email'
key={form.key('contactData.email')}
{...form.getInputProps('contactData.email')}
/>
<Select
label='Relationship'
placeholder='Select Relationship'
data={FORM_SELECT_ENUM_VALUES.relationship.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('contactData.relationship')}
{...form.getInputProps('contactData.relationship')}
/>
<Stack>
<TextInput
label='First Name'
placeholder='First Name'
key={form.key('contactData.firstName')}
{...form.getInputProps('contactData.firstName')}
/>
<TextInput
label='Middle Name'
placeholder='Middle Name'
key={form.key('contactData.middleName')}
{...form.getInputProps('contactData.middleName')}
/>
<TextInput
label='Last Name'
placeholder='Last Name'
key={form.key('contactData.lastName')}
{...form.getInputProps('contactData.lastName')}
/>
<InputBase
label='Phone Number'
component={IMaskInput}
mask='(000) 000-0000'
placeholder='(000) 000-0000'
key={form.key('contactData.phone')}
{...form.getInputProps('contactData.phone')}
/>
<TextInput
label='Email'
placeholder='Email'
key={form.key('contactData.email')}
{...form.getInputProps('contactData.email')}
/>
<Select
label='Relationship'
placeholder='Select Relationship'
data={FORM_SELECT_ENUM_VALUES.relationship.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('contactData.relationship')}
{...form.getInputProps('contactData.relationship')}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>

Expand All @@ -189,16 +193,18 @@ export default function PatientRegistrationAccordion ({
: null}
</Accordion.Control>
<Accordion.Panel>
{Object.keys(form.getValues().medicalData).map((category) => {
return (
<MedicalDataSearch
category={category}
form={form}
initialMedicalData={initialMedicalData[category]}
key={category}
/>
);
})}
<Stack>
{Object.keys(form.getValues().medicalData).map((category) => {
return (
<MedicalDataSearch
category={category}
form={form}
initialMedicalData={initialMedicalData[category]}
key={category}
/>
);
})}
</Stack>
</Accordion.Panel>
</Accordion.Item>

Expand All @@ -212,16 +218,18 @@ export default function PatientRegistrationAccordion ({
: null}
</Accordion.Control>
<Accordion.Panel>
<HealthcareChoicesSearch
form={form}
choice='hospital'
initialData={initialHospitalData}
/>
<HealthcareChoicesSearch
form={form}
choice='physician'
initialData={initialPhysicianData}
/>
<Stack>
<HealthcareChoicesSearch
form={form}
choice='hospital'
initialData={initialHospitalData}
/>
<HealthcareChoicesSearch
form={form}
choice='physician'
initialData={initialPhysicianData}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>

Expand All @@ -235,17 +243,19 @@ export default function PatientRegistrationAccordion ({
: null}
</Accordion.Control>
<Accordion.Panel>
<Select
label='Code Status'
placeholder='Select Code Status'
data={FORM_SELECT_ENUM_VALUES.codeStatus.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('codeStatus')}
{...form.getInputProps('codeStatus')}
/>
<Stack>
<Select
label='Code Status'
placeholder='Select Code Status'
data={FORM_SELECT_ENUM_VALUES.codeStatus.map((value) => ({
value,
label: humanize(value),
}))}
searchable
key={form.key('codeStatus')}
{...form.getInputProps('codeStatus')}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
Expand Down
5 changes: 5 additions & 0 deletions ...er/PatientRegistationAccordion.module.css → ...r/PatientRegistrationAccordion.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.control {
font-weight: 600;
padding-inline: 0 !important;
}

.label {
Expand All @@ -9,3 +10,7 @@
font-size: 1.5rem;
margin-right: 1rem;
}

.content {
padding-inline: 0 !important;
}
1 change: 1 addition & 0 deletions client/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import react from '@vitejs/plugin-react-swc';
export default defineConfig({
plugins: [react()],
server: {
allowedHosts: true,
proxy: {
'/api': {
target: 'http://0.0.0.0:5100',
Expand Down

0 comments on commit d8505b9

Please sign in to comment.