From 44e313d8e3b2508724a8ac929f6abf99a29e94db Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 22 Aug 2022 15:01:59 -0700
Subject: [PATCH] IO-1882 Add manual event from job detail actions menu.

---
 .../job-audit-trail.component.jsx             |   8 +-
 .../jobs-detail-header-actions.addevent.jsx   | 149 ++++++++++++++++++
 .../jobs-detail-header-actions.component.jsx  |   2 +
 3 files changed, 154 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addevent.jsx

diff --git a/client/src/components/job-audit-trail/job-audit-trail.component.jsx b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
index e6015c381..e58c285d1 100644
--- a/client/src/components/job-audit-trail/job-audit-trail.component.jsx
+++ b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
@@ -40,7 +40,7 @@ export default function JobAuditTrail({ jobId }) {
       title: t("audit.fields.created"),
       dataIndex: " created_at",
       key: " created_at",
-      width: "10%",
+
       render: (text, record) => (
         <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
       ),
@@ -50,14 +50,13 @@ export default function JobAuditTrail({ jobId }) {
       title: t("audit.fields.useremail"),
       dataIndex: "useremail",
       key: "useremail",
-      width: "10%",
     },
 
     {
       title: t("audit.fields.to"),
       dataIndex: "to",
       key: "to",
-      width: "10%",
+
       render: (text, record) =>
         record.to &&
         record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>),
@@ -66,7 +65,7 @@ export default function JobAuditTrail({ jobId }) {
       title: t("audit.fields.cc"),
       dataIndex: "cc",
       key: "cc",
-      width: "10%",
+
       render: (text, record) =>
         record.cc &&
         record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>),
@@ -75,7 +74,6 @@ export default function JobAuditTrail({ jobId }) {
       title: t("audit.fields.subject"),
       dataIndex: "subject",
       key: "subject",
-      width: "10%",
     },
     // {
     //   title: t("audit.fields.contents"),
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addevent.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addevent.jsx
new file mode 100644
index 000000000..164769063
--- /dev/null
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addevent.jsx
@@ -0,0 +1,149 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Form, Input, Menu, Popover, Select, Space } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsDetailHeaderAddEvent);
+
+export function JobsDetailHeaderAddEvent({ bodyshop, jobid, ...props }) {
+  const { t } = useTranslation();
+  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
+
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [visibility, setVisibility] = useState(false);
+
+  const handleFinish = async (values) => {
+    logImEXEvent("schedule_manual_event");
+
+    setLoading(true);
+    try {
+      insertAppointment({
+        variables: {
+          apt: { ...values, isintake: false, jobid, bodyshopid: bodyshop.id },
+        },
+        refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+      });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+      setVisibility(false);
+    }
+  };
+
+  const overlay = (
+    <Card>
+      <div>
+        <Form form={form} layout="vertical" onFinish={handleFinish}>
+          <Form.Item
+            label={t("appointments.fields.title")}
+            name="title"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("appointments.fields.note")} name="note">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("appointments.fields.start")}
+            name="start"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <FormDateTimePickerComponent
+              onBlur={() => {
+                const start = form.getFieldValue("start");
+                form.setFieldsValue({ end: start.add(30, "minutes") });
+              }}
+            />
+          </Form.Item>
+          <Form.Item
+            label={t("appointments.fields.end")}
+            name="end"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+              ({ getFieldValue }) => ({
+                async validator(rule, value) {
+                  if (value) {
+                    const { start } = form.getFieldsValue();
+                    if (moment(start).isAfter(moment(value))) {
+                      return Promise.reject(
+                        t("employees.labels.endmustbeafterstart")
+                      );
+                    } else {
+                      return Promise.resolve();
+                    }
+                  } else {
+                    return Promise.resolve();
+                  }
+                },
+              }),
+            ]}
+          >
+            <FormDateTimePickerComponent />
+          </Form.Item>
+          <Form.Item label={t("appointments.fields.color")} name="color">
+            <Select>
+              {bodyshop.appt_colors.map((col, idx) => (
+                <Select.Option key={idx} value={col.color.hex}>
+                  {col.label}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Space wrap>
+            <Button type="primary" htmlType="submit" loading={loading}>
+              {t("general.actions.save")}
+            </Button>
+            <Button onClick={() => setVisibility(false)}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Space>
+        </Form>
+      </div>
+    </Card>
+  );
+
+  const handleClick = (e) => {
+    setVisibility(true);
+  };
+
+  return (
+    <Popover content={overlay} visible={visibility}>
+      <Menu.Item {...props} onClick={handleClick}>
+        {t("appointments.labels.manualevent")}
+      </Menu.Item>
+    </Popover>
+  );
+}
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index 7cac639e9..5002a0e5d 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -15,6 +15,7 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import JobsDetailHeaderActionsAddevent from "./jobs-detail-header-actions.addevent";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
@@ -421,6 +422,7 @@ export function JobsDetailHeaderActions({
           </Popconfirm>
         </Menu.Item>
       )}
+      <JobsDetailHeaderActionsAddevent jobid={job.id} />
       {!jobRO && job.converted && (
         <Menu.Item>
           <Popconfirm