Further updates on production board + AAMVA decoding built into project BOD-75

client/src/components/contract-form/contract-form.component.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, DatePicker, InputNumber, Button } from "antd";
-import aamva from "aamva";
+import aamva from "../../utils/aamva";
 import InputPhone from "../form-items-formatted/phone-form-item.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 
@@ -12,251 +12,228 @@ export default function ContractFormComponent() {
     <div>
       <div style={{ background: "#f00" }}>
         TEST AREA
-        <Input value={state} onChange={e => setState(e.target.value)} />
+        <Input.TextArea
+          //value={state}
+          rows={3}
+          onPressEnter={(e) => {
+            console.log("e", e);
+            setState(e.target.value);
+          }}
+        />
         <Button
           onClick={() => {
-            console.log("state", state);
-            //let data = state;
-
-            var data =
-              "%FLDELRAY BEACH^DOE$JOHN$^4818 S FEDERAL BLVD^           ?            ;6360100462172082009=2101198299090=?            #! 33435      I               1600                                   ECCECC00000?";
-            data = data.replace(/\n/, "");
-            // replace spaces with regular space
-            data = data.replace(/\s/g, " ");
-            var track = data.match(/(.*?\?)(.*?\?)(.*?\?)/);
-            console.log("data", data);
-            console.log("track", track);
-            const a = aamva.stripe(data);
-            console.log(JSON.stringify(a));
-          }}
-        >
+            var res = aamva.parse(state);
+            console.log("Entire object", res);
+          }}>
           Decode
         </Button>
       </div>
 
       <Form.Item
         label={t("contracts.fields.status")}
-        name="status"
+        name='status'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <ContractStatusSelector />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.start")}
-        name="start"
+        name='start'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.scheduledreturn")}
-        name="scheduledreturn"
+        name='scheduledreturn'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
-      <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
+      <Form.Item label={t("contracts.fields.actualreturn")} name='actualreturn'>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.kmstart")}
-        name="kmstart"
+        name='kmstart'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <InputNumber />
       </Form.Item>
-      <Form.Item label={t("contracts.fields.kmend")} name="kmend">
+      <Form.Item label={t("contracts.fields.kmend")} name='kmend'>
         <InputNumber />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dlnumber")}
-        name="driver_dlnumber"
+        name='driver_dlnumber'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dlexpiry")}
-        name="driver_dlexpiry"
+        name='driver_dlexpiry'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dlst")}
-        name="driver_dlst"
+        name='driver_dlst'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_fn")}
-        name="driver_fn"
+        name='driver_fn'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_ln")}
-        name="driver_ln"
+        name='driver_ln'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_addr1")}
-        name="driver_addr1"
+        name='driver_addr1'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
-      <Form.Item label={t("contracts.fields.driver_addr2")} name="driver_addr2">
+      <Form.Item label={t("contracts.fields.driver_addr2")} name='driver_addr2'>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_city")}
-        name="driver_city"
+        name='driver_city'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_state")}
-        name="driver_state"
+        name='driver_state'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_zip")}
-        name="driver_zip"
+        name='driver_zip'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_ph1")}
-        name="driver_ph1"
+        name='driver_ph1'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <InputPhone />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dob")}
-        name="driver_dob"
+        name='driver_dob'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.cc_num")}
-        name="cc_num"
+        name='cc_num'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.cc_expiry")}
-        name="cc_expiry"
+        name='cc_expiry'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.cc_cardholder")}
-        name="cc_cardholder"
+        name='cc_cardholder'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
     </div>

client/src/components/indefinite-loading/indefinite-loading.component.jsx

@@ -0,0 +1,43 @@
+import { useNProgress } from "@tanem/react-nprogress";
+import React from "react";
+
+export default function IndefiniteLoading({ loading }) {
+  const { animationDuration, isFinished, progress } = useNProgress({
+    isAnimating: loading,
+  });
+
+  return (
+    <div
+      style={{
+        opacity: isFinished ? 0 : 1,
+        pointerEvents: "none",
+        transition: `opacity ${animationDuration}ms linear`,
+      }}>
+      <div
+        style={{
+          background: "#29d",
+          height: 4,
+          left: 0,
+          marginLeft: `${(-1 + progress) * 100}%`,
+          position: "fixed",
+          top: 0,
+          transition: `margin-left ${animationDuration}ms linear`,
+          width: "100%",
+          zIndex: 1031,
+        }}>
+        <div
+          style={{
+            boxShadow: "0 0 10px #29d, 0 0 5px #29d",
+            display: "block",
+            height: "100%",
+            opacity: 1,
+            position: "absolute",
+            right: 0,
+            transform: "rotate(3deg) translate(0px, -4px)",
+            width: 100,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

client/src/components/production-board-kanban-card/production-board-card.styles.scss

@@ -0,0 +1,3 @@
+.imex-kanban-card {
+  padding: 0px !important;
+}

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

@@ -4,32 +4,52 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
 import { EyeFilled } from "@ant-design/icons";
 import { Link } from "react-router-dom";
+import "./production-board-card.styles.scss";
 
 export default function ProductionBoardCard(card) {
   // console.log("card", card);
   return (
     <Card
-      className='react-kanban-card'
+      className='react-kanban-card imex-kanban-card tight-antd-rows'
       style={{ margin: ".2rem 0rem" }}
-      actions={[
-        <ProductionAlert record={card} key='alert' />,
-        <Link to={`/manage/jobs/${card.id}`}>
-          <EyeFilled key='setting' />
-        </Link>,
-      ]}
       size='small'
-      title={`${card.ro_number || card.est_number} - ${card.ownr_ln} - ${
-        card.v_model_yr
-      } ${card.v_make_desc.substring(0, 4) || ""} ${card.v_model_desc || ""}`}>
+      title={`${card.ro_number || card.est_number} - ${card.v_model_yr} ${
+        card.v_make_desc || ""
+      } ${card.v_model_desc || ""}`}>
+      <Row>
+        <Col span={24}>
+          <div className='ellipses'>{`${card.ownr_fn || ""} ${
+            card.ownr_ln || ""
+          } ${card.ownr_co_nm || ""}`}</div>
+        </Col>
+      </Row>
       <Row>
         <Col span={12}>
-          <div>{`B: ${card.labhrs || "?"}`}</div>
-          <div>{`R: ${card.labhrs || "?"}`}</div>
+          <div className='ellipses'>{card.clm_no || ""}</div>
         </Col>
         <Col span={12}>
+          <div className='ellipses'>{card.ins_co_nm || ""}</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
+          <div className='imex-flex-row imex-flex-row__flex-space-around'>
+            <div>{`B: ${card.labhrs || "?"}`}</div>
+            <div>{`R: ${card.labhrs || "?"}`}</div>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
           <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
         </Col>
       </Row>
+      <div className='imex-flex-row imex-flex-row__flex-space-around'>
+        <ProductionAlert record={card} key='alert' />
+        <Link to={`/manage/jobs/${card.id}`}>
+          <EyeFilled key='setting' />
+        </Link>
+      </div>
     </Card>
   );
 }

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

@@ -10,6 +10,7 @@ import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 import { createBoardData } from "./production-board-kanban.utils.js";
+import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -19,10 +20,14 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   const [boardLanes, setBoardLanes] = useState({
     columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
   });
+
+  const [isMoving, setIsMoving] = useState(false);
+
   const { t } = useTranslation();
   useEffect(() => {
     setBoardLanes(createBoardData(bodyshop.md_ro_statuses.open_statuses, data));
-  }, [data, setBoardLanes, bodyshop.md_ro_statuses.open_statuses]);
+    setIsMoving(false);
+  }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses.open_statuses]);
 
   const findById = (id) => {
     return id;
@@ -32,10 +37,9 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   const client = useApolloClient();
 
   const handleDragEnd = async (card, source, destination) => {
+    setIsMoving(true);
     setBoardLanes(moveCard(boardLanes, source, destination));
-
     const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
-
     const sourceColumn = boardLanes.columns.find(
       (x) => x.id === source.fromColumnId
     );
@@ -67,16 +71,16 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
 
     let movedCardNewKanbanParent;
     if (movedCardWillBeFirst) {
-      console.log("==>New Card is first.");
+      console.log("==> New Card is first.");
       movedCardNewKanbanParent = "-1";
     } else if (movedCardWillBeLast) {
-      console.log("==>New Card is last.");
+      console.log("==> New Card is last.");
       movedCardNewKanbanParent = lastCardInDestinationColumn.id;
     } else if (!!newChildCard) {
-      console.log("==>New Card is somewhere in the middle");
+      console.log("==> New Card is somewhere in the middle");
       movedCardNewKanbanParent = newChildCard.kanbanparent;
     } else {
-      throw new Error("==>!!!!!!Couldn't find a parent.!!!!<==");
+      throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
     const newChildCardNewParent = newChildCard ? card.id : null;
     const update = await client.mutate({
@@ -99,10 +103,15 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     }
   };
 
+  console.log("ismMoving", isMoving);
+
   return (
     <div>
+      <IndefiniteLoading loading={isMoving} />
+      <div>{isMoving}</div>
       <Board
         children={boardLanes}
+        disableCardDrag={isMoving}
         renderCard={ProductionBoardCard}
         onCardDragEnd={handleDragEnd}
       />

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

@@ -41,7 +41,11 @@ export default function ProductionListColumnAlert({ record }) {
         </Menu>
       }
       trigger={["contextMenu"]}>
-      <div style={{ width: "100%", height: "19px" }}>
+      <div
+        style={{
+          //width: "100%",
+          height: "19px",
+        }}>
         {record.production_vars && record.production_vars.alert ? (
           <ExclamationCircleFilled className='production-alert' />
         ) : null}