- Dynamic Date Time Presets for Tasks

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

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

@@ -5,7 +5,6 @@ import { FormDatePicker } from "../form-date-picker/form-date-picker.component.j
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import dayjs from "../../utils/day";
-
 import { connect } from "react-redux";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx";
@@ -32,16 +31,65 @@ export function TaskUpsertModalComponent({
   error
 }) {
   const { t } = useTranslation();
+
   const datePickerPresets = [
     { 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.tomorrow"), value: dayjs().add(1, "day").startOf("day") },
-    { label: t("tasks.date_presets.next_week"), value: dayjs().add(1, "week") },
+    { label: t("tasks.date_presets.next_week"), value: dayjs().add(1, "week").startOf("day") },
-    { label: t("tasks.date_presets.two_weeks"), value: dayjs().add(2, "weeks") },
+    { label: t("tasks.date_presets.two_weeks"), value: dayjs().add(2, "weeks").startOf("day") },
-    { label: t("tasks.date_presets.three_weeks"), value: dayjs().add(3, "weeks") },
+    { label: t("tasks.date_presets.three_weeks"), value: dayjs().add(3, "weeks").startOf("day") },
-    { label: t("tasks.date_presets.one_month"), value: dayjs().add(1, "month") },
+    { label: t("tasks.date_presets.one_month"), value: dayjs().add(1, "month").startOf("day") },
-    { label: t("tasks.date_presets.three_months"), value: dayjs().add(3, "month") }
+    { label: t("tasks.date_presets.three_months"), value: dayjs().add(3, "month").startOf("day") }
   ];
 
+  const generatePresets = (job) => {
+    if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
+    const relativePresets = [];
+
+    if (selectedJobDetails?.scheduled_completion) {
+      const scheduledCompletion = dayjs(selectedJobDetails.scheduled_completion);
+
+      if (scheduledCompletion.isAfter(dayjs())) {
+        relativePresets.push(
+          {
+            label: `${t("tasks.date_presets.completion")} -1 ${t("tasks.date_presets.day")}`,
+            value: scheduledCompletion.subtract(1, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.completion")} -2 ${t("tasks.date_presets.days")}`,
+            value: scheduledCompletion.subtract(2, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.completion")} -3 ${t("tasks.date_presets.days")}`,
+            value: scheduledCompletion.subtract(3, "day").startOf("day")
+          }
+        );
+      }
+    }
+
+    if (selectedJobDetails?.scheduled_delivery) {
+      const scheduledDelivery = dayjs(selectedJobDetails.scheduled_delivery);
+      if (scheduledDelivery.isAfter(dayjs())) {
+        relativePresets.push(
+          {
+            label: `${t("tasks.date_presets.delivery")} -1 ${t("tasks.date_presets.day")}`,
+            value: scheduledDelivery.subtract(1, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.delivery")} -2 ${t("tasks.date_presets.days")}`,
+            value: scheduledDelivery.subtract(2, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.delivery")} -3 ${t("tasks.date_presets.days")}`,
+            value: scheduledDelivery.subtract(3, "day").startOf("day")
+          }
+        );
+      }
+    }
+
+    return [...relativePresets, ...datePickerPresets];
+  };
+
   const clearRelations = () => {
     form.setFieldsValue({
       billid: null,
@@ -203,7 +251,7 @@ export function TaskUpsertModalComponent({
             <FormDatePicker
               onlyFuture
               format="MM/DD/YYYY"
-              presets={datePickerPresets}
+              presets={generatePresets(selectedJobDetails)}
               rules={[
                 {
                   validator: (_, value) => {
@@ -232,7 +280,12 @@ export function TaskUpsertModalComponent({
               }
             ]}
           >
-            <FormDateTimePickerEnhanced onlyFuture showTime minuteStep={15} presets={datePickerPresets} />
+            <FormDateTimePickerEnhanced
+              onlyFuture
+              showTime
+              minuteStep={15}
+              presets={generatePresets(selectedJobDetails)}
+            />
           </Form.Item>
         </Col>
       </Row>

client/src/graphql/jobs.queries.js

@@ -2090,6 +2090,8 @@ export const QUERY_GET_TASKS_JOB_DETAILS_BY_ID = gql`
   query QUERY_GET_TASKS_JOB_DETAILS_BY_ID($id: uuid!) {
     jobs_by_pk(id: $id) {
       id
+      scheduled_delivery
+      scheduled_completion
       joblines {
         id
         line_desc

client/src/translations/en_us/common.json

@@ -2170,7 +2170,11 @@
         "one_month": "One Month",
         "today": "Today",
         "tomorrow": "Tomorrow",
-        "three_months": "Three Months"
+        "three_months": "Three Months",
+        "day": "Day",
+        "days": "Days",
+        "delivery": "Delivery",
+        "completion": "Completion"
       },
       "actions": {
         "new": "New Task",

client/src/translations/es/common.json

@@ -2168,7 +2168,11 @@
         "one_month": "",
         "today": "",
         "tomorrow": "",
-        "three_months": ""
+        "three_months": "",
+        "day": "",
+        "days": "",
+        "delivery": "",
+        "completion": ""
       },
       "actions": {
         "new": "",

client/src/translations/fr/common.json

@@ -2168,7 +2168,11 @@
         "one_month": "",
         "today": "",
         "tomorrow": "",
-        "three_months": ""
+        "three_months": "",
+        "day": "",
+        "days": "",
+        "delivery": "",
+        "completion": ""
       },
       "actions": {
         "new": "",