feature/IO-3571-Create-Job-Done-Loading - Fix set is submitting

Signed-off-by: Allan Carr <allan@imexsystems.ca>

client/src/components/eula/eula.component.jsx

@@ -25,7 +25,6 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
 
   const handleScroll = useCallback(
     (e) => {
-      if (!e.target) return;
       const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
       if (bottom && !hasEverScrolledToBottom) {
         setHasEverScrolledToBottom(true);
@@ -37,9 +36,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
   );
 
   useEffect(() => {
-    if (markdownCardRef.current) {
-      handleScroll({ target: markdownCardRef.current });
-    }
+    handleScroll({ target: markdownCardRef.current });
   }, [handleScroll]);
 
   const handleChange = useCallback(() => {

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -1,16 +1,17 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMutation } from "@apollo/client/react";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Button, Drawer, Grid, Popconfirm, Space } from "antd";
 import ResponsiveTable from "../responsive-table/responsive-table.component";
 import queryString from "query-string";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
 import { selectIsPartsEntry, selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -91,14 +92,34 @@ export function PartsOrderListTableDrawerComponent({
     sortedInfo: {}
   });
 
+  const [billData, setBillData] = useState(null);
   const search = queryString.parse(useLocation().search);
   const selectedpartsorder = search.partsorderid;
 
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
   const { refetch } = billsQuery;
+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
   const selectedPartsOrderRecord = parts_orders.find((r) => r.id === selectedpartsorder);
 
+  useEffect(() => {
+    const fetchData = async () => {
+      if (selectedPartsOrderRecord?.returnfrombill) {
+        try {
+          const { data } = await billQuery({
+            variables: {
+              billid: selectedPartsOrderRecord.returnfrombill
+            }
+          });
+          setBillData(data);
+        } catch (error) {
+          console.error("Error fetching bill data:", error);
+        }
+      } else setBillData(null);
+    };
+    fetchData();
+  }, [selectedPartsOrderRecord, billQuery]);
+
   const recordActions = (record) => (
     <Space orientation="horizontal" wrap>
       <Button
@@ -342,9 +363,9 @@ export function PartsOrderListTableDrawerComponent({
       <div>
         <PageHeader
           title={
-            selectedPartsOrderRecord.returnfrombill
-              ? `${selectedPartsOrderRecord.vendor.name} - ${selectedPartsOrderRecord.order_number} - ${t("bills.labels.returnfrombill")}: ${selectedPartsOrderRecord.bill.invoice_number}`
-              : `${selectedPartsOrderRecord.vendor.name} - ${selectedPartsOrderRecord.order_number}`
+            billData
+              ? `${record.vendor.name} - ${record.order_number} - ${t("bills.labels.returnfrombill")}: ${billData.bills_by_pk.invoice_number}`
+              : `${record.vendor.name} - ${record.order_number}`
           }
           extra={recordActions(record)}
         />

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -70,12 +70,6 @@ export function PartsOrderListTableComponent({
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
-
-  const enrichedPartsOrders = parts_orders.map((order) => ({
-    ...order,
-    invoice_number: order.bill?.invoice_number
-  }));
-
   const { refetch } = billsQuery;
 
   const recordActions = (record, showView = false) => (
@@ -228,12 +222,7 @@ export function PartsOrderListTableComponent({
       dataIndex: "order_number",
       key: "order_number",
       sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
-      sortOrder: state.sortedInfo.columnKey === "invoice_number" && state.sortedInfo.order,
-      render: (text, record) => (
-        <span>
-          {record.order_number} {record.invoice_number && `(${record.invoice_number})`}
-        </span>
-      )
+      sortOrder: state.sortedInfo.columnKey === "invoice_number" && state.sortedInfo.order
     },
     {
       title: t("parts_orders.fields.order_date"),
@@ -283,10 +272,10 @@ export function PartsOrderListTableComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const filteredPartsOrders = enrichedPartsOrders
+  const filteredPartsOrders = parts_orders
     ? searchText === ""
-      ? enrichedPartsOrders
-      : enrichedPartsOrders.filter(
+      ? parts_orders
+      : parts_orders.filter(
           (b) =>
             (b.order_number || "").toString().toLowerCase().includes(searchText.toLowerCase()) ||
             (b.vendor.name || "").toLowerCase().includes(searchText.toLowerCase())

client/src/graphql/bills.queries.js

@@ -91,10 +91,6 @@ export const QUERY_PARTS_BILLS_BY_JOBID = gql`
       order_number
       comments
       user_email
-      bill {
-        id
-        invoice_number
-      }
     }
     parts_dispatch(where: { jobid: { _eq: $jobid } }) {
       id

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -10,14 +10,12 @@ import JobsCreateOwnerInfoContainer from "../../components/jobs-create-owner-inf
 import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 
-export default function JobsCreateComponent({ form }) {
+export default function JobsCreateComponent({ form, isSubmitting }) {
   const [pageIndex, setPageIndex] = useState(0);
-
   const [errorMessage, setErrorMessage] = useState(null);
-
   const [state] = useContext(JobCreateContext);
-
   const { t } = useTranslation();
+
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
@@ -42,11 +40,9 @@ export default function JobsCreateComponent({ form }) {
 
   const next = () => {
     setPageIndex(pageIndex + 1);
-    console.log("Next");
   };
   const prev = () => {
     setPageIndex(pageIndex - 1);
-    console.log("Previous");
   };
 
   const ProgressButtons = ({ top }) => {
@@ -79,17 +75,19 @@ export default function JobsCreateComponent({ form }) {
             {pageIndex === steps.length - 1 && (
               <Button
                 type="primary"
+                loading={isSubmitting}
                 onClick={() => {
                   form
                     .validateFields()
                     .then(() => {
-                      // NO OP
+                      form.submit();
                     })
-                    .catch((error) => console.log("error", error));
-                  form.submit();
+                    .catch((error) => {
+                      console.log("error", error);
+                    });
                 }}
               >
-                Done
+                {t("general.actions.done")}
               </Button>
             )}
           </Space>
@@ -146,13 +144,11 @@ export default function JobsCreateComponent({ form }) {
       ) : (
         <div>
           <ProgressButtons top />
-
           {errorMessage ? (
             <div>
               <AlertComponent title={errorMessage} type="error" />
             </div>
           ) : null}
-
           {steps.map((item, idx) => (
             <div
               key={idx}

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -46,6 +46,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
   });
   const [form] = Form.useForm();
   const [state, setState] = contextState;
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [insertJob] = useMutation(INSERT_NEW_JOB);
   const [loadOwner, remoteOwnerData] = useLazyQuery(QUERY_OWNER_FOR_JOB_CREATION);
 
@@ -83,16 +84,19 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
           newJobId: resp.data.insert_jobs.returning[0].id
         });
         logImEXEvent("manual_job_create_completed", {});
+        setIsSubmitting(false);
       })
       .catch((error) => {
         notification.error({
           title: t("jobs.errors.creating", { error: error })
         });
         setState({ ...state, error: error });
+        setIsSubmitting(false);
       });
   };
 
   const handleFinish = (values) => {
+    setIsSubmitting(true);
     let job = Object.assign(
       {},
       values,
@@ -297,7 +301,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
             })
           }}
         >
-          <JobsCreateComponent form={form} />
+          <JobsCreateComponent form={form} isSubmitting={isSubmitting} />
         </Form>
       </RbacWrapper>
     </JobCreateContext.Provider>

client/src/translations/en_us/common.json

@@ -1295,6 +1295,7 @@
         "delete": "Delete",
         "deleteall": "Delete All",
         "deselectall": "Deselect All",
+        "done": "Done",
         "download": "Download",
         "edit": "Edit",
         "gotoadmin": "Go to Admin Panel",

client/src/translations/es/common.json

@@ -1295,6 +1295,7 @@
         "delete": "Borrar",
         "deleteall": "",
         "deselectall": "",
+        "done": "",
         "download": "",
         "edit": "Editar",
         "gotoadmin": "",

client/src/translations/fr/common.json

@@ -1295,6 +1295,7 @@
         "delete": "Effacer",
         "deleteall": "",
         "deselectall": "",
+        "done": "",
         "download": "",
         "edit": "modifier",
         "gotoadmin": "",