114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import axios from "axios"
|
|
import { Form, Formik } from "formik"
|
|
import React, { useState } from "react"
|
|
|
|
//Dependencies
|
|
|
|
//Input fields
|
|
import ClientField from "./ClientField"
|
|
import { data } from "./data"
|
|
import FileInput from "./FileInput"
|
|
import { initialValues, validationSchema } from "./formSchemas"
|
|
import RadioGroup from "./RadioGroup"
|
|
import SelectInput from "./SelectInput"
|
|
import StatusField from "./StatusField"
|
|
import ToggleField from "./ToggleField"
|
|
|
|
import { FormValues } from "./types"
|
|
|
|
const FormComponent: React.FC = () => {
|
|
const [formSubmitted, setFormSubmitted] = useState(false);
|
|
|
|
const submitForm = (values: FormValues) => {
|
|
return axios.post(
|
|
`/api/submitForm`,
|
|
{
|
|
submissionData: values,
|
|
},
|
|
{
|
|
// options
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={async (values, { setSubmitting }) => {
|
|
console.log("Form values:", values); // Log form values on submit
|
|
try {
|
|
//await submitForm(values)
|
|
setFormSubmitted(true)
|
|
} catch (error) {
|
|
console.error("Error submitting form:", error)
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}}
|
|
>
|
|
{(formik) => {
|
|
console.log("Form errors:", formik.errors); // Log form errors on every render
|
|
console.log("Form values:", formik.values); // Log current form values on every render
|
|
|
|
return (
|
|
<Form>
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
|
|
<div className="flex w-full flex-col lg:w-[500px] gap-5">
|
|
<SelectInput key="importName" name="importName" required>
|
|
<option value="">Select Import Name:</option>
|
|
{data.importNames.map((option) => (
|
|
<option key={option} value={option}>
|
|
{option}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
|
|
<FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
|
|
|
|
<StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
|
|
<ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
|
|
Tolerance Window:
|
|
</ToggleField>
|
|
|
|
</div>
|
|
<div className="flex w-full flex-col gap-5 lg:w-[350px]">
|
|
<RadioGroup
|
|
key="splitSchedule"
|
|
name="splitSchedule"
|
|
label="Split schedule using social distancing?"
|
|
options={data.splitScheduleOptions}
|
|
required={true}
|
|
/>
|
|
<StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
|
|
<RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
|
|
<ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="mx-auto mt-4 flex items-center justify-center rounded-full py-3 px-9 text-center text-md font-bold shadow-xs transition-all bg-blue-950 text-white"
|
|
type="submit"
|
|
disabled={formik.isSubmitting}
|
|
>
|
|
Continue Import
|
|
{formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
|
|
</button>
|
|
{formSubmitted && <div className="text-center text-green-500">Success</div>}
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
}
|
|
</Formik>
|
|
</>
|
|
|
|
)
|
|
}
|
|
|
|
export default FormComponent
|