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: Fetch team_settings data for Editor forms and adding Update fn #3366

Merged
merged 8 commits into from
Jul 3, 2024
Merged

feat: Fetch team_settings data for Editor forms and adding Update fn #3366

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3be2b8b
add update fn to store and forms
RODO94 Jul 3, 2024
8d103fd
add fetch values to forms
RODO94 Jul 3, 2024
1db71cd
add homepage to formik and reorder setting order
RODO94 Jul 3, 2024
4a5a0eb
basic validation for boundary url field
RODO94 Jul 3, 2024
feba3e2
add input based error wrapping to settingsForm and team settings forms
RODO94 Jul 3, 2024
bdac32d
remove console log from Contact Form
RODO94 Jul 3, 2024
8e891f8
Revert "basic validation for boundary url field"
RODO94 Jul 3, 2024
a4f90f4
revert additions for error handling in settings form
RODO94 Jul 3, 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
20 changes: 17 additions & 3 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
import { useFormik } from "formik";
import { useStore } from "pages/FlowEditor/lib/store";
import React, { ChangeEvent } from "react";
import InputLabel from "ui/editor/InputLabel";
import ErrorWrapper from "ui/shared/ErrorWrapper";
import Input from "ui/shared/Input";
import * as Yup from "yup";

import { SettingsForm } from "../shared/SettingsForm";
import { FormProps } from ".";

export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {
const formSchema = Yup.object().shape({
boundaryUrl: Yup.string()
.url("URL's must look like the example given above")
.required("Enter a boundary URL"),
});
const formik = useFormik({
...formikConfig,
onSubmit(values, { resetForm }) {
onSuccess();
resetForm({ values });
validationSchema: formSchema,
onSubmit: async (values, { resetForm }) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

We're still missing some basic validation on this field. I appreciate there's still work to be done on the boundary field, but if we're going to unhide the menu and allow Editors to access it we should either put this in place first, or hide this field.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll do the error handling in another PR, hopefully make it a lot cleaner. Current ones were just to test my understanding of formik and yup

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have added basic validation now though

const isSuccess = await useStore.getState().updateTeamSettings({
boundaryUrl: values.boundaryUrl,
});
if (isSuccess) {
onSuccess();
resetForm({ values });
}
},
});

Expand Down
19 changes: 16 additions & 3 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useFormik } from "formik";
import { useStore } from "pages/FlowEditor/lib/store";
import React, { ChangeEvent } from "react";
import InputLabel from "ui/editor/InputLabel";
import Input from "ui/shared/Input";
Expand All @@ -20,9 +21,17 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
const formik = useFormik({
...formikConfig,
validationSchema: formSchema,
onSubmit(values, { resetForm }) {
onSuccess();
resetForm({ values });
onSubmit: async (values, { resetForm }) => {
const isSuccess = await useStore.getState().updateTeamSettings({
helpEmail: values.helpEmail,
helpOpeningHours: values.helpOpeningHours,
helpPhone: values.helpPhone,
Comment on lines +27 to +30
Copy link
Contributor

Choose a reason for hiding this comment

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

homepage is missing here which means that changes to the URL are not persisted.

homepage: values.homepage,
});
if (isSuccess) {
onSuccess();
resetForm({ values });
}
},
});

Expand All @@ -47,12 +56,14 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
onChange={(event) => {
onChangeFn("homepage", event);
}}
value={formik.values.homepage}
id="homepageUrl"
/>
</InputLabel>
<InputLabel label="Contact email address" htmlFor="helpEmail">
<Input
name="helpEmail"
value={formik.values.helpEmail}
onChange={(event) => {
onChangeFn("helpEmail", event);
}}
Expand All @@ -62,6 +73,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
<InputLabel label="Phone number" htmlFor="helpPhone">
<Input
name="helpPhone"
value={formik.values.helpPhone}
onChange={(event) => {
onChangeFn("helpPhone", event);
}}
Expand All @@ -72,6 +84,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
<Input
multiline
name="helpOpeningHours"
value={formik.values.helpOpeningHours}
onChange={(event) => {
onChangeFn("helpOpeningHours", event);
}}
Expand Down
27 changes: 8 additions & 19 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,33 @@ import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Snackbar from "@mui/material/Snackbar";
import Typography from "@mui/material/Typography";
import { TeamSettings } from "@opensystemslab/planx-core/types";
import { FormikConfig } from "formik";
import { useStore } from "pages/FlowEditor/lib/store";
import React, { useEffect, useState } from "react";
import SettingsSection from "ui/editor/SettingsSection";

import BoundaryForm from "./BoundaryForm";
import ContactForm from "./ContactForm";

export interface GeneralSettings {
boundaryUrl: string;
helpEmail: string;
helpPhone: string;
helpOpeningHours: string;
homepage: string;
}

export interface FormProps {
formikConfig: FormikConfig<GeneralSettings>;
formikConfig: FormikConfig<TeamSettings>;
onSuccess: () => void;
}

const GeneralSettings: React.FC = () => {
const [formikConfig, setFormikConfig] = useState<
FormikConfig<GeneralSettings> | undefined
FormikConfig<TeamSettings> | undefined
>(undefined);

const initialValues = {
boundaryUrl: "",
helpEmail: "",
helpPhone: "",
helpOpeningHours: "",
homepage: "",
};

useEffect(() => {
const fetchTeam = async () => {
try {
const fetchedTeam = await useStore.getState().fetchCurrentTeam();
if (!fetchedTeam) throw Error("Unable to find team");

setFormikConfig({
initialValues: initialValues,
initialValues: fetchedTeam.teamSettings,
onSubmit: () => {},
validateOnBlur: false,
validateOnChange: false,
Expand Down
10 changes: 10 additions & 0 deletions editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export interface TeamStore {
clearTeamStore: () => void;
fetchCurrentTeam: () => Promise<Team>;
updateTeamTheme: (theme: Partial<TeamTheme>) => Promise<boolean>;
updateTeamSettings: (teamSettings: Partial<TeamSettings>) => Promise<boolean>;
}

export const teamStore: StateCreator<
Expand Down Expand Up @@ -128,4 +129,13 @@ export const teamStore: StateCreator<
const isSuccess = await $client.team.updateTheme(teamId, theme);
return isSuccess;
},

updateTeamSettings: async (teamSettings: Partial<TeamSettings>) => {
const { teamId, $client } = get();
const isSuccess = await $client.team.updateTeamSettings(
teamId,
teamSettings,
);
return isSuccess;
},
});
10 changes: 5 additions & 5 deletions editor.planx.uk/src/routes/teamSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ const teamSettingsRoutes = compose(
<Settings
currentTab={req.params.tab}
tabs={[
{
name: "General",
route: "general",
Component: GeneralSettings,
},
{
name: "Team",
route: "team",
Expand All @@ -47,11 +52,6 @@ const teamSettingsRoutes = compose(
route: "design",
Component: DesignSettings,
},
// {
// name: "General",
// route: "general",
// Component: GeneralSettings,
// },
]}
/>
),
Expand Down
Loading