Added colors to appointments BOD-393

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

@@ -0,0 +1,55 @@
+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 ScheduleEventColor({ bodyshop, event }) {
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const { t } = useTranslation();
+
+  const onClick = async ({ key }) => {
+    const result = await updateAppointment({
+      variables: { appid: event.id, app: { color: 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.color]} onClick={onClick}>
+      {bodyshop.appt_colors &&
+        bodyshop.appt_colors.map((color) => (
+          <Menu.Item style={{ color: color.color.hex }} key={color.color.hex}>
+            {color.label}
+          </Menu.Item>
+        ))}
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu}>
+      <a href=" #" onClick={(e) => e.preventDefault()}>
+        <DownOutlined />
+      </a>
+    </Dropdown>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);

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 ScheduleEventColor from "./schedule-event.color.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
@@ -34,6 +35,7 @@ export function ScheduleEventComponent({
               (event.job && event.job.v_make_desc) || ""
             } ${(event.job && event.job.v_model_desc) || ""}`}
           </span>
+          <ScheduleEventColor event={event} />
         </div>
       )}