Production status change IO-727

client/src/components/production-list-columns/production-list-columns.status.component.jsx

@@ -1,11 +1,11 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu } from "antd";
+import { Dropdown, Menu, Spin } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -13,21 +13,22 @@ const mapStateToProps = createStructuredSelector({
 
 export function ProductionListColumnStatus({ record, bodyshop }) {
   const [updateJob] = useMutation(UPDATE_JOB);
+  const [loading, setLoading] = useState(false);
 
-  const handleSetStatus = (e) => {
+  const handleSetStatus = async (e) => {
     logImEXEvent("production_change_status");
-    e.stopPropagation();
+    //    e.stopPropagation();
+    setLoading(true);
     const { key } = e;
-    updateJob({
+    await updateJob({
       variables: {
         jobId: record.id,
         job: {
           status: key,
         },
       },
-    }).then(() => {
-      if (record.refetch) record.refetch();
     });
+    setLoading(false);
   };
 
   return (
@@ -42,9 +43,12 @@ export function ProductionListColumnStatus({ record, bodyshop }) {
           ))}
         </Menu>
       }
-      trigger={["contextMenu"]}
+      trigger={["click"]}
     >
-      <div style={{ width: "100%", height: "19px" }}>{record.status}</div>
+      <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
+        {record.status}
+        {loading && <Spin size="small" />}
+      </div>
     </Dropdown>
   );
 }