BOD-21 Bug fixes for production columns.

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addtoproduction.util.jsx

@@ -0,0 +1,33 @@
+import { notification } from "antd";
+import i18n from "i18next";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+
+export default function AddToProduction(
+  apolloClient,
+  jobId,
+  completionCallback
+) {
+  //get a list of all fields on the job
+  apolloClient
+    .mutate({
+      mutation: UPDATE_JOB,
+      variables: { jobId: jobId, job: { inproduction: true } },
+    })
+    .then((res) => {
+      notification["success"]({
+        message: i18n.t("jobs.successes.addedtoproduction"),
+      });
+      if (completionCallback) completionCallback();
+    })
+    .catch((error) => {
+      notification["errors"]({
+        message: i18n.t("jobs.errors.addingtoproduction", {
+          error: JSON.stringify(error),
+        }),
+      });
+    });
+
+  //insert the new job. call the callback with the returned ID when done.
+
+  return;
+}

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

@@ -1,15 +1,15 @@
-import React from "react";
-import { Menu, Dropdown, Button, Popconfirm } from "antd";
-import { useTranslation } from "react-i18next";
 import { DownCircleFilled } from "@ant-design/icons";
-import { Link } from "react-router-dom";
-import DuplicateJob from "./jobs-detail-header-actions.duplicate";
 import { useApolloClient } from "@apollo/react-hooks";
-
+import { Button, Dropdown, Menu, Popconfirm } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { Link, useHistory } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useHistory } from "react-router-dom";
+import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
+import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -23,22 +23,27 @@ export function JobsDetailHeaderActions({ job, bodyshop }) {
   const client = useApolloClient();
   const history = useHistory();
   const statusmenu = (
-    <Menu key="popovermenu">
-      <Menu.Item key="cccontract">
+    <Menu key='popovermenu'>
+      <Menu.Item key='cccontract'>
         <Link
           to={{
             pathname: "/manage/courtesycars/contracts/new",
             state: { jobId: job.id },
-          }}
-        >
+          }}>
           {t("menus.jobsactions.newcccontract")}
         </Link>
       </Menu.Item>
-      <Menu.Item key="duplicatejob">
+      <Menu.Item
+        key='addtoproduction'
+        disabled={!!!job.converted}
+        onClick={() => AddToProduction(client, job.id)}>
+        {t("jobs.actions.addtoproduction")}
+      </Menu.Item>
+      <Menu.Item key='duplicatejob'>
         <Popconfirm
           title={t("jobs.labels.duplicateconfirm")}
-          okText="Yes"
-          cancelText="No"
+          okText='Yes'
+          cancelText='No'
           onClick={(e) => e.stopPropagation()}
           onConfirm={() =>
             DuplicateJob(
@@ -50,15 +55,14 @@ export function JobsDetailHeaderActions({ job, bodyshop }) {
               }
             )
           }
-          getPopupContainer={(trigger) => trigger.parentNode}
-        >
+          getPopupContainer={(trigger) => trigger.parentNode}>
           {t("menus.jobsactions.duplicate")}
         </Popconfirm>
       </Menu.Item>
     </Menu>
   );
   return (
-    <Dropdown overlay={statusmenu} key="changestatus">
+    <Dropdown overlay={statusmenu} key='changestatus'>
       <Button>
         {t("general.labels.actions")} <DownCircleFilled />
       </Button>

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

@@ -1,44 +1,41 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Board from "react-trello";
 import { Card } from "antd";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
 
-export default function ProductionBoardKanbanComponent({
+export function ProductionBoardKanbanComponent({
   loading,
   data,
   columnState,
+  bodyshop,
 }) {
   console.log("data", data);
-  const data2 = {
-    lanes: [
-      {
-        id: "lane1",
-        title: "Planned Tasks",
-        label: "2/2",
-        cards: [
-          {
-            id: "Card1",
-            title: "Write Blog",
-            description: "Can AI make memes",
-            label: "30 mins",
-          },
-          {
-            id: "Card2",
-            title: "Pay Rent",
-            description: "Transfer via NEFT",
-            label: "5 mins",
-            metadata: { sha: "be312a1" },
-          },
-        ],
-      },
-      {
-        id: "lane2",
-        title: "Completed",
-        label: "0/0",
+
+  const [cards, setCards] = useState([]);
+
+  useEffect(() => {
+    const cols = bodyshop.md_ro_statuses.open_statuses.map((s) => {
+      return {
+        id: s,
+        title: s,
         cards: [],
-      },
-    ],
-  };
+      };
+    });
+    if (data)
+      data.forEach((d) =>
+        cols
+          .find((c) => c.id === d.status)
+          .cards.push({ id: d.id, title: d.est_number, description: d.ownr_fn })
+      );
+
+    setCards(cols);
+  }, [data, bodyshop.md_ro_statuses.open_statuses, setCards]);
 
   const kanbanCard = (card) => <Card>{card.title}</Card>;
 
@@ -46,7 +43,8 @@ export default function ProductionBoardKanbanComponent({
 
   return (
     <div>
-      <Board data={data2} components={{ Card: kanbanCard }} />
+      <Board data={{ lanes: cards }} components={{ Card: kanbanCard }} />
     </div>
   );
 }
+export default connect(mapStateToProps, null)(ProductionBoardKanbanComponent);

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

@@ -17,7 +17,8 @@ export default function ProductionListColumnAlert({ record }) {
         job: {
           production_vars: {
             ...record.production_vars,
-            alert: !record.production_vars.alert,
+            alert:
+              (record.production_vars && !record.production_vars.alert) || true,
           },
         },
       },

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

@@ -155,6 +155,7 @@ export default [
     title: i18n.t("production.labels.alert"),
     dataIndex: "alert",
     key: "alert",
+    width: "4%",
     render: (text, record) => <ProductionListColumnAlert record={record} />,
   },
   {
@@ -168,6 +169,7 @@ export default [
     title: i18n.t("production.labels.cycletime"),
     dataIndex: "ct",
     key: "ct",
+    width: "3%",
     render: (text, record) => {
       let ct = 0;
       if (!!record.actual_in) {
@@ -183,8 +185,10 @@ export default [
     title: i18n.t("production.labels.bodypriority"),
     dataIndex: "bodypriority",
     key: "bodypriority",
+    width: "3%",
     sorter: (a, b) =>
-      a.production_vars.bodypriority - b.production_vars.bodypriority,
+      ((a.production_vars && a.production_vars.bodypriority) || 11) -
+      ((b.production_vars && b.production_vars.bodypriority) || 11),
     render: (text, record) => (
       <ProductionListColumnBodyPriority record={record} />
     ),
@@ -193,8 +197,10 @@ export default [
     title: i18n.t("production.labels.paintpriority"),
     dataIndex: "paintpriority",
     key: "paintpriority",
+    width: "3%",
     sorter: (a, b) =>
-      a.production_vars.paintpriority - b.production_vars.paintpriority,
+      ((a.production_vars && a.production_vars.paintpriority) || 11) -
+      ((b.production_vars && b.production_vars.paintpriority) || 11),
     render: (text, record) => (
       <ProductionListColumnPaintPriority record={record} />
     ),

client/src/components/production-list-table/production-list-table.styles.scss

@@ -1,5 +1,6 @@
 .production-alert {
   animation: alertBlinker 1s linear infinite;
+  color: blue;
 }
 @keyframes alertBlinker {
   50% {