Added alt transport to appointments BOD-392

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js

@@ -123,7 +123,10 @@ export function ScheduleCalendarHeaderComponent({
         {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
       </Popover>
       <Statistic
-        value={((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100}
+        value={(
+          ((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) *
+          100
+        ).toFixed(1)}
         suffix={"%"}
         precision={0}
         valueStyle={{

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { useMutation } from "react-apollo";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { Dropdown, Menu, notification } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ScheduleAtChange({ bodyshop, event }) {
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const { t } = useTranslation();
+
+  const onClick = async ({ key }) => {
+    const result = await updateAppointment({
+      variables: { appid: event.id, app: { alt_transport: key } },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("appointments.successes.saved") });
+    } else {
+      notification["error"]({
+        message: t("appointments.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+  };
+  const menu = (
+    <Menu selectedKeys={[event.alt_transport]} onClick={onClick}>
+      {bodyshop.appt_alt_transport &&
+        bodyshop.appt_alt_transport.map((alt) => (
+          <Menu.Item key={alt}>{alt}</Menu.Item>
+        ))}
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu}>
+      <a href=" #" onClick={(e) => e.preventDefault()}>
+        <DownOutlined />
+      </a>
+    </Dropdown>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ScheduleAtChange);

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

@@ -7,6 +7,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import DataLabel from "../data-label/data-label.component";
+import ScheduleAtChange from "./schedule-event.at.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 
 const mapDispatchToProps = (dispatch) => ({
@@ -63,6 +64,10 @@ export function ScheduleEventComponent({
               {(event.job && event.job.ownr_ph1) || ""}
             </PhoneFormatter>
           </DataLabel>
+          <DataLabel label={t("appointments.fields.alt_transport")}>
+            {event.alt_transport || ""}
+            <ScheduleAtChange event={event} />
+          </DataLabel>
         </div>
       ) : null}
 
@@ -129,6 +134,9 @@ export function ScheduleEventComponent({
           (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
         })`}
       </div>
+      {event.alt_transport && (
+        <div style={{ margin: ".1rem" }}>{event.alt_transport}</div>
+      )}
     </div>
   ) : (
     <div>

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

@@ -68,7 +68,7 @@ export function ScheduleJobModalComponent({
       <Col span={12}>
         <LayoutFormRow grow>
           <Form.Item
-            name={"start"}
+            name="start"
             label={t("appointments.fields.time")}
             rules={[
               {
@@ -99,7 +99,7 @@ export function ScheduleJobModalComponent({
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item
-            name={"scheduled_completion"}
+            name="scheduled_completion"
             label={t("jobs.fields.scheduled_completion")}
             rules={[
               {
@@ -111,16 +111,16 @@ export function ScheduleJobModalComponent({
             <DateTimePicker />
           </Form.Item>
           <Form.Item
-            name={"notifyCustomer"}
+            name="notifyCustomer"
             valuePropName="checked"
             label={t("jobs.labels.appointmentconfirmation")}
           >
             <Switch />
           </Form.Item>
-          <Form.Item name={"email"} label={t("jobs.fields.ownr_ea")}>
+          <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
             <EmailInput />
           </Form.Item>
-          <Form.Item name={"color"} label={t("appointments.fields.color")}>
+          <Form.Item name="color" label={t("appointments.fields.color")}>
             <Select>
               {bodyshop.appt_colors &&
                 bodyshop.appt_colors.map((color) => (
@@ -134,6 +134,17 @@ export function ScheduleJobModalComponent({
                 ))}
             </Select>
           </Form.Item>
+          <Form.Item
+            name={"alt_transport"}
+            label={t("appointments.fields.alt_transport")}
+          >
+            <Select>
+              {bodyshop.appt_alt_transport &&
+                bodyshop.appt_alt_transport.map((alt) => (
+                  <Select.Option key={alt}>{alt}</Select.Option>
+                ))}
+            </Select>
+          </Form.Item>
         </LayoutFormRow>
         {t("appointments.labels.history")}
         <ScheduleExistingAppointmentsList

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

@@ -93,6 +93,7 @@ export function ScheduleJobModalContainer({
           start: moment(values.start),
           end: moment(values.start).add(bodyshop.appt_length || 60, "minutes"),
           color: values.color,
+          alt_transport: values.alt_transport,
         },
       },
     });

client/src/components/shop-info/shop-info.scheduling.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Col, Form, Input, InputNumber, Row } from "antd";
+import { Button, Col, Form, Input, InputNumber, Row, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
@@ -81,7 +81,18 @@ export default function ShopInfoSchedulingComponent({ form }) {
               );
             }}
           </Form.List>
-
+          <Form.Item
+            name={["appt_alt_transport"]}
+            label={t("bodyshop.fields.appt_alt_transport")}
+            rules={[
+              {
+                message: t("general.validation.required"),
+                type: "array",
+              },
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>
           <Form.List name={["ssbuckets"]}>
             {(fields, { add, remove, move }) => {
               return (