feat(diagnosis): link diagnosis with visit (#2321)

Co-authored-by: Matteo Vivona <[email protected]>

src/__tests__/patients/diagnoses/DiagnosisForm.test.tsx

@@ -6,6 +6,7 @@ import { act } from 'react-dom/test-utils'
 
 import DiagnosisForm from '../../../patients/diagnoses/DiagnosisForm'
 import Diagnosis, { DiagnosisStatus } from '../../../shared/model/Diagnosis'
+import Patient from '../../../shared/model/Patient'
 
 describe('Diagnosis Form', () => {
   let onDiagnosisChangeSpy: any
@@ -17,8 +18,14 @@ describe('Diagnosis Form', () => {
     abatementDate: new Date().toISOString(),
     status: DiagnosisStatus.Active,
     note: 'some note',
+    visit: 'some visit',
   }
 
+  const patient = {
+    givenName: 'first',
+    fullName: 'first',
+  } as Patient
+
   const setup = (disabled = false, initializeDiagnosis = true, error?: any) => {
     onDiagnosisChangeSpy = jest.fn()
     const wrapper = mount(
@@ -27,6 +34,7 @@ describe('Diagnosis Form', () => {
         diagnosis={initializeDiagnosis ? diagnosis : {}}
         diagnosisError={error}
         disabled={disabled}
+        patient={patient}
       />,
     )
     return { wrapper }
@@ -55,6 +63,29 @@ describe('Diagnosis Form', () => {
     expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({ name: expectedNewname })
   })
 
+  it('should render a visit selector', () => {
+    const { wrapper } = setup()
+
+    const visitSelector = wrapper.findWhere((w) => w.prop('name') === 'visit')
+
+    expect(visitSelector).toHaveLength(1)
+    expect(visitSelector.prop('patient.diagnoses.visit'))
+    expect(visitSelector.prop('isRequired')).toBeFalsy()
+    expect(visitSelector.prop('defaultSelected')).toEqual([])
+  })
+
+  it('should call the on change handler when visit changes', () => {
+    const expectedNewVisit = patient.visits
+    const { wrapper } = setup(false, false)
+    act(() => {
+      const visitSelector = wrapper.findWhere((w) => w.prop('name') === 'visit')
+      const onChange = visitSelector.prop('onChange') as any
+      onChange([expectedNewVisit])
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({ status: expectedNewVisit })
+  })
+
   it('should render a status selector', () => {
     const { wrapper } = setup()
 

src/patients/diagnoses/AddDiagnosisModal.tsx

@@ -19,6 +19,7 @@ const initialDiagnosisState = {
   onsetDate: new Date().toISOString(),
   abatementDate: new Date().toISOString(),
   note: '',
+  visit: '',
 }
 
 const AddDiagnosisModal = (props: Props) => {
@@ -45,6 +46,7 @@ const AddDiagnosisModal = (props: Props) => {
       diagnosis={diagnosis}
       diagnosisError={diagnosisError}
       onChange={onDiagnosisChange}
+      patient={patient}
     />
   )
   return (

src/patients/diagnoses/DiagnosisForm.tsx

@@ -1,4 +1,5 @@
 import { Alert, Row, Column } from '@hospitalrun/components'
+import format from 'date-fns/format'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -9,6 +10,7 @@ import SelectWithLabelFormGroup, {
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
 import Diagnosis, { DiagnosisStatus } from '../../shared/model/Diagnosis'
+import Patient from '../../shared/model/Patient'
 
 interface Error {
   message?: string
@@ -19,16 +21,18 @@ interface Error {
   status?: string
   note?: string
 }
+
 interface Props {
   diagnosis: Partial<Diagnosis>
   diagnosisError?: Error
   onChange?: (newDiagnosis: Partial<Diagnosis>) => void
   disabled: boolean
+  patient: Patient
 }
 
 const DiagnosisForm = (props: Props) => {
   const { t } = useTranslation()
-  const { diagnosis, diagnosisError, disabled, onChange } = props
+  const { diagnosis, diagnosisError, disabled, onChange, patient } = props
   const [status, setStatus] = useState(diagnosis.status)
 
   const onFieldChange = (name: string, value: string | DiagnosisStatus) => {
@@ -41,6 +45,18 @@ const DiagnosisForm = (props: Props) => {
     }
   }
 
+  const patientVisits = patient?.visits?.map((v) => ({
+    label: `${v.type} at ${format(new Date(v.startDateTime), 'yyyy-MM-dd, hh:mm a')}`,
+    value: v.id,
+  })) as Option[]
+
+  const defaultSelectedVisitOption = () => {
+    if (patientVisits !== undefined) {
+      return patientVisits.filter(({ value }) => value === diagnosis.visit)
+    }
+    return []
+  }
+
   const statusOptions: Option[] = Object.values(DiagnosisStatus).map((v) => ({
     label: v,
     value: v,
@@ -116,6 +132,22 @@ const DiagnosisForm = (props: Props) => {
         </Column>
       </Row>
 
+      <Row>
+        <Column md={12}>
+          <SelectWithLabelFormGroup
+            name="visit"
+            label={t('patient.diagnoses.visit')}
+            isRequired={false}
+            options={patientVisits || []}
+            defaultSelected={defaultSelectedVisitOption()}
+            onChange={(values) => {
+              onFieldChange('visit', values[0])
+            }}
+            isEditable={patient?.visits !== undefined}
+          />
+        </Column>
+      </Row>
+
       <Row>
         <Column md={12}>
           <SelectWithLabelFormGroup

src/shared/locales/enUs/translations/patient/index.ts

@@ -78,6 +78,7 @@ export default {
       diagnosisDate: 'Diagnosis Date',
       onsetDate: 'Onset Date',
       abatementDate: 'Abatement Date',
+      visit: 'Visit',
       status: 'Status',
       active: 'Active',
       recurrence: 'Recurrence',

src/shared/model/Diagnosis.ts

@@ -15,4 +15,5 @@ export default interface Diagnosis {
   abatementDate: string
   status: DiagnosisStatus
   note: string
+  visit: string
 }