- additional cleanup and validation / fixes

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

client/src/components/task-list/task-list.component.jsx

@@ -163,7 +163,7 @@ function TaskListComponent({
       width: "8%",
       render: (text, record) =>
         record.job ? (
-          <Link to={`/manage/jobs/${record.job.id}`}>{record.job.ro_number || t("general.labels.na")}</Link>
+          <Link to={`/manage/jobs/${record.job.id}?tab=tasks`}>{record.job.ro_number || t("general.labels.na")}</Link>
         ) : (
           t("general.labels.na")
         )

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

@@ -27,12 +27,13 @@ export function TaskUpsertModalComponent({
   selectedJobId,
   setSelectedJobId,
   selectedJobDetails,
+  existingTask,
   loading,
   error
 }) {
   const { t } = useTranslation();
   const datePickerPresets = [
-    { label: t("tasks.date_presets.today"), value: dayjs() },
+    { label: t("tasks.date_presets.today"), value: dayjs().add(1, "hour") },
     { label: t("tasks.date_presets.tomorrow"), value: dayjs().add(1, "day") },
     { label: t("tasks.date_presets.next_week"), value: dayjs().add(1, "week") },
     { label: t("tasks.date_presets.two_weeks"), value: dayjs().add(2, "weeks") },
@@ -195,11 +196,38 @@ export function TaskUpsertModalComponent({
         </Col>
         <Col span={8}>
           <Form.Item label={t("tasks.fields.due_date")} name="due_date">
-            <FormDatePicker onlyFuture format="MM/DD/YYYY" presets={datePickerPresets} />
+            <FormDatePicker
+              onlyFuture
+              format="MM/DD/YYYY"
+              presets={datePickerPresets}
+              rules={[
+                {
+                  validator: (_, value) => {
+                    if (!value || existingTask?.due_date === value || dayjs(value).isAfter(dayjs())) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject(new Error(t("tasks.validation.due_at_error_message")));
+                  }
+                }
+              ]}
+            />
           </Form.Item>
         </Col>
         <Col span={8}>
-          <Form.Item label={t("tasks.fields.remind_at")} name="remind_at">
+          <Form.Item
+            label={t("tasks.fields.remind_at")}
+            name="remind_at"
+            rules={[
+              {
+                validator: (_, value) => {
+                  if (!value || existingTask?.remind_at === value || dayjs(value).isAfter(dayjs().add(30, "minute"))) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error(t("tasks.validation.remind_at_error_message")));
+                }
+              }
+            ]}
+          >
             <FormDateTimePickerEnhanced onlyFuture showTime minuteStep={15} presets={datePickerPresets} />
           </Form.Item>
         </Col>

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

@@ -16,6 +16,7 @@ import axios from "axios";
 import dayjs from "../../utils/day";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";
 import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { isEqual } from "lodash";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -33,13 +34,13 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
   const history = useNavigate();
   const [insertTask] = useMutation(MUTATION_INSERT_NEW_TASK);
   const [updateTask] = useMutation(MUTATION_UPDATE_TASK);
-  const { open, context, actions } = taskUpsert;
+  const { open, context } = taskUpsert;
   const { jobid, joblineid, billid, partsorderid, taskId, existingTask, query } = context;
-  const { refetch } = actions;
   const [form] = Form.useForm();
   const [selectedJobId, setSelectedJobId] = useState(null);
   const [selectedJobDetails, setSelectedJobDetails] = useState(null);
   const [jobIdState, setJobIdState] = useState(null);
+  const [isTouched, setIsTouched] = useState(false);
 
   const { loading, error, data } = useQuery(QUERY_GET_TASKS_JOB_DETAILS_BY_ID, {
     variables: { id: jobIdState },
@@ -91,6 +92,7 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
     }
     return () => {
       setSelectedJobId(null);
+      setIsTouched(false);
     };
   }, [jobid, existingTask, form, open, joblineid, billid, partsorderid]);
 
@@ -164,8 +166,6 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
       message: t("tasks.successes.updated")
     });
 
-    if (refetch) await refetch();
-
     toggleModalVisible();
   };
 
@@ -181,19 +181,6 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
         ]
       },
       refetchQueries: ["GET_JOB_BY_PK"]
-      // update(cache, { data }) {
-      //   cache.modify({
-      //     fields: {
-      //       tasks(cached) {
-      //         const newTasks = data?.insert_tasks?.returning.map(task => cache.writeFragment({
-      //           data: task,
-      //           fragment: PARTIAL_TASK_FIELDS_WRAPPER
-      //         }));
-      //         return [...cached, ...newTasks];
-      //       }
-      //     }
-      //   });
-      // }
     };
 
     if (query && Object.keys(query).length) {
@@ -213,8 +200,6 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
       });
     }
 
-    if (refetch) await refetch();
-
     form.resetFields();
     toggleModalVisible();
 
@@ -253,12 +238,16 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
    * @returns {Promise<[{jobid, bodyshopid, created_by},...*]>}
    */
   const handleFinish = async (formValues) => {
-    const { ...values } = formValues;
-
     if (existingTask) {
-      await handleExistingTask(values);
+      const dirtyValues = Object.keys(formValues).reduce((acc, key) => {
+        if (!isEqual(formValues[key], existingTask[key])) {
+          acc[key] = formValues[key];
+        }
+        return acc;
+      }, {});
+      await handleExistingTask(dirtyValues);
     } else {
-      await handleNewTask(values);
+      await handleNewTask(formValues);
     }
   };
 
@@ -276,14 +265,23 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
         removeTaskIdFromUrl();
         toggleModalVisible();
       }}
+      okButtonProps={{ disabled: !isTouched }}
       destroyOnClose
     >
-      <Form form={form} onFinish={handleFinish} layout="vertical">
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        layout="vertical"
+        onFieldsChange={() => {
+          setIsTouched(true);
+        }}
+      >
         <TaskUpsertModalComponent
           form={form}
           loading={loading || (taskId && taskLoading)}
           error={error}
           data={data}
+          existingTask={existingTask}
           selectedJobId={selectedJobId}
           setSelectedJobId={setSelectedJobId}
           selectedJobDetails={selectedJobDetails}

client/src/translations/en_us/common.json

@@ -2224,6 +2224,10 @@
         "job": {
           "ro_number": "RO #"
         }
+      },
+      "validation": {
+        "due_at_error_message": "The due date must be in the future!",
+        "remind_at_error_message": "The reminder date and time must be at least 30 minutes in the future!"
       }
     },
     "menus": {

client/src/translations/es/common.json

@@ -2223,6 +2223,10 @@
         "job": {
           "ro_number": ""
         }
+      },
+      "validation": {
+        "due_at_error_message": "",
+        "remind_at_error_message":  ""
       }
     },
     "menus": {

client/src/translations/fr/common.json

@@ -2223,6 +2223,10 @@
         "job": {
           "ro_number": ""
         }
+      },
+      "validation": {
+        "due_at_error_message": "",
+        "remind_at_error_message": ""
       }
     },
     "menus": {