feat: List component - First iteration of a residential units schema (#…

…3222)
theopensystemslab · Jun 1, 2024 · 0c3cce6 · 0c3cce6
1 parent 69ead78
commit 0c3cce6
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 12 deletions.
diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -13,13 +13,14 @@ import InputRowLabel from "ui/shared/InputRowLabel";
 
 import { EditorProps, ICONS, InternalNotes, MoreInformation } from "../ui";
 import { List, parseContent } from "./model";
+import { ResidentialUnits } from "./schemas/ResidentialUnits";
 import { Zoo } from "./schemas/Zoo";
 
 type Props = EditorProps<TYPES.List, List>;
 
 export const SCHEMAS = [
-  { name: "Zoo", schema: Zoo },
-  // TODO: Residential units
+  { name: "Residential Units (alpha)", schema: ResidentialUnits },
+  { name: "Zoo (test)", schema: Zoo },
   // TODO: Residential units (GLA)
 ];
 

diff --git a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
@@ -3,6 +3,7 @@ import FormControl from "@mui/material/FormControl";
 import FormLabel from "@mui/material/FormLabel";
 import MenuItem from "@mui/material/MenuItem";
 import RadioGroup from "@mui/material/RadioGroup";
+import { Option } from "@planx/components/shared";
 import { getIn } from "formik";
 import React from "react";
 import SelectInput from "ui/editor/SelectInput";
@@ -26,7 +27,10 @@ export const TextFieldInput: React.FC<Props<TextField>> = ({
   const { formik, activeIndex } = useListContext();
 
   return (
-    <InputLabel label={data.title} htmlFor={id}>
+    <InputLabel
+      label={required === false ? data.title + " (optional)" : data.title}
+      htmlFor={id}
+    >
       <Input
         type={((type) => {
           if (type === "email") return "email";
@@ -70,7 +74,10 @@ export const NumberFieldInput: React.FC<Props<NumberField>> = ({
   const { formik, activeIndex } = useListContext();
 
   return (
-    <InputLabel label={data.title} htmlFor={id}>
+    <InputLabel
+      label={required === false ? data.title + " (optional)" : data.title}
+      htmlFor={id}
+    >
       <Box sx={{ display: "flex", alignItems: "baseline" }}>
         <Input
           required={required}
@@ -104,6 +111,7 @@ export const NumberFieldInput: React.FC<Props<NumberField>> = ({
 export const RadioFieldInput: React.FC<Props<QuestionField>> = ({
   id,
   data,
+  required,
 }) => {
   const { formik, activeIndex } = useListContext();
 
@@ -119,7 +127,7 @@ export const RadioFieldInput: React.FC<Props<QuestionField>> = ({
           },
         })}
       >
-        {data.title}
+        {required === false ? data.title + " (optional)" : data.title}
       </FormLabel>
       <ErrorWrapper
         id={`${id}-error`}
@@ -145,15 +153,25 @@ export const RadioFieldInput: React.FC<Props<QuestionField>> = ({
   );
 };
 
-export const SelectFieldInput: React.FC<Props<QuestionField>> = ({
-  id,
-  data,
-  required,
-}) => {
+export const SelectFieldInput: React.FC<Props<QuestionField>> = (props) => {
   const { formik, activeIndex } = useListContext();
+  const { id, data, required } = props;
+
+  const isDisabled = (option: Option) => {
+    if (!props.unique) return false;
+
+    const existingValues = formik.values.userData
+      .map((response) => response[data.fn])
+      .filter((value) => value === option.data.text);
+
+    return existingValues.includes(option.data.text);
+  };
 
   return (
-    <InputLabel label={data.title} id={`select-label-${id}`}>
+    <InputLabel
+      label={required === false ? data.title + " (optional)" : data.title}
+      id={`select-label-${id}`}
+    >
       <ErrorWrapper
         id={`${id}-error`}
         error={getIn(formik.errors, `userData[${activeIndex}][${data.fn}]`)}
@@ -168,7 +186,11 @@ export const SelectFieldInput: React.FC<Props<QuestionField>> = ({
           name={`userData[${activeIndex}][${data.fn}]`}
         >
           {data.options.map((option) => (
-            <MenuItem key={option.id} value={option.data.text}>
+            <MenuItem
+              key={option.id}
+              value={option.data.text}
+              disabled={isDisabled(option)}
+            >
               {option.data.text}
             </MenuItem>
           ))}

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -364,6 +364,7 @@ describe("Form validation and error handling", () => {
   test.todo("text fields use existing validation schemas");
   test.todo("number fields use existing validation schemas");
   test.todo("question fields use validation schema");
+  test.todo("unique constraints are enforced on question where this is set");
   test.todo("an error displays if the minimum number of items is not met");
   test.todo("an error displays if the maximum number of items is exceeded");
   test.todo(

diff --git a/editor.planx.uk/src/@planx/components/List/model.ts b/editor.planx.uk/src/@planx/components/List/model.ts
@@ -42,6 +42,7 @@ export type NumberField = {
 export type QuestionField = {
   type: "question";
   required?: boolean;
+  unique?: boolean;
   data: QuestionInput & { fn: string };
 };
 

diff --git a/editor.planx.uk/src/@planx/components/List/schemas/ResidentialUnits.ts b/editor.planx.uk/src/@planx/components/List/schemas/ResidentialUnits.ts
@@ -0,0 +1,73 @@
+import { Schema } from "../model";
+
+export const ResidentialUnits: Schema = {
+  type: "Residential Units",
+  fields: [
+    {
+      type: "question",
+      data: {
+        title: "What type of change are you making?",
+        fn: "changeType",
+        options: [
+          { id: "proposed", data: { text: "Proposed" } },
+          { id: "existing", data: { text: "Existing" } },
+        ],
+      },
+    },
+    {
+      type: "question",
+      unique: true,
+      data: {
+        title: "What is the tenure type?",
+        fn: "tenureType",
+        options: [
+          { id: "marketHousing", data: { text: "Market housing" } },
+          {
+            id: "socialAffordableRent",
+            data: { text: "Social and affordable rent" },
+          },
+          {
+            id: "affordableHomeOwnership",
+            data: { text: "Affordable home ownership" },
+          },
+          { id: "starterHome", data: { text: "Starter homes" } },
+          { id: "selfBuild", data: { text: "Self build" } },
+        ],
+      },
+    },
+    {
+      type: "question",
+      data: {
+        title: "What is the unit type?",
+        fn: "unitType",
+        options: [
+          { id: "houses", data: { text: "Houses" } },
+          { id: "flats", data: { text: "Flats" } },
+          { id: "bedsits", data: { text: "Bedsits" } },
+          { id: "starterHome", data: { text: "Starter homes" } },
+          { id: "shelteredHousing", data: { text: "Sheltered housing" } },
+          { id: "clusteredFlats", data: { text: "Clustered flats" } },
+          { id: "other", data: { text: "Other" } },
+        ],
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many bedrooms are there?",
+        fn: "numberBedrooms",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      required: false,
+      data: {
+        title: "How many identical units of this type are there?",
+        fn: "numberIdenticalUnits",
+        allowNegatives: false,
+      },
+    },
+  ],
+  min: 1,
+} as const;