From a8b1537cd609622b55bcb0a545d6577b1f38526d Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 26 Jan 2022 13:26:42 -0800
Subject: [PATCH] IO-1671 Improved date handling for form item.
---
client/src/App/App.jsx | 12 ++----
.../form-date-picker.component.jsx | 39 ++++++++++++++-----
.../jobs-admin-dates.component.jsx | 6 ++-
.../jobs-detail-dates.component.jsx | 4 +-
...production-list-columns.date.component.jsx | 12 ++++--
client/src/translations/en_us/common.json | 3 +-
client/src/translations/es/common.json | 1 +
client/src/translations/fr/common.json | 1 +
8 files changed, 51 insertions(+), 27 deletions(-)
diff --git a/client/src/App/App.jsx b/client/src/App/App.jsx
index 7a3970a06..ccd22f414 100644
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -1,4 +1,6 @@
+import { useTreatments } from "@splitsoftware/splitio-react";
import { Button, Result } from "antd";
+import LogRocket from "logrocket";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -6,11 +8,10 @@ import { Route, Switch } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import DocumentEditorContainer from "../components/document-editor/document-editor.container";
import ErrorBoundary from "../components/error-boundary/error-boundary.component";
-import LogRocket from "logrocket";
-
//Component Imports
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
+import LandingPage from "../pages/landing/landing.page";
import TechPageContainer from "../pages/tech/tech.page.container";
import { setOnline } from "../redux/application/application.actions";
import { selectOnline } from "../redux/application/application.selectors";
@@ -22,8 +23,6 @@ import {
import PrivateRoute from "../utils/private-route";
import "./App.styles.scss";
-import LandingPage from "../pages/landing/landing.page";
-import { useTreatments } from "@splitsoftware/splitio-react";
const ResetPassword = lazy(() =>
import("../pages/reset-password/reset-password.component")
);
@@ -58,11 +57,6 @@ export function App({
bodyshop && bodyshop.imexshopid
);
- console.log(
- "🚀 ~ file: App.jsx ~ line 56 ~ LogRocket_Tracking",
- LogRocket_Tracking
- );
-
useEffect(() => {
if (!navigator.onLine) {
setOnline(false);
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
index f485debfe..9ce7aa7f4 100644
--- a/client/src/components/form-date-picker/form-date-picker.component.jsx
+++ b/client/src/components/form-date-picker/form-date-picker.component.jsx
@@ -1,16 +1,22 @@
import { DatePicker } from "antd";
import moment from "moment";
-import React, { forwardRef } from "react";
+import React, { useRef } from "react";
//To be used as a form element only.
const dateFormat = "MM/DD/YYYY";
-const FormDatePicker = (
- { value, onChange, onBlur, onlyFuture, ...restProps },
- ref
-) => {
+export default function FormDatePicker({
+ value,
+ onChange,
+ onBlur,
+ onlyFuture,
+ ...restProps
+}) {
+ const ref = useRef();
+
const handleChange = (newDate) => {
if (value !== newDate && onChange) {
+ console.log("XXX1");
onChange(newDate);
}
};
@@ -19,17 +25,34 @@ const FormDatePicker = (
if (e.key.toLowerCase() === "t") {
if (onChange) {
onChange(new moment());
+ if (ref.current && ref.current.blur) ref.current.blur();
}
+ } else if (e.key.toLowerCase() === "enter") {
+ if (ref.current && ref.current.blur) ref.current.blur();
}
};
+ const handleBlur = (e) => {
+ const v = e.target.value;
+ if (!v) return;
+
+ const _a = moment(
+ v,
+ ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
+ "en",
+ false
+ );
+ if (_a.isValid() && onChange) onChange(_a);
+ };
+
return (
moment().subtract(1, "day").isAfter(d),
@@ -38,6 +61,4 @@ const FormDatePicker = (
/>
);
-};
-
-export default forwardRef(FormDatePicker);
+}
diff --git a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
index f52fe5497..e708cb268 100644
--- a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
+++ b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
@@ -1,11 +1,13 @@
import { useMutation } from "@apollo/client";
-import { Button, Form, notification, DatePicker } from "antd";
+import { Button, Form, notification } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import moment from "moment";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+
export default function JobsAdminDatesChange({ job }) {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
@@ -54,7 +56,7 @@ export default function JobsAdminDatesChange({ job }) {
label={t("jobs.fields.date_estimated")}
name="date_estimated"
>
-
+
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 b54783f98..ec2c9bcef 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
@@ -1,4 +1,4 @@
-import { DatePicker, Form, Statistic, Tooltip } from "antd";
+import { Form, Statistic, Tooltip } from "antd";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -34,7 +34,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
label={t("jobs.fields.date_estimated")}
name="date_estimated"
>
-
+
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 1b201032e..94ca00c88 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
@@ -1,12 +1,12 @@
import { useMutation } from "@apollo/client";
-import { DatePicker, Dropdown, TimePicker, Button, Card } from "antd";
+import { Button, Card, Dropdown, TimePicker } from "antd";
import moment from "moment";
import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { DateFormatter } from "../../utils/DateFormatter";
-
-import { useTranslation } from "react-i18next";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
export default function ProductionListDate({
record,
@@ -17,8 +17,12 @@ export default function ProductionListDate({
const [updateAlert] = useMutation(UPDATE_JOB);
const [visible, setVisible] = useState(false);
const { t } = useTranslation();
+
const handleChange = (date) => {
logImEXEvent("product_toggle_date", { field });
+ if (date.isSame(record[field] && moment(record[field]))) {
+ return;
+ }
//e.stopPropagation();
updateAlert({
@@ -58,7 +62,7 @@ export default function ProductionListDate({
style={{ padding: "1rem" }}
onClick={(e) => e.stopPropagation()}
>
- e.stopPropagation()}
value={(record[field] && moment(record[field])) || null}
onChange={handleChange}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 6dbd52a40..6fc283fd0 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1506,7 +1506,8 @@
"difference": "Difference",
"diskscan": "Scan Disk for Estimates",
"dms": {
- "defaultstory": "Bodyshop RO {{ro_number}}. Damage to $t(jobs.fields.area_of_damage_impact.{{area_of_damage}}).",
+ "damageto": "Damage to $t(jobs.fields.area_of_damage_impact.{{area_of_damage}}).",
+ "defaultstory": "B/S RO: {{ro_number}}. Owner: {{ownr_nm}}. Insurance Co: {{ins_co_nm}}. Claim/PO #: {{clm_po}}",
"invoicedatefuture": "Invoice date must be today or in the future for CDK posting.",
"kmoutnotgreaterthankmin": "Mileage out must be greater than mileage in.",
"logs": "Logs",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 44632a0ff..109ed5b6f 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1506,6 +1506,7 @@
"difference": "",
"diskscan": "",
"dms": {
+ "damageto": "",
"defaultstory": "",
"invoicedatefuture": "",
"kmoutnotgreaterthankmin": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index fbeb51ce4..6d88ba81b 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1506,6 +1506,7 @@
"difference": "",
"diskscan": "",
"dms": {
+ "damageto": "",
"defaultstory": "",
"invoicedatefuture": "",
"kmoutnotgreaterthankmin": "",