IO-1882 Add manual event from job detail actions menu.

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"),

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>
+  );
+}

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