Refactor task claiming and implement basic claim functionality.
This commit is contained in:
Patrick Fic
@@ -1,21 +1,14 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useLazyQuery, useMutation, useQuery } from "@apollo/client";
|
||||
import { Form, Modal, notification } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import axios from "axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
|
||||
import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
|
||||
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
|
||||
import { INSERT_NEW_TT_APPROVALS } from "../../graphql/tt-approvals.queries";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
timeTicketTasksModal: selectTimeTicketTasks,
|
||||
@@ -36,147 +29,48 @@ export function TimeTickeTaskModalContainer({
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const { context, visible } = timeTicketTasksModal;
|
||||
const { data: EmployeeAutoCompleteData } = useQuery(QUERY_ACTIVE_EMPLOYEES, {
|
||||
skip: !visible,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
const [insertTimeTickets] = useMutation(INSERT_NEW_TIME_TICKET);
|
||||
const [insertTimeTicketApproval] = useMutation(INSERT_NEW_TT_APPROVALS);
|
||||
const [queryJobInfo, { called, loading, data: lineTicketData }] =
|
||||
useLazyQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleFinish(values) {
|
||||
try {
|
||||
if (bodyshop.md_tasks_presets.use_approvals) {
|
||||
const result = await insertTimeTicketApproval({
|
||||
variables: {
|
||||
timeTicketInput: values.timetickets.map((ticket) => ({
|
||||
..._.omit(ticket, "pay"),
|
||||
bodyshopid: bodyshop.id,
|
||||
})),
|
||||
},
|
||||
});
|
||||
if (result.errors) {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(result.errors),
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
notification.open({
|
||||
type: "success",
|
||||
message: t("timetickets.successes.created"),
|
||||
});
|
||||
form.resetFields();
|
||||
toggleModalVisible();
|
||||
}
|
||||
} else {
|
||||
const result = await insertTimeTickets({
|
||||
variables: {
|
||||
timeTicketInput: values.timetickets.map((ticket) =>
|
||||
_.omit(ticket, "pay")
|
||||
),
|
||||
},
|
||||
refetchQueries: ["GET_LINE_TICKET_BY_PK"]
|
||||
});
|
||||
if (result.errors) {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(result.errors),
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
notification.open({
|
||||
type: "success",
|
||||
message: t("timetickets.successes.created"),
|
||||
});
|
||||
toggleModalVisible();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("🚀 ~ file: time-ticket-task-modal.container.jsx:104 ~ handleFinish ~ error:", error)
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(error),
|
||||
}),
|
||||
});
|
||||
} finally {
|
||||
calculateTickets({ values, handleFinish: true });
|
||||
}
|
||||
|
||||
async function handleValueChange(changedValues, allValues) {
|
||||
if (allValues.jobid && allValues.task) {
|
||||
calculateTickets({ values: allValues, handleFinish: false });
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (visible && context.jobid) {
|
||||
queryJobInfo({ variables: { id: context.jobid } });
|
||||
}
|
||||
}, [context.jobid, queryJobInfo, visible]);
|
||||
|
||||
const calculateTimeTickets = (presetMemo) => {
|
||||
const formData = form.getFieldsValue();
|
||||
if (
|
||||
!formData.jobid ||
|
||||
!formData.employeeteamid ||
|
||||
!formData.hourstype ||
|
||||
formData.hourstype.length === 0 ||
|
||||
!formData.percent ||
|
||||
!lineTicketData
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let data = [];
|
||||
let eligibleHours = 0;
|
||||
|
||||
const theTeam = JSON.parse(formData.employeeteamid);
|
||||
|
||||
if (theTeam) {
|
||||
formData.hourstype.forEach((hourstype) => {
|
||||
eligibleHours =
|
||||
lineTicketData.joblines.reduce(
|
||||
(acc, val) =>
|
||||
acc + (hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0),
|
||||
0
|
||||
) * (formData.percent / 100 || 0);
|
||||
|
||||
theTeam.employee_team_members.forEach((e) => {
|
||||
const newTicket = {
|
||||
employeeid: e.employeeid,
|
||||
bodyshopid: bodyshop.id,
|
||||
date: moment().format("YYYY-MM-DD"),
|
||||
jobid: formData.jobid,
|
||||
rate: e.labor_rates[hourstype],
|
||||
actualhrs: 0,
|
||||
memo: typeof presetMemo === "string" ? presetMemo : "",
|
||||
flat_rate: true,
|
||||
ciecacode: hourstype,
|
||||
cost_center:
|
||||
bodyshop.md_responsibility_centers.defaults.costs[hourstype],
|
||||
productivehrs:
|
||||
Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100,
|
||||
pay: Dinero({
|
||||
amount: Math.round((e.labor_rates[hourstype] || 0) * 100),
|
||||
})
|
||||
.multiply(
|
||||
Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100
|
||||
)
|
||||
.toFormat("$0.00"),
|
||||
};
|
||||
data.push(newTicket);
|
||||
const calculateTickets = async ({ values, handleFinish }) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data, ...response } = await axios.post("/payroll/claimtask", {
|
||||
jobid: values.jobid,
|
||||
task: values.task,
|
||||
calculateOnly: !handleFinish,
|
||||
});
|
||||
if (response.status === 200 && handleFinish) {
|
||||
//Close the modal
|
||||
toggleModalVisible();
|
||||
} else if (handleFinish === false) {
|
||||
form.setFieldsValue({ timetickets: data });
|
||||
} else {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(data),
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", { message: error.message }),
|
||||
});
|
||||
|
||||
form.setFieldsValue({
|
||||
timetickets: data.filter((d) => d.productivehrs > 0),
|
||||
});
|
||||
form.validateFields();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -197,18 +91,9 @@ export function TimeTickeTaskModalContainer({
|
||||
layout="vertical"
|
||||
onFinish={handleFinish}
|
||||
initialValues={context}
|
||||
onValuesChange={handleValueChange}
|
||||
>
|
||||
<TimeTicketTaskModalComponent
|
||||
form={form}
|
||||
employeeAutoCompleteOptions={
|
||||
EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
|
||||
}
|
||||
lineTicketData={lineTicketData}
|
||||
lineTicketLoading={loading}
|
||||
lineTicketCalled={called}
|
||||
calculateTimeTickets={calculateTimeTickets}
|
||||
queryJobInfo={queryJobInfo}
|
||||
/>
|
||||
<TimeTicketTaskModalComponent form={form} loading={loading} />
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user