add switch and data field

add whole number validation refactor: semantically simpler validation
theopensystemslab · Oct 10, 2024 · 9fd0a03 · 9fd0a03
1 parent aad9a43
commit 9fd0a03
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
@@ -3,10 +3,7 @@ import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import type { NumberInput } from "@planx/components/NumberInput/model";
 import { parseNumberInput } from "@planx/components/NumberInput/model";
-import {
-  EditorProps,
-  ICONS,
-} from "@planx/components/ui";
+import { EditorProps, ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -83,14 +80,30 @@ export default function NumberInputComponent(props: Props): FCReturn {
                   onChange={() =>
                     formik.setFieldValue(
                       "allowNegatives",
-                      !formik.values.allowNegatives,
+                      !formik.values.allowNegatives
                     )
                   }
                 />
               }
               label="Allow negative numbers to be input"
             />
           </InputRow>
+          <InputRow>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={formik.values.onlyWholeNumbers}
+                  onChange={() =>
+                    formik.setFieldValue(
+                      "onlyWholeNumbers",
+                      !formik.values.onlyWholeNumbers
+                    )
+                  }
+                />
+              }
+              label="Only allow whole numbers"
+            />
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />

diff --git a/editor.planx.uk/src/@planx/components/NumberInput/model.ts b/editor.planx.uk/src/@planx/components/NumberInput/model.ts
@@ -8,6 +8,7 @@ export interface NumberInput extends BaseNodeData {
   fn?: string;
   units?: string;
   allowNegatives?: boolean;
+  onlyWholeNumbers?: boolean;
 }
 
 export type UserData = number;
@@ -21,13 +22,14 @@ export const parseNumber = (raw: string): number | null => {
 };
 
 export const parseNumberInput = (
-  data: Record<string, any> | undefined,
+  data: Record<string, any> | undefined
 ): NumberInput => ({
   title: data?.title || "",
   description: data?.description,
   fn: data?.fn || "",
   units: data?.units,
   allowNegatives: data?.allowNegatives || false,
+  onlyWholeNumbers: data?.onlyWholeNumbers || false,
   ...parseBaseNodeData(data),
 });
 
@@ -52,6 +54,19 @@ export const numberInputValidationSchema = (input: NumberInput) =>
         }
         return value === "0" ? true : Boolean(parseNumber(value));
       },
+    })
+    .test({
+      name: "check for a whole number",
+      message: "Enter a whole number",
+      test: (value: string | undefined) => {
+        if (!value) {
+          return false;
+        }
+        if (!Number.isInteger(Number(value))) {
+          return false;
+        }
+        return true;
+      },
     });
 
 export const validationSchema = (input: NumberInput) =>