added date picker to create a time ticket screen

2023-05-08 12:57:33 -04:00
parent 5f96941a85
commit 79b6decff0
3 changed files with 129 additions and 94 deletions
--- a/components/time-ticket/screen-time-ticket-create.component.jsx
+++ b/components/time-ticket/screen-time-ticket-create.component.jsx
@@ -1,5 +1,5 @@
 import { Formik } from "formik";
-import React from "react";
+import React, { useState } from "react";
 import { StyleSheet, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 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 { SelectCostCenter } from "../Selects/select-cost-center";
 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
 const mapStateToProps = createStructuredSelector({
@@ -18,6 +18,21 @@ const mapStateToProps = createStructuredSelector({
 });

 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 formSubmit = (values) => {
@@ -27,91 +42,98 @@ export function TimeTicketCreate() {

  return (
    <View style={localStyles.content}>
-        <ScrollView>
-      <Formik
-       
-        initialValues={{
-          jobid: "",
-          ticketdate: "",
-          employee: "",
-          costcenter: "",
-          productivehours: "",
-          actualhours: "",
-        }}
-        onSubmit={formSubmit}
-      >
-        {({ handleChange, handleBlur, handleSubmit, values }) => (
-          <View style={localStyles.topTimeTicketContainer}>
-            
-            {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
-            <TextInput
-              style={localStyles.input}
-              onChangeText={handleChange("jobid")}
-              mode="flat"
-              onBlur={handleBlur("jobid")}
-              value={values.jobid}
-              label={"Job to Post Against"}
-            />
-            
-            {/* Below will be replaced with a Date Picker*/}
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("ticketdate")}
-              onBlur={handleBlur("ticketdate")}
-              value={values.ticketdate}
-              label={"Ticket Date"}
-            />
-            {/* Below will set to auto fill with current employee */}
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("employee")}
-              onBlur={handleBlur("employee")}
-              value={values.employee}
-              label={"Employee"}
-            />
-            <SelectCostCenter />
-            {/* Below will be replaced with SelectCostCenter */}
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("costcenter")}
-              onBlur={handleBlur("costcenter")}
-              value={values.costcenter}
-              label={"Cost Center"}
-            />
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("productivehours")}
-              onBlur={handleBlur("productivehours")}
-              value={values.productivehours}
-              label={"Productive Hours"}
-            />
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("actualhours")}
-              onBlur={handleBlur("actualhours")}
-              value={values.actualhours}
-              label={"Actual Hours"}
-            />
-            <Button
-              style={localStyles.input}
-              onPress={handleSubmit}
-              title="Submit"
-            >
-              <Text style={{ fontSize: 12 }}>Save</Text>
-            </Button>
-          </View>
-        )}
-      </Formik>
-      
-      {/* Below is for list of jobs/tickets */}
-      <View style={localStyles.bottomTimeTicketContainer}>
-      
-      </View>
+      <ScrollView>
+        <Formik
+          initialValues={{
+            jobid: "",
+            ticketdate: date2.toLocaleDateString(),
+            employee: "",
+            costcenter: "",
+            productivehours: "",
+            actualhours: "",
+          }}
+          onSubmit={formSubmit}
+        >
+          {({ handleChange, handleBlur, handleSubmit, values }) => (
+            <View style={localStyles.topTimeTicketContainer}>
+              {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
+              <TextInput
+                style={localStyles.input}
+                onChangeText={handleChange("jobid")}
+                mode="flat"
+                onBlur={handleBlur("jobid")}
+                value={values.jobid}
+                label={"Job to Post Against"}
+              />
+
+              {/* Below will be replaced with a Date Picker*/}
+              {/* <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("ticketdate")}
+                onBlur={handleBlur("ticketdate")}
+                value={values.ticketdate}
+                label={"Ticket Date"}
+              /> */}
+              <Button title="TicketDatePickerButton" onPress={showDatePicker}>
+                Ticket Date: {date2.toLocaleDateString()}
+              </Button>
+              <DateTimePickerModal
+                isVisible={isDatePickerVisible}
+                mode="date"
+                date={date2}
+                onConfirm={handleConfirm}
+                onCancel={hideDatePicker}
+              />
+              {/* Below will set to auto fill with current employee */}
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("employee")}
+                onBlur={handleBlur("employee")}
+                value={values.employee}
+                label={"Employee"}
+              />
+
+              <SelectCostCenter />
+              {/* Below will be replaced with SelectCostCenter */}
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("costcenter")}
+                onBlur={handleBlur("costcenter")}
+                value={values.costcenter}
+                label={"Cost Center"}
+              />
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("productivehours")}
+                onBlur={handleBlur("productivehours")}
+                value={values.productivehours}
+                label={"Productive Hours"}
+              />
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("actualhours")}
+                onBlur={handleBlur("actualhours")}
+                value={values.actualhours}
+                label={"Actual Hours"}
+              />
+              <Button
+                style={localStyles.input}
+                onPress={handleSubmit}
+                title="Submit"
+              >
+                <Text style={{ fontSize: 12 }}>Save</Text>
+              </Button>
+            </View>
+          )}
+        </Formik>
+
+        {/* Below is for list of jobs/tickets */}
+        <View style={localStyles.bottomTimeTicketContainer}></View>
      </ScrollView>
    </View>
  );
@@ -122,12 +144,9 @@ export default connect(null, null)(TimeTicketCreate);
 const localStyles = StyleSheet.create({
  content: {
    display: "flex",
-    flex: 1
-  },
-  topTimeTicketContainer: {
-  },
-  bottomTimeTicketContainer: {
-  },
-  input: {
+    flex: 1,
  },
+  topTimeTicketContainer: {},
+  bottomTimeTicketContainer: {},
+  input: {},
 });
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-community/art": "^1.2.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-navigation/bottom-tabs": "^6.3.3",
    "@react-navigation/drawer": "^6.4.4",
@@ -70,6 +71,7 @@
    "react-native-image-gallery": "^2.1.5",
    "react-native-image-viewing": "^0.2.2",
    "react-native-indicators": "^0.17.0",
+    "react-native-modal-datetime-picker": "^15.0.0",
    "react-native-pager-view": "6.1.2",
    "react-native-paper": "^4.12.4",
    "react-native-progress": "^5.0.0",
--- a/yarn.lock
+++ b/yarn.lock
@@ -2366,6 +2366,13 @@
    prompts "^2.4.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":
  version "0.1.11"
  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"
  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:
  version "6.1.2"
  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.1.2.tgz#3522079b9a9d6634ca5e8d153bc0b4d660254552"