Question options plus ODP enum overrides working

theopensystemslab · Dec 12, 2024 · aa13297 · aa13297
1 parent 76676e5
commit aa13297
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 39 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -1,3 +1,4 @@
+import { getValidSchemaValues } from "@opensystemslab/planx-core";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { FormikErrors, FormikValues, useFormik } from "formik";
 import React, { useEffect, useRef } from "react";
@@ -95,35 +96,19 @@ const OptionEditor: React.FC<{
       />
     </InputRow>
     {props.showValueField && (
-      <InputRow>
-        <Input
-          format="data"
-          value={props.value.data.val || ""}
-          placeholder="Data Value"
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                val: ev.target.value,
-              },
-            });
-          }}
-        />
-      </InputRow>
-      // <DataFieldAutocomplete
-      //   schema={props.schema}
-      //   value={props.value.data.val || ""}
-      //   onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-      //     props.onChange({
-      //       ...props.value,
-      //       data: {
-      //         ...props.value.data,
-      //         val: ev.target.value,
-      //       },
-      //     });
-      //   }}
-      // />
+      <DataFieldAutocomplete
+        schema={props.schema}
+        value={props.value.data.val || ""}
+        onChange={(targetValue) => {
+          props.onChange({
+            ...props.value,
+            data: {
+              ...props.value.data,
+              val: targetValue ? targetValue : undefined,
+            },
+          });
+        }}
+      />
     )}
     <FlagsSelect
       value={
@@ -184,6 +169,17 @@ export const Question: React.FC<Props> = (props) => {
 
   const schema = useStore().getFlowSchema();
 
+  const getOptionsSchemaByFn = (fn?: string, defaultOptionsSchema?: string[]) => {
+    let schema = defaultOptionsSchema;
+
+    // For certain data fields, suggest based on full ODP Schema enums rather than current flow schema
+    if (fn === "application.type") schema = getValidSchemaValues("ApplicationType");
+    if (fn === "proposal.projectType") schema = getValidSchemaValues("ProjectType");
+    if (fn === "property.type") schema = getValidSchemaValues("PropertyType");
+
+    return schema;
+  }
+
   const focusRef = useRef<HTMLInputElement | null>(null);
 
   // horrible hack to remove focus from Rich Text Editor
@@ -258,7 +254,10 @@ export const Question: React.FC<Props> = (props) => {
               }) as Option
             }
             Editor={OptionEditor}
-            editorExtraProps={{ showValueField: !!formik.values.fn }}
+            editorExtraProps={{ 
+              showValueField: !!formik.values.fn, 
+              schema: getOptionsSchemaByFn(formik.values.fn, schema?.options),
+            }}
           />
         </ModalSectionContent>
       </ModalSection>

diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -4,6 +4,8 @@ import {
   createFilterOptions
 } from "@mui/material/Autocomplete";
 import ListItem from "@mui/material/ListItem";
+import { FilterOptionsState } from "@mui/material/useAutocomplete";
+import isNull from "lodash/isNull";
 import React, { useMemo } from "react";
 import AutocompleteInput from "ui/shared/AutocompleteInput";
 import InputRow from "ui/shared/InputRow";
@@ -21,11 +23,13 @@ const renderOptions: AutocompleteProps<
   false,
   true,
   "div"
->["renderOption"] = (props, value) => (
-  <ListItem key={value} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
-    {value}
-  </ListItem>
-);
+>["renderOption"] = (props, option) => {
+  return (
+    <ListItem key={option} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
+      {option}
+    </ListItem>
+  );
+};
 
 const filter = createFilterOptions<string>();
 
@@ -39,10 +43,19 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
 
   const handleChange = (
     _event: React.SyntheticEvent,
-    value: string | null,
+    value: string | FilterOptionsState<string> | null,
     _reason: AutocompleteChangeReason,
   ) => {
-    props.onChange(value);
+    if (typeof value === "string") {
+      // Selecting an option
+      props.onChange(value);
+    } else if (value && value.inputValue) {
+      // Adding a new option
+      props.onChange(value.inputValue);
+    } else if (isNull(value)) {
+      // Clearing an option
+      props.onChange(value);
+    }
   };
 
   return (
@@ -52,12 +65,12 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
         key="data-field-autocomplete"
         placeholder="Data field"
         required={Boolean(props.required)}
-        options={options}
         onChange={handleChange}
+        value={value}
+        options={options}
         isOptionEqualToValue={(option: string, value: string) =>
           option === value
         }
-        value={value}
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
           const { inputValue } = params;
@@ -68,6 +81,18 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
           }
           return filtered;
         }}
+        // getOptionLabel={(option) => {
+        //   // Value selected with enter, right from the input
+        //   if (typeof option === 'string') {
+        //     return option;
+        //   }
+        //   // Add "xxx" option created dynamically
+        //   if (option.inputValue) {
+        //     return option.inputValue;
+        //   }
+        //   // Regular option
+        //   return option;
+        // }}
         renderOption={renderOptions}
         selectOnFocus
         clearOnEscape