Merge pull request #1430 from cityofaustin/md-19113-component-phase-val

Update component phase inputs to require both phase and completion date if phase simple is "Complete"

moped-editor/src/queries/components.js

@@ -34,13 +34,14 @@ export const GET_COMPONENTS_FORM_OPTIONS = gql`
     moped_phases(order_by: { phase_order: asc }) {
       phase_name
       phase_id
+      phase_name_simple
       moped_subphases {
         subphase_id
         subphase_name
       }
     }
     moped_component_tags(
-      order_by: [{ type: asc }, {name: asc}]
+      order_by: [{ type: asc }, { name: asc }]
       where: { is_deleted: { _eq: false } }
     ) {
       name
@@ -104,6 +105,7 @@ export const PROJECT_COMPONENT_FIELDS = gql`
     moped_phase {
       phase_id
       phase_name
+      phase_name_simple
       moped_subphases {
         subphase_id
         subphase_name

moped-editor/src/views/projects/projectView/DateFieldEditComponent.js

@@ -5,12 +5,15 @@ import { parseISO, format } from "date-fns";
 /**
  * DateFieldEditComponent - renders a Date type Calendar select
  * @param {object} props - Values passed through Material Table `editComponent`
+ * @param {function} props.onChange - callback function to update the value
+ * @param {string} props.value - the current value
+ * @param {object} props.textFieldProps - additional props to pass to the picker's TextField
  * @return {JSX.Element}
  * @constructor
  */
 
 const DateFieldEditComponent = React.forwardRef(
-  ({ onChange, value, ...props }, ref) => {
+  ({ onChange, value, textFieldProps, ...props }, ref) => {
     const handleDateChange = (date) => {
       const newDate = date ? format(date, "yyyy-MM-dd") : null;
       onChange(newDate);
@@ -23,7 +26,10 @@ const DateFieldEditComponent = React.forwardRef(
         value={value ? parseISO(value) : null}
         onChange={handleDateChange}
         InputProps={{ style: { minWidth: "100px" } }}
-        slotProps={{ actionBar: { actions: ["accept", "cancel", "clear"] } }}
+        slotProps={{
+          actionBar: { actions: ["accept", "cancel", "clear"] },
+          textField: textFieldProps,
+        }}
         {...props}
       />
     );

moped-editor/src/views/projects/projectView/ProjectComponents/ComponentForm.js

@@ -27,6 +27,7 @@ import {
   useResetDependentFieldOnParentFieldChange,
   getOptionLabel,
   isOptionEqualToValue,
+  isPhaseOptionSimpleComplete,
 } from "./utils/form";
 import ControlledAutocomplete from "../../../../components/forms/ControlledAutocomplete";
 import ControlledTextInput from "src/components/forms/ControlledTextInput";
@@ -55,7 +56,18 @@ const validationSchema = yup.object().shape({
   phase: yup.object().nullable().optional(),
   subphase: yup.object().nullable().optional(),
   tags: yup.array().optional(),
-  completionDate: yup.date().nullable().optional(),
+  completionDate: yup
+    .date()
+    .nullable()
+    .optional()
+    .when("phase", {
+      is: (phase) => isPhaseOptionSimpleComplete(phase),
+      then: yup
+        .date()
+        .required(
+          "Required if a phase with phase name simple of Complete is selected"
+        ),
+    }),
   description: yup.string().nullable().optional(),
   work_types: yup.array().of(yup.object()).min(1).required(),
   // Signal field is required if the selected component inserts into the feature_signals table
@@ -113,6 +125,8 @@ const ComponentForm = ({
     "subcomponents",
     "signal",
   ]);
+
+  const isPhaseNameSimpleComplete = isPhaseOptionSimpleComplete(phase);
   const subphaseOptions = useSubphaseOptions(phase?.data.moped_subphases);
   const assetFeatureTable =
     component?.data?.asset_feature_layer?.internal_table;
@@ -140,6 +154,14 @@ const ComponentForm = ({
     setValue,
   });
 
+  useResetDependentFieldOnParentFieldChange({
+    parentValue: watch("phase"),
+    dependentFieldName: "completionDate",
+    comparisonVariable: "value",
+    valueToSet: defaultFormValues.completionDate,
+    setValue,
+  });
+
   useResetDependentFieldOnParentFieldChange({
     parentValue: watch("component"),
     dependentFieldName: "signal",
@@ -344,24 +366,31 @@ const ComponentForm = ({
                 />
               </Grid>
             )}
-            <Grid item xs={12}>
-              <Controller
-                id="completion-date"
-                name="completionDate"
-                control={control}
-                render={({ field }) => {
-                  return (
-                    <DateFieldEditComponent
-                      {...field}
-                      value={field.value}
-                      onChange={field.onChange}
-                      variant="outlined"
-                      label={"Completion date"}
-                    />
-                  );
-                }}
-              />
-            </Grid>
+            {(isPhaseNameSimpleComplete || completionDate) && (
+              <Grid item xs={12}>
+                <Controller
+                  id="completion-date"
+                  name="completionDate"
+                  control={control}
+                  render={({ field }) => {
+                    return (
+                      <DateFieldEditComponent
+                        {...field}
+                        value={field.value}
+                        onChange={field.onChange}
+                        variant="outlined"
+                        label={"Completion date"}
+                        textFieldProps={{
+                          helperText: errors?.completionDate?.message,
+                          error: Boolean(errors?.completionDate),
+                          size: "small",
+                        }}
+                      />
+                    );
+                  }}
+                />
+              </Grid>
+            )}
           </>
         )}
       </Grid>

moped-editor/src/views/projects/projectView/ProjectComponents/utils/form.js

@@ -140,6 +140,14 @@ export const useWorkTypeOptions = (componentId, optionsData) =>
     return options;
   }, [componentId, optionsData]);
 
+/**
+ * Take a phase option record and check if it is has "Complete" for phase name simple
+ * @param {Object} phase Phase option chosen from the phase autocomplete or from the existing phase data
+ * @returns {Boolean} true if the phase's simple name is "Complete", false otherwise
+ */
+export const isPhaseOptionSimpleComplete = (phase) =>
+  Boolean(phase?.data?.phase_name_simple === "Complete");
+
 /**
  * Take the moped_phases records data response and create options for a MUI autocomplete
  * @param {Object} data Data returned with moped_phases records
@@ -386,7 +394,7 @@ export const useResetDependentFieldOnParentFieldChange = ({
       return;
     }
 
-    setValue(dependentFieldName, valueToSet);
+    setValue(dependentFieldName, valueToSet, { shouldValidate: true });
     setPreviousParentValue(parentValue);
   }, [
     parentValue,