Merge pull request #1064 from cityofaustin/md-12356-completion-date-bug

Unable to edit component completion date in Firefox and Safari
cityofaustin · Jun 21, 2023 · 34ebab1 · 34ebab1
2 parents 84636f9 + 6ea0bd5
commit 34ebab1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 32 deletions.
diff --git a/moped-editor/src/views/projects/projectView/DateFieldEditComponent.js b/moped-editor/src/views/projects/projectView/DateFieldEditComponent.js
@@ -9,19 +9,20 @@ import { parseISO, format } from "date-fns";
  * @constructor
  */
 
-const DateFieldEditComponent = (props) => {
+const DateFieldEditComponent = ({ onChange, value, ...props }) => {
   const handleDateChange = (date) => {
     const newDate = date ? format(date, "yyyy-MM-dd") : null;
-    props.onChange(newDate);
+    onChange(newDate);
   };
 
   return (
     <MobileDatePicker
       format="MM/dd/yyyy"
-      value={props.value ? parseISO(props.value) : null}
+      value={value ? parseISO(value) : null}
       onChange={handleDateChange}
       InputProps={{ style: { minWidth: "100px" } }}
       slotProps={{ actionBar: { actions: ["accept", "cancel", "clear"] } }}
+      {...props}
     />
   );
 };

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentForm.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentForm.js
@@ -10,7 +10,7 @@ import {
   FormControlLabel,
   FormHelperText,
 } from "@mui/material";
-import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
+import DateFieldEditComponent from "../DateFieldEditComponent";
 import { CheckCircle } from "@mui/icons-material";
 import { ControlledAutocomplete } from "./utils/form";
 import { GET_COMPONENTS_FORM_OPTIONS } from "src/queries/components";
@@ -25,7 +25,6 @@ import {
   useComponentTagsOptions,
 } from "./utils/form";
 import * as yup from "yup";
-import { format } from "date-fns";
 
 const defaultFormValues = {
   component: null,
@@ -55,19 +54,6 @@ const validationSchema = yup.object().shape({
   srtsId: yup.string().nullable().optional(),
 });
 
-/**
- * Return a Date object from a string date
- * @param {string} value - the string formatted date
- * @returns
- */
-const parseDate = (value) => {
-  if (value) {
-    let newdate = new Date(value);
-    return newdate;
-  }
-  return null;
-};
-
 const ComponentForm = ({
   formButtonText,
   onSave,
@@ -302,21 +288,12 @@ const ComponentForm = ({
                 control={control}
                 render={({ onChange, value, ref }) => {
                   return (
-                    <MobileDatePicker
+                    <DateFieldEditComponent
                       inputRef={ref}
-                      value={parseDate(value)}
-                      onChange={(date) => {
-                        const newDate = date
-                          ? format(date, "yyyy-MM-dd OOOO")
-                          : null;
-                        onChange(newDate);
-                      }}
-                      format="MM/dd/yyyy"
+                      value={value}
+                      onChange={onChange}
                       variant="outlined"
                       label={"Completion date"}
-                      slotProps={{
-                        actionBar: { actions: ["accept", "cancel", "clear"] },
-                      }}
                     />
                   );
                 }}

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/EditAttributesModal.js b/moped-editor/src/views/projects/projectView/ProjectComponents/EditAttributesModal.js
@@ -11,6 +11,7 @@ import {
 import { knackSignalRecordToFeatureSignalsRecord } from "src/utils/signalComponentHelpers";
 import { zoomMapToFeatureCollection } from "./utils/map";
 import { fitBoundsOptions } from "./mapSettings";
+import { formatISO } from "date-fns";
 
 const useStyles = makeStyles((theme) => ({
   dialogTitle: {
@@ -57,6 +58,11 @@ const EditAttributesModal = ({
     const srtsId = formData.srtsId.length > 0 ? formData.srtsId : null;
     const { project_component_id: projectComponentId } = componentToEdit;
 
+    // This date returns as timestamp with time zone so use that format for the form to consume
+    const completionDateForState = completionDate
+      ? formatISO(completionDate)
+      : null;
+
     // Prepare the subcomponent data for the mutation
     const subcomponentsArray = subcomponents
       ? subcomponents.map((subcomponent) => ({
@@ -93,7 +99,7 @@ const EditAttributesModal = ({
         moped_proj_component_tags: tagsArray,
         moped_phase: phase?.data,
         moped_subphase: subphase?.data,
-        completion_date: completionDate,
+        completion_date: completionDateForState,
         srts_id: srtsId,
       };
 
@@ -138,7 +144,7 @@ const EditAttributesModal = ({
         moped_proj_component_tags: tagsArray,
         moped_phase: phase?.data,
         moped_subphase: subphase?.data,
-        completion_date: completionDate,
+        completion_date: completionDateForState,
         srts_id: srtsId,
       };