Added status state machine BOD-251

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -0,0 +1,77 @@
+import { DownCircleFilled } from "@ant-design/icons";
+import { Button, Dropdown, Menu, notification } from "antd";
+import React, { useState, useEffect } from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobsChangeStatus({ job, bodyshop }) {
+  const { t } = useTranslation();
+
+  const [availableStatuses, setAvailableStatuses] = useState([]);
+  const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
+  const updateJobStatus = (status) => {
+    mutationUpdateJobstatus({
+      variables: { jobId: job.id, status: status },
+    })
+      .then((r) => {
+        notification["success"]({ message: t("jobs.successes.save") });
+        // refetch();
+      })
+      .catch((error) => {
+        notification["error"]({ message: t("jobs.errors.saving") });
+      });
+  };
+  useEffect(() => {
+    //Figure out what scenario were in, populate accodingly
+    if (job && bodyshop) {
+      if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status))
+        setAvailableStatuses(bodyshop.md_ro_statuses.pre_production_statuses);
+      else if (bodyshop.md_ro_statuses.production_statuses.includes(job.status))
+        setAvailableStatuses(bodyshop.md_ro_statuses.production_statuses);
+      else if (
+        bodyshop.md_ro_statuses.post_production_statuses.includes(job.status)
+      )
+        setAvailableStatuses(bodyshop.md_ro_statuses.post_production_statuses);
+      else {
+        setAvailableStatuses(bodyshop.statuses);
+      }
+    }
+  }, [job, setAvailableStatuses, bodyshop]);
+
+  const statusmenu = (
+    <Menu
+      onClick={(e) => {
+        updateJobStatus(e.key);
+      }}
+    >
+      {availableStatuses.map((item) => (
+        <Menu.Item key={item}>{item}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Dropdown
+      className="imex-flex-row__margin"
+      overlay={statusmenu}
+      trigger={["click"]}
+      key="changestatus"
+    >
+      <Button>
+        {t("jobs.actions.changestatus")} <DownCircleFilled />
+      </Button>
+    </Dropdown>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(JobsChangeStatus);