Delete non-converted job IO-589

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,19 +1,19 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useApolloClient } from "@apollo/react-hooks";
-import { Button, Dropdown, Menu, Popconfirm } from "antd";
+import { useApolloClient, useMutation } from "@apollo/react-hooks";
+import { Button, Dropdown, Menu, notification, Popconfirm } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { DELETE_JOB } from "../../graphql/jobs.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
@@ -43,7 +43,7 @@ export function JobsDetailHeaderActions({
   const { t } = useTranslation();
   const client = useApolloClient();
   const history = useHistory();
-
+  const [deleteJob] = useMutation(DELETE_JOB);
   const jobInProduction = useMemo(() => {
     return bodyshop.md_ro_statuses.production_statuses.includes(job.status);
   }, [job, bodyshop.md_ro_statuses.production_statuses]);
@@ -252,6 +252,37 @@ export function JobsDetailHeaderActions({
       >
         {t("jobs.labels.jobcosting")}
       </Menu.Item>
+      {job && !job.converted && (
+        <Menu.Item>
+          <Popconfirm
+            title={t("jobs.labels.deleteconfirm")}
+            okText={t("general.labels.yes")}
+            cancelText={t("general.labels.no")}
+            onClick={(e) => e.stopPropagation()}
+            onConfirm={async () => {
+              //delete the job.
+              const result = await deleteJob({ variables: { id: job.id } });
+
+              if (!!!result.errors) {
+                notification["success"]({
+                  message: t("jobs.successes.delete"),
+                });
+                //go back to jobs list.
+                history.push(`/manage/`);
+              } else {
+                notification["error"]({
+                  message: t("jobs.errors.deleted", {
+                    error: JSON.stringify(result.errors),
+                  }),
+                });
+              }
+            }}
+            getPopupContainer={(trigger) => trigger.parentNode}
+          >
+            {t("menus.jobsactions.deletejob")}
+          </Popconfirm>
+        </Menu.Item>
+      )}
     </Menu>
   );
   return (