From ba5571768326547ef4ad54afdc5286d70d0ac0aa Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 6 Jun 2022 15:43:35 -0700
Subject: [PATCH] IO-1663 Add time to production board.

---
 .../production-list-columns.data.js           | 45 ++++++++++--
 ...production-list-columns.date.component.jsx | 73 +++++++++----------
 client/src/utils/DateFormatter.jsx            |  5 ++
 3 files changed, 77 insertions(+), 46 deletions(-)

diff --git a/client/src/components/production-list-columns/production-list-columns.data.js b/client/src/components/production-list-columns/production-list-columns.data.js
index d99f4e5a2..e09e98775 100644
--- a/client/src/components/production-list-columns/production-list-columns.data.js
+++ b/client/src/components/production-list-columns/production-list-columns.data.js
@@ -5,25 +5,26 @@ import moment from "moment";
 import React from "react";
 import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { TimeFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
+import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
 import ProductionListColumnAlert from "./production-list-columns.alert.component";
 import ProductionListColumnBodyPriority from "./production-list-columns.bodypriority.component";
+import ProductionListColumnComment from "./production-list-columns.comment.component";
 import ProductionListDate from "./production-list-columns.date.component";
 import ProductionListColumnDetailPriority from "./production-list-columns.detailpriority.component";
 import ProductionListEmployeeAssignment from "./production-list-columns.empassignment.component";
 import ProductionListLastContacted from "./production-list-columns.lastcontacted.component";
 import ProductionListColumnPaintPriority from "./production-list-columns.paintpriority.component";
-import ProductionListColumnNote from "./production-list-columns.productionnote.component";
-import ProductionListColumnStatus from "./production-list-columns.status.component";
-import ProductionListColumnCategory from "./production-list-columns.status.category";
-import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
-import ProductionListColumnComment from "./production-list-columns.comment.component";
 import ProductionListColumnPartsReceived from "./production-list-columns.partsreceived.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
+import ProductionListColumnNote from "./production-list-columns.productionnote.component";
+import ProductionListColumnCategory from "./production-list-columns.status.category";
+import ProductionListColumnStatus from "./production-list-columns.status.component";
+import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
 const r = ({ technician, state, activeStatuses, bodyshop }) => {
   return [
@@ -105,6 +106,16 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         <ProductionListDate record={record} field="actual_in" time />
       ),
     },
+    {
+      title: i18n.t("jobs.fields.actual_in") + " (HH:MM)",
+      dataIndex: "actual_in_time",
+      key: "actual_in_time",
+      ellipsis: true,
+
+      render: (text, record) => (
+        <TimeFormatter>{record.actual_in}</TimeFormatter>
+      ),
+    },
     {
       title: i18n.t("jobs.fields.scheduled_completion"),
       dataIndex: "scheduled_completion",
@@ -124,6 +135,16 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         />
       ),
     },
+    {
+      title: i18n.t("jobs.fields.scheduled_completion") + " (HH:MM)",
+      dataIndex: "scheduled_completion_time",
+      key: "scheduled_completion_time",
+      ellipsis: true,
+
+      render: (text, record) => (
+        <TimeFormatter>{record.scheduled_completion}</TimeFormatter>
+      ),
+    },
     {
       title: i18n.t("jobs.fields.date_last_contacted"),
       dataIndex: "date_last_contacted",
@@ -176,6 +197,16 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         />
       ),
     },
+    {
+      title: i18n.t("jobs.fields.scheduled_delivery") + " (HH:MM)",
+      dataIndex: "scheduled_delivery_time",
+      key: "scheduled_delivery_time",
+      ellipsis: true,
+
+      render: (text, record) => (
+        <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
+      ),
+    },
     {
       title: i18n.t("jobs.fields.ins_co_nm"),
       dataIndex: "ins_co_nm",
diff --git a/client/src/components/production-list-columns/production-list-columns.date.component.jsx b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
index 5927c99e2..4944d628b 100644
--- a/client/src/components/production-list-columns/production-list-columns.date.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
@@ -50,50 +50,45 @@ export default function ProductionListDate({
           "production-completion-soon"));
   }
   return (
-    <div>
-      <Dropdown
-        //trigger={["click"]}
-        visible={visible}
-        style={{
-          height: "19px",
-        }}
-        overlay={
-          <Card
-            style={{ padding: "1rem" }}
+    <Dropdown
+      //trigger={["click"]}
+      visible={visible}
+      style={{
+        height: "19px",
+      }}
+      overlay={
+        <Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}>
+          <FormDatePicker
             onClick={(e) => e.stopPropagation()}
-          >
-            <FormDatePicker
+            value={(record[field] && moment(record[field])) || null}
+            onChange={handleChange}
+            format="MM/DD/YYYY"
+            isDateOnly={!time}
+          />
+          {time && (
+            <TimePicker
               onClick={(e) => e.stopPropagation()}
               value={(record[field] && moment(record[field])) || null}
               onChange={handleChange}
-              format="MM/DD/YYYY"
-              isDateOnly={!time}
+              minuteStep={15}
+              format="hh:mm a"
             />
-            {time && (
-              <TimePicker
-                onClick={(e) => e.stopPropagation()}
-                value={(record[field] && moment(record[field])) || null}
-                onChange={handleChange}
-                minuteStep={15}
-                format="hh:mm a"
-              />
-            )}
-            <Button onClick={() => setVisible(false)}>
-              {t("general.actions.close")}
-            </Button>
-          </Card>
-        }
+          )}
+          <Button onClick={() => setVisible(false)}>
+            {t("general.actions.close")}
+          </Button>
+        </Card>
+      }
+    >
+      <div
+        onClick={() => setVisible(true)}
+        style={{
+          height: "19px",
+        }}
+        className={className}
       >
-        <div
-          onClick={() => setVisible(true)}
-          style={{
-            height: "19px",
-          }}
-          className={className}
-        >
-          <DateFormatter bordered={false}>{record[field]}</DateFormatter>
-        </div>
-      </Dropdown>
-    </div>
+        <DateFormatter bordered={false}>{record[field]}</DateFormatter>
+      </div>
+    </Dropdown>
   );
 }
diff --git a/client/src/utils/DateFormatter.jsx b/client/src/utils/DateFormatter.jsx
index 18c2e633d..134095c78 100644
--- a/client/src/utils/DateFormatter.jsx
+++ b/client/src/utils/DateFormatter.jsx
@@ -17,6 +17,11 @@ export function DateTimeFormatter(props) {
       )
     : null;
 }
+export function TimeFormatter(props) {
+  return props.children
+    ? moment(props.children).format(props.format ? props.format : "hh:mm a")
+    : null;
+}
 
 export function TimeAgoFormatter(props) {
   const m = moment(props.children);