Time Ticket modal update fix + add ticket list IO-682 IO-683

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -1,11 +1,15 @@
+import { useQuery } from "@apollo/react-hooks";
 import { Form, Input, InputNumber, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
 
 export default function TimeTicketModalComponent({
   form,
@@ -29,16 +33,7 @@ export default function TimeTicketModalComponent({
             },
           ]}
         >
-          <JobSearchSelect
-            options={roAutoCompleteOptions}
-            onBlur={() => {
-              if (form.getFieldValue("jobid") !== null) {
-                loadLineTicketData({
-                  variables: { id: form.getFieldValue("jobid") },
-                });
-              }
-            }}
-          />
+          <JobSearchSelect options={roAutoCompleteOptions} />
         </Form.Item>
         <Form.Item
           label={t("timetickets.fields.date")}
@@ -141,15 +136,37 @@ export default function TimeTicketModalComponent({
           <Input disabled />
         </Form.Item>
       </LayoutFormRow>
-      <Form.Item shouldUpdate>
+      <Form.Item dependencies={["jobid"]}>
         {() => (
-          <LaborAllocationsTable
-            jobId={form.getFieldValue("jobid")}
-            joblines={lineTicketData.joblines}
-            timetickets={lineTicketData.timetickets}
+          <LaborAllocationContainer
+            jobid={form.getFieldValue("jobid") || null}
           />
         )}
       </Form.Item>
     </div>
   );
 }
+
+function LaborAllocationContainer({ jobid }) {
+  console.log("jobid", jobid);
+  const { loading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
+    variables: { id: jobid },
+    skip: !jobid,
+  });
+  if (loading) return <LoadingSkeleton />;
+  if (!lineTicketData) return null;
+  return (
+    <div>
+      <LaborAllocationsTable
+        jobId={jobid}
+        joblines={lineTicketData.joblines}
+        timetickets={lineTicketData.timetickets}
+      />
+      <TimeTicketList
+        loading={loading}
+        timetickets={lineTicketData.timetickets}
+        techConsole
+      />
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { Button, Form, Modal, notification } from "antd";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
-import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import {
   INSERT_NEW_TIME_TICKET,
   UPDATE_TIME_TICKET,
@@ -39,10 +38,6 @@ export function TimeTicketModalContainer({
     skip: !timeTicketModal.visible,
   });
 
-  const [loadLineTicketData, { data: lineTicketData }] = useLazyQuery(
-    GET_LINE_TICKET_BY_PK
-  );
-
   const handleFinish = (values) => {
     const emps = EmployeeAutoCompleteData.employees.filter(
       (e) => e.id === values.employeeid
@@ -215,10 +210,6 @@ export function TimeTicketModalContainer({
           employeeAutoCompleteOptions={
             EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
           }
-          loadLineTicketData={loadLineTicketData}
-          lineTicketData={
-            lineTicketData ? lineTicketData : { joblines: [], timetickets: [] }
-          }
         />
       </Form>
     </Modal>