Bkretz/feature/celcius temp

client/src/EMS/BloodPressureField.js

@@ -6,6 +6,7 @@ import FormInput from '../Components/FormInput';
 import { useForm } from '../Components/Form';
 
 import './BloodPressureField.scss';
+import FormMultiField from './FormMultiField';
 
 function BPInput({ metadata, unit }) {
   const { data, onChange } = useForm();
@@ -18,7 +19,7 @@ function BPInput({ metadata, unit }) {
     // grouped with its input in a div because the fields are arranged horizontally
     // in a row.  since the errors are absolutely positioned, they'd both shift to
     // the left margin of the .bpfield without this extra div, causing an overlap.
-    <div className="bpfield__input">
+    <>
       <FormInput
         type="number"
         property={name}
@@ -29,7 +30,7 @@ function BPInput({ metadata, unit }) {
         max={max}
         onChange={onChange}
       />
-    </div>
+    </>
   );
 }
 
@@ -39,15 +40,16 @@ export default function BloodPressureField({ systolicMetadata, diastolicMetadata
   const hasError = validations.includes(ValidationState.RANGE_ERROR);
 
   return (
-    <>
-      <label htmlFor={systolicMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
-        Blood pressure
-      </label>
-      <div className="bpfield">
-        <BPInput metadata={systolicMetadata} unit="/" />
-        <BPInput metadata={diastolicMetadata} unit="mmHG" />
-      </div>
-    </>
+    <FormMultiField
+      label={
+        <label htmlFor={systolicMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+          Blood pressure
+        </label>
+      }
+    >
+      <BPInput metadata={systolicMetadata} unit="/" />
+      <BPInput metadata={diastolicMetadata} unit="mmHG" />
+    </FormMultiField>
   );
 }
 

client/src/EMS/FormMultiField.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './FormMultiField.scss';
+
+const FormMultiField = ({ label, children }) => {
+  return (
+    <>
+      {label}
+      <div className="multi-field">
+        {children.map((child) => {
+          return <div className="multi-field__input">{child}</div>;
+        })}
+      </div>
+    </>
+  );
+};
+
+export default FormMultiField;

client/src/EMS/FormMultiField.scss

@@ -0,0 +1,22 @@
+@import '../theme/base';
+
+.multi-field {
+  display: flex;
+  gap: 0.6rem;
+  position: relative;
+}
+
+.multi-field__input {
+  .grid-row {
+    flex-wrap: nowrap;
+  }
+
+  .usa-input {
+    width: 13ex;
+  }
+
+  .usa-error-message {
+    top: 3rem;
+    max-width: 9rem;
+  }
+}

client/src/EMS/PatientFields.js

@@ -12,6 +12,7 @@ import Ringdown from '../Models/Ringdown';
 import ApiService from '../ApiService';
 import Context from '../Context';
 import patient from '../../../shared/metadata/patient';
+import TemperatureField from './TemperatureField';
 
 const Patient = patient.getFieldHash();
 
@@ -157,7 +158,19 @@ function PatientFields({ ringdown, onChange }) {
               />
             </FormRadioFieldSet>
           </div>
-          <FormField metadata={Patient.temperature} />
+          {/* <FormField metadata={Patient.temperature} /> */}
+          <TemperatureField temperatureMetadata={Patient.temperature} />
+          {/* <FormField
+            metadata={Patient.temperature}
+            label="Temperature"
+          >
+            <span className="usa-hint usa-hint--unit">&nbsp;&nbsp;</span>
+            <FormField
+              metadata={Patient.temperature.conversion}
+              isWrapped={false}
+              label={false}
+            />
+          </FormField> */}
         </fieldset>
       </div>
       <Heading title="Additional notes" subtitle="optional" />

client/src/EMS/TemperatureField.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useForm } from '../Components/Form';
+import FormInput from '../Components/FormInput';
+
+import { ValidationState } from '../Models/PatientFieldData';
+import classNames from 'classnames';
+
+import FormMultiField from './FormMultiField';
+
+const TemperatureInput = ({ metadata, unit, onChange, value }) => {
+  const { data } = useForm();
+  const { name, range = {} } = metadata || {};
+  const { min, max } = range;
+
+  return (
+    <>
+      <FormInput
+        type="number"
+        property={name}
+        value={data[name] || value}
+        validationState={data.getValidationState(name)}
+        unit={unit || metadata?.unit}
+        min={min}
+        max={max}
+        onChange={onChange}
+      />
+    </>
+  );
+};
+
+const TemperatureField = ({ temperatureMetadata }) => {
+  const { data, onChange } = useForm();
+  const [celsius, setCelsius] = useState('');
+  const celsiusMetadata = { name: 'celsius', unit: '°C', range: { min: 26.5, max: 65.5 } };
+
+  const hasError = data.getValidationState(temperatureMetadata.name) === ValidationState.RANGE_ERROR;
+
+  const handleOnChange = (name, value) => {
+    if (name === 'celsius') {
+      onChange('temperature', (parseFloat(value) * 1.8 + 32).toFixed(2));
+      setCelsius(value);
+    } else {
+      onChange(name, value);
+      setCelsius(((parseFloat(value) - 32) / 1.8).toFixed(2));
+    }
+  };
+  return (
+    <>
+      <FormMultiField
+        label={
+          <label htmlFor={temperatureMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+            Temperature
+          </label>
+        }
+      >
+        <TemperatureInput metadata={temperatureMetadata} onChange={handleOnChange} />
+        <TemperatureInput metadata={celsiusMetadata} value={celsius} onChange={handleOnChange} />
+      </FormMultiField>
+    </>
+  );
+};
+
+export default TemperatureField;

client/src/Models/Ringdown.js

@@ -18,7 +18,7 @@ const fieldHashes = {
 // array order should be the same as the field order in PatientFields.
 
 const handleInputValidation = (name, value) => {
-  const { type = null, required = false } = fieldHashes[name];
+  const { type = null, required = false } = fieldHashes[name] || {};
 
   let isValidType = false;
   switch (type) {
@@ -80,7 +80,7 @@ const payloadModels = [
   [['emergencyMedicalServiceCall', 'emsCall'], ['dispatchCallNumber']],
   // we want to expose the hospital id field under a different name, so we'll define it in the class below instead of here
   ['hospital', []],
-  ['patient', metadata.patient.getObjectFields()],
+  ['patient', [...metadata.patient.getObjectFields()]],
   ['patientDelivery', ['etaMinutes', 'currentDeliveryStatus']],
 ];
 
@@ -274,9 +274,17 @@ class Ringdown {
 
   setValidationStateForInput(fieldName, currentState, inputValue) {
     const isInputValueEmpty = isValueEmpty(inputValue);
-    const { range, required = false } = fieldHashes[fieldName];
+    const {
+      range,
+      required = false,
+      // conversion = null, originColumn
+    } = fieldHashes[fieldName];
     const isInRange = range && handleRange(inputValue, range.max, range.min);
 
+    // if (conversion || originColumn) {
+    //   this.setConvertedField(conversion?.name || originColumn, inputValue);
+    // }
+
     switch (currentState) {
       case ValidationState.REQUIRED_ERROR:
       case ValidationState.EMPTY_REQUIRED_INPUT: