add validation for allRequired and maxItems

theopensystemslab · Dec 18, 2024 · ef50330 · ef50330
1 parent 9585660
commit ef50330
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -7,11 +7,12 @@ import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
-import { parseBaseNodeData } from "../../shared";
+import { Option, parseBaseNodeData } from "../../shared";
 import { ICONS } from "../../shared/icons";
 import type { Checklist } from "../model";
 import { toggleExpandableChecklist } from "../model";
@@ -39,7 +40,7 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
         : groupedOptions?.flatMap((group) => group.children);
 
       const filteredOptions = (sourceOptions || []).filter(
-        (option) => option.data.text,
+        (option) => option.data.text
       );
 
       const processedOptions = filteredOptions.map((option) => ({
@@ -66,21 +67,33 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                   }),
             },
           },
-          processedOptions,
+          processedOptions
         );
       } else {
         alert(JSON.stringify({ type, ...values, options }, null, 2));
       }
     },
-    validate: ({ options, groupedOptions, ...values }) => {
+    validate: ({ options, groupedOptions, allRequired, ...values }) => {
       const errors: FormikErrors<FormikValues> = {};
+
+      const exclusiveOptions: Option[] | undefined = options?.filter(
+        (option) => option.data.exclusive
+      );
+      if (allRequired && exclusiveOptions && exclusiveOptions.length > 0) {
+        errors.allRequired =
+          'Cannot configure exclusive "or" option alongside "all required" setting';
+      }
       // Account for flat or expandable Checklist options
       options =
         options || groupedOptions?.map((group) => group.children)?.flat();
       if (values.fn && !options?.some((option) => option.data.val)) {
         errors.fn =
           "At least one option must set a data value when the checklist has a data field";
       }
+      if (exclusiveOptions && exclusiveOptions.length > 1) {
+        errors.options =
+          "There should be a maximum of one exclusive option configured";
+      }
       return errors;
     },
   });
@@ -160,28 +173,30 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 onChange={() =>
                   formik.setFieldValue(
                     "allRequired",
-                    !formik.values.allRequired,
+                    !formik.values.allRequired
                   )
                 }
                 label="All required"
               />
             </InputRow>
+
             <InputRow>
               <Switch
                 checked={formik.values.neverAutoAnswer}
                 onChange={() =>
                   formik.setFieldValue(
                     "neverAutoAnswer",
-                    !formik.values.neverAutoAnswer,
+                    !formik.values.neverAutoAnswer
                   )
                 }
                 label="Always put to user (forgo automation)"
               />
             </InputRow>
           </InputGroup>
         </ModalSectionContent>
-
-        <Options formik={formik} />
+        <ErrorWrapper error={formik.errors.options}>
+          <Options formik={formik} />
+        </ErrorWrapper>
       </ModalSection>
 
       <ModalFooter formik={formik} />

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -12,6 +12,7 @@ import React from "react";
 import { FormikHookReturn } from "types";
 import ListManager from "ui/editor/ListManager/ListManager";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
@@ -164,32 +165,34 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
       )}
       {exclusiveOrOptionManagerShouldRender ? (
         <Box mt={1}>
-          <ListManager
-            values={exclusiveOptions || []}
-            onChange={(newExclusiveOptions) => {
-              const newCombinedOptions = [
-                ...nonExclusiveOptions,
-                ...newExclusiveOptions,
-              ];
-              formik.setFieldValue("options", newCombinedOptions);
-            }}
-            newValueLabel='add "or" option'
-            maxItems={1}
-            disableDragAndDrop
-            newValue={() =>
-              ({
-                data: {
-                  text: "",
-                  description: "",
-                  val: "",
-                  exclusive: true,
-                },
-              }) as Option
-            }
-            Editor={BaseOptionsEditor}
-            editorExtraProps={{ showValueField: !!formik.values.fn }}
-          />
-        </Box>
+            <ErrorWrapper error={formik.errors.allRequired as string}>
+            <ListManager
+              values={exclusiveOptions || []}
+              onChange={(newExclusiveOptions) => {
+                const newCombinedOptions = [
+                  ...nonExclusiveOptions,
+                  ...newExclusiveOptions,
+                ];
+                formik.setFieldValue("options", newCombinedOptions);
+              }}
+              newValueLabel='add "or" option'
+              maxItems={1}
+              disableDragAndDrop
+              newValue={() =>
+                ({
+                  data: {
+                    text: "",
+                    description: "",
+                    val: "",
+                    exclusive: true,
+                  },
+                }) as Option
+              }
+              Editor={BaseOptionsEditor}
+              editorExtraProps={{ showValueField: !!formik.values.fn }}
+            />
+        </ErrorWrapper>
+          </Box>
       ) : (
         <></>
       )}

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
@@ -53,7 +53,10 @@ export const toggleNonExclusiveCheckbox = (
     thisCheckboxId,
     currentlyCheckedOptionIds
   );
-  return newCheckedOptionIds.filter(
-    (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id
-  );
+  if (exclusiveOrOption) {
+    return newCheckedOptionIds.filter(
+      (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id
+    );
+  }
+  return newCheckedOptionIds;
 };