IO-347 Manual appointments.

client/src/components/schedule-manual-event/schedule-manual-event.component.jsx

@@ -1,17 +1,32 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, Input, Popover, Space } from "antd";
+import { Button, Card, Form, Input, Popover, Select, Space } from "antd";
+import moment from "moment";
 import React, { useEffect, 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_APPOINTMENT,
+  INSERT_MANUAL_APPT,
   UPDATE_APPOINTMENT,
 } from "../../graphql/appointments.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 
-export default function ScheduleManualEvent({ event }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleManualEvent);
+
+export function ScheduleManualEvent({ bodyshop, event }) {
   const { t } = useTranslation();
-  const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
+  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
@@ -22,26 +37,27 @@ export default function ScheduleManualEvent({ event }) {
 
   useEffect(() => {
     if (visibility && event) {
-      form.setFieldsValue({ event });
+      form.setFieldsValue(event);
     }
   }, [visibility, form, event]);
 
-  useEffect(() => {
-    //     if (entryData && entryData.scoreboard && entryData.scoreboard[0]) {
-    //       console.log("Setting FOrm");
-    //   //    form.setFieldsValue(entryData.scoreboard[0]);
-    //     }
-  }, [form]);
-
   const handleFinish = async (values) => {
-    logImEXEvent("job_close_add_to_scoreboard");
+    logImEXEvent("schedule_manual_event");
 
     setLoading(true);
     try {
       if (event && event.id) {
-        updateAppointment();
+        updateAppointment({
+          variables: { appid: event.id, app: values },
+          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+        });
       } else {
-        insertAppointment();
+        insertAppointment({
+          variables: {
+            apt: { ...values, isintake: false, bodyshopid: bodyshop.id },
+          },
+          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+        });
       }
     } catch (error) {
       console.log(error);
@@ -56,8 +72,8 @@ export default function ScheduleManualEvent({ event }) {
       <div>
         <Form form={form} layout="vertical" onFinish={handleFinish}>
           <Form.Item
-            label={t("schedule.fields.note")}
-            name="note"
+            label={t("appointments.fields.title")}
+            name="title"
             rules={[
               {
                 required: true,
@@ -67,8 +83,11 @@ export default function ScheduleManualEvent({ event }) {
           >
             <Input />
           </Form.Item>
+          <Form.Item label={t("appointments.fields.note")} name="note">
+            <Input />
+          </Form.Item>
           <Form.Item
-            label={t("schedule.fields.start")}
+            label={t("appointments.fields.start")}
             name="start"
             rules={[
               {
@@ -80,17 +99,42 @@ export default function ScheduleManualEvent({ event }) {
             <FormDateTimePickerComponent />
           </Form.Item>
           <Form.Item
-            label={t("schedule.fields.end")}
+            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">
@@ -112,7 +156,9 @@ export default function ScheduleManualEvent({ event }) {
   return (
     <Popover content={overlay} visible={visibility}>
       <Button loading={loading} onClick={handleClick}>
-        {t("schedule.labels.manualevent")}
+        {event
+          ? t("appointments.actions.reschedule")
+          : t("appointments.labels.manualevent")}
       </Button>
     </Popover>
   );