132 lines
4.3 KiB
JavaScript
132 lines
4.3 KiB
JavaScript
import { DownOutlined } from "@ant-design/icons";
|
|
import { Button, Checkbox, Col, Form, InputNumber, Popover, Radio, Row, Space, Spin } from "antd";
|
|
import { useState } from "react";
|
|
import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
|
|
import { useQuery } from "@apollo/client/react";
|
|
|
|
export default function TimeTicketCalculatorComponent({
|
|
setProductiveHours,
|
|
|
|
jobid
|
|
}) {
|
|
const { loading, data: lineTicketData } = useQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
|
|
variables: { id: jobid },
|
|
skip: !jobid,
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only"
|
|
});
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
const handleOpenChange = (flag) => setVisible(flag);
|
|
const handleFinish = ({ type, hourstype, percent }) => {
|
|
//setProductiveHours(values);
|
|
//setVisible(false);
|
|
const eligibleHours = Array.isArray(hourstype)
|
|
? lineTicketData.joblines.reduce((acc, val) => acc + (hourstype.includes(val.mod_lbr_ty) ? val.mod_lb_hrs : 0), 0)
|
|
: lineTicketData.joblines.reduce((acc, val) => acc + (hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0), 0);
|
|
if (type === "draw") {
|
|
setProductiveHours(eligibleHours * (percent / 100));
|
|
} else if (type === "cut") {
|
|
setProductiveHours(eligibleHours * (percent / 100));
|
|
console.log("Cut selected, rate set to: ", lineTicketData.jobs_by_pk[`rate_${hourstype.toLowerCase()}`]);
|
|
}
|
|
};
|
|
|
|
const popContent = (
|
|
<Spin spinning={loading}>
|
|
<Form onFinish={handleFinish}>
|
|
<Form.Item name="type">
|
|
<Radio.Group>
|
|
<Radio.Button value="draw">Draw</Radio.Button>
|
|
<Radio.Button value="cut">Cut of Sale</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
<Form.Item noStyle shouldUpdate>
|
|
{({ getFieldValue }) => (
|
|
<Form.Item name="hourstype">
|
|
{getFieldValue("type") === "draw" ? (
|
|
<Checkbox.Group>
|
|
<Row>
|
|
<Col span={8}>
|
|
<Checkbox value="LAB" style={{ lineHeight: "32px" }}>
|
|
Body
|
|
</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="LAR" style={{ lineHeight: "32px" }}>
|
|
Refinish
|
|
</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="LAM" style={{ lineHeight: "32px" }}>
|
|
Mechanical
|
|
</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="LAF" style={{ lineHeight: "32px" }}>
|
|
Frame
|
|
</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="LAG" style={{ lineHeight: "32px" }}>
|
|
Glass
|
|
</Checkbox>
|
|
</Col>
|
|
</Row>
|
|
</Checkbox.Group>
|
|
) : (
|
|
<Radio.Group>
|
|
<Radio value="LAB">Body</Radio>
|
|
|
|
<Radio value="LAR">Refinish</Radio>
|
|
|
|
<Radio value="LAM">Mechanical</Radio>
|
|
|
|
<Radio value="LAF">Frame</Radio>
|
|
|
|
<Radio value="LAG">Glass</Radio>
|
|
</Radio.Group>
|
|
)}
|
|
</Form.Item>
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item name="percent">
|
|
<Space.Compact>
|
|
<InputNumber min={0} max={100} precision={1} />
|
|
<span
|
|
style={{
|
|
padding: "0 11px",
|
|
backgroundColor: "#fafafa",
|
|
border: "1px solid #d9d9d9",
|
|
borderLeft: 0,
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
%
|
|
</span>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
<Button htmlType="submit">Calculate</Button>
|
|
</Form>
|
|
</Spin>
|
|
);
|
|
|
|
return (
|
|
<Popover
|
|
content={popContent}
|
|
trigger={["click"]}
|
|
open={visible}
|
|
onOpenChange={handleOpenChange}
|
|
placement="right"
|
|
destroyOnHidden
|
|
>
|
|
<Button onClick={(e) => e.preventDefault()} icon={<DownOutlined />} iconPlacement="end">
|
|
Draw Calculator
|
|
</Button>
|
|
</Popover>
|
|
);
|
|
}
|