Merged in feature/IO-3185-Job-Drawer-Suspend-Job (pull request #2223)

IO-3185 Job Drawer Suspend Job

Approved-by: Dave Richer

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -1,17 +1,21 @@
-import { PrinterFilled } from "@ant-design/icons";
+import { PauseCircleOutlined, PlayCircleOutlined, PrinterFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import { Button, Card, Col, Divider, Drawer, Grid, Row, Space } from "antd";
 import queryString from "query-string";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 import AlertComponent from "../alert/alert.component";
 import JobSyncButton from "../job-sync-button/job-sync-button.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
 import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
@@ -21,15 +25,21 @@ import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.compo
 import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
 import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
-import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
+  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" })),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 const span = {
@@ -38,8 +48,9 @@ const span = {
   xxl: { span: 8 }
 };
 
-export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
+export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTrail }) {
   const { scenarioNotificationsOn } = useSocket();
+  const [updateJob] = useMutation(UPDATE_JOB);
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
     .slice(-1)[0];
@@ -91,7 +102,29 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
           extra={
             <Space wrap>
               <JobSyncButton job={data.jobs_by_pk} />
-
+              <Button
+                onClick={() => {
+                  logImEXEvent("production_toggle_alert");
+                  updateJob({
+                    variables: {
+                      jobId: data.jobs_by_pk.id,
+                      job: {
+                        suspended: !data.jobs_by_pk.suspended
+                      }
+                    }
+                  });
+                  insertAuditTrail({
+                    jobid: data.jobs_by_pk.id,
+                    operation: AuditTrailMapping.jobsuspend(
+                      data.jobs_by_pk.suspended ? !data.jobs_by_pk.suspended : true
+                    ),
+                    type: "jobsuspend"
+                  });
+                }}
+                icon={data.jobs_by_pk.suspended ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
+              >
+                {data.jobs_by_pk.suspended ? t("production.actions.unsuspend") : t("production.actions.suspend")}
+              </Button>
               <Button
                 onClick={() => {
                   setPrintCenterContext({
@@ -103,8 +136,8 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
                     }
                   });
                 }}
+                icon={<PrinterFilled />}
               >
-                <PrinterFilled />
                 {t("jobs.actions.printCenter")}
               </Button>
               <Link to={`/manage/jobs/${data.jobs_by_pk.id}?tab=repairdata`}>

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -1,17 +1,20 @@
-import { PrinterFilled } from "@ant-design/icons";
+import { PauseCircleOutlined, PlayCircleOutlined, PrinterFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
-import { Button, Descriptions, Drawer, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
+import { useMutation, useQuery } from "@apollo/client";
+import { Button, Descriptions, Drawer, Space } from "antd";
 import queryString from "query-string";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
+import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
@@ -24,22 +27,29 @@ import JobDetailCardsPartsComponent from "../job-detail-cards/job-detail-cards.p
 import CardTemplate from "../job-detail-cards/job-detail-cards.template.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add-button.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
-import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
+  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" })),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ProductionListDetail);
 
-export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, technician }) {
+export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, technician, insertAuditTrail }) {
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { selected } = search;
@@ -58,6 +68,7 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+  const [updateJob] = useMutation(UPDATE_JOB);
 
   return (
     <Drawer
@@ -72,6 +83,29 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
           extra={
             <Space wrap>
               {!technician ? <ProductionRemoveButton jobId={theJob.id} /> : null}
+              {!technician && (
+                <Button
+                  onClick={() => {
+                    logImEXEvent("production_toggle_alert");
+                    updateJob({
+                      variables: {
+                        jobId: theJob.id,
+                        job: {
+                          suspended: !theJob.suspended
+                        }
+                      }
+                    });
+                    insertAuditTrail({
+                      jobid: theJob.id,
+                      operation: AuditTrailMapping.jobsuspend(theJob.suspended ? !theJob.suspended : true),
+                      type: "jobsuspend"
+                    });
+                  }}
+                  icon={theJob.suspended ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
+                >
+                  {theJob.suspended ? t("production.actions.unsuspend") : t("production.actions.suspend")}
+                </Button>
+              )}
               <Button
                 onClick={() => {
                   setPrintCenterContext({
@@ -83,8 +117,8 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
                     }
                   });
                 }}
+                icon={<PrinterFilled />}
               >
-                <PrinterFilled />
                 {t("jobs.actions.printCenter")}
               </Button>
               {!technician ? <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} /> : null}