IO-744 Voiding Note

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

@@ -1,22 +1,28 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
 import { Button, Dropdown, Menu, notification, Popconfirm } from "antd";
+import moment from "moment";
 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, UPDATE_JOB } from "../../graphql/jobs.queries";
+import { DELETE_JOB, UPDATE_JOB, VOID_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 {
+  selectBodyshop,
+  selectCurrentUser,
+} 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,
+  currentUser: selectCurrentUser,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -35,6 +41,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobsDetailHeaderActions({
   job,
   bodyshop,
+  currentUser,
   refetch,
   setScheduleContext,
   setBillEnterContext,
@@ -48,6 +55,7 @@ export function JobsDetailHeaderActions({
   const history = useHistory();
   const [deleteJob] = useMutation(DELETE_JOB);
   const [updateJob] = useMutation(UPDATE_JOB);
+  const [voidJob] = useMutation(VOID_JOB);
   const jobInProduction = useMemo(() => {
     return bodyshop.md_ro_statuses.production_statuses.includes(job.status);
   }, [job, bodyshop.md_ro_statuses.production_statuses]);
@@ -338,13 +346,24 @@ export function JobsDetailHeaderActions({
             onClick={(e) => e.stopPropagation()}
             onConfirm={async () => {
               //delete the job.
-              const result = await updateJob({
+              const result = await voidJob({
                 variables: {
                   jobId: job.id,
                   job: {
                     status: bodyshop.md_ro_statuses.default_void,
                     voided: true,
                   },
+                  note: [
+                    {
+                      jobid: job.id,
+                      created_by: currentUser.email,
+                      audit: true,
+                      text: t("jobs.labels.voidnote", {
+                        date: moment().format("MM/DD/yyy"),
+                        time: moment().format("hh:mm a"),
+                      }),
+                    },
+                  ],
                 },
               });
 

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -9,16 +9,23 @@ import { Button, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+});
+
 const mapDispatchToProps = (dispatch) => ({
   setNoteUpsertContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "noteUpsert" })),
 });
 
 export function JobNotesComponent({
+  jobRO,
   loading,
   data,
   refetch,
@@ -78,13 +85,13 @@ export function JobNotesComponent({
         <span>
           <Button
             loading={deleteLoading}
-            disabled={record.audit}
+            disabled={record.audit || jobRO}
             onClick={() => handleNoteDelete(record.id)}
           >
             <DeleteFilled />
           </Button>
           <Button
-            disabled={record.audit}
+            disabled={record.audit || jobRO}
             onClick={() => {
               setNoteUpsertContext({
                 actions: { refetch: refetch },