- random cleanup

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

client/src/components/production-list-columns/production-list-columns.date.component.jsx

@@ -1,102 +1,111 @@
-import { useMutation } from "@apollo/client";
-import { Button, Card, Dropdown, TimePicker } from "antd";
+import {useMutation} from "@apollo/client";
+import {Button, Card, Dropdown, TimePicker} from "antd";
 import dayjs from "../../utils/day";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
-import { DateFormatter } from "../../utils/DateFormatter";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {logImEXEvent} from "../../firebase/firebase.utils";
+import {UPDATE_JOB} from "../../graphql/jobs.queries";
+import {DateFormatter} from "../../utils/DateFormatter";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 export default function ProductionListDate({
-  record,
-  field,
-  time,
-  pastIndicator,
-}) {
-  const [updateAlert] = useMutation(UPDATE_JOB);
-  const [open, setOpen] = useState(false);
-  const { t } = useTranslation();
+                                               record,
+                                               field,
+                                               time,
+                                               pastIndicator,
+                                           }) {
+    const [updateAlert] = useMutation(UPDATE_JOB);
+    const [open, setOpen] = useState(false);
+    const {t} = useTranslation();
 
-  const handleChange = (date) => {
-    logImEXEvent("product_toggle_date", { field });
-    // if (date.isSame(record[field] && dayjs(record[field]))) {
-    //   return;
-    // }
+    const handleChange = (date) => {
+        logImEXEvent("product_toggle_date", {field});
+        // if (date.isSame(record[field] && dayjs(record[field]))) {
+        //   return;
+        // }
 
-    //e.stopPropagation();
+        //e.stopPropagation();
 
-    updateAlert({
-      variables: {
-        jobId: record.id,
-        job: {
-          [field]: date,
-        },
-      },
-      optimisticResponse: {
-        update_jobs: {
-          [field]: date,
-        },
-      },
-    }).then(() => {
-      if (record.refetch) record.refetch();
-      if (!time) {
-        setOpen(false);
-      }
-    });
-  };
+        updateAlert({
+            variables: {
+                jobId: record.id,
+                job: {
+                    [field]: date,
+                },
+            },
+            optimisticResponse: {
+                update_jobs: {
+                    [field]: date,
+                },
+            },
+        }).then(() => {
+            if (record.refetch) record.refetch();
+            if (!time) {
+                setOpen(false);
+            }
+        });
+    };
 
-  let className = "";
-  if (pastIndicator) {
-    className =
-      !!record[field] &&
-      ((dayjs().isSameOrAfter(dayjs(record[field]), "day") &&
-        "production-completion-past") ||
-        (dayjs().add(1, "day").isSame(dayjs(record[field]), "day") &&
-          "production-completion-soon"));
-  }
-  // TODO - Client Update = Why is the overlay a card?
-  return (
-    <Dropdown
-      trigger={["click"]}
-      onOpenChange={(v) => setOpen(v)}
-      open={open}
-      style={{
-        height: "19px",
-      }}
-      overlay={
-        <Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}>
-          <FormDatePicker
-            onClick={(e) => e.stopPropagation()}
-            value={(record[field] && dayjs(record[field])) || null}
-            onChange={handleChange}
-            format="MM/DD/YYYY"
-            isDateOnly={!time}
-          />
-          {time && (
-            <TimePicker
-              onClick={(e) => e.stopPropagation()}
-              value={(record[field] && dayjs(record[field])) || null}
-              onChange={handleChange}
-              minuteStep={15}
-              format="hh:mm a"
-            />
-          )}
-          <Button onClick={() => setOpen(false)}>
-            {t("general.actions.close")}
-          </Button>
-        </Card>
-      }
-    >
-      <div
-        onClick={() => setOpen(true)}
-        style={{
-          height: "19px",
-        }}
-        className={className}
-      >
-        <DateFormatter bordered={false}>{record[field]}</DateFormatter>
-      </div>
-    </Dropdown>
-  );
+    let className = "";
+    if (pastIndicator) {
+        className =
+            !!record[field] &&
+            ((dayjs().isSameOrAfter(dayjs(record[field]), "day") &&
+                    "production-completion-past") ||
+                (dayjs().add(1, "day").isSame(dayjs(record[field]), "day") &&
+                    "production-completion-soon"));
+    }
+    // TODO - Client Update = Why is the overlay a card?
+
+    const overlayMenu = {
+        items: [
+            {
+                key: 'overlayItem1',
+                label:
+                    <Card style={{padding: "1rem"}} onClick={(e) => e.stopPropagation()}>
+                        <FormDatePicker
+                            onClick={(e) => e.stopPropagation()}
+                            value={(record[field] && dayjs(record[field])) || null}
+                            onChange={handleChange}
+                            format="MM/DD/YYYY"
+                            isDateOnly={!time}
+                        />
+                        {time && (
+                            <TimePicker
+                                onClick={(e) => e.stopPropagation()}
+                                value={(record[field] && dayjs(record[field])) || null}
+                                onChange={handleChange}
+                                minuteStep={15}
+                                format="hh:mm a"
+                            />
+                        )}
+                        <Button onClick={() => setOpen(false)}>
+                            {t("general.actions.close")}
+                        </Button>
+                    </Card>
+            }
+        ]
+    }
+
+    return (
+        <Dropdown
+            trigger={["click"]}
+            onOpenChange={(v) => setOpen(v)}
+            open={open}
+            style={{
+                height: "19px",
+            }}
+            menu={overlayMenu}
+        >
+            <div
+                onClick={() => setOpen(true)}
+                style={{
+                    height: "19px",
+                }}
+                className={className}
+            >
+                <DateFormatter bordered={false}>{record[field]}</DateFormatter>
+            </div>
+        </Dropdown>
+    );
 }

client/src/components/production-list-columns/production-list-columns.lastcontacted.component.jsx

@@ -89,7 +89,45 @@ export function ProductionLastContacted({ currentUser, record }) {
     }
   }, [open, form, record.date_last_contacted]);
 
-  // TODO - Client Update - Why is this a card?
+  const overlayMenu = {
+    items: [
+      {
+        key: 'overlay-item-1',
+        label:
+            <Card
+            style={{ padding: "1rem" }}
+            onClick={(e) => e.stopPropagation()}
+        >
+          <Form form={form} onFinish={handleFinish} layout="vertical">
+            <Form.Item
+                name="date_last_contacted"
+                label={t("jobs.fields.date_last_contacted")}
+            >
+              <FormDateTimePickerComponent />
+            </Form.Item>
+            <Form.Item
+                name="date_next_contact"
+                label={t("jobs.fields.date_next_contact")}
+            >
+              <FormDateTimePickerComponent />
+            </Form.Item>
+            <Form.Item label={t("notes.labels.notetoadd")} name="note">
+              <Input.TextArea rows={4} />
+            </Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                {t("general.actions.save")}
+              </Button>
+              <Button onClick={() => setOpen(false)}>
+                {t("general.actions.close")}
+              </Button>
+            </Space>
+          </Form>
+        </Card>
+      }
+    ]
+  }
+
   return (
     <div>
       <Dropdown
@@ -98,38 +136,7 @@ export function ProductionLastContacted({ currentUser, record }) {
         style={{
           height: "19px",
         }}
-        overlay={
-          <Card
-            style={{ padding: "1rem" }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Form form={form} onFinish={handleFinish} layout="vertical">
-              <Form.Item
-                name="date_last_contacted"
-                label={t("jobs.fields.date_last_contacted")}
-              >
-                <FormDateTimePickerComponent />
-              </Form.Item>
-              <Form.Item
-                name="date_next_contact"
-                label={t("jobs.fields.date_next_contact")}
-              >
-                <FormDateTimePickerComponent />
-              </Form.Item>
-              <Form.Item label={t("notes.labels.notetoadd")} name="note">
-                <Input.TextArea rows={4} />
-              </Form.Item>
-              <Space>
-                <Button type="primary" htmlType="submit">
-                  {t("general.actions.save")}
-                </Button>
-                <Button onClick={() => setOpen(false)}>
-                  {t("general.actions.close")}
-                </Button>
-              </Space>
-            </Form>
-          </Card>
-        }
+        menu={overlayMenu}
       >
         <div
           onClick={() => setOpen(true)}