367 lines
13 KiB
JavaScript
367 lines
13 KiB
JavaScript
import { Formik } from "formik";
|
|
import React, { useRef, useState } from "react";
|
|
import { StyleSheet, Text, View, ScrollView, RefreshControl } from "react-native";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { Button, TextInput, Card } 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,
|
|
selectRestrictClaimableHoursFlag,
|
|
} 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";
|
|
|
|
import styles from "../styles";
|
|
import StyleRepeater from "../style-repeater/style-repeater";
|
|
import { FlatList } from "react-native";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentEmployee: selectCurrentEmployee,
|
|
currentRatesNCostCenters: selectRates,
|
|
currentBodyshop: selectBodyshop,
|
|
currentEmployeeFullName: selectEmployeeFullName,
|
|
currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
|
|
});
|
|
// const mapDispatchToProps = (dispatch) => ({});
|
|
|
|
export function TimeTicketCreate({
|
|
currentEmployee,
|
|
currentRatesNCostCenters,
|
|
currentBodyshop,
|
|
currentEmployeeFullName,
|
|
currentRestrictClaimableHoursFlag,
|
|
}) {
|
|
const costCenterDiff = useRef(0);
|
|
const navigation = useNavigation();
|
|
const { t } = useTranslation();
|
|
const [loading, setLoading] = useState(false);
|
|
const [loadingCreate, setLoadingCreate] = 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 showDatePicker = () => {
|
|
setDatePickerVisibility(true);
|
|
};
|
|
const hideDatePicker = () => {
|
|
setDatePickerVisibility(false);
|
|
};
|
|
const handleConfirm = (date) => {
|
|
setDate2(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);
|
|
setLoadingCreate(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!");
|
|
setLoadingCreate(false);
|
|
setError({ message: t("createtimeticket.errors.nan") });
|
|
return;
|
|
}
|
|
setError(null);
|
|
// console.log("have all values");
|
|
} else {
|
|
// console.log("missing values!");
|
|
setLoadingCreate(false);
|
|
setError({ message: t("createtimeticket.errors.missingvalues") });
|
|
return;
|
|
}
|
|
|
|
if (!!currentRestrictClaimableHoursFlag) {
|
|
// console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
|
|
if (values.productivehours > costCenterDiff.current) {
|
|
setLoadingCreate(false);
|
|
setError({
|
|
message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
|
|
});
|
|
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]);
|
|
setLoadingCreate(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);
|
|
// };
|
|
|
|
const onRefresh = useCallback(() => {
|
|
setLoading(true);
|
|
// refetch();
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 1000);
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.cardBackground}>
|
|
<FlatList
|
|
ListHeaderComponent={
|
|
<Card style={localStyles.localCardStyle}>
|
|
<Card.Content>
|
|
<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}
|
|
/>
|
|
<Button
|
|
mode="outlined"
|
|
title="TicketDatePickerButton"
|
|
onPress={showDatePicker}
|
|
style={localStyles.dateButton}
|
|
>
|
|
<Text style={localStyles.textForButton}>
|
|
{t("createtimeticket.actions.ticketdate")}
|
|
{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}
|
|
/>
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
disabled={true}
|
|
value={currentEmployeeFullName}
|
|
label={t("createtimeticket.labels.employeeplaceholder")}
|
|
/>
|
|
<CostCenterSelect
|
|
currentRatesNCostCenters={currentRatesNCostCenters}
|
|
currentValue={currentSCC}
|
|
onValueSelected={setCurrentSCC}
|
|
/>
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
onChangeText={handleChange("productivehours")}
|
|
onBlur={handleBlur("productivehours")}
|
|
value={values.productivehours}
|
|
label={t(
|
|
"createtimeticket.labels.productivehoursplaceholder"
|
|
)}
|
|
keyboardType="numeric"
|
|
/>
|
|
<TextInput
|
|
style={localStyles.inputStyle}
|
|
mode="outlined"
|
|
onChangeText={handleChange("actualhours")}
|
|
onBlur={handleBlur("actualhours")}
|
|
value={values.actualhours}
|
|
label={t(
|
|
"createtimeticket.labels.actualhoursplaceholder"
|
|
)}
|
|
keyboardType="numeric"
|
|
/>
|
|
{error ? (
|
|
<ErrorDisplay errorMessage={error.message} />
|
|
) : null}
|
|
<Button
|
|
mode="outlined"
|
|
style={styles.buttonBasicOutlined}
|
|
onPress={handleSubmit}
|
|
loading={loadingCreate}
|
|
title="Submit"
|
|
>
|
|
<Text style={{ fontSize: 12 }}>
|
|
{t("createtimeticket.actions.createticket")}
|
|
</Text>
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</Formik>
|
|
</Card.Content>
|
|
</Card>
|
|
}
|
|
data={null}
|
|
renderItem={null}
|
|
ListFooterComponent={
|
|
<LaborAllocationsTable
|
|
jobId={currentSJobId?.value}
|
|
costCenterDiff={costCenterDiff}
|
|
selectedCostCenter={currentSCC}
|
|
style={localStyles.localCardStyle}
|
|
shouldRefresh={loading}
|
|
/>
|
|
}
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(TimeTicketCreate);
|
|
|
|
const localStyles = StyleSheet.create({
|
|
content: {
|
|
display: "flex",
|
|
flex: 1,
|
|
},
|
|
topContainer: {},
|
|
bottomContainer: {},
|
|
input: {
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
height: 48,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
borderWidth: 0.8,
|
|
},
|
|
dateButton: {
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
height: 48,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
borderColor: "gray",
|
|
borderWidth: 0.8,
|
|
},
|
|
textForButton: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
},
|
|
inputStyle: {
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
height: 48,
|
|
fontSize: 16,
|
|
},
|
|
localCardStyle: {
|
|
margin: 4,
|
|
},
|
|
});
|