Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: autocomplete data fields in the editor #4062

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

feat: autocomplete data fields in the editor #4062

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
48d60ce
wip
jessicamcinchak Dec 10, 2024
d0e707e
fix: Autocomplete types
DafyddLlyr Dec 10, 2024
3b2c2c5
Merge branch 'main' of github.com:theopensystemslab/planx-new into je…
jessicamcinchak Dec 11, 2024
76676e5
styled and mostly working x3 component types
jessicamcinchak Dec 11, 2024
aa13297
Question options plus ODP enum overrides working
jessicamcinchak Dec 12, 2024
04e19ce
hide popup icon
jessicamcinchak Dec 17, 2024
e6a8be6
rebase and filter out flag values
jessicamcinchak Dec 17, 2024
949f090
fix add new option
jessicamcinchak Dec 17, 2024
cd5f1b8
more component types
jessicamcinchak Dec 18, 2024
5496a47
final component types
jessicamcinchak Dec 18, 2024
6dba5b7
type fix
jessicamcinchak Dec 18, 2024
d878159
rebase plus store tests
jessicamcinchak Dec 18, 2024
c27fdf1
update e2e placeholders
jessicamcinchak Dec 18, 2024
cea734f
try page.locator by id in e2e, placeholder matches multiple elements
jessicamcinchak Dec 18, 2024
8e11f6c
prettier
jessicamcinchak Dec 18, 2024
83e6e3a
try getByRole('combobox')
jessicamcinchak Dec 19, 2024
5114475
fix(e2e): Add click on combobox
DafyddLlyr Dec 20, 2024
867a6c2
set default schema options and remove getFlowSchema()?.nodes calls pe…
jessicamcinchak Dec 20, 2024
e57ba7f
fix(e2e): Missing clicks and enters
DafyddLlyr Dec 20, 2024
0e822be
Merge branch 'main' of github.com:theopensystemslab/planx-new into je…
jessicamcinchak Dec 20, 2024
a24345a
rebase
jessicamcinchak Dec 20, 2024
ec9c832
fix(e2e): Drop index, use last. Match by value without using fill()
DafyddLlyr Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { useStore } from "pages/FlowEditor/lib/store";
import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import { AddressInput, parseAddressInput } from "./model";

Expand All @@ -25,8 +27,11 @@ export default function AddressInputComponent(props: Props): FCReturn {
});
}
},
validate: () => {},
validate: () => { },
});

const schema = useStore().getFlowSchema()?.nodes;

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
Expand All @@ -51,16 +56,12 @@ export default function AddressInputComponent(props: Props): FCReturn {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
schema={schema}
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
</ModalSectionContent>
</ModalSection>
<ModalFooter formik={formik} />
Expand Down
21 changes: 11 additions & 10 deletions editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import { Switch } from "ui/shared/Switch";

import { useStore } from "pages/FlowEditor/lib/store";
import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import type { Calculate } from "./model";
import { evaluate, getVariables, parseCalculate } from "./model";
Expand All @@ -25,6 +27,7 @@ const ConditionLabel = styled("span")(() => ({
}));

const UNKNOWN = "unknown";

export default function Component(props: Props) {
const formik = useFormik({
initialValues: parseCalculate(props.node?.data),
Expand Down Expand Up @@ -101,6 +104,8 @@ export default function Component(props: Props) {
}
}, [formik.values.formula]);

const schema = useStore().getFlowSchema()?.nodes;

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
Expand All @@ -123,16 +128,12 @@ export default function Component(props: Props) {
</InputRow>
</ModalSectionContent>
<ModalSectionContent title="Output">
<InputRow>
<Input
required
placeholder="output data field"
name="output"
format="data"
value={formik.values.output}
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
schema={schema}
value={formik.values.output}
onChange={(value) => formik.setFieldValue("output", value)}
/>
<InputRow>
<Switch
checked={formik.values.formatOutputForAutomations}
Expand Down
25 changes: 9 additions & 16 deletions editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import { Switch } from "ui/shared/Switch";

import { DataFieldAutocomplete } from "@planx/components/shared/DataFieldAutocomplete";
import { useStore } from "pages/FlowEditor/lib/store";
import { parseBaseNodeData } from "../../shared";
import { ICONS } from "../../shared/icons";
import type { Checklist } from "../model";
Expand Down Expand Up @@ -95,6 +97,8 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
}, 50);
}, []);

const schema = useStore().getFlowSchema()?.nodes;

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
Expand All @@ -110,15 +114,13 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
inputRef={focusRef}
required
/>

<ImgInput
img={formik.values.img}
onChange={(newUrl) => {
formik.setFieldValue("img", newUrl);
}}
/>
</InputRow>

<InputRow>
<RichTextInput
name="description"
Expand All @@ -127,18 +129,11 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
onChange={formik.handleChange}
/>
</InputRow>

<InputRow>
<Input
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
error={Boolean(formik.errors?.fn)}
errorMessage={formik.errors?.fn}
/>
</InputRow>
<DataFieldAutocomplete
schema={schema}
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
<InputRow>
<Switch
checked={!!formik.values.groupedOptions}
Expand Down Expand Up @@ -180,10 +175,8 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
</InputRow>
</InputGroup>
</ModalSectionContent>

<Options formik={formik} />
</ModalSection>

<ModalFooter formik={formik} />
</form>
);
Expand Down
12 changes: 11 additions & 1 deletion editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,17 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { useStore } from "pages/FlowEditor/lib/store";
import { Option } from "../../shared";
import type { Group } from "../model";
import ChecklistOptionsEditor from "./OptionsEditor";
import { getOptionsSchemaByFn } from "@planx/components/shared/utils";

export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
const schema = useStore().getFlowSchema()?.options;
const initialOptions: Option[] | undefined = formik.initialValues.options || formik.initialValues.groupedOptions?.map((group: Group<Option>) => group.children)?.flat();
const initialOptionVals = initialOptions?.map((option) => option.data?.val);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of a lazy rebase right now while the exclusive-or work is still in-progress - I think initialOptions should be able to be simplified/derived from exclusiveOptions or nonExclusiveOptions once those are handling "grouped" options


return (
<ModalSectionContent subtitle="Options">
{formik.values.groupedOptions ? (
Expand Down Expand Up @@ -103,6 +109,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
groups: formik.values.groupedOptions.map(
(opt: Group<Option>) => opt.title,
),
schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
}}
/>
</Box>
Expand Down Expand Up @@ -143,7 +150,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
}) as Option
}
Editor={ChecklistOptionsEditor}
editorExtraProps={{ showValueField: !!formik.values.fn }}
editorExtraProps={{
showValueField: !!formik.values.fn,
schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
}}
/>
)}
</ModalSectionContent>
Expand Down
2 changes: 2 additions & 0 deletions editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type ChecklistOptionsEditorProps = BaseOptionsEditorProps & {

const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
value,
schema,
onChange,
showValueField = false,
groups,
Expand All @@ -24,6 +25,7 @@ const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
return (
<BaseOptionsEditor
value={value}
schema={schema}
onChange={onChange}
showValueField={showValueField}
>
Expand Down
21 changes: 11 additions & 10 deletions editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { useStore } from "pages/FlowEditor/lib/store";
import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import { ContactInput, parseContactInput } from "./model";

Expand All @@ -27,6 +29,9 @@ export default function ContactInputComponent(props: Props): FCReturn {
},
validate: () => {},
});

const schema = useStore().getFlowSchema()?.nodes;

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
Expand All @@ -51,16 +56,12 @@ export default function ContactInputComponent(props: Props): FCReturn {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
schema={schema}
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
</ModalSectionContent>
</ModalSection>
<ModalFooter formik={formik} />
Expand Down
19 changes: 9 additions & 10 deletions editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import DateInputUi from "ui/shared/DateInput/DateInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { useStore } from "pages/FlowEditor/lib/store";
import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";

export type Props = EditorProps<TYPES.DateInput, DateInput>;
Expand All @@ -36,6 +38,8 @@ const DateInputComponent: React.FC<Props> = (props) => {
validationSchema: editorValidationSchema(),
});

const schema = useStore().getFlowSchema()?.nodes;

return (
<form onSubmit={formik.handleSubmit} id="modal" name="modal">
<ModalSection>
Expand All @@ -57,16 +61,11 @@ const DateInputComponent: React.FC<Props> = (props) => {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
// required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
schema={schema}
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
<Box mt={2}>
<InputRow>
<DateInputUi
Expand Down
30 changes: 18 additions & 12 deletions editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { getValidSchemaValues } from "@opensystemslab/planx-core";
import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
import { useFormik } from "formik";
import React from "react";
Expand All @@ -8,6 +9,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";

function Component(props: any) {
Expand Down Expand Up @@ -38,17 +40,25 @@ function Component(props: any) {
props.handleSubmit({ type: TYPES.FileUpload, data: newValues });
}
},
validate: () => {},
validate: () => { },
});

// Rather than default to generic `useStore().getFlowSchema()`
// File Upload components can specifically suggest based on ODP Schema enum options
let schema = getValidSchemaValues("FileType") || [];
// // Additionally ensure that existing initial values are supported & pre-populated on load
if (formik.initialValues?.fn && !schema?.includes(formik.initialValues.fn))
schema.push(formik.initialValues.fn);

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
<ModalSectionContent title="File upload" Icon={ICONS[TYPES.FileUpload]}>
<InputRow>
<Input
required
format="large"
placeholder="File Upload"
placeholder="Title"
name="title"
value={formik.values.title}
onChange={formik.handleChange}
Expand All @@ -62,16 +72,12 @@ function Component(props: any) {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
schema={schema}
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
</ModalSectionContent>
</ModalSection>
<ModalFooter formik={formik} />
Expand Down
Loading
Loading