75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
import Box from '@mui/joy/Box';
|
|
import Alert from '@mui/joy/Alert';
|
|
import Button from '@mui/joy/Button';
|
|
import FormControl from '@mui/joy/FormControl';
|
|
import FormLabel from '@mui/joy/FormLabel';
|
|
import Input from '@mui/joy/Input';
|
|
import Stack from '@mui/joy/Stack';
|
|
import { CssVarsProvider } from '@mui/joy/styles';
|
|
import Typography from '@mui/joy/Typography';
|
|
import Container from 'components/Container';
|
|
import * as React from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
import useForm from 'hooks/useForm.ee';
|
|
import useCreateFormSubmission from 'hooks/useCreateFormSubmission.ee';
|
|
|
|
export default function FormFlow() {
|
|
const { flowId } = useParams();
|
|
const { data: flow, isLoading } = useForm(flowId);
|
|
const { mutate: createFormSubmission, isSuccess } =
|
|
useCreateFormSubmission(flowId);
|
|
|
|
if (isLoading) return 'loading...';
|
|
|
|
const formFields = flow.data.fields;
|
|
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
|
|
console.log(event.target);
|
|
const formData = new FormData(event.target);
|
|
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
console.log('data', data);
|
|
createFormSubmission(data);
|
|
};
|
|
|
|
return (
|
|
<CssVarsProvider>
|
|
<Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
|
|
<Container maxWidth="sm">
|
|
<Typography gutterBottom color="primary" level="h1">
|
|
{flow.data.name}
|
|
</Typography>
|
|
|
|
<Stack
|
|
component="form"
|
|
direction="column"
|
|
gap={2}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{formFields.map(({ fieldName, fieldKey, fieldType }, index) => (
|
|
<>
|
|
{fieldType === 'string' && (
|
|
<FormControl key={index}>
|
|
<FormLabel>{fieldName}</FormLabel>
|
|
<Input name={fieldKey} />
|
|
</FormControl>
|
|
)}
|
|
</>
|
|
))}
|
|
|
|
<Button variant="solid" type="submit">
|
|
Submit
|
|
</Button>
|
|
|
|
{isSuccess && <Alert>Form submitted successfully!</Alert>}
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
</CssVarsProvider>
|
|
);
|
|
}
|