From c1522ca5b270d35ba7587f4bf9596ac9cc67f700 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 4 Aug 2020 13:10:18 -0700
Subject: [PATCH] Added custom date picker BOD-246

---
 .../form-date-picker.component.jsx            | 31 ++++++++++++++++
 ...orm-input-number-calculator.component.jsx} |  4 +--
 .../jobs-detail-dates.component.jsx           | 35 +++++++++++--------
 3 files changed, 54 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/form-date-picker/form-date-picker.component.jsx
 rename client/src/components/{field-input-number-calculator/field-input-number-calculator.component.jsx => form-input-number-calculator/form-input-number-calculator.component.jsx} (96%)

diff --git a/client/src/components/form-date-picker/form-date-picker.component.jsx b/client/src/components/form-date-picker/form-date-picker.component.jsx
new file mode 100644
index 000000000..8adad81f4
--- /dev/null
+++ b/client/src/components/form-date-picker/form-date-picker.component.jsx
@@ -0,0 +1,31 @@
+import React, { forwardRef, useEffect } from "react";
+import { DatePicker } from "antd";
+import { useTranslation } from "react-i18next";
+import moment from "moment";
+//To be used as a form element only.
+
+const CustomDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
+  const { t } = useTranslation();
+
+  const handleChange = (newDate) => {
+    if (value !== newDate && onChange) {
+      onChange(newDate);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key.toLowerCase() === "t") {
+      if (onChange) {
+        onChange(new moment());
+      }
+    }
+  };
+
+  return (
+    <div onKeyDown={handleKeyDown}>
+      <DatePicker value={value} onChange={handleChange} {...restProps} />
+    </div>
+  );
+};
+
+export default forwardRef(CustomDatePicker);
diff --git a/client/src/components/field-input-number-calculator/field-input-number-calculator.component.jsx b/client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
similarity index 96%
rename from client/src/components/field-input-number-calculator/field-input-number-calculator.component.jsx
rename to client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
index c8a03f4ce..1655ccb03 100644
--- a/client/src/components/field-input-number-calculator/field-input-number-calculator.component.jsx
+++ b/client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
@@ -1,7 +1,7 @@
 import { Input, Popover } from "antd";
 import React, { useEffect, useState, forwardRef } from "react";
 
-const FieldInputNUmberCalculator = (
+const FormInputNUmberCalculator = (
   { value: formValue, onChange: formOnChange },
   ref
 ) => {
@@ -114,4 +114,4 @@ const FieldInputNUmberCalculator = (
   );
 };
 
-export default forwardRef(FieldInputNUmberCalculator);
+export default forwardRef(FormInputNUmberCalculator);
diff --git a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
index d456d6475..6ebd69d3d 100644
--- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
+++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 export default function JobsDetailDatesComponent({ job }) {
   const { t } = useTranslation();
@@ -12,10 +13,11 @@ export default function JobsDetailDatesComponent({ job }) {
       <FormRow header={t("jobs.forms.estdates")}>
         <Form.Item
           label={t("jobs.fields.date_estimated")}
-          name='date_estimated'>
+          name="date_estimated"
+        >
           <DateTimePicker />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.date_open")} name='date_open'>
+        <Form.Item label={t("jobs.fields.date_open")} name="date_open">
           <DateTimePicker />
         </Form.Item>
       </FormRow>
@@ -23,46 +25,51 @@ export default function JobsDetailDatesComponent({ job }) {
       <FormRow header={t("jobs.forms.scheddates")}>
         <Form.Item
           label={t("jobs.fields.date_scheduled")}
-          name='date_scheduled'>
+          name="date_scheduled"
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
           <DateTimePicker />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.scheduled_in")} name='scheduled_in'>
-          <DateTimePicker />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.actual_in")} name='actual_in'>
+        <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
           <DateTimePicker />
         </Form.Item>
       </FormRow>
       <FormRow header={t("jobs.forms.repairdates")}>
         <Form.Item
           label={t("jobs.fields.scheduled_completion")}
-          name='scheduled_completion'>
+          name="scheduled_completion"
+        >
           <DateTimePicker />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.actual_completion")}
-          name='actual_completion'>
+          name="actual_completion"
+        >
           <DateTimePicker />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.scheduled_delivery")}
-          name='scheduled_delivery'>
+          name="scheduled_delivery"
+        >
           <DateTimePicker />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.actual_delivery")}
-          name='actual_delivery'>
+          name="actual_delivery"
+        >
           <DateTimePicker />
         </Form.Item>
       </FormRow>
       <FormRow header={t("jobs.forms.admindates")}>
-        <Form.Item label={t("jobs.fields.date_invoiced")} name='date_invoiced'>
+        <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
           <DateTimePicker />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.date_closed")} name='date_closed'>
+        <Form.Item label={t("jobs.fields.date_closed")} name="date_closed">
           <DateTimePicker />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.date_exported")} name='date_exported'>
+        <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
           <DateTimePicker />
         </Form.Item>
       </FormRow>