- Progress commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/task-upsert-modal/task-upsert-modal.container.jsx

@@ -1,10 +1,14 @@
-import {useMutation} from "@apollo/client";
+import {useMutation, useQuery} from "@apollo/client";
 import {Form, Modal, notification} from "antd";
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
 import {createStructuredSelector} from "reselect";
 import {MUTATION_INSERT_NEW_TASK, MUTATION_UPDATE_TASK} from "../../graphql/tasks.queries";
+import {
+  QUERY_GET_TASKS_JOB_DETAILS,
+  QUERY_GET_TASKS_JOB_DETAILS_BY_ID
+} from "../../graphql/jobs.queries.js";
 import {toggleModalVisible} from "../../redux/modals/modals.actions";
 import {selectTaskUpsert} from "../../redux/modals/modals.selectors";
 import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors";
@@ -33,7 +37,33 @@ export function TaskUpsertModalContainer({
   const {jobId, existingTask} = context;
   const {refetch} = actions;
   const [form] = Form.useForm();
+  const [selectedJobId, setSelectedJobId] = useState(null);
+  const [selectedJobDetails, setSelectedJobDetails] = useState(null);
+  const [jobIdState, setJobIdState] = useState(null);
 
+
+  const {
+    loading: jobDetailsLoading,
+    error: jobDetailsError,
+    data: jobDetailsData
+  } = useQuery(QUERY_GET_TASKS_JOB_DETAILS_BY_ID, {
+    variables: {id: jobIdState},
+    skip: !jobIdState, // Skip the query if jobIdState is null
+  });
+  const {loading, error, data} = useQuery(QUERY_GET_TASKS_JOB_DETAILS);
+
+  /**
+   * Set the selected job id when the modal is opened and jobId is passed as a prop or when an existing task is passed as a prop
+   */
+  useEffect(() => {
+    if (jobId || existingTask?.id) {
+      setSelectedJobId(jobId || existingTask.jobid);
+    }
+  }, [jobId, existingTask]);
+
+  /**
+   * Set the form values when the modal is opened and an existing task is passed as a prop
+   */
   useEffect(() => {
     if (existingTask && open) {
       form.setFieldsValue(existingTask);
@@ -42,37 +72,72 @@ export function TaskUpsertModalContainer({
     }
   }, [existingTask, form, open]);
 
+  /**
+   * Reset the form values when the selected job id changes
+   */
+  useEffect(() => {
+    form.setFieldsValue({
+      joblineid: undefined,
+      billid: undefined,
+      partsorderid: undefined,
+    });
+  }, [selectedJobId, form]);
+
+  /**
+   * Set the job id state when the selected job id changes
+   */
+  useEffect(() => {
+    if (selectedJobId) {
+      // Update the state variable instead of calling useQuery
+      setJobIdState(selectedJobId);
+    }
+  }, [selectedJobId]);
+
+  /**
+   * Set the selected job details when the job details query is successful
+   */
+  useEffect(() => {
+    if (!jobDetailsLoading && !jobDetailsError && jobDetailsData) {
+      setSelectedJobDetails(jobDetailsData.jobs_by_pk);
+    }
+  }, [jobDetailsLoading, jobDetailsError, jobDetailsData]);
+
+  /**
+   * Handle the form submit
+   * @param formValues
+   * @returns {Promise<[{jobid, bodyshopid, created_by},...*]>}
+   */
   const handleFinish = async (formValues) => {
     const {...values} = formValues;
 
     if (existingTask) {
-      updateTask({
+      await updateTask({
         variables: {
           taskId: existingTask.id,
           task: values,
+          jobid: selectedJobId,
         },
-      }).then((r) => {
-        notification["success"]({
-          message: t("tasks.successes.updated"),
-        });
       });
-      if (refetch) refetch();
+
+      notification["success"]({
+        message: t("tasks.successes.updated"),
+      });
+      if (refetch) await refetch();
       toggleModalVisible();
     } else {
       await insertTask({
         variables: {
           taskInput: [
-            {...values, jobid: jobId, created_by: currentUser.email, bodyshopid: bodyshop.id},
+            {...values, jobid: selectedJobId, created_by: currentUser.email, bodyshopid: bodyshop.id},
           ],
         },
         update(cache) {
           cache.modify({
-         
             fields: {
               tasks(existingTasks) {
                 return [{
                   ...values, 
-                  jobid: jobId,
+                  jobid: selectedJobId,
                   created_by: currentUser.email,
                   bodyshopid: bodyshop.id
                   }, ...existingTasks]
@@ -82,7 +147,7 @@ export function TaskUpsertModalContainer({
         },
       });
 
-      if (refetch) refetch();
+      if (refetch) await refetch();
       form.resetFields();
       toggleModalVisible();
       notification["success"]({
@@ -96,16 +161,22 @@ export function TaskUpsertModalContainer({
       title={existingTask ? t("tasks.actions.edit") : t("tasks.actions.new")}
       open={open}
       okText={t("general.actions.save")}
+      width="50%"
       onOk={() => {
         form.submit();
       }}
       onCancel={() => {
         toggleModalVisible();
       }}
+
       destroyOnClose
     >
       <Form form={form} onFinish={handleFinish} layout="vertical">
-        <TaskUpsertModalComponent form={form}/>
+        <TaskUpsertModalComponent form={form} loading={loading} error={error} data={data}
+                                  selectedJobId={setSelectedJobId}
+                                  setSelectedJobId={setSelectedJobId}
+                                  selectedJobDetails={selectedJobDetails}/>
+
       </Form>
     </Modal>
   );