IO-1613 add suspended days to jobs.

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

@@ -89,6 +89,19 @@ export function JobsDetailHeaderActions({
     });
   };
 
+  const handleSuspend = (e) => {
+    logImEXEvent("production_toggle_alert");
+    //e.stopPropagation();
+    updateJob({
+      variables: {
+        jobId: job.id,
+        job: {
+          suspended: !job.suspended,
+        },
+      },
+    });
+  };
+
   const statusmenu = (
     <Menu key="popovermenu">
       <Menu.Item
@@ -199,7 +212,11 @@ export function JobsDetailHeaderActions({
           {t("jobs.actions.addtoproduction")}
         </Menu.Item>
       )}
-
+      <Menu.Item key="togglesuspend" onClick={handleSuspend}>
+        {job.suspended
+          ? t("production.actions.unsuspend")
+          : t("production.actions.suspend")}
+      </Menu.Item>
       <Menu.Item key="toggleAlert" onClick={handleAlertToggle}>
         {job.production_vars && job.production_vars.alert
           ? t("production.labels.alertoff")

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

@@ -1,5 +1,9 @@
 import { Card, Col, Row, Space, Tag } from "antd";
-import { WarningFilled, ExclamationCircleFilled } from "@ant-design/icons";
+import {
+  WarningFilled,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -68,6 +72,9 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                     {t("jobs.labels.inproduction")}
                   </Tag>
                 )}
+                {job.suspended && (
+                  <PauseCircleOutlined style={{ color: "orangered" }} />
+                )}
                 {job.production_vars && job.production_vars.alert ? (
                   <ExclamationCircleFilled className="production-alert" />
                 ) : null}

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

@@ -1,4 +1,8 @@
-import { SyncOutlined, ExclamationCircleFilled } from "@ant-design/icons";
+import {
+  SyncOutlined,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table } from "antd";
 import queryString from "query-string";
@@ -111,6 +115,9 @@ export function JobsList({ bodyshop }) {
             {record.production_vars && record.production_vars.alert ? (
               <ExclamationCircleFilled className="production-alert" />
             ) : null}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
           </Space>
         </Link>
       ),

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -1,4 +1,8 @@
-import { CalendarOutlined, EyeFilled } from "@ant-design/icons";
+import {
+  CalendarOutlined,
+  EyeFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
 import { Card, Col, Row, Space } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -40,6 +44,9 @@ export default function ProductionBoardCard(
       title={
         <Space>
           <ProductionAlert record={card} key="alert" />
+          {card.suspended && (
+            <PauseCircleOutlined style={{ color: "orangered" }} />
+          )}
           <span style={{ fontWeight: "bolder" }}>
             {card.ro_number || t("general.labels.na")}
           </span>

client/src/components/production-list-columns/production-list-columns.data.js

@@ -1,3 +1,5 @@
+import { PauseCircleOutlined } from "@ant-design/icons";
+import { Space } from "antd";
 import i18n from "i18next";
 import moment from "moment";
 import React from "react";
@@ -43,9 +45,19 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         technician ? (
           <Link to={`/tech/joblookup?selected=${record.id}`}>
             {record.ro_number}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
           </Link>
         ) : (
-          <Link to={`/manage/jobs/${record.id}`}>{record.ro_number}</Link>
+          <Link to={`/manage/jobs/${record.id}`}>
+            <Space>
+              {record.ro_number}
+              {record.suspended && (
+                <PauseCircleOutlined style={{ color: "orangered" }} />
+              )}
+            </Space>
+          </Link>
         ),
     },
     {

client/src/components/schedule-day-view/schedule-day-view.container.jsx

@@ -5,6 +5,7 @@ import { QUERY_APPOINTMENT_BY_DATE } from "../../graphql/appointments.queries";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import moment from "moment";
 import { useTranslation } from "react-i18next";
+
 export default function ScheduleDayViewContainer({ day }) {
   const { loading, error, data } = useQuery(QUERY_APPOINTMENT_BY_DATE, {
     variables: {

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -188,10 +188,10 @@ export function ScheduleJobModalComponent({
         />
       </Col>
       <Col span={12}>
-        <Form.Item shouldUpdate>
+        <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
           {() => {
+            console.log("render");
             const values = form.getFieldsValue();
-
             return (
               <div className="schedule-job-modal">
                 <ScheduleDayViewContainer day={values.start} />