Claim Tasks WIP.

2023-04-12 12:44:19 -07:00
parent 27a67c5f4a
commit 542eca5867
26 changed files with 1621 additions and 3 deletions
--- a/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
+++ b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
+import { Modal, Form } from "antd";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
+import { useLazyQuery, useQuery } from "@apollo/client";
+import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
+import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import Dinero from "dinero.js";
+
+const mapStateToProps = createStructuredSelector({
+  timeTicketTasksModal: selectTimeTicketTasks,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask")),
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTickeTaskModalContainer);
+
+export function TimeTickeTaskModalContainer({
+  bodyshop,
+  timeTicketTasksModal,
+  toggleModalVisible,
+}) {
+  const [form] = Form.useForm();
+  const { context, visible } = timeTicketTasksModal;
+  const { data: EmployeeAutoCompleteData } = useQuery(QUERY_ACTIVE_EMPLOYEES, {
+    skip: !visible,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+  //Query the Job Information and Prefill the Form.
+  const [queryJobInfo, { loading, data: lineTicketData }] = useLazyQuery(
+    GET_JOB_INFO_DRAW_CALCULATIONS,
+    {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+    }
+  );
+
+  async function handleFinish(values) {}
+
+  const handleFieldsChange = async (changed, allFields) => {
+    const formData = form.getFieldsValue();
+    if (changed[0].name[0] === "jobid") {
+      await queryJobInfo({ variables: { id: changed[0].value } });
+    }
+
+    if (
+      !formData.jobid ||
+      !formData.employeeteamid ||
+      !formData.hourstype ||
+      !formData.percent
+    ) {
+      console.log("Not everything populated.");
+      return;
+    }
+    let data = [];
+    let eligibleHours = 0;
+
+    const theTeam = JSON.parse(formData.employeeteamid);
+
+    if (theTeam) {
+      eligibleHours =
+        lineTicketData.joblines.reduce(
+          (acc, val) =>
+            acc + (formData.hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0),
+          0
+        ) * (formData.percent / 100 || 0);
+
+      data = theTeam.employee_team_members.map((e) => {
+        return {
+          employeeid: e.id,
+          date: 0,
+          percentage: e.percentage,
+          rate: e.labor_rates[formData.hourstype],
+          cost_center:
+            bodyshop.md_responsibility_centers.defaults.costs[
+              formData.hourstype
+            ],
+          productivehrs:
+            Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100,
+          pay: Dinero({
+            amount: Math.round((e.labor_rates[formData.hourstype] || 0) * 100),
+          })
+            .multiply(
+              Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100
+            )
+            .toFormat("$0.00"),
+        };
+      });
+      form.setFieldsValue({ timetickets: data });
+    }
+  };
+  return (
+    <Modal
+      destroyOnClose
+      open={visible}
+      onCancel={() => toggleModalVisible()}
+      width="80%"
+    >
+      <Form
+        autoComplete={"off"}
+        form={form}
+        layout="vertical"
+        onHandleFinish={handleFinish}
+        onFieldsChange={handleFieldsChange}
+      >
+        <TimeTicketTaskModalComponent
+          form={form}
+          employeeAutoCompleteOptions={
+            EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
+          }
+        />
+      </Form>
+    </Modal>
+  );
+}