dex 1417 - require both sighting time fields when reporting sighting (#…

…456) * Add asterisks to SpecifiedTimeEditor fields * Update report sighting validation of specifiedTime fields * Move time validations to variables for readability
WildMeOrg · Sep 28, 2022 · 4aa18da · 4aa18da
1 parent b3a46e8
commit 4aa18da
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 18 deletions.
diff --git a/locale/en.json b/locale/en.json
@@ -613,6 +613,7 @@
   "BACK_TO_PHOTOS": "Back to photographs",
   "BACK_TO_SELECTION": "Back to selection",
   "INCOMPLETE_FIELD": "{fieldName} is a required field.",
+  "INCOMPLETE_TIME_SPECIFICITY": "Enter the Year information as well as the Time Specificity.",
   "CONTINUE_WITHOUT_PHOTOGRAPHS": "Continue without photographs",
   "LAST_SIGHTING_DATE_RANGE": "Last sighting date",
   "LAST_SIGHTING_DATE_RANGE_DESCRIPTION": "Date of this individual's most recent sighting.",

diff --git a/src/components/fields/edit/SpecifiedTimeEditor.jsx b/src/components/fields/edit/SpecifiedTimeEditor.jsx
@@ -54,7 +54,7 @@ export default function SpecifiedTimeEditor(props) {
    * which messes up display if this component is a flex child. */
   return (
     <div>
-      <FormCore schema={{ ...schema, required: false }} width={width}>
+      <FormCore schema={schema} width={width}>
         <InputLabel>
           {intl.formatMessage({ id: 'SIGHTING_TIME_SPECIFICITY' })}
         </InputLabel>
@@ -120,6 +120,7 @@ export default function SpecifiedTimeEditor(props) {
               'aria-label': intl.formatMessage({ id: 'CHANGE_DATE' }),
             }}
             views={dateInputViews}
+            required={get(schema, 'required', false)}
             {...rest}
           />
         </div>

diff --git a/src/pages/reportSighting/ReportForm.jsx b/src/pages/reportSighting/ReportForm.jsx
@@ -123,6 +123,7 @@ export default function ReportForm({
   const [dialogOpen, setDialogOpen] = useState(false);
   const [incompleteFields, setIncompleteFields] = useState([]);
   const [termsError, setTermsError] = useState(false);
+  const [formErrorId, setFormErrorId] = useState(null);
 
   const [sightingFormValues, setSightingFormValues] = useState({});
   const [customSightingFormValues, setCustomSightingFormValues] =
@@ -169,7 +170,10 @@ export default function ReportForm({
   } = usePostAssetGroup();
 
   const showErrorAlertBox =
-    incompleteFields.length > 0 || termsError || postAssetGroupError;
+    incompleteFields.length > 0 ||
+    termsError ||
+    postAssetGroupError ||
+    formErrorId;
 
   const hasSightingTypeAndNotAuthenticated =
     sightingType && !authenticated;
@@ -246,21 +250,18 @@ export default function ReportForm({
               <Text variant="body2">{postAssetGroupError}</Text>
             )}
             {termsError && <Text variant="body2" id="TERMS_ERROR" />}
+            {formErrorId && <Text variant="body2" id={formErrorId} />}
             {incompleteFields.map(incompleteField => (
-              <p
-                style={{ margin: '4px 0' }}
+              <Text
                 key={incompleteField.name}
-              >
-                <Text
-                  variant="body2"
-                  id="INCOMPLETE_FIELD"
-                  values={{
-                    fieldName: intl.formatMessage({
-                      id: incompleteField.labelId,
-                    }),
-                  }}
-                />
-              </p>
+                variant="body2"
+                id="INCOMPLETE_FIELD"
+                values={{
+                  fieldName: intl.formatMessage({
+                    id: incompleteField.labelId,
+                  }),
+                }}
+              />
             ))}
           </CustomAlert>
         </Grid>
@@ -276,21 +277,68 @@ export default function ReportForm({
         >
           <Button
             onClick={async () => {
-              // check that required fields are complete
+              // check that required fields are complete.
+              // specifiedTime field is required, but the logic and message
+              // are different from the other fields
               const nextIncompleteFields =
                 defaultSightingSchemas.filter(
                   field =>
                     field.required &&
                     field.defaultValue ===
-                      sightingFormValues[field.name],
+                      sightingFormValues[field.name] &&
+                    field.name !== 'specifiedTime',
                 );
               setIncompleteFields(nextIncompleteFields);
 
+              // check that specifiedTime fields are complete
+              let nextFormErrorId = null;
+              const formTimeSpecificity = get(sightingFormValues, [
+                'specifiedTime',
+                'timeSpecificity',
+              ]);
+              const formTime = get(sightingFormValues, [
+                'specifiedTime',
+                'time',
+              ]);
+
+              const specifiedTimeField =
+                defaultSightingSchemas.find(
+                  field => field.name === 'specifiedTime',
+                ) || {};
+
+              const defaultTimeSpecificity = get(specifiedTimeField, [
+                'defaultValue',
+                'timeSpecificity',
+              ]);
+
+              const defaultTime = get(specifiedTimeField, [
+                'defaultValue',
+                'time',
+              ]);
+
+              const isTimeSpecificityDefault =
+                formTimeSpecificity === defaultTimeSpecificity;
+
+              const isTimeDefault = formTime === defaultTime;
+
+              if (
+                !formTimeSpecificity ||
+                isTimeSpecificityDefault ||
+                !formTime ||
+                isTimeDefault
+              ) {
+                nextFormErrorId = 'INCOMPLETE_TIME_SPECIFICITY';
+              }
+
+              setFormErrorId(nextFormErrorId);
+
               // check that terms and conditions were accepted
               setTermsError(!acceptedTerms);
 
               const formValid =
-                nextIncompleteFields.length === 0 && acceptedTerms;
+                nextIncompleteFields.length === 0 &&
+                acceptedTerms &&
+                !nextFormErrorId;
 
               if (formValid) {
                 const report =