From 7c5aa9c9133cdc5a69b001ed752e50416f1afb59 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 28 Jul 2021 11:34:35 -0700
Subject: [PATCH] IO-1275 Finish appointment notes.

---
 .../schedule-event.component.jsx              | 11 ++-
 .../schedule-event.note.component.jsx         | 74 +++++++++++++++++++
 .../schedule-job-modal.component.jsx          | 59 +++++++++------
 3 files changed, 115 insertions(+), 29 deletions(-)
 create mode 100644 client/src/components/job-at-change/schedule-event.note.component.jsx

diff --git a/client/src/components/job-at-change/schedule-event.component.jsx b/client/src/components/job-at-change/schedule-event.component.jsx
index c7cd21f8f..45e3fa9c0 100644
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -1,4 +1,4 @@
-import { Button, Popover, Space } from "antd";
+import { Button, Divider, Popover, Space } from "antd";
 import { AlertFilled } from "@ant-design/icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import DataLabel from "../data-label/data-label.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import queryString from "query-string";
+import ScheduleEventNote from "./schedule-event.note.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
@@ -39,7 +40,7 @@ export function ScheduleEventComponent({
   );
 
   const popoverContent = (
-    <div>
+    <div style={{ maxWidth: "40vw" }}>
       {!event.isintake ? (
         <strong>{event.title}</strong>
       ) : (
@@ -84,12 +85,10 @@ export function ScheduleEventComponent({
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
           </DataLabel>
-          <DataLabel label={t("appointments.fields.note")}>
-            {event.note || ""}
-          </DataLabel>
+          <ScheduleEventNote event={event} />
         </div>
       ) : null}
-
+      <Divider />
       <Space wrap>
         {event.job ? (
           <Link to={`/manage/jobs/${event.job && event.job.id}`}>
diff --git a/client/src/components/job-at-change/schedule-event.note.component.jsx b/client/src/components/job-at-change/schedule-event.note.component.jsx
new file mode 100644
index 000000000..713c38845
--- /dev/null
+++ b/client/src/components/job-at-change/schedule-event.note.component.jsx
@@ -0,0 +1,74 @@
+import { EditFilled, SaveFilled } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { Button, Input, notification, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import DataLabel from "../data-label/data-label.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ScheduleEventNote({ event }) {
+  const [editing, setEditing] = useState(false);
+  const [note, setNote] = useState(event.note || "");
+  const [loading, setLoading] = useState(false);
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const { t } = useTranslation();
+
+  const toggleEdit = async () => {
+    if (editing) {
+      //Await the update
+      setLoading(true);
+      const result = await updateAppointment({
+        variables: {
+          appid: event.id,
+          app: { note },
+        },
+      });
+
+      if (!!!result.errors) {
+        //  notification["success"]({ message: t("appointments.successes.saved") });
+      } else {
+        notification["error"]({
+          message: t("jobs.errors.saving", {
+            error: JSON.stringify(result.errors),
+          }),
+        });
+      }
+
+      setEditing(false);
+    } else {
+      setEditing(true);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <DataLabel label={t("appointments.fields.note")}>
+      <Space flex>
+        {!editing ? (
+          event.note || ""
+        ) : (
+          <Input.TextArea
+            rows={3}
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            style={{ maxWidth: "8vw" }}
+          />
+        )}
+        <Button onClick={toggleEdit} loading={loading}>
+          {editing ? <SaveFilled /> : <EditFilled />}
+        </Button>
+      </Space>
+    </DataLabel>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventNote);
diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
index 0753c43b4..74d2fff28 100644
--- a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -1,4 +1,14 @@
-import { Button, Col, Form, Input, Row, Select, Switch } from "antd";
+import {
+  Button,
+  Col,
+  Form,
+  Input,
+  Row,
+  Select,
+  Space,
+  Switch,
+  Typography,
+} from "antd";
 import axios from "axios";
 import moment from "moment";
 import React, { useState } from "react";
@@ -91,31 +101,34 @@ export function ScheduleJobModalComponent({
             <DateTimePicker onlyFuture />
           </Form.Item>
         </LayoutFormRow>
-        <LayoutFormRow header={t("appointments.labels.smartscheduling")}>
+
+        <Typography.Title level={4}>
+          {t("appointments.labels.smartscheduling")}
+        </Typography.Title>
+
+        {
+          // smartOptions.length > 0 && (
+          // <div>{t("appointments.labels.suggesteddates")}</div>
+          // )
+        }
+        <Space wrap>
           <Button onClick={handleSmartScheduling} loading={loading}>
             {t("appointments.actions.calculate")}
           </Button>
-          {smartOptions.length > 0 && (
-            <div>{t("appointments.labels.suggesteddates")}</div>
-          )}
-          <div
-            className="imex-flex-row imex-flex-row__flex-space-around"
-            style={{ flexWrap: "wrap" }}
-          >
-            {smartOptions.map((d, idx) => (
-              <Button
-                className="imex-flex-row__margin"
-                key={idx}
-                onClick={() => {
-                  form.setFieldsValue({ start: new moment(d).add(8, "hours") });
-                  handleDateBlur();
-                }}
-              >
-                <DateFormatter>{d}</DateFormatter>
-              </Button>
-            ))}
-          </div>
-        </LayoutFormRow>
+          {smartOptions.map((d, idx) => (
+            <Button
+              className="imex-flex-row__margin"
+              key={idx}
+              onClick={() => {
+                form.setFieldsValue({ start: new moment(d).add(8, "hours") });
+                handleDateBlur();
+              }}
+            >
+              <DateFormatter>{d}</DateFormatter>
+            </Button>
+          ))}
+        </Space>
+
         <LayoutFormRow grow>
           <Form.Item
             name="notifyCustomer"