BOD-23 Added labor pages tab + finalized time ticket tab + created allocation calculations
This commit is contained in:
Patrick Fic
@@ -1,17 +1,22 @@
|
||||
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
|
||||
import { Form, Modal, notification, Button } from "antd";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Button, Form, Modal, notification } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
|
||||
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
|
||||
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
|
||||
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
|
||||
import {
|
||||
INSERT_NEW_TIME_TICKET,
|
||||
UPDATE_TIME_TICKET,
|
||||
} from "../../graphql/timetickets.queries";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectTimeTicket } from "../../redux/modals/modals.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import TimeTicketModalComponent from "./time-ticket-modal.component";
|
||||
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
|
||||
import { GET_JOB_LINES_BY_PK_MINIMAL } from "../../graphql/jobs-lines.queries";
|
||||
import moment from "moment";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
timeTicketModal: selectTimeTicket,
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -20,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
|
||||
});
|
||||
|
||||
function TimeTicketModalContainer({
|
||||
export function TimeTicketModalContainer({
|
||||
timeTicketModal,
|
||||
toggleModalVisible,
|
||||
bodyshop,
|
||||
@@ -28,52 +33,60 @@ function TimeTicketModalContainer({
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation();
|
||||
const [enterAgain, setEnterAgain] = useState(false);
|
||||
// const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
|
||||
|
||||
const [insertTicket] = useMutation(INSERT_NEW_TIME_TICKET);
|
||||
const [updateTicket] = useMutation(UPDATE_TIME_TICKET);
|
||||
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
|
||||
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
|
||||
skip: !timeTicketModal.visible,
|
||||
});
|
||||
|
||||
const { data: EmployeeAutoCompleteData } = useQuery(QUERY_EMPLOYEES, {
|
||||
skip: !timeTicketModal.visible,
|
||||
});
|
||||
|
||||
const [loadJobLines, { data: jobLinesData }] = useLazyQuery(
|
||||
GET_JOB_LINES_BY_PK_MINIMAL
|
||||
const [loadLineTicketData, { data: lineTicketData }] = useLazyQuery(
|
||||
GET_LINE_TICKET_BY_PK
|
||||
);
|
||||
|
||||
const handleFinish = (values) => {
|
||||
// insertInvoice({
|
||||
// variables: {
|
||||
// invoice: [
|
||||
// Object.assign({}, values, {
|
||||
// invoicelines: { data: values.invoicelines },
|
||||
// }),
|
||||
// ],
|
||||
// },
|
||||
// })
|
||||
// .then((r) => {
|
||||
// notification["success"]({
|
||||
// message: t("invoices.successes.created"),
|
||||
// });
|
||||
// if (timeTicketModal.actions.refetch)
|
||||
// timeTicketModal.actions.refetch();
|
||||
// if (enterAgain) {
|
||||
// form.resetFields();
|
||||
// } else {
|
||||
// toggleModalVisible();
|
||||
// }
|
||||
// setEnterAgain(false);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// setEnterAgain(false);
|
||||
// notification["error"]({
|
||||
// message: t("invoices.errors.creating", {
|
||||
// message: JSON.stringify(error),
|
||||
// }),
|
||||
// });
|
||||
// });
|
||||
if (timeTicketModal.context.id) {
|
||||
updateTicket({
|
||||
variables: {
|
||||
timeticketId: timeTicketModal.context.id,
|
||||
timeticket: values,
|
||||
},
|
||||
})
|
||||
.then(handleMutationSuccess)
|
||||
.catch(handleMutationError);
|
||||
} else {
|
||||
insertTicket({
|
||||
variables: {
|
||||
timeTicketInput: [values],
|
||||
},
|
||||
})
|
||||
.then(handleMutationSuccess)
|
||||
.catch(handleMutationError);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMutationSuccess = (response) => {
|
||||
notification["success"]({
|
||||
message: t("timetickets.successes.created"),
|
||||
});
|
||||
if (timeTicketModal.actions.refetch) timeTicketModal.actions.refetch();
|
||||
if (enterAgain) {
|
||||
form.resetFields();
|
||||
} else {
|
||||
toggleModalVisible();
|
||||
}
|
||||
setEnterAgain(false);
|
||||
};
|
||||
|
||||
const handleMutationError = (error) => {
|
||||
setEnterAgain(false);
|
||||
notification["error"]({
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(error),
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@@ -84,6 +97,39 @@ function TimeTicketModalContainer({
|
||||
if (enterAgain) form.submit();
|
||||
}, [enterAgain, form]);
|
||||
|
||||
useEffect(() => {
|
||||
if (timeTicketModal.visible) form.resetFields();
|
||||
}, [timeTicketModal.visible, form]);
|
||||
|
||||
const handleFieldsChange = (changedFields, allFields) => {
|
||||
if (!!changedFields.employeeid && !!EmployeeAutoCompleteData) {
|
||||
const emps = EmployeeAutoCompleteData.employees.filter(
|
||||
(e) => e.id === changedFields.employeeid
|
||||
);
|
||||
form.setFieldsValue({
|
||||
cost_center: emps.length > 0 ? emps[0].cost_center : "",
|
||||
ciecacode: Object.keys(
|
||||
bodyshop.md_responsibility_centers.defaults
|
||||
).find(
|
||||
(key) =>
|
||||
bodyshop.md_responsibility_centers.defaults[key] ===
|
||||
emps[0].cost_center
|
||||
),
|
||||
});
|
||||
}
|
||||
if (!!changedFields.cost_center && !!EmployeeAutoCompleteData) {
|
||||
form.setFieldsValue({
|
||||
ciecacode: Object.keys(
|
||||
bodyshop.md_responsibility_centers.defaults
|
||||
).find(
|
||||
(key) =>
|
||||
bodyshop.md_responsibility_centers.defaults[key] ===
|
||||
changedFields.cost_center
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
@@ -96,6 +142,7 @@ function TimeTicketModalContainer({
|
||||
okText={t("general.actions.save")}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={handleCancel}
|
||||
forceRender
|
||||
afterClose={() => form.resetFields()}
|
||||
footer={
|
||||
<span>
|
||||
@@ -121,13 +168,17 @@ function TimeTicketModalContainer({
|
||||
onFinish={handleFinish}
|
||||
autoComplete={"off"}
|
||||
form={form}
|
||||
onFinishFailed={() => {
|
||||
setEnterAgain(false);
|
||||
console.log("Finish failed");
|
||||
}}
|
||||
initialValues={{
|
||||
jobid: timeTicketModal.context.jobId || null,
|
||||
}}
|
||||
initialValues={
|
||||
timeTicketModal.context.timeticket
|
||||
? {
|
||||
...timeTicketModal.context.timeticket,
|
||||
date: timeTicketModal.context.timeticket.date
|
||||
? moment(timeTicketModal.context.date)
|
||||
: null,
|
||||
}
|
||||
: { jobid: timeTicketModal.context.jobId || null }
|
||||
}
|
||||
onValuesChange={handleFieldsChange}
|
||||
>
|
||||
<TimeTicketModalComponent
|
||||
form={form}
|
||||
@@ -136,10 +187,12 @@ function TimeTicketModalContainer({
|
||||
EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
|
||||
}
|
||||
responsibilityCenters={bodyshop.md_responsibility_centers || null}
|
||||
loadJobLines={loadJobLines}
|
||||
loadLineTicketData={loadLineTicketData}
|
||||
lineTicketData={
|
||||
lineTicketData ? lineTicketData : { joblines: [], timetickets: [] }
|
||||
}
|
||||
/>
|
||||
</Form>
|
||||
{JSON.stringify(jobLinesData)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user