285 lines
9.2 KiB
JavaScript
285 lines
9.2 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, TextInput } from "react-native-paper";
|
|
import { CostCenterSelect } from "../Selects/select-cost-center";
|
|
import {
|
|
selectCurrentEmployee,
|
|
selectRates,
|
|
} from "../../redux/employee/employee.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
|
|
import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
|
|
import { useMutation } from "@apollo/client";
|
|
import { selectCurrentTmTicketJobId } from "../../redux/app/app.selectors";
|
|
import ErrorDisplay from "../error-display/error-display.component";
|
|
import { timeTicketClockOutStart } from "../../redux/timetickets/timetickets.actions";
|
|
import { logImEXEvent } from "../../firebase/firebase.analytics";
|
|
// import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors";
|
|
|
|
//TODO add props needed for call
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentEmployee: selectCurrentEmployee,
|
|
currentRatesNCostCenters: selectRates,
|
|
currentBodyshop: selectBodyshop,
|
|
currentTmTicketJobId: selectCurrentTmTicketJobId,
|
|
|
|
//add way to get timeTicketId
|
|
// currentJobId: selectCurrentTimeTicketJobId
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
timeTicketClockOutStart
|
|
});
|
|
|
|
export function TimeTicketClockOff({
|
|
currentEmployee,
|
|
currentRatesNCostCenters,
|
|
currentBodyshop,
|
|
currentTmTicketJobId,
|
|
route,
|
|
}) {
|
|
const { timeTicketId } = route.params;
|
|
console.log("TimeTicketClockOff, timeTicketId :", timeTicketId);
|
|
//console.log("TimeTicketClockOff, currentRatesNCostCenters :", currentRatesNCostCenters );
|
|
// console.log("TimeTicketClockOff, currentBodyshop :", currentBodyshop);
|
|
|
|
console.log("TimeTicketClockOff, currentTmTicketJobId :", currentTmTicketJobId);
|
|
// console.log("TimeTicketClockOff, jobId :", jobId);
|
|
// console.log("TimeTicketClockOff, timeTicketId :", timeTicketId);
|
|
const { t } = useTranslation();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [currentSCC, setCurrentSCC] = useState(null);
|
|
// const [currentSJob, setCurrentSJob] = useState(null);
|
|
const [currentSJobId, setCurrentSJobId] = useState(currentTmTicketJobId ? currentTmTicketJobId : null);
|
|
// const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET);
|
|
// 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 formSubmit = (values) => {
|
|
console.log("values", values);
|
|
//Dialog.alert({ content: <pre>{JSON.stringify(values, null, 2)}</pre> });
|
|
//TODO update with start call for create time ticket
|
|
};
|
|
|
|
|
|
|
|
const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET);
|
|
|
|
|
|
|
|
const handleFinish = async (values) => {
|
|
logImEXEvent("TimeTicketClockOff_handleFinish");
|
|
|
|
//build obj
|
|
const tempcallobj = {
|
|
variables: {
|
|
timeticketId: timeTicketId,
|
|
timeticket: {
|
|
clockoff: (await axios.post("/utils/time")).data,
|
|
...values,
|
|
rate:
|
|
emps &&
|
|
emps.rates.filter((r) => r.cost_center === values.cost_center)[0]
|
|
?.rate,
|
|
flat_rate: emps && emps.flat_rate,
|
|
ciecacode:
|
|
bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
|
|
? values.cost_center
|
|
: Object.keys(
|
|
bodyshop.md_responsibility_centers.defaults.costs
|
|
).find((key) => {
|
|
return (
|
|
bodyshop.md_responsibility_centers.defaults.costs[key] ===
|
|
values.cost_center
|
|
);
|
|
}),
|
|
},
|
|
},
|
|
};
|
|
|
|
console.log("TimeTicketClockOff, tempcallobj :",tempcallobj);
|
|
|
|
//after obj is good add below to make call
|
|
//setLoading(true);
|
|
//const result = await updateTimeticket();
|
|
|
|
|
|
//after call results are retuning add handling below for cases
|
|
|
|
// if (!!result.errors) {
|
|
// notification["error"]({
|
|
// message: t("timetickets.errors.clockingout", {
|
|
// message: JSON.stringify(result.errors),
|
|
// }),
|
|
// });
|
|
// } else {
|
|
// notification["success"]({
|
|
// message: t("timetickets.successes.clockedout"),
|
|
// });
|
|
// }
|
|
setLoading(false);
|
|
// if (completedCallback) completedCallback();
|
|
};
|
|
|
|
|
|
// const handleFinish = async (values) => {
|
|
// //logImEXEvent("tech_clock_out_job");
|
|
|
|
// setLoading(true);
|
|
// const result = await updateTimeticket({
|
|
// variables: {
|
|
// timeticketId: timeTicketId,
|
|
// timeticket: {
|
|
// clockoff: (await axios.post("/utils/time")).data,
|
|
// ...values,
|
|
// rate: currentSCC?.rate,
|
|
// // emps &&
|
|
// // emps.rates.filter((r) => r.cost_center === values.cost_center)[0]
|
|
// // ?.rate,
|
|
// flat_rate: currentEmployee && currentEmployee?.technician?.flat_rate,
|
|
// 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
|
|
// );
|
|
// }),
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
// if (!!result.errors) {
|
|
// console.log("Error handleFinish clock off");
|
|
|
|
// //if (error) return <ErrorDisplay errorMessage={error.message} />;
|
|
|
|
// // notification["error"]({
|
|
// // message: t("timetickets.errors.clockingout", {
|
|
// // message: JSON.stringify(result.errors),
|
|
// // }),
|
|
// // });
|
|
// } else {
|
|
// console.log("success");
|
|
// // notification["success"]({
|
|
// // message: t("timetickets.successes.clockedout"),
|
|
// // });
|
|
// }
|
|
// setLoading(false);
|
|
// if (completedCallback) completedCallback();
|
|
// };
|
|
|
|
return (
|
|
<View style={localStyles.content}>
|
|
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
|
<Formik
|
|
initialValues={{
|
|
costcenter: { currentSCC },
|
|
productivehours: "",
|
|
actualhours: "",
|
|
}}
|
|
onSubmit={handleFinish}
|
|
>
|
|
{({ handleChange, handleBlur, handleSubmit, values }) => (
|
|
<View style={localStyles.topTimeTicketContainer}>
|
|
{/* <JobIdSearchSelect
|
|
currentValue={currentSJobId}
|
|
onJobSelected={setCurrentSJobId}
|
|
convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
|
|
notExported={!currentBodyshop.tt_allow_post_to_invoiced}
|
|
/> */}
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
onChangeText={handleChange("actualhours")}
|
|
onBlur={handleBlur("actualhours")}
|
|
value={values.actualhours}
|
|
label={"Actual Hours"}
|
|
/>
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
onChangeText={handleChange("productivehours")}
|
|
onBlur={handleBlur("productivehours")}
|
|
value={values.productivehours}
|
|
label={"Productive Hours"}
|
|
/>
|
|
<CostCenterSelect
|
|
currentRatesNCostCenters={currentRatesNCostCenters}
|
|
currentValue={currentSCC}
|
|
onValueSelected={setCurrentSCC}
|
|
/>
|
|
<Button
|
|
style={localStyles.input}
|
|
onPress={handleSubmit}
|
|
title="Submit"
|
|
>
|
|
<Text style={{ fontSize: 12 }}>Clock Off</Text>
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</Formik>
|
|
</ScrollView>
|
|
<View style={{ flexGrow: 1 }}>
|
|
<LaborAllocationsTable jobId={currentTmTicketJobId} />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(TimeTicketClockOff);
|
|
|
|
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,
|
|
},
|
|
});
|