feat: add vitals form ui

hopetambala · Nov 12, 2020 · 3c9fb10 · 3c9fb10
1 parent 0760137
commit 3c9fb10
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 24 deletions.
diff --git a/components/FormikFields/PaperInputPicker/index.js b/components/FormikFields/PaperInputPicker/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  View, Text
+  View, Text, StyleSheet
 } from 'react-native';
 import {
   TextInput, Button, Headline
@@ -21,7 +21,7 @@ const PaperInputPicker = ({
   data, formikProps, scrollViewScroll, setScrollViewScroll, surveyingOrganization,
   customForm, ...rest
 }) => {
-  const { label, formikKey, fieldType } = data;
+  const { label, formikKey, fieldType, sideLabel } = data;
   const {
     handleChange, handleBlur, errors, setFieldValue, values
   } = formikProps;
@@ -37,6 +37,7 @@ const PaperInputPicker = ({
   };
 
   const translatedLabel = customForm ? label : I18n.t(label);
+  const translatedLabelSide = customForm ? sideLabel : I18n.t(sideLabel);
 
   const addArrayVal = (result) => {
     if (values[formikKey] || values[formikKey] === []) {
@@ -79,6 +80,53 @@ const PaperInputPicker = ({
           </Text>
         </View>
       )}
+      {fieldType === 'inputSideLabel' && (
+        <View style={styles}>
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              label={translatedLabel}
+              onChangeText={handleChange(formikKey)}
+              onBlur={handleBlur(formikKey)}
+              {...rest} //eslint-disable-line
+              mode="outlined"
+              theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+              style={{ flex: 1 }}
+            />
+            <Text style={styleX.sideLabel} >{translatedLabelSide}</Text>
+          </View>
+          <Text style={{ color: 'red' }}>
+            {errors[formikKey]}
+          </Text>
+        </View>
+      )}
+      {fieldType === 'inputSideBySideLabel' && (
+        <View style={styles}>
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              label={translatedLabel}
+              onChangeText={handleChange(formikKey)}
+              onBlur={handleBlur(formikKey)}
+              {...rest} //eslint-disable-line
+              mode="outlined"
+              theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+              style={{ flex: 1 }}
+            />
+            <Text style={styleX.sideLabel} >{translatedLabelSide}</Text>
+            <TextInput
+              label={translatedLabel}
+              onChangeText={handleChange(formikKey)}
+              onBlur={handleBlur(formikKey)}
+              {...rest} //eslint-disable-line
+              mode="outlined"
+              theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+              style={{ flex: 1 }}
+            />
+          </View>
+          <Text style={{ color: 'red' }}>
+            {errors[formikKey]}
+          </Text>
+        </View>
+      )}
       {fieldType === 'select' && (
         <View>
           <Text style={layout.selectLabel}>{translatedLabel}</Text>
@@ -199,7 +247,7 @@ const PaperInputPicker = ({
                       {errors[result.textKey]}
                     </Text>
                   </View>
-              )}
+                )}
             </View>
           ))}
           <Text style={{ color: 'red' }}>
@@ -274,18 +322,39 @@ const PaperInputPicker = ({
           <Text>{translatedLabel}</Text>
           <View style={styles.multiInputContainer}>
             {data.options.map((result) => (
-              <View key={customForm ? result : I18n.t(result)} style={styles.inputItem}>
-                <TextInput
-                  label={customForm ? result : I18n.t(result)}
-                  onChangeText={handleChange(customForm ? result : I18n.t(result))}
-                  onBlur={handleBlur(customForm ? result : I18n.t(result))}
-                  {...rest} //eslint-disable-line
-                  mode="outlined"
-                  theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
-                />
-                <Text style={{ color: 'red' }}>
-                  {errors[customForm ? result : I18n.t(result)]}
-                </Text>
+              <View key={result.value} style={styles.inputItem}>
+                {/* {!result.textSplit && (
+                  <View>
+                    <TextInput
+                      label={customForm ? result.label : I18n.t(result.label)}
+                      onChangeText={handleChange(customForm ? result : I18n.t(result.label))}
+                      onBlur={handleBlur(customForm ? result.label : I18n.t(result.label))}
+                      {...rest} //eslint-disable-line
+                      mode="outlined"
+                      theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+                    />
+                    <Text style={{ color: 'red' }}>
+                      {errors[customForm ? result.label : I18n.t(result.label)]}
+                    </Text>
+                  </View>
+                )} */}
+                {result.textSplit ? (
+                  <Text style={styleX.textSplit}>{result.label}</Text>
+                ) : (
+                    <View>
+                      <TextInput
+                        label={customForm ? result.label : I18n.t(result.label)}
+                        onChangeText={handleChange(customForm ? result.label : I18n.t(result.label))}
+                        onBlur={handleBlur(customForm ? result.label : I18n.t(result.label))}
+                        {...rest} //eslint-disable-line
+                        mode="outlined"
+                        theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+                      />
+                      <Text style={{ color: 'red' }}>
+                        {errors[customForm ? result.label : I18n.t(result.label)]}
+                      </Text>
+                    </View>
+                  )}
               </View>
             ))}
           </View>
@@ -318,4 +387,22 @@ const PaperInputPicker = ({
   );
 };
 
+const styleX = StyleSheet.create({
+  sideLabel: {
+    flex: 1,
+    marginTop: 'auto',
+    marginBottom: 'auto',
+    padding: 10,
+    fontSize: 15
+  },
+  textSplit: {
+    fontSize: 15,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 'auto',
+    marginBottom: 'auto',
+    flex: .001
+  }
+})
+
 export default PaperInputPicker;
diff --git a/domains/DataCollection/Forms/SupplementaryForm/configs/vitals.config.js b/domains/DataCollection/Forms/SupplementaryForm/configs/vitals.config.js
@@ -0,0 +1,112 @@
+const configArray = {
+  class: 'HistoryEnvironmentalHealth',
+  name: 'environmentalHealth.name',
+  customForm: true,
+  fields: [
+    {
+      label: 'Vitals',
+      fieldType: 'header',
+      formikKey: 'none_vitals',
+    },
+    {
+      label: 'Height',
+      sideLabel: 'Inches',
+      formikKey: 'height',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Weight',
+      sideLabel: 'Pounds',
+      formikKey: 'weight',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Body Mass Index',
+      formikKey: 'bmi',
+      value: '',
+      fieldType: 'input',
+      validation: false
+    },
+    {
+      label: 'Body Temperature',
+      sideLabel: '°Celcius',
+      formikKey: 'bodyTemp',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Pulse',
+      sideLabel: 'Beats Per Minute',
+      formikKey: 'pulse',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Respiratory Rate',
+      sideLabel: 'Breaths Per Minute',
+      formikKey: 'respiratory',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Blood Pressure',
+      formikKey: 'blood_pressure',
+      value: '',
+      fieldType: 'multiInputRow',
+      options: [
+        {
+          label: 'Systolic',
+          value: 'Systolic'
+        },
+        {
+          label: '/',
+          textSplit: true
+        },
+        {
+          label: 'Diastolic',
+          value: 'Diastolic'
+        }
+      ],
+    },
+    {
+      label: 'Blood Oxygen',
+      sideLabel: 'mm Hg',
+      formikKey: 'blood_oxygen',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Blood Sugar',
+      sideLabel: 'mg/dL',
+      formikKey: 'blood_sugar',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Hemoglobin Levels',
+      sideLabel: 'g/dL',
+      formikKey: 'blood_pressure',
+      value: '',
+      fieldType: 'inputSideLabel',
+      validation: false
+    },
+    {
+      label: 'Pain',
+      formikKey: 'pain',
+      value: '',
+      fieldType: 'input',
+      validation: false
+    },
+  ]
+};
+
+export default configArray;
diff --git a/domains/DataCollection/Forms/SupplementaryForm/index.js b/domains/DataCollection/Forms/SupplementaryForm/index.js
@@ -13,6 +13,7 @@ import { layout } from '../../../../modules/theme';
 
 import envConfig from './configs/envhealth.config';
 import medConfig from './configs/medical-evaluation.config';
+import vitalsConfig from './configs/vitals.config';
 import I18n from '../../../../modules/i18n';
 import PaperInputPicker from '../../../../components/FormikFields/PaperInputPicker';
 import yupValidationPicker from '../../../../components/FormikFields/YupValidation';
@@ -40,6 +41,10 @@ const SupplementaryForm = ({
       setConfig(medConfig);
       setValidationSchema(yupValidationPicker(medConfig.fields));
     }
+    if (selectedForm === 'vitals') {
+      setConfig(vitalsConfig);
+      // setValidationSchema(yupValidationPicker(medConfig.fields));
+    }
     if (selectedForm === 'custom') setConfig(customForm);
   }, [selectedForm, config]);
 
@@ -102,14 +107,14 @@ const SupplementaryForm = ({
           {formikProps.isSubmitting ? (
             <ActivityIndicator />
           ) : (
-            <Button
-              disabled={!surveyee.objectId}
-              onPress={formikProps.handleSubmit}
-            >
-              {surveyee.objectId && <Text>{I18n.t('global.submit')}</Text>}
-              {!surveyee.objectId && <Text>{I18n.t('supplementaryForms.attachResident')}</Text>}
-            </Button>
-          )}
+              <Button
+                disabled={!surveyee.objectId}
+                onPress={formikProps.handleSubmit}
+              >
+                {surveyee.objectId && <Text>{I18n.t('global.submit')}</Text>}
+                {!surveyee.objectId && <Text>{I18n.t('supplementaryForms.attachResident')}</Text>}
+              </Button>
+            )}
         </View>
       )}
     </Formik>

diff --git a/domains/DataCollection/index.js b/domains/DataCollection/index.js
@@ -31,7 +31,8 @@ import styles from './index.styles';
 const puenteForms = [
   { tag: 'id', name: 'Resident ID' },
   { tag: 'env', name: 'Environmental Health' },
-  { tag: 'med-eval', name: 'Medical Evaluation' }
+  { tag: 'med-eval', name: 'Medical Evaluation' },
+  { tag: 'vitals', name: 'Vitals' }
 ];
 
 const DataCollection = ({ navigation }) => {