- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,166 +1,163 @@
-import { useMutation } from "@apollo/client";
-import { Button, Card, Form, Input, Popover, Select, Space } from "antd";
+import {useMutation} from "@apollo/client";
+import {Button, Card, Form, Input, Popover, Select, Space} from "antd";
 import dayjs from "../../utils/day";
-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_MANUAL_APPT,
-  UPDATE_APPOINTMENT,
-} from "../../graphql/appointments.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+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_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";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(ScheduleManualEvent);
 
-export function ScheduleManualEvent({ bodyshop, event }) {
-  const { t } = useTranslation();
-  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
-  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
-  //   );
+export function ScheduleManualEvent({bodyshop, event}) {
+    const {t} = useTranslation();
+    const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
+    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 (visibility && event) {
+            form.setFieldsValue(event);
+        }
+    }, [visibility, form, event]);
 
-  const handleFinish = async (values) => {
-    logImEXEvent("schedule_manual_event");
+    const handleFinish = async (values) => {
+        logImEXEvent("schedule_manual_event");
 
-    setLoading(true);
-    try {
-      if (event && event.id) {
-        updateAppointment({
-          variables: { appid: event.id, app: values },
-          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
-        });
-      } else {
-        insertAppointment({
-          variables: {
-            apt: { ...values, isintake: false, bodyshopid: bodyshop.id },
-          },
-          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
-        });
-      }
-      form.resetFields();
-      setVisibility(false);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  };
+        setLoading(true);
+        try {
+            if (event && event.id) {
+                updateAppointment({
+                    variables: {appid: event.id, app: values},
+                    refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+                });
+            } else {
+                insertAppointment({
+                    variables: {
+                        apt: {...values, isintake: false, bodyshopid: bodyshop.id},
+                    },
+                    refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+                });
+            }
+            form.resetFields();
+            setVisibility(false);
+        } catch (error) {
+            console.log(error);
+        } finally {
+            setLoading(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 />
-          </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 (dayjs(start).isAfter(dayjs(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>
+    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/>
+                    </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 (dayjs(start).isAfter(dayjs(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">
-              {t("general.actions.save")}
+                    <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} open={visibility}>
+            <Button loading={loading} onClick={handleClick}>
+                {event
+                    ? t("appointments.actions.reschedule")
+                    : t("appointments.labels.manualevent")}
             </Button>
-            <Button onClick={() => setVisibility(false)}>
-              {t("general.actions.cancel")}
-            </Button>
-          </Space>
-        </Form>
-      </div>
-    </Card>
-  );
-
-  const handleClick = (e) => {
-    setVisibility(true);
-  };
-
-  return (
-    <Popover content={overlay} open={visibility}>
-      <Button loading={loading} onClick={handleClick}>
-        {event
-          ? t("appointments.actions.reschedule")
-          : t("appointments.labels.manualevent")}
-      </Button>
-    </Popover>
-  );
+        </Popover>
+    );
 }