Skip to content

Commit

Permalink
Merge pull request #156 from jamccomb92/PLATFORM-174
Browse files Browse the repository at this point in the history 
Platform 174
  • Loading branch information
@hopetambala
hopetambala authored Oct 23, 2020
2 parents 45b417e + 5f80dc2 commit 66cd6f1
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 100 deletions.
16 changes: 16 additions & 0 deletions components/Button/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';
import { Button } from 'react-native-paper';
import { theme, layout } from '../../modules/theme';

export default function PaperButton({ onPressEvent, buttonText }) {
return (
<Button
mode="contained"
theme={theme}
style={layout.button}
onPress={onPressEvent}
>
{buttonText}
</Button>
);
}
218 changes: 139 additions & 79 deletions components/FormikFields/PaperInputPicker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import AutoFill from './AutoFill';
import HouseholdManager from './HouseholdManager';

import getLocation from '../../../modules/geolocation';
import PaperButton from '../../Button';

import { theme, layout } from '../../../modules/theme';
import styles from './index.style';
Expand All @@ -19,30 +20,17 @@ const PaperInputPicker = ({
}) => {
const { label, formikKey, fieldType } = data;
const {
handleChange, handleBlur, touched, errors, setFieldValue
handleChange, handleBlur, touched, errors, setFieldValue, values
} = formikProps;

const [location, setLocation] = React.useState();
const [location, setLocation] = React.useState({ latitude: 5, longitude: 10, altitude: 0 });

const handleLocation = async () => {
const currentLocation = await getLocation();
const { latitude, longitude, altitude } = currentLocation.coords;

setFieldValue('altitude', altitude);

if (formikKey === 'longitude') {
setLocation(longitude);
setFieldValue(formikKey, longitude);
return longitude;
}

if (formikKey === 'latitude') {
setLocation(latitude);
setFieldValue(formikKey, latitude);
return latitude;
}

return null;
setFieldValue('location', { latitude, longitude, altitude });
setLocation({ latitude, longitude, altitude });
};

return (
Expand Down Expand Up @@ -83,75 +71,147 @@ const PaperInputPicker = ({
<Text style={layout.selectLabel}>{label}</Text>
<View style={layout.buttonGroupContainer}>
{data.options.map((result) => (
<Button
style={layout.buttonGroupButtonStyle}
key={result.value}
mode="outlined"
onPress={() => setFieldValue(formikKey, result.value)}
>
<Text style={{ color: theme.colors.primary }}>{result.label}</Text>
</Button>
<View key={result.value}>
{/* selected value */}
{result.value === values[formikKey] && (
<Button
style={layout.buttonGroupButtonStyle}
key={result.value}
mode="contained"
onPress={() => setFieldValue(formikKey, result.value)}
>
<Text style={{ color: 'white' }}>{result.label}</Text>
</Button>
)}
{/* non-selected value */}
{result.value !== values[formikKey] && (
<Button
style={layout.buttonGroupButtonStyle}
key={result.value}
mode="outlined"
onPress={() => setFieldValue(formikKey, result.value)}
>
<Text style={{ color: theme.colors.primary }}>{result.label}</Text>
</Button>
)}
</View>
))}
</View>
</View>
)}
{fieldType === 'autofill' && (
<View>
<AutoFill
parameter={data.parameter}
formikProps={formikProps}
formikKey={formikKey}
scrollViewScroll={scrollViewScroll}
setScrollViewScroll={setScrollViewScroll}
/>
</View>
)}
{fieldType === 'geolocation' && (
<View>
<Button mode="contained" onPress={() => handleLocation()}>
<Text>{location}</Text>
</Button>
</View>
)}
{fieldType === 'household' && (
<View>
<HouseholdManager
formikProps={formikProps}
formikKey={formikKey}
surveyingOrganization={surveyingOrganization}
/>
</View>
)}
{fieldType === 'header' && (
<View>
<Headline style={styles.header}>{label}</Headline>
<View
style={styles.horizontalLine}
/>
</View>
)}
{fieldType === 'multiInputRow' && (
<View style={styles.container}>
<Text>{label}</Text>
<View style={styles.multiInputContainer}>
{data.options.map((result) => (
<View key={result} style={styles.inputItem}>
<TextInput
label={result}
onChangeText={handleChange(result)}
onBlur={handleBlur(result)}
{...rest} //eslint-disable-line
mode="outlined"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
{
fieldType === 'autofill' && (
<View>
<AutoFill
parameter={data.parameter}
formikProps={formikProps}
formikKey={formikKey}
scrollViewScroll={scrollViewScroll}
setScrollViewScroll={setScrollViewScroll}
/>
</View>
)
}
{
fieldType === 'geolocation' && (
<View>
{location === null && (
<PaperButton
onPressEvent={handleLocation}
buttonText="Get Location"
/>
)}
{location !== null && (
<View>
<PaperButton
onPressEvent={handleLocation}
buttonText="Get Location Again"
/>
<Text style={{ color: 'red' }}>
{touched[result] && errors[result]}
</Text>
<View style={{ marginLeft: 'auto', marginRight: 'auto', flexDirection: 'row' }}>
<Text style={{ paddingRight: 5, fontWeight: 'bold' }}>
Latitude:
{location.latitude}
</Text>
<Text style={{ paddingLeft: 5, fontWeight: 'bold' }}>
Longitude:
{location.longitude}
</Text>
</View>
</View>
))}
)}
</View>
</View>
)}
)
}
{
fieldType === 'household' && (
<View>
<HouseholdManager
formikProps={formikProps}
formikKey={formikKey}
surveyingOrganization={surveyingOrganization}
/>
</View>
)
}
{
fieldType === 'header' && (
<View>
<Headline style={styles.header}>{label}</Headline>
<View
style={styles.horizontalLine}
/>
</View>
)
}
{
fieldType === 'multiInputRow' && (
<View style={styles.container}>
<Text>{label}</Text>
<View style={styles.multiInputContainer}>
{data.options.map((result) => (
<View key={result} style={styles.inputItem}>
<TextInput
label={result}
onChangeText={handleChange(result)}
onBlur={handleBlur(result)}
{...rest} //eslint-disable-line
mode="outlined"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
/>
<Text style={{ color: 'red' }}>
{touched[result] && errors[result]}
</Text>
</View>
))}
</View>
</View>
)
}
{
fieldType === 'multiInputRowNum' && (
<View style={styles.container}>
<Text>{label}</Text>
<View style={styles.multiInputContainer}>
{data.options.map((result) => (
<View key={result} style={styles.inputItem}>
<TextInput
label={result}
onChangeText={handleChange(result)}
onBlur={handleBlur(result)}
{...rest} //eslint-disable-line
mode="outlined"
keyboardType="numeric"
theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
/>
<Text style={{ color: 'red' }}>
{touched[result] && errors[result]}
</Text>
</View>
))}
</View>
</View>
)
}
</>
);
};
Expand Down
10 changes: 6 additions & 4 deletions components/Header/index.styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { StyleSheet } from 'react-native';
import { StyleSheet, Dimensions } from 'react-native';
import { theme } from '../../modules/theme';

const borderRadius = 20;
Expand All @@ -7,16 +7,18 @@ const { accent, black } = theme.colors;

const styles = StyleSheet.create({
container: {
backgroundColor: accent
backgroundColor: accent,
width: Dimensions.get('window').width,
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius,
},
header: {
height: 80, // equivalent to flex: 0.2,
// width: Dimensions.get('window').width * .99,
paddingTop: 20, // for ios
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius,
backgroundColor: accent
},
headerIcon: {
Expand Down
27 changes: 16 additions & 11 deletions domains/DataCollection/Forms/IdentificationForm/config/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const configArray = [
label: 'Date of Birth',
formikKey: 'dob',
value: '',
fieldType: 'multiInputRow',
fieldType: 'multiInputRowNum',
options: [
'Month',
'Day',
Expand Down Expand Up @@ -59,7 +59,7 @@ const configArray = [
label: 'Telephone Number',
formikKey: 'telephoneNumber',
value: '',
fieldType: 'input'
fieldType: 'numberInput'
},
// {
// label: 'Demographic Information',
Expand Down Expand Up @@ -184,17 +184,22 @@ const configArray = [
// value: ""
// },
{
label: 'Latitude',
formikKey: 'latitude',
value: 0,
fieldType: 'geolocation'
},
{
label: 'Longitude',
formikKey: 'longitude',
value: 0,
formikKey: 'location',
value: {},
fieldType: 'geolocation'
},
// {
// label: 'Latitude',
// formikKey: 'latitude',
// value: 0,
// fieldType: 'geolocation'
// },
// {
// label: 'Longitude',
// formikKey: 'longitude',
// value: 0,
// fieldType: 'geolocation'
// },
{
label: 'Household',
fieldType: 'header',
Expand Down
18 changes: 13 additions & 5 deletions domains/DataCollection/Forms/IdentificationForm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
ActivityIndicator,
View
} from 'react-native';
import { Text, Button } from 'react-native-paper';
import { Formik } from 'formik';
// import * as yup from 'yup';

Expand All @@ -15,6 +14,7 @@ import {
import checkOnlineStatus from '../../../../modules/offline';
import generateRandomID from '../../../../modules/utils';
import { layout } from '../../../../modules/theme';
import PaperButton from '../../../../components/Button';

import backgroundPostPatient from './utils';
import configArray from './config/config';
Expand Down Expand Up @@ -62,9 +62,13 @@ const IdentificationForm = ({
const formObject = values;
formObject.surveyingOrganization = surveyingOrganization;
formObject.surveyingUser = surveyingUser;
formObject.latitude = values.location.latitude;
formObject.longitude = values.location.longitude;
formObject.altitude = values.location.altitude;

formObject.dob = `${values.Month || '00'}/${values.Day || '00'}/${values.Year || '0000'}`;

const valuesToPrune = ['Month', 'Day', 'Year'];
const valuesToPrune = ['Month', 'Day', 'Year', 'location'];
valuesToPrune.forEach((value) => {
delete formObject[value];
});
Expand Down Expand Up @@ -116,9 +120,13 @@ const IdentificationForm = ({
{formikProps.isSubmitting ? (
<ActivityIndicator />
) : (
<Button icon="human" onPress={formikProps.handleSubmit}>
<Text>Submit</Text>
</Button>
<PaperButton
onPressEvent={formikProps.handleSubmit}
buttonText="Submit"
/>
// <Button icon="human" onPress={formikProps.handleSubmit}>
// <Text>Submit</Text>
// </Button>
)}
</View>
)}
Expand Down
Loading

0 comments on commit 66cd6f1

Please sign in to comment.