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

refactor: create baseOptionsEditor and delete duplicates #4041

Merged
merged 10 commits into from
Dec 12, 2024
Merged

refactor: create baseOptionsEditor and delete duplicates #4041

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a70d00f
Refactor Checklist folder into subfolders
jamdelion Dec 4, 2024
32689a2
More refactor
jamdelion Dec 4, 2024
bf201d3
Refactor editor
jamdelion Dec 4, 2024
2aabdc6
refactor optionsEditor into shared component
jamdelion Dec 4, 2024
cc9fe24
retrigger checks
jamdelion Dec 5, 2024
db6fe7f
Remove redundant file
jamdelion Dec 5, 2024
63eb8f2
Refactor to use BaseOptionseditor instead
jamdelion Dec 5, 2024
dacbb0f
consistent renaming
jamdelion Dec 5, 2024
688bff6
Tidy up
jamdelion Dec 5, 2024
d91ce15
Fix UI issue
jamdelion Dec 11, 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
6 changes: 3 additions & 3 deletions 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 @@ -14,7 +14,7 @@ import InputRow from "ui/shared/InputRow";

import { Option } from "../../shared";
import type { Group } from "../model";
import { OptionEditor } from "./OptionsEditor";
import ChecklistOptionsEditor from "./OptionsEditor";

export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
return (
Expand Down Expand Up @@ -70,7 +70,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
}) as Option
}
newValueLabel="add new option"
Editor={OptionEditor}
Editor={ChecklistOptionsEditor}
editorExtraProps={{
groupIndex,
showValueField: !!formik.values.fn,
Expand Down Expand Up @@ -142,7 +142,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
},
}) as Option
}
Editor={OptionEditor}
Editor={ChecklistOptionsEditor}
editorExtraProps={{ showValueField: !!formik.values.fn }}
/>
)}
Expand Down
132 changes: 37 additions & 95 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
@@ -1,104 +1,46 @@
import {
BaseOptionsEditor,
BaseOptionsEditorProps,
} from "@planx/components/shared/BaseOptionsEditor";
import React from "react";
import ImgInput from "ui/editor/ImgInput/ImgInput";
import SimpleMenu from "ui/editor/SimpleMenu";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";

import { FlagsSelect } from "../../shared/FlagsSelect";
import { OptionEditorProps } from "../types";
export type ChecklistOptionsEditorProps = BaseOptionsEditorProps & {
index: number;
groupIndex?: number;
groups?: Array<string>;
onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
showValueField?: boolean;
};

export const OptionEditor: React.FC<OptionEditorProps> = (props) => {
const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
value,
onChange,
showValueField = false,
groups,
onMoveToGroup,
index,
}) => {
return (
<div style={{ width: "100%" }}>
<InputRow>
{props.value.id ? (
<input type="hidden" value={props.value.id} readOnly />
) : null}
<InputRowItem width="200%">
<Input
required
format="bold"
multiline
value={props.value.data.text || ""}
onChange={(ev) => {
props.onChange({
...props.value,
data: {
...props.value.data,
text: ev.target.value,
},
});
}}
placeholder="Option"
/>
</InputRowItem>

<ImgInput
img={props.value.data.img}
onChange={(img) => {
props.onChange({
...props.value,
data: {
...props.value.data,
img,
},
});
}}
<BaseOptionsEditor
value={value}
onChange={onChange}
showValueField={showValueField}
>
{typeof index !== "undefined" && groups && onMoveToGroup && (
<SimpleMenu
jamdelion marked this conversation as resolved.
Show resolved Hide resolved
items={groups.map((group, groupIndex) => ({
label: `Move to ${group || `group ${groupIndex}`}`,
onClick: () => {
if (onMoveToGroup && typeof index === "number")
onMoveToGroup(index, groupIndex);
},
disabled: groupIndex === groupIndex,
}))}
/>

{typeof props.index !== "undefined" &&
props.groups &&
props.onMoveToGroup && (
<SimpleMenu
items={props.groups.map((group, groupIndex) => ({
label: `Move to ${group || `group ${groupIndex}`}`,
onClick: () => {
props.onMoveToGroup &&
typeof props.index === "number" &&
props.onMoveToGroup(props.index, groupIndex);
},
disabled: groupIndex === props.groupIndex,
}))}
/>
)}
</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>
)}

<FlagsSelect
value={
Array.isArray(props.value.data.flag)
? props.value.data.flag
: [props.value.data.flag]
}
onChange={(ev) => {
props.onChange({
...props.value,
data: {
...props.value.data,
flag: ev,
},
});
}}
/>
</div>
</BaseOptionsEditor>
);
};

export default ChecklistOptionsEditor;
16 changes: 8 additions & 8 deletions editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe("Checklist Component - Grouped Layout", () => {
text="home type?"
handleSubmit={handleSubmit}
groupedOptions={groupedOptions}
/>,
/>
);

await user.click(screen.getByText("Section 1"));
Expand All @@ -46,7 +46,7 @@ describe("Checklist Component - Grouped Layout", () => {
handleSubmit={handleSubmit}
previouslySubmittedData={{ answers: ["S1_Option1", "S3_Option1"] }}
groupedOptions={groupedOptions}
/>,
/>
);

expect(screen.getByTestId("group-0-expanded")).toBeTruthy();
Expand All @@ -67,7 +67,7 @@ describe("Checklist Component - Grouped Layout", () => {
description=""
text="home type?"
groupedOptions={groupedOptions}
/>,
/>
);
const results = await axe(container);
expect(results).toHaveNoViolations();
Expand All @@ -83,7 +83,7 @@ describe("Checklist Component - Grouped Layout", () => {
text="home type?"
handleSubmit={handleSubmit}
groupedOptions={groupedOptions}
/>,
/>
);
const [section1Button, section2Button, section3Button] =
screen.getAllByRole("button");
Expand Down Expand Up @@ -140,7 +140,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
text="home type?"
handleSubmit={handleSubmit}
options={options[type]}
/>,
/>
);

expect(screen.getByRole("heading")).toHaveTextContent("home type?");
Expand Down Expand Up @@ -177,7 +177,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
handleSubmit={handleSubmit}
previouslySubmittedData={{ answers: ["flat_id", "house_id"] }}
options={options[type]}
/>,
/>
);

await user.click(screen.getByTestId("continue-button"));
Expand All @@ -194,7 +194,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
description=""
text="home type?"
options={options[type]}
/>,
/>
);
const results = await axe(container);
expect(results).toHaveNoViolations();
Expand All @@ -210,7 +210,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
text="home type?"
handleSubmit={handleSubmit}
options={options[type]}
/>,
/>
);

await user.tab();
Expand Down
9 changes: 0 additions & 9 deletions editor.planx.uk/src/@planx/components/Checklist/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,5 @@ export interface ChecklistProps extends Checklist {
} & BaseNodeData;
};
}
export interface OptionEditorProps {
index: number;
value: Option;
onChange: (newVal: Option) => void;
groupIndex?: number;
groups?: Array<string>;
onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
showValueField?: boolean;
}

export type Props = PublicProps<Checklist>;
99 changes: 2 additions & 97 deletions editor.planx.uk/src/@planx/components/Question/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";
import { Switch } from "ui/shared/Switch";

import { InternalNotes } from "../../../ui/editor/InternalNotes";
import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
import { FlagsSelect } from "../shared/FlagsSelect";
import { ICONS } from "../shared/icons";
import QuestionOptionsEditor from "./OptionsEditor";

interface Props {
node: {
Expand All @@ -34,100 +33,6 @@ interface Props {
handleSubmit?: Function;
}

const OptionEditor: React.FC<{
value: Option;
onChange: (newVal: Option) => void;
showValueField?: boolean;
}> = (props) => (
<div style={{ width: "100%" }}>
<InputRow>
{props.value.id && (
<input type="hidden" value={props.value.id} readOnly />
)}
<InputRowItem width="200%">
<Input
required
format="bold"
multiline
value={props.value.data.text || ""}
onChange={(ev) => {
props.onChange({
...props.value,
data: {
...props.value.data,
text: ev.target.value,
},
});
}}
placeholder="Option"
/>
</InputRowItem>
<ImgInput
img={props.value.data.img}
onChange={(img) => {
props.onChange({
...props.value,
data: {
...props.value.data,
img,
},
});
}}
/>
</InputRow>
<InputRow>
<Input
value={props.value.data.description || ""}
placeholder="Description"
multiline
onChange={(ev) => {
props.onChange({
...props.value,
data: {
...props.value.data,
description: ev.target.value,
},
});
}}
/>
</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>
)}
<FlagsSelect
value={
Array.isArray(props.value.data.flag)
? props.value.data.flag
: [props.value.data.flag]
}
onChange={(ev) => {
props.onChange({
...props.value,
data: {
...props.value.data,
flag: ev,
},
});
}}
/>
</div>
);

export const Question: React.FC<Props> = (props) => {
const type = TYPES.Question;

Expand Down Expand Up @@ -246,7 +151,7 @@ export const Question: React.FC<Props> = (props) => {
},
}) as Option
}
Editor={OptionEditor}
Editor={QuestionOptionsEditor}
editorExtraProps={{ showValueField: !!formik.values.fn }}
/>
</ModalSectionContent>
Expand Down
Loading
Loading