- the great reformat

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

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -1,220 +1,213 @@
-import {
-  Button,
-  Col,
-  Form,
-  Input,
-  Row,
-  Select,
-  Space,
-  Switch,
-  Typography,
-} from "antd";
+import {Button, Col, Form, Input, Row, Select, Space, Switch, Typography,} from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { calculateScheduleLoad } from "../../redux/application/application.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { DateFormatter } from "../../utils/DateFormatter";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {calculateScheduleLoad} from "../../redux/application/application.actions";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {DateFormatter} from "../../utils/DateFormatter";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
-import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
+import ScheduleExistingAppointmentsList
+  from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
+
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-  calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate)),
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
+    calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate)),
 });
 
 export function ScheduleJobModalComponent({
-  bodyshop,
-  form,
-  existingAppointments,
-  lbrHrsData,
-  jobId,
-  calculateScheduleLoad,
-}) {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-  const [smartOptions, setSmartOptions] = useState([]);
+                                              bodyshop,
+                                              form,
+                                              existingAppointments,
+                                              lbrHrsData,
+                                              jobId,
+                                              calculateScheduleLoad,
+                                          }) {
+    const {t} = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [smartOptions, setSmartOptions] = useState([]);
 
-  const handleSmartScheduling = async () => {
-    setLoading(true);
-    try {
-      const response = await axios.post("/scheduling/job", {
-        jobId: jobId,
-      });
-      if (response.data) setSmartOptions(response.data);
-    } catch (error) {
-      console.log("error", error, error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleDateBlur = () => {
-    const values = form.getFieldsValue();
-
-    if (lbrHrsData) {
-      const totalHours =
-        lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs +
-        lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs;
-
-      if (values.start && !values.scheduled_completion)
-        form.setFieldsValue({
-          scheduled_completion: dayjs(values.start).businessDaysAdd(
-            totalHours / bodyshop.target_touchtime,
-            "day"
-          ),
-        });
-    }
-  };
-
-  return (
-    <Row gutter={[16, 16]}>
-      <Col span={12}>
-        <Space>
-          <Typography.Title level={3}>
-            {lbrHrsData?.jobs_by_pk?.ro_number}
-          </Typography.Title>
-          <Typography.Title level={4}>{`B/R Hrs:${
-            lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
-          }/${
-            lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
-          }`}</Typography.Title>
-        </Space>
-        <LayoutFormRow grow>
-          <Form.Item
-            name="start"
-            label={t("appointments.fields.time")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker onBlur={handleDateBlur} onlyFuture />
-          </Form.Item>
-          <Form.Item
-            name="scheduled_completion"
-            label={t("jobs.fields.scheduled_completion")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker onlyFuture />
-          </Form.Item>
-        </LayoutFormRow>
-
-        <Typography.Title level={4}>
-          {t("appointments.labels.smartscheduling")}
-        </Typography.Title>
-
-        {
-          // smartOptions.length > 0 && (
-          // <div>{t("appointments.labels.suggesteddates")}</div>
-          // )
+    const handleSmartScheduling = async () => {
+        setLoading(true);
+        try {
+            const response = await axios.post("/scheduling/job", {
+                jobId: jobId,
+            });
+            if (response.data) setSmartOptions(response.data);
+        } catch (error) {
+            console.log("error", error, error.message);
+        } finally {
+            setLoading(false);
         }
-        <Space wrap>
-          <Button onClick={handleSmartScheduling} loading={loading}>
-            {t("appointments.actions.calculate")}
-          </Button>
-          {smartOptions.map((d, idx) => (
-            <Button
-              className="imex-flex-row__margin"
-              key={idx}
-              onClick={() => {
-                const ssDate = dayjs(d);
-                if (ssDate.isBefore(dayjs())) {
-                  form.setFieldsValue({ start: dayjs() });
-                } else {
-                  form.setFieldsValue({ start: dayjs(d).add(8, "hour") });
+    };
+
+    const handleDateBlur = () => {
+        const values = form.getFieldsValue();
+
+        if (lbrHrsData) {
+            const totalHours =
+                lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs +
+                lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs;
+
+            if (values.start && !values.scheduled_completion)
+                form.setFieldsValue({
+                    scheduled_completion: dayjs(values.start).businessDaysAdd(
+                        totalHours / bodyshop.target_touchtime,
+                        "day"
+                    ),
+                });
+        }
+    };
+
+    return (
+        <Row gutter={[16, 16]}>
+            <Col span={12}>
+                <Space>
+                    <Typography.Title level={3}>
+                        {lbrHrsData?.jobs_by_pk?.ro_number}
+                    </Typography.Title>
+                    <Typography.Title level={4}>{`B/R Hrs:${
+                        lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
+                    }/${
+                        lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
+                    }`}</Typography.Title>
+                </Space>
+                <LayoutFormRow grow>
+                    <Form.Item
+                        name="start"
+                        label={t("appointments.fields.time")}
+                        rules={[
+                            {
+                                required: true,
+                                //message: t("general.validation.required"),
+                            },
+                        ]}
+                    >
+                        <DateTimePicker onBlur={handleDateBlur} onlyFuture/>
+                    </Form.Item>
+                    <Form.Item
+                        name="scheduled_completion"
+                        label={t("jobs.fields.scheduled_completion")}
+                        rules={[
+                            {
+                                required: true,
+                                //message: t("general.validation.required"),
+                            },
+                        ]}
+                    >
+                        <DateTimePicker onlyFuture/>
+                    </Form.Item>
+                </LayoutFormRow>
+
+                <Typography.Title level={4}>
+                    {t("appointments.labels.smartscheduling")}
+                </Typography.Title>
+
+                {
+                    // smartOptions.length > 0 && (
+                    // <div>{t("appointments.labels.suggesteddates")}</div>
+                    // )
                 }
-                handleDateBlur();
-              }}
-            >
-              <DateFormatter includeDay>{d}</DateFormatter>
-            </Button>
-          ))}
-        </Space>
+                <Space wrap>
+                    <Button onClick={handleSmartScheduling} loading={loading}>
+                        {t("appointments.actions.calculate")}
+                    </Button>
+                    {smartOptions.map((d, idx) => (
+                        <Button
+                            className="imex-flex-row__margin"
+                            key={idx}
+                            onClick={() => {
+                                const ssDate = dayjs(d);
+                                if (ssDate.isBefore(dayjs())) {
+                                    form.setFieldsValue({start: dayjs()});
+                                } else {
+                                    form.setFieldsValue({start: dayjs(d).add(8, "hour")});
+                                }
+                                handleDateBlur();
+                            }}
+                        >
+                            <DateFormatter includeDay>{d}</DateFormatter>
+                        </Button>
+                    ))}
+                </Space>
 
-        <LayoutFormRow grow>
-          <Form.Item
-            name="notifyCustomer"
-            valuePropName="checked"
-            label={t("jobs.labels.appointmentconfirmation")}
-          >
-            <Switch />
-          </Form.Item>
+                <LayoutFormRow grow>
+                    <Form.Item
+                        name="notifyCustomer"
+                        valuePropName="checked"
+                        label={t("jobs.labels.appointmentconfirmation")}
+                    >
+                        <Switch/>
+                    </Form.Item>
 
-          <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
-            <EmailInput disabled={!form.getFieldValue("notifyCustomer")} />
-          </Form.Item>
-        </LayoutFormRow>
-        <LayoutFormRow grow>
-          <Form.Item name="color" label={t("appointments.fields.color")}>
-            <Select allowClear>
-              {bodyshop.appt_colors &&
-                bodyshop.appt_colors.map((color) => (
-                  <Select.Option
-                    style={{ color: color.color.hex }}
-                    key={color.color.hex}
-                    value={color.color.hex}
-                  >
-                    {color.label}
-                  </Select.Option>
-                ))}
-            </Select>
-          </Form.Item>
-          <Form.Item
-            name={"alt_transport"}
-            label={t("jobs.fields.alt_transport")}
-          >
-            <Select allowClear>
-              {bodyshop.appt_alt_transport &&
-                bodyshop.appt_alt_transport.map((alt) => (
-                  <Select.Option key={alt}>{alt}</Select.Option>
-                ))}
-            </Select>
-          </Form.Item>
-          <Form.Item name={"note"} label={t("appointments.fields.note")}>
-            <Input />
-          </Form.Item>
-        </LayoutFormRow>
-        {t("appointments.labels.history")}
-        <ScheduleExistingAppointmentsList
-          existingAppointments={existingAppointments}
-        />
-      </Col>
-      <Col span={12}>
-        <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
-          {() => {
-            const values = form.getFieldsValue();
-            if (values.start) {
-              calculateScheduleLoad(dayjs(values.start).add(3, "day"));
-            }
-            return (
-              <div className="schedule-job-modal">
-                <ScheduleDayViewContainer day={values.start} />
-              </div>
-            );
-          }}
-        </Form.Item>
-      </Col>
-    </Row>
-  );
+                    <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
+                        <EmailInput disabled={!form.getFieldValue("notifyCustomer")}/>
+                    </Form.Item>
+                </LayoutFormRow>
+                <LayoutFormRow grow>
+                    <Form.Item name="color" label={t("appointments.fields.color")}>
+                        <Select allowClear>
+                            {bodyshop.appt_colors &&
+                                bodyshop.appt_colors.map((color) => (
+                                    <Select.Option
+                                        style={{color: color.color.hex}}
+                                        key={color.color.hex}
+                                        value={color.color.hex}
+                                    >
+                                        {color.label}
+                                    </Select.Option>
+                                ))}
+                        </Select>
+                    </Form.Item>
+                    <Form.Item
+                        name={"alt_transport"}
+                        label={t("jobs.fields.alt_transport")}
+                    >
+                        <Select allowClear>
+                            {bodyshop.appt_alt_transport &&
+                                bodyshop.appt_alt_transport.map((alt) => (
+                                    <Select.Option key={alt}>{alt}</Select.Option>
+                                ))}
+                        </Select>
+                    </Form.Item>
+                    <Form.Item name={"note"} label={t("appointments.fields.note")}>
+                        <Input/>
+                    </Form.Item>
+                </LayoutFormRow>
+                {t("appointments.labels.history")}
+                <ScheduleExistingAppointmentsList
+                    existingAppointments={existingAppointments}
+                />
+            </Col>
+            <Col span={12}>
+                <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
+                    {() => {
+                        const values = form.getFieldsValue();
+                        if (values.start) {
+                            calculateScheduleLoad(dayjs(values.start).add(3, "day"));
+                        }
+                        return (
+                            <div className="schedule-job-modal">
+                                <ScheduleDayViewContainer day={values.start}/>
+                            </div>
+                        );
+                    }}
+                </Form.Item>
+            </Col>
+        </Row>
+    );
 }
+
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(ScheduleJobModalComponent);