311 lines
11 KiB
JavaScript
311 lines
11 KiB
JavaScript
import { Formik } from "formik";
|
|
import React, { useState } from "react";
|
|
import { StyleSheet, Text, View, ScrollView } from "react-native";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { Button, Dialog, TextInput } from "react-native-paper";
|
|
import CostCenterSelect from "../Selects/select-cost-center";
|
|
import { JobIdSearchSelect } from "../Selects/select-job-id";
|
|
import DateTimePickerModal from "react-native-modal-datetime-picker";
|
|
import {
|
|
selectCurrentEmployee,
|
|
selectRates,
|
|
selectEmployeeFullName
|
|
} from "../../redux/employee/employee.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { useCallback } from "react";
|
|
// import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
|
|
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
|
|
|
|
import ErrorDisplay from "../error-display/error-display.component";
|
|
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
|
|
import { useMutation } from "@apollo/client";
|
|
import axios from "axios";
|
|
import { logImEXEvent } from "../../firebase/firebase.analytics";
|
|
import moment from "moment";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentEmployee: selectCurrentEmployee,
|
|
currentRatesNCostCenters: selectRates,
|
|
currentBodyshop: selectBodyshop,
|
|
currentEmployeeFullName: selectEmployeeFullName
|
|
});
|
|
// const mapDispatchToProps = (dispatch) => ({});
|
|
|
|
export function TimeTicketCreate({
|
|
currentEmployee,
|
|
currentRatesNCostCenters,
|
|
currentBodyshop,
|
|
currentEmployeeFullName
|
|
}) {
|
|
const navigation = useNavigation();
|
|
const { t } = useTranslation();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
|
|
const [date2, setDate2] = useState(new Date());
|
|
|
|
const [currentSCC, setCurrentSCC] = useState(null);
|
|
// const [currentSJob, setCurrentSJob] = useState(null);
|
|
const [currentSJobId, setCurrentSJobId] = useState(null);
|
|
|
|
// const wrapperSetCurrentSJobState = useCallback(
|
|
// (val) => {
|
|
// setCurrentSJob(val);
|
|
// },
|
|
// [setCurrentSJob]
|
|
// );
|
|
|
|
const showDatePicker = () => {
|
|
setDatePickerVisibility(true);
|
|
};
|
|
const hideDatePicker = () => {
|
|
setDatePickerVisibility(false);
|
|
};
|
|
const handleConfirm = (date) => {
|
|
setDate2(date);
|
|
//console.war1n("A date has been picked: ", date);
|
|
hideDatePicker();
|
|
};
|
|
|
|
const [insertTicket] = useMutation(INSERT_NEW_TIME_TICKET);
|
|
|
|
const handleFinish = async (values) => {
|
|
logImEXEvent("handleFinish_called_in_TimeTicketCreate");
|
|
console.log("handleFinish called in TimeTicketCreate");
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
// console.log("insertTicket, currentSCC :", currentSCC);
|
|
// console.log("insertTicket, currentSCC :", currentSJobId);
|
|
// console.log("insertTicket, values :", values);
|
|
|
|
if (
|
|
!!currentSCC?.value &&
|
|
!!currentSJobId?.value &&
|
|
!!values.productivehours &&
|
|
!!currentBodyshop.id &&
|
|
!!currentEmployee?.technician?.id &&
|
|
!!date2 &&
|
|
!!values.actualhours
|
|
) {
|
|
if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
|
|
console.log("actual hours is NAN!");
|
|
setLoading(false);
|
|
setError({ message: "Please make sure all fields have valid values." });
|
|
return;
|
|
}
|
|
setError(null);
|
|
console.log("have all values");
|
|
} else {
|
|
console.log("missing values!");
|
|
setLoading(false);
|
|
setError({ message: "Please make sure all fields have a value." });
|
|
return;
|
|
}
|
|
|
|
// if (date2) console.log("rate :", currentRatesNCostCenters && currentSCC?.value ? currentRatesNCostCenters.filter((r) => r.cost_center === currentSCC?.value)[0].rate : null);//2023-05-16T16:45:27.154Z
|
|
// if (date2) console.log("bodyshopid : ", currentBodyshop.id);
|
|
// if (date2) console.log("moment(date2).format(YYYY-MM-DD)", moment(date2).format("YYYY-MM-DD"));
|
|
const tempVariablesObj = {
|
|
variables: {
|
|
timeTicketInput: [
|
|
{
|
|
actualhrs: values?.actualhours ? values?.actualhours : null,
|
|
bodyshopid: currentBodyshop.id,
|
|
ciecacode:
|
|
currentBodyshop?.cdk_dealerid || currentBodyshop?.pbs_serialnumber
|
|
? currentSCC?.value
|
|
: Object.keys(
|
|
currentBodyshop.md_responsibility_centers.defaults.costs
|
|
).find((key) => {
|
|
return (
|
|
currentBodyshop.md_responsibility_centers.defaults.costs[
|
|
key
|
|
] === currentSCC?.value
|
|
);
|
|
}),
|
|
cost_center: currentSCC?.value,
|
|
date: moment(date2).format("YYYY-MM-DD"),
|
|
employeeid: currentEmployee?.technician?.id,
|
|
flat_rate:
|
|
currentEmployee &&
|
|
currentEmployee.technician &&
|
|
currentEmployee.technician?.flat_rate,
|
|
jobid: currentSJobId?.value,
|
|
productivehrs: values?.productivehours,
|
|
rate:
|
|
currentRatesNCostCenters && currentSCC?.value
|
|
? currentRatesNCostCenters.filter(
|
|
(r) => r.cost_center === currentSCC?.value
|
|
)[0].rate
|
|
: null,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
// clockoff: undefined,
|
|
// clockon: undefined,
|
|
// memo: undefined,
|
|
|
|
// console.log("insertTicket, tempVariablesObj. :", tempVariablesObj?.variables?.timeTicketInput[0]);
|
|
|
|
//after obj is good add below to make call
|
|
|
|
const result = await insertTicket(tempVariablesObj); //.catch(handleMutationError);
|
|
|
|
// console.log(" result : ", result);
|
|
// //after call results are retuning add handling below for cases
|
|
// console.log("insertTicket, result :", result?.data?.insert_timetickets?.returning[0]);
|
|
setLoading(false);
|
|
if (!!result.errors) {
|
|
// console.log("insertTicket, result.error :", result.errors);
|
|
setError(JSON.stringify(result.errors));
|
|
} else {
|
|
// console.log("insertTicket, result. :", result.data);
|
|
navigation.goBack();
|
|
}
|
|
// if (completedCallback) completedCallback();
|
|
};
|
|
|
|
const handleMutationError = (error) => {
|
|
// setEnterAgain(false);
|
|
console.log("insertTicket, result.error :", error);
|
|
setError(
|
|
error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
|
|
);
|
|
setLoading(false);
|
|
};
|
|
return (
|
|
<View style={localStyles.content}>
|
|
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
|
<Formik
|
|
initialValues={{
|
|
jobid: { currentSJobId },
|
|
ticketdate: date2.toLocaleDateString(),
|
|
employee: {currentEmployeeFullName},
|
|
costcenter: { currentSCC },
|
|
productivehours: "",
|
|
actualhours: "",
|
|
}}
|
|
onSubmit={handleFinish}
|
|
>
|
|
{({ handleChange, handleBlur, handleSubmit, values }) => (
|
|
<View style={localStyles.topTimeTicketContainer}>
|
|
<JobIdSearchSelect
|
|
currentValue={currentSJobId}
|
|
onJobSelected={setCurrentSJobId}
|
|
convertedOnly={true}
|
|
notExported={!currentBodyshop.tt_allow_post_to_invoiced}
|
|
notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
|
|
/>
|
|
{/* 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
|
|
mode="outlined"
|
|
title="TicketDatePickerButton"
|
|
onPress={showDatePicker}
|
|
style={localStyles.dateButton}
|
|
>
|
|
<Text style={localStyles.textForButton}>
|
|
Ticket Date: {date2.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' })}
|
|
</Text>
|
|
</Button>
|
|
<DateTimePickerModal
|
|
isVisible={isDatePickerVisible}
|
|
mode="date"
|
|
date={date2}
|
|
onConfirm={handleConfirm}
|
|
onCancel={hideDatePicker}
|
|
/>
|
|
{/* Below will set to auto fill with current employee */}
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
disabled={true}
|
|
value={currentEmployeeFullName}
|
|
label={"Employee"}
|
|
/>
|
|
|
|
<CostCenterSelect
|
|
currentRatesNCostCenters={currentRatesNCostCenters}
|
|
currentValue={currentSCC}
|
|
onValueSelected={setCurrentSCC}
|
|
/>
|
|
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
onChangeText={handleChange("productivehours")}
|
|
onBlur={handleBlur("productivehours")}
|
|
value={values.productivehours}
|
|
label={"Productive Hours"}
|
|
keyboardType="numeric"
|
|
/>
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
onChangeText={handleChange("actualhours")}
|
|
onBlur={handleBlur("actualhours")}
|
|
value={values.actualhours}
|
|
label={"Actual Hours"}
|
|
keyboardType="numeric"
|
|
/>
|
|
{error ? <ErrorDisplay errorMessage={error.message} /> : null}
|
|
<Button
|
|
style={localStyles.input}
|
|
onPress={handleSubmit}
|
|
loading={loading}
|
|
title="Submit"
|
|
>
|
|
<Text style={{ fontSize: 12 }}>Create Ticket</Text>
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</Formik>
|
|
|
|
{/* Below is for list of jobs/tickets */}
|
|
</ScrollView>
|
|
<View style={{ flexGrow: 1 }}>
|
|
<LaborAllocationsTable jobId={currentSJobId?.value} />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(TimeTicketCreate);
|
|
|
|
const localStyles = StyleSheet.create({
|
|
content: {
|
|
display: "flex",
|
|
flex: 1,
|
|
},
|
|
topContainer: {},
|
|
bottomContainer: {},
|
|
input: {},
|
|
dateButton: {
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
height: 48,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
borderColor: "blue",
|
|
borderWidth: 0.8,
|
|
flex: 1,
|
|
},
|
|
textForButton: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
},
|
|
inputStyle: {
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
height: 48,
|
|
fontSize: 16,
|
|
},
|
|
});
|