IO-658 IO-652 IO-657 add MPI Templates.

client/src/components/schedule-calendar/schedule-calendar.component.jsx

@@ -3,6 +3,7 @@ import { Button, Card, Col, PageHeader, Row, Space } from "antd";
 import React from "react";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
+import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
 
 export default function ScheduleCalendarComponent({ data, refetch }) {
@@ -23,6 +24,7 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
               </Button>
 
               <ScheduleProductionList />
+              <ScheduleManualEvent />
             </Space>
           }
         />

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

@@ -0,0 +1,135 @@
+import { useMutation, useLazyQuery } from "@apollo/client";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  notification,
+  Popover,
+  Space,
+} from "antd";
+import moment from "moment";
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import {
+  INSERT_APPOINTMENT,
+  UPDATE_APPOINTMENT,
+} from "../../graphql/appointments.queries";
+import {
+  INSERT_SCOREBOARD_ENTRY,
+  QUERY_SCOREBOARD_ENTRY,
+  UPDATE_SCOREBOARD_ENTRY,
+} from "../../graphql/scoreboard.queries";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+export default function ScheduleManualEvent({ event }) {
+  const { t } = useTranslation();
+  const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [visibility, setVisibility] = useState(false);
+  //   const [callQuery, { loading: entryLoading, data: entryData }] = useLazyQuery(
+  //     QUERY_SCOREBOARD_ENTRY
+  //   );
+
+  useEffect(() => {
+    if (visibility && 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");
+
+    setLoading(true);
+    try {
+      let result;
+      if (event && event.id) {
+      } else {
+      }
+    } 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("schedule.fields.note")}
+            name="note"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("schedule.fields.start")}
+            name="start"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <FormDateTimePickerComponent />
+          </Form.Item>
+          <Form.Item
+            label={t("schedule.fields.end")}
+            name="end"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <FormDateTimePickerComponent />
+          </Form.Item>
+
+          <Space wrap>
+            <Button type="primary" htmlType="submit">
+              {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}>
+      <Button loading={loading} onClick={handleClick}>
+        {t("schedule.labels.manualevent")}
+      </Button>
+    </Popover>
+  );
+}