Yet more changes

- Make the BMI input readonly - Reorder inputs to match designs - Update tests
openmrs · Nov 1, 2023 · bf649dd · bf649dd
1 parent fa6a890
commit bf649dd
Show file tree

Hide file tree

Showing 8 changed files with 393 additions and 77 deletions.
diff --git a/...patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/...patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -79,7 +79,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const [showErrorMessage, setShowErrorMessage] = useState(false);
   const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
 
-  const { control, handleSubmit, getValues, watch, setValue } = useForm<VitalsBiometricsFormData>({
+  const { control, handleSubmit, watch, setValue } = useForm<VitalsBiometricsFormData>({
     mode: 'all',
     resolver: zodResolver(vitalsBiometricsFormSchema),
   });
@@ -227,6 +227,32 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
             <p className={styles.title}>{t('recordVitals', 'Record vitals')}</p>
           </Column>
           <Row className={styles.row}>
+            <Column>
+              <VitalsBiometricInput
+                control={control}
+                fields={[
+                  {
+                    name: t('temperature', 'Temperature'),
+                    type: 'number',
+                    min: concepts.temperatureRange.lowAbsolute,
+                    max: concepts.temperatureRange.highAbsolute,
+                    id: 'temperature',
+                  },
+                ]}
+                interpretation={assessValue(
+                  temperature,
+                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
+                )}
+                isWithinNormalRange={isValueWithinReferenceRange(
+                  conceptMetadata,
+                  config.concepts['temperatureUuid'],
+                  temperature,
+                )}
+                showErrorMessage={showErrorMessage}
+                title={t('temperature', 'Temperature')}
+                unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
+              />
+            </Column>
             <Column>
               <VitalsBiometricInput
                 control={control}
@@ -265,7 +291,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     diastolicBloodPressure,
                   )
                 }
-                title={t('bloodPressure', 'Blood Pressure')}
+                title={t('bloodPressure', 'Blood pressure')}
                 unitSymbol={conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}
               />
             </Column>
@@ -286,17 +312,16 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
                 )}
                 isWithinNormalRange={isValueWithinReferenceRange(conceptMetadata, config.concepts['pulseUuid'], pulse)}
-                title={t('pulse', 'Pulse')}
+                title={t('heartRate', 'Heart rate')}
                 unitSymbol={conceptUnits.get(config.concepts.pulseUuid) ?? ''}
               />
             </Column>
-
             <Column>
               <VitalsBiometricInput
                 control={control}
                 fields={[
                   {
-                    name: t('respirationRate', 'Respiration Rate'),
+                    name: t('respirationRate', 'Respiration rate'),
                     type: 'number',
                     min: concepts.respiratoryRateRange.lowAbsolute,
                     max: concepts.respiratoryRateRange.highAbsolute,
@@ -313,7 +338,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   respiratoryRate,
                 )}
                 showErrorMessage={showErrorMessage}
-                title={t('respirationRate', 'Respiration Rate')}
+                title={t('respirationRate', 'Respiration rate')}
                 unitSymbol={conceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}
               />
             </Column>
@@ -322,7 +347,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                 control={control}
                 fields={[
                   {
-                    name: t('oxygenSaturation', 'Oxygen Saturation'),
+                    name: t('oxygenSaturation', 'Oxygen saturation'),
                     type: 'number',
                     min: concepts.oxygenSaturationRange.lowAbsolute,
                     max: concepts.oxygenSaturationRange.highAbsolute,
@@ -343,33 +368,6 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                 unitSymbol={conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}
               />
             </Column>
-
-            <Column>
-              <VitalsBiometricInput
-                control={control}
-                fields={[
-                  {
-                    name: t('temperature', 'Temperature'),
-                    type: 'number',
-                    min: concepts.temperatureRange.lowAbsolute,
-                    max: concepts.temperatureRange.highAbsolute,
-                    id: 'temperature',
-                  },
-                ]}
-                interpretation={assessValue(
-                  temperature,
-                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['temperatureUuid'],
-                  temperature,
-                )}
-                showErrorMessage={showErrorMessage}
-                title={t('temp', 'Temp')}
-                unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
-              />
-            </Column>
           </Row>
 
           <Row className={styles.row}>

diff --git a/.../esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx b/.../esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
@@ -192,7 +192,7 @@ describe('VitalsBiometricsForm', () => {
     );
   });
 
-  it('renders an error notification if there was a problem saving vital biometrics', async () => {
+  it('renders an error notification if there was a problem saving vitals and biometrics', async () => {
     const user = userEvent.setup();
 
     const error = {

diff --git a/...atient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/...atient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -26,6 +26,7 @@ interface ResponsiveWrapperProps {
   children: React.ReactNode;
   isTablet: boolean;
 }
+
 interface VitalsBiometricInputProps {
   control: Control<VitalsBiometricsFormData>;
   muacColorCode?: string;
@@ -69,14 +70,14 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [invalid, setInvalid] = useState(false);
-  const [isFocused, setFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => {
-    setFocused(true);
+    setIsFocused(true);
   };
 
   const handleBlur = () => {
-    setFocused(false);
+    setIsFocused(false);
   };
 
   const isFlaggedCritical =
@@ -100,8 +101,9 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   });
 
   const textInputClasses = classNames(styles.textInputContainer, {
-    [styles.focused]: isFocused,
     [styles['critical-value']]: !isFocused && isFlaggedCritical,
+    [styles.focused]: isFocused,
+    [styles.readonly]: readOnly,
     [muacColorCode]: useMuacColors,
     [errorMessageClass]: true,
   });
@@ -134,8 +136,8 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                         <NumberInput
                           allowEmpty
                           className={`${styles.textInput} ${val.className}`}
-                          defaultValue="--"
                           disableWheel
+                          defaultValue={''}
                           hideSteppers
                           id={val.name + 'input'}
                           label={''}

diff --git a/...ges/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/...ges/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -225,3 +225,15 @@
     }
   }
 }
+
+.readonly {
+  cursor: default;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .readonly {
+  background-color: colors.$gray-10;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .readonly {
+  background-color: colors.$white-0;
+}