admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added date picker to create a time ticket screen

Browse Source
This commit is contained in:
jfrye122
2023-05-08 12:57:33 -04:00
parent 5f96941a85
commit 79b6decff0
3 changed files with 129 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
components/time-ticket/screen-time-ticket-create.component.jsx
View File

@@ -1,5 +1,5 @@
import { Formik } from "formik"; import { Formik } from "formik";
import React from "react"; import React, { useState } from "react";
import { StyleSheet, Text } from "react-native"; import { StyleSheet, Text } from "react-native";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { View, ScrollView } from "react-native"; import { View, ScrollView } from "react-native";
@@ -10,7 +10,7 @@ import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
//import SelectDropdown from 'react-native-select-dropdown'; //import SelectDropdown from 'react-native-select-dropdown';
import { SelectCostCenter } from "../Selects/select-cost-center"; import { SelectCostCenter } from "../Selects/select-cost-center";
import { selectCurrentEmployee } from "../../redux/employee/employee.selectors"; import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
//import {DateTimePicker} from "expo"; import DateTimePickerModal from "react-native-modal-datetime-picker";
//TODO add props needed for call //TODO add props needed for call
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
@@ -18,6 +18,21 @@ const mapStateToProps = createStructuredSelector({
}); });
export function TimeTicketCreate() { export function TimeTicketCreate() {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [date2, setDate2] = useState(new Date());
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const handleConfirm = (date) => {
setDate2(date);
//console.warn("A date has been picked: ", date);
hideDatePicker();
};
const { t } = useTranslation(); const { t } = useTranslation();
const formSubmit = (values) => { const formSubmit = (values) => {
@@ -27,91 +42,98 @@ export function TimeTicketCreate() {
return ( return (
<View style={localStyles.content}> <View style={localStyles.content}>
<ScrollView> <ScrollView>
<Formik <Formik
initialValues={{
initialValues={{ jobid: "",
jobid: "", ticketdate: date2.toLocaleDateString(),
ticketdate: "", employee: "",
employee: "", costcenter: "",
costcenter: "", productivehours: "",
productivehours: "", actualhours: "",
actualhours: "", }}
}} onSubmit={formSubmit}
onSubmit={formSubmit} >
> {({ handleChange, handleBlur, handleSubmit, values }) => (
{({ handleChange, handleBlur, handleSubmit, values }) => ( <View style={localStyles.topTimeTicketContainer}>
<View style={localStyles.topTimeTicketContainer}> {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
<TextInput
{/* Below will be replaced with a copy of SelectCostCenter but for jobs*/} style={localStyles.input}
<TextInput onChangeText={handleChange("jobid")}
style={localStyles.input} mode="flat"
onChangeText={handleChange("jobid")} onBlur={handleBlur("jobid")}
mode="flat" value={values.jobid}
onBlur={handleBlur("jobid")} label={"Job to Post Against"}
value={values.jobid} />
label={"Job to Post Against"}
/> {/* Below will be replaced with a Date Picker*/}
{/* <TextInput
{/* Below will be replaced with a Date Picker*/} style={localStyles.input}
<TextInput mode="flat"
style={localStyles.input} onChangeText={handleChange("ticketdate")}
mode="flat" onBlur={handleBlur("ticketdate")}
onChangeText={handleChange("ticketdate")} value={values.ticketdate}
onBlur={handleBlur("ticketdate")} label={"Ticket Date"}
value={values.ticketdate} /> */}
label={"Ticket Date"} <Button title="TicketDatePickerButton" onPress={showDatePicker}>
/> Ticket Date: {date2.toLocaleDateString()}
{/* Below will set to auto fill with current employee */} </Button>
<TextInput <DateTimePickerModal
style={localStyles.input} isVisible={isDatePickerVisible}
mode="flat" mode="date"
onChangeText={handleChange("employee")} date={date2}
onBlur={handleBlur("employee")} onConfirm={handleConfirm}
value={values.employee} onCancel={hideDatePicker}
label={"Employee"} />
/> {/* Below will set to auto fill with current employee */}
<SelectCostCenter /> <TextInput
{/* Below will be replaced with SelectCostCenter */} style={localStyles.input}
<TextInput mode="flat"
style={localStyles.input} onChangeText={handleChange("employee")}
mode="flat" onBlur={handleBlur("employee")}
onChangeText={handleChange("costcenter")} value={values.employee}
onBlur={handleBlur("costcenter")} label={"Employee"}
value={values.costcenter} />
label={"Cost Center"}
/> <SelectCostCenter />
<TextInput {/* Below will be replaced with SelectCostCenter */}
style={localStyles.input} <TextInput
mode="flat" style={localStyles.input}
onChangeText={handleChange("productivehours")} mode="flat"
onBlur={handleBlur("productivehours")} onChangeText={handleChange("costcenter")}
value={values.productivehours} onBlur={handleBlur("costcenter")}
label={"Productive Hours"} value={values.costcenter}
/> label={"Cost Center"}
<TextInput />
style={localStyles.input} <TextInput
mode="flat" style={localStyles.input}
onChangeText={handleChange("actualhours")} mode="flat"
onBlur={handleBlur("actualhours")} onChangeText={handleChange("productivehours")}
value={values.actualhours} onBlur={handleBlur("productivehours")}
label={"Actual Hours"} value={values.productivehours}
/> label={"Productive Hours"}
<Button />
style={localStyles.input} <TextInput
onPress={handleSubmit} style={localStyles.input}
title="Submit" mode="flat"
> onChangeText={handleChange("actualhours")}
<Text style={{ fontSize: 12 }}>Save</Text> onBlur={handleBlur("actualhours")}
</Button> value={values.actualhours}
</View> label={"Actual Hours"}
)} />
</Formik> <Button
style={localStyles.input}
{/* Below is for list of jobs/tickets */} onPress={handleSubmit}
<View style={localStyles.bottomTimeTicketContainer}> title="Submit"
>
</View> <Text style={{ fontSize: 12 }}>Save</Text>
</Button>
</View>
)}
</Formik>
{/* Below is for list of jobs/tickets */}
<View style={localStyles.bottomTimeTicketContainer}></View>
</ScrollView> </ScrollView>
</View> </View>
); );
@@ -122,12 +144,9 @@ export default connect(null, null)(TimeTicketCreate);
const localStyles = StyleSheet.create({ const localStyles = StyleSheet.create({
content: { content: {
display: "flex", display: "flex",
flex: 1 flex: 1,
},
topTimeTicketContainer: {
},
bottomTimeTicketContainer: {
},
input: {
}, },
topTimeTicketContainer: {},
bottomTimeTicketContainer: {},
input: {},
}); });

2
package.json
View File

@@ -22,6 +22,7 @@
"@react-native-async-storage/async-storage": "^1.17.11", "@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-community/art": "^1.2.0", "@react-native-community/art": "^1.2.0",
"@react-native-community/cli-debugger-ui": "^9.0.0", "@react-native-community/cli-debugger-ui": "^9.0.0",
"@react-native-community/datetimepicker": "6.7.3",
"@react-native-community/masked-view": "^0.1.11", "@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.3.3", "@react-navigation/bottom-tabs": "^6.3.3",
"@react-navigation/drawer": "^6.4.4", "@react-navigation/drawer": "^6.4.4",
@@ -70,6 +71,7 @@
"react-native-image-gallery": "^2.1.5", "react-native-image-gallery": "^2.1.5",
"react-native-image-viewing": "^0.2.2", "react-native-image-viewing": "^0.2.2",
"react-native-indicators": "^0.17.0", "react-native-indicators": "^0.17.0",
"react-native-modal-datetime-picker": "^15.0.0",
"react-native-pager-view": "6.1.2", "react-native-pager-view": "6.1.2",
"react-native-paper": "^4.12.4", "react-native-paper": "^4.12.4",
"react-native-progress": "^5.0.0", "react-native-progress": "^5.0.0",

14
yarn.lock
View File

@@ -2366,6 +2366,13 @@
prompts "^2.4.0" prompts "^2.4.0"
semver "^6.3.0" semver "^6.3.0"
"@react-native-community/datetimepicker@6.7.3":
version "6.7.3"
resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-6.7.3.tgz#e6d75a42729265d8404d1d668c86926564abca2f"
integrity sha512-fXWbEdHMLW/e8cts3snEsbOTbnFXfUHeO2pkiDFX3fWpFoDtUrRWvn50xbY13IJUUKHDhoJ+mj24nMRVIXfX1A==
dependencies:
invariant "^2.2.4"
"@react-native-community/masked-view@^0.1.11": "@react-native-community/masked-view@^0.1.11":
version "0.1.11" version "0.1.11"
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce" resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
@@ -7986,6 +7993,13 @@ react-native-iphone-x-helper@^1.3.1:
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010" resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg== integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
react-native-modal-datetime-picker@^15.0.0:
version "15.0.0"
resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-15.0.0.tgz#3c2b0a63467a3391dbc202871aa2807bc1a0d8d0"
integrity sha512-cHeFEYHUhyIk+Mt9C6RVseg/VMGR4XcxdU9SibF5RMCXiXhrwMkFy7203xg1S331pzCF/Oqhvi4Jh0pYMrTFtQ==
dependencies:
prop-types "^15.7.2"
react-native-pager-view@6.1.2: react-native-pager-view@6.1.2:
version "6.1.2" version "6.1.2"
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.1.2.tgz#3522079b9a9d6634ca5e8d153bc0b4d660254552" resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.1.2.tgz#3522079b9a9d6634ca5e8d153bc0b4d660254552"