IO-2206 Refine claim tasks modal to add validations and insertions.

client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx

@@ -1,16 +1,20 @@
-import React from "react";
+import React, { useEffect } 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 { useTranslation } from "react-i18next";
 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 { 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 Dinero from "dinero.js";
+import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
 
 const mapStateToProps = createStructuredSelector({
   timeTicketTasksModal: selectTimeTicketTasks,
@@ -36,30 +40,63 @@ export function TimeTickeTaskModalContainer({
     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,
-    {
+  const { t } = useTranslation();
+  const [insertTimeTickets] = useMutation(INSERT_NEW_TIME_TICKET);
+  const [queryJobInfo, { called, loading, data: lineTicketData }] =
+    useLazyQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
+    });
+
+  async function handleFinish(values) {
+    console.log(
+      "🚀 ~ file: time-ticket-task-modal.container.jsx:52 ~ handleFinish ~ values:",
+      values
+    );
+    try {
+      const result = await insertTimeTickets({
+        variables: {
+          timeTicketInput: values.timetickets.map((ticket) =>
+            _.omit(ticket, "pay")
+          ),
+        },
+      });
+      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) {
+    } finally {
     }
-  );
+  }
 
-  async function handleFinish(values) {}
+  useEffect(() => {
+    if (context.jobid) {
+      console.log("UE Fired.");
+      queryJobInfo({ variables: { id: context.jobid } });
+    }
+  }, [context.jobid, queryJobInfo]);
 
-  const handleFieldsChange = async (changed, allFields) => {
+  const calculateTimeTickets = (presetMemo) => {
     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
+      formData.hourstype.length === 0 ||
+      !formData.percent ||
+      !lineTicketData
     ) {
-      console.log("Not everything populated.");
       return;
     }
     let data = [];
@@ -68,56 +105,75 @@ export function TimeTickeTaskModalContainer({
     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 = [];
 
-      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"),
-        };
+      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: presetMemo,
+            flat_rate: true,
+            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);
+        });
       });
-      form.setFieldsValue({ timetickets: data });
+
+      form.setFieldsValue({
+        timetickets: data.filter((d) => d.productivehrs > 0),
+      });
+      form.validateFields();
     }
   };
+
   return (
     <Modal
       destroyOnClose
       open={visible}
       onCancel={() => toggleModalVisible()}
       width="80%"
+      onOk={() => form.submit()}
     >
       <Form
         autoComplete={"off"}
         form={form}
         layout="vertical"
-        onHandleFinish={handleFinish}
-        onFieldsChange={handleFieldsChange}
+        onFinish={handleFinish}
+        //  onFieldsChange={handleFieldsChange}
+        initialValues={context}
       >
         <TimeTicketTaskModalComponent
           form={form}
           employeeAutoCompleteOptions={
             EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
           }
+          lineTicketData={lineTicketData}
+          lineTicketLoading={loading}
+          lineTicketCalled={called}
+          calculateTimeTickets={calculateTimeTickets}
+          queryJobInfo={queryJobInfo}
         />
       </Form>
     </Modal>