Added alt transport to appointments BOD-392

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>