Add new fields to patient metadata

Add PatientFields and Ringdown changes from 169-ems-update-form branch.
Fix default value for status indicator.

Author: fwextensions

src/Components/FormRadio.js

@@ -24,7 +24,7 @@ function FormRadio({ currentValue, disabled, label, onChange, property, value })
 FormRadio.propTypes = {
   currentValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
   disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   onChange: PropTypes.func.isRequired,
   property: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),

src/Components/FormRadioFieldSet.js

@@ -29,11 +29,12 @@ FormRadioFieldSet.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   labelText: PropTypes.string.isRequired,
   property: PropTypes.string.isRequired,
-  isRequired: PropTypes.bool.isRequired,
+  isRequired: PropTypes.bool,
   validationState: PropTypes.string,
 };
 
 FormRadioFieldSet.defaultProps = {
+  isRequired: false,
   validationState: ValidityState.NO_INPUT,
 };
 

src/EMS/PatientFields.js

@@ -14,18 +14,38 @@ import ApiService from '../ApiService';
 import Context from '../Context';
 
 const INPUT_RANGES = {
+  age: { min: 0, max: 130 },
   systolicBloodPressure: { min: 90, max: 180 },
   diastolicBloodPressure: { min: 60, max: 120 },
   heartRateBpm: { min: 40, max: 200 },
   respiratoryRate: { min: 12, max: 25 },
   oxygenSaturation: { min: 0, max: 100 },
   temperature: { min: 80, max: 150 },
+  glasgowComaScale: { min: 3, max: 15 },
 };
 
 function getRange(property, extreme) {
   return INPUT_RANGES[property] ? INPUT_RANGES[property][extreme] : null;
 }
 
+// use prop-spreading here because all we're doing is defaulting some props and letting the rest
+// pass through to FormInput
+function NumericField({ property, size = 'small', min = getRange(property, 'min'), max = getRange(property, 'max'), ...props }) {
+  return (
+    <FormInput
+      property={property}
+      size={size}
+      min={min}
+      max={max}
+      type="number"
+      /* eslint-disable-next-line react/jsx-props-no-spreading */
+      {...props}
+    />
+  );
+}
+
+NumericField.propTypes = FormInput.propTypes;
+
 function PatientFields({ ringdown, onChange }) {
   const [ambulanceIds, setAmbulanceIds] = useState([]);
   const [dispatchCallNumbers, setDispatchCallNumbers] = useState([]);
@@ -91,27 +111,24 @@ function PatientFields({ ringdown, onChange }) {
         <Heading title="Patient Info" />
         <div className="usa-accordion__content">
           <fieldset className="usa-fieldset">
-            <FormInput
-              label="Age (estim.)"
-              onChange={handleUserInput}
+            <NumericField
+              label="Age (estimated)"
               property="age"
-              required
-              size="small"
-              type="number"
               unit="years"
               value={ringdown.age}
+              required
               validationState={ringdown.getValidationState('age')}
+              onChange={handleUserInput}
             />
           </fieldset>
           <FormRadioFieldSet labelText="Gender Identity" property="sex" isRequired validationState={ringdown.getValidationState('sex')}>
-            <FormRadio currentValue={ringdown.sex} label="Male" onChange={handleUserInput} property="sex" value="MALE" />
-            <FormRadio currentValue={ringdown.sex} label="Female" onChange={handleUserInput} property="sex" value="FEMALE" />
-            <FormRadio currentValue={ringdown.sex} label="Non-binary" onChange={handleUserInput} property="sex" value="NON-BINARY" />
+            <FormRadio currentValue={ringdown.sex} label="Male" property="sex" value="MALE" onChange={handleUserInput} />
+            <FormRadio currentValue={ringdown.sex} label="Female" property="sex" value="FEMALE" onChange={handleUserInput} />
+            <FormRadio currentValue={ringdown.sex} label="Non-binary" property="sex" value="NON-BINARY" onChange={handleUserInput} />
           </FormRadioFieldSet>
           <FormRadioFieldSet
             labelText="Urgency"
             property="emergencyServiceResponseType"
-            isRequired
             validationState={ringdown.getValidationState('emergencyServiceResponseType')}
           >
             <FormRadio
@@ -127,7 +144,7 @@ function PatientFields({ ringdown, onChange }) {
               onChange={handleUserInput}
               property="emergencyServiceResponseType"
               value="CODE 3"
-              disabled={window.env.REACT_APP_DISABLE_CODE_3 === 'true'}
+              disabled
             />
           </FormRadioFieldSet>
           <fieldset className="usa-fieldset">
@@ -166,67 +183,34 @@ function PatientFields({ ringdown, onChange }) {
             />
           </FormRadioFieldSet>
         </div>
-        <Heading title="Vitals" subtitle="(optional)" />
+        <Heading title="Vitals" subtitle="optional" />
         <div className="usa-accordion__content">
           <fieldset className="usa-fieldset">
-            <FormInput
+            <NumericField
               label="Blood Pressure"
-              onChange={handleUserInput}
               property="systolicBloodPressure"
-              size="small"
-              type="number"
               unit="/"
-              min={getRange('systolicBloodPressure', 'min')}
-              max={getRange('systolicBloodPressure', 'max')}
               value={ringdown.systolicBloodPressure}
+              onChange={handleUserInput}
             >
               <span className="usa-hint usa-hint--unit">&nbsp;&nbsp;</span>
-              <FormInput
-                onChange={handleUserInput}
+              <NumericField
                 isWrapped={false}
                 property="diastolicBloodPressure"
-                size="small"
-                type="number"
                 unit="mmHg"
-                min={getRange('diastolicBloodPressure', 'min')}
-                max={getRange('diastolicBloodPressure', 'max')}
                 value={ringdown.diastolicBloodPressure}
+                onChange={handleUserInput}
               />
-            </FormInput>
-            <FormInput
-              label="Pulse"
-              onChange={handleUserInput}
-              property="heartRateBpm"
-              size="small"
-              type="number"
-              unit="bpm"
-              min={getRange('heartRateBpm', 'min')}
-              max={getRange('heartRateBpm', 'max')}
-              value={ringdown.heartRateBpm}
-            />
-            <FormInput
+            </NumericField>
+            <NumericField label="Pulse" property="heartRateBpm" unit="beats/min" value={ringdown.heartRateBpm} onChange={handleUserInput} />
+            <NumericField
               label="Respiratory Rate"
-              onChange={handleUserInput}
               property="respiratoryRate"
-              size="small"
-              type="number"
-              min={getRange('respiratoryRate', 'min')}
-              max={getRange('respiratoryRate', 'max')}
-              unit="breath/m"
+              unit="breaths/min"
               value={ringdown.respiratoryRate}
-            />
-            <FormInput
-              label="SpO2"
               onChange={handleUserInput}
-              property="oxygenSaturation"
-              size="small"
-              type="number"
-              unit="%"
-              pattern="[0-9]*"
-              min={getRange('oxygenSaturation', 'min')}
-              max={getRange('oxygenSaturation', 'max')}
-              value={ringdown.oxygenSaturation}
             />
+            <NumericField label="SpO2" property="oxygenSaturation" unit="%" value={ringdown.oxygenSaturation} onChange={handleUserInput} />
             <div className="padding-left-4">
               <FormRadio
                 currentValue={ringdown.lowOxygenResponseType}
@@ -240,40 +224,38 @@ function PatientFields({ ringdown, onChange }) {
                 <FormRadio
                   currentValue={ringdown.lowOxygenResponseType}
                   disabled={ringdown.oxygenSaturation === null || ringdown.oxygenSaturation === ''}
-                  label="O2"
+                  label={
+                    <span>
+                      O<sub>2</sub>
+                    </span>
+                  }
                   onChange={handleUserInput}
                   property="lowOxygenResponseType"
                   value="SUPPLEMENTAL OXYGEN"
                 />
                 <div className="margin-left-4">
-                  <FormInput
-                    disabled={ringdown.lowOxygenResponseType !== 'SUPPLEMENTAL OXYGEN'}
-                    onChange={handleUserInput}
+                  <NumericField
                     property="supplementalOxygenAmount"
-                    size="small"
-                    type="number"
                     unit="L"
+                    disabled={ringdown.lowOxygenResponseType !== 'SUPPLEMENTAL OXYGEN'}
                     value={ringdown.supplementalOxygenAmount}
+                    onChange={handleUserInput}
                   />
                 </div>
               </div>
             </div>
-            <FormInput
-              label="Temp."
-              onChange={handleUserInput}
-              property="temperature"
-              size="small"
-              type="number"
-              min={getRange('temperature', 'min')}
-              max={getRange('temperature', 'max')}
-              unit="&deg;F"
-              value={ringdown.temperature}
-            />
+            <NumericField label="Temp." property="temperature" unit="&deg;F" value={ringdown.temperature} onChange={handleUserInput} />
           </fieldset>
         </div>
-        <Heading title="Additional notes" subtitle="(optional)" />
+        <Heading title="Additional Notes" subtitle="optional" />
         <div className="usa-accordion__content">
           <fieldset className="usa-fieldset">
+            <FormTextArea
+              label="Treatments administered"
+              property="treatmentNotes"
+              value={ringdown.treatmentNotes}
+              onChange={handleUserInput}
+            />
             <FormCheckbox
               currentValue={ringdown.etohSuspectedIndicator}
               label="ETOH suspected"
@@ -319,14 +301,19 @@ function PatientFields({ ringdown, onChange }) {
               property="covid19SuspectedIndicator"
               value={true}
             />
-            <FormCheckbox
-              currentValue={ringdown.ivIndicator}
-              label="IV started"
+            <NumericField
+              label="GCS"
+              property="glasgowComaScale"
+              unit="/ 15"
+              value={ringdown.glasgowComaScale}
+              onChange={handleUserInput}
+            />
+            <FormTextArea
+              label="Other"
+              property="otherObservationNotes"
+              value={ringdown.otherObservationNotes}
               onChange={handleUserInput}
-              property="ivIndicator"
-              value={true}
             />
-            <FormTextArea label="Other" onChange={onChange} property="otherObservationNotes" value={ringdown.otherObservationNotes} />
           </fieldset>
         </div>
       </div>

src/Models/Ringdown.js

@@ -46,7 +46,8 @@ class Ringdown {
     this.payload.ambulance = this.payload.ambulance || {};
     this.payload.emsCall = this.payload.emsCall || {};
     this.payload.hospital = this.payload.hospital || {};
-    this.payload.patient = this.payload.patient || {};
+    // default the urgency to Code 2 for a new ringdown
+    this.payload.patient = this.payload.patient || { emergencyServiceResponseType: 'CODE 2' };
     this.payload.patientDelivery = this.payload.patientDelivery || {};
 
     // add getters/setters for patient fields

src/metadata/patient.js

@@ -40,6 +40,9 @@ const fields = [
   {
     name: 'stableIndicator',
     type: 'boolean',
+    // though this is stored as a boolean, it's rendered in the UI as two radio buttons, not a
+    // checkbox, so use null as the default so neither radio is selected
+    defaultValue: null,
     required: true,
   },
   {
@@ -75,6 +78,10 @@ const fields = [
     name: 'temperature',
     type: 'decimal',
   },
+  {
+    name: 'treatmentNotes',
+    type: 'text',
+  },
   {
     name: 'etohSuspectedIndicator',
     type: 'boolean',
@@ -104,6 +111,10 @@ const fields = [
     name: 'ivIndicator',
     type: 'boolean',
   },
+  {
+    name: 'glasgowComaScale',
+    type: 'integer',
+  },
   {
     name: 'otherObservationNotes',
     type: 'text',

theme/_uswds-theme-custom-styles.scss

@@ -300,6 +300,11 @@ $spinner-border-width-sm: 0.2em;
   @include u-margin-top(2);
 }
 
+textarea + .usa-checkbox > .usa-checkbox__label,
+textarea + .usa-radio > .usa-radio__label {
+  @include u-margin-top(4);
+}
+
 .usa-combo-box__clear-input {
   display: none !important;
 }