editor validation plus api gis query params

theopensystemslab · Nov 25, 2024 · 65e699e · 65e699e
1 parent 4147b44
commit 65e699e
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 89 deletions.
diff --git a/api.planx.uk/modules/gis/service/digitalLand.ts b/api.planx.uk/modules/gis/service/digitalLand.ts
@@ -71,15 +71,30 @@ async function go(
   geom: string,
   extras: Record<string, string>,
 ): Promise<GISResponse> {
-  // generate list of digital land datasets we should query based on 'active' planx schema variables
+  // generate list of digital land datasets we should query and their associated passport values
   const activeDatasets: string[] = [];
-  Object.keys(baseSchema).forEach((key) => {
-    if (baseSchema[key]["active"]) {
-      baseSchema[key]["digital-land-datasets"]?.forEach((dataset: string) => {
-        activeDatasets.push(dataset);
-      });
-    }
-  });
+  let activeDataValues: string[] = [];
+  if (extras?.vals) {
+    // if the editor selected constraints, prioritise their selection
+    activeDataValues = extras.vals.split(",");
+    Object.keys(baseSchema).forEach((key) => {
+      if (activeDataValues.includes(key)) {
+        baseSchema[key]["digital-land-datasets"]?.forEach((dataset: string) => {
+          activeDatasets.push(dataset);
+        });
+      }
+    });
+  } else {
+    // else default to the internally maintained list of all "active" datasets
+    Object.keys(baseSchema).forEach((key) => {
+      if (baseSchema[key]["active"]) {
+        activeDataValues.push(key);
+        baseSchema[key]["digital-land-datasets"]?.forEach((dataset: string) => {
+          activeDatasets.push(dataset);
+        });
+      }
+    });
+  }
 
   // set up request query params per https://www.planning.data.gov.uk/docs
   const options = {
@@ -159,7 +174,8 @@ async function go(
   // TODO followup with digital land about how to return 'nots' via API (currently assumes any "active" metadata was successfully queried)
   const nots = Object.keys(baseSchema).filter(
     (key) =>
-      baseSchema[key]["active"] && !Object.keys(formattedResult).includes(key),
+      activeDataValues.includes(key) &&
+      !Object.keys(formattedResult).includes(key),
   );
   nots.forEach((not) => {
     formattedResult[not] = {

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx
@@ -9,14 +9,15 @@ import TableRow from "@mui/material/TableRow";
 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 { FormikErrors, useFormik } from "formik";
 import React, { ChangeEvent } from "react";
 import { FONT_WEIGHT_BOLD } from "theme";
 import InputGroup from "ui/editor/InputGroup";
 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";
 
@@ -36,8 +37,12 @@ function PlanningConstraintsComponent(props: Props) {
         data: newValues,
       });
     },
-    validate: () => {
-      // TODO must select at least one formik.values.dataValues
+    validate: (values) => {
+      const errors: FormikErrors<PlanningConstraints> = {};
+      if (!values.dataValues || values.dataValues?.length < 1) {
+        errors.dataValues = "Select at least one constraint";
+      }
+      return errors;
     },
   });
 
@@ -50,7 +55,6 @@ function PlanningConstraintsComponent(props: Props) {
       } else {
         newCheckedVals = [];
       }
-
       formik.setFieldValue("dataValues", newCheckedVals);
     };
 
@@ -114,82 +118,84 @@ function PlanningConstraintsComponent(props: Props) {
             </InputRow>
           </InputGroup>
           <InputGroup label="Which constraints do you want to check?">
-            <TableContainer>
-              <Table size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>
-                      <Checkbox
-                        color="primary"
-                        checked={
-                          availableDatasets.length ===
-                          formik.values.dataValues?.length
-                        }
-                        onChange={changeSelectAll(formik.values.dataValues)}
-                        inputProps={{
-                          "aria-label": "select all constraints",
-                        }}
-                      />
-                    </TableCell>
-                    <TableCell sx={{ fontWeight: FONT_WEIGHT_BOLD }}>
-                      Constraints
-                    </TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {availableDatasets
-                    .sort((a, b) => a.val.localeCompare(b.val))
-                    .map((dataset, i: number) => (
-                      <TableRow key={i}>
-                        <TableCell sx={{ verticalAlign: "top" }}>
-                          <Checkbox
-                            color="primary"
-                            checked={formik.values.dataValues?.includes(
-                              dataset.val,
-                            )}
-                            onChange={changeDataset(dataset.val)}
-                          />
-                        </TableCell>
-                        <TableCell>
-                          <InputGroup>
-                            <InputRow>
-                              <Input
-                                format="large"
-                                name="text"
-                                value={dataset.text}
-                                disabled
-                              />
-                            </InputRow>
-                            <InputRow>
-                              <Input
-                                format="data"
-                                name="val"
-                                value={dataset.val}
-                                disabled
-                              />
-                            </InputRow>
-                          </InputGroup>
-                          <Box>
-                            <Typography
-                              variant="body2"
-                              color="GrayText"
-                              sx={{ fontSize: ".8em", pb: 1 }}
-                            >
-                              {`via ${dataset.source}: ${dataset.datasets
-                                .filter(Boolean)
-                                .join(", ")} ${
-                                dataset?.entity
-                                  ? `(entity ${dataset.entity})`
-                                  : ``
-                              }`}
-                            </Typography>
-                          </Box>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
+            <ErrorWrapper error={formik.errors.dataValues}>
+              <TableContainer>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>
+                        <Checkbox
+                          color="primary"
+                          checked={
+                            availableDatasets.length ===
+                            formik.values.dataValues?.length
+                          }
+                          onChange={changeSelectAll(formik.values.dataValues)}
+                          inputProps={{
+                            "aria-label": "select all constraints",
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell sx={{ fontWeight: FONT_WEIGHT_BOLD }}>
+                        Constraints
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {availableDatasets
+                      .sort((a, b) => a.val.localeCompare(b.val))
+                      .map((dataset, i: number) => (
+                        <TableRow key={i}>
+                          <TableCell sx={{ verticalAlign: "top" }}>
+                            <Checkbox
+                              color="primary"
+                              checked={formik.values.dataValues?.includes(
+                                dataset.val,
+                              )}
+                              onChange={changeDataset(dataset.val)}
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <InputGroup>
+                              <InputRow>
+                                <Input
+                                  format="large"
+                                  name="text"
+                                  value={dataset.text}
+                                  disabled
+                                />
+                              </InputRow>
+                              <InputRow>
+                                <Input
+                                  format="data"
+                                  name="val"
+                                  value={dataset.val}
+                                  disabled
+                                />
+                              </InputRow>
+                            </InputGroup>
+                            <Box>
+                              <Typography
+                                variant="body2"
+                                color="GrayText"
+                                sx={{ fontSize: ".8em", pb: 1 }}
+                              >
+                                {`via ${dataset.source}: ${dataset.datasets
+                                  .filter(Boolean)
+                                  .join(", ")} ${
+                                  dataset?.entity
+                                    ? `(entity ${dataset.entity})`
+                                    : ``
+                                }`}
+                              </Typography>
+                            </Box>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </ErrorWrapper>
           </InputGroup>
           <InputGroup label="Planning conditions disclaimer">
             <InputRow>

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
@@ -83,6 +83,7 @@ function Component(props: Props) {
     siteBoundary && stringify(siteBoundary);
   const planningDataParams: Record<string, string> = {
     geom: wktPolygon || wktPoint,
+    vals: dataValues.join(","),
     ...params,
   };