editor table is selectable

theopensystemslab · Nov 17, 2024 · 51c7c57 · 51c7c57
1 parent 84f0afb
commit 51c7c57
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx
@@ -10,7 +10,7 @@ import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
-import React from "react";
+import React, { ChangeEvent } from "react";
 import { FONT_WEIGHT_BOLD } from "theme";
 import InputGroup from "ui/editor/InputGroup";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -36,8 +36,38 @@ function PlanningConstraintsComponent(props: Props) {
         data: newValues,
       });
     },
+    validate: () => {
+      // TODO must select at least one formik.values.dataValues
+    },
   });
 
+  const changeSelectAll =
+    (vals: string[] | undefined) =>
+    (_event: ChangeEvent<HTMLInputElement>, _checked: boolean) => {
+      let newCheckedVals: string[];
+      if (vals?.length !== availableDatasets.length) {
+        newCheckedVals = availableDatasets.map((d) => d.val);
+      } else {
+        newCheckedVals = [];
+      }
+
+      formik.setFieldValue("dataValues", newCheckedVals);
+    };
+
+  const changeDataset =
+    (val: string) =>
+    (_event: ChangeEvent<HTMLInputElement>, _checked: boolean) => {
+      let newCheckedVals;
+      if (formik.values.dataValues?.includes(val)) {
+        newCheckedVals = formik.values.dataValues.filter((dv) => dv !== val);
+      } else {
+        newCheckedVals = formik.values.dataValues
+          ? [...formik.values.dataValues, val]
+          : [val];
+      }
+      formik.setFieldValue("dataValues", newCheckedVals);
+    };
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -91,8 +121,11 @@ function PlanningConstraintsComponent(props: Props) {
                     <TableCell>
                       <Checkbox
                         color="primary"
-                        checked={true}
-                        disabled={true}
+                        checked={
+                          availableDatasets.length ===
+                          formik.values.dataValues?.length
+                        }
+                        onChange={changeSelectAll(formik.values.dataValues)}
                         inputProps={{
                           "aria-label": "select all constraints",
                         }}
@@ -111,8 +144,10 @@ function PlanningConstraintsComponent(props: Props) {
                         <TableCell sx={{ verticalAlign: "top" }}>
                           <Checkbox
                             color="primary"
-                            checked={true}
-                            disabled={true}
+                            checked={formik.values.dataValues?.includes(
+                              dataset.val,
+                            )}
+                            onChange={changeDataset(dataset.val)}
                           />
                         </TableCell>
                         <TableCell>

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/model.ts b/editor.planx.uk/src/@planx/components/PlanningConstraints/model.ts
@@ -5,6 +5,7 @@ export interface PlanningConstraints extends BaseNodeData {
   description: string;
   fn: string;
   disclaimer: string;
+  dataValues?: string[] | undefined;
 }
 
 export const parseContent = (
@@ -16,6 +17,7 @@ export const parseContent = (
     "Planning constraints might limit how you can develop or use the property",
   fn: data?.fn || DEFAULT_FN,
   disclaimer: data?.disclaimer || DEFAULT_PLANNING_CONDITIONS_DISCLAIMER,
+  dataValues: data?.dataValues || availableDatasets.map((d) => d.val),
   ...parseBaseNodeData(data),
 });