v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

work in progress

Browse source
This commit is contained in:
Jesus Vasquez 2024-03-03 23:32:46 -05:00
parent 4adcee4af7
commit 9f250364e4
4 changed files with 76 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

90
components/Form/index.tsx
View file

@ -37,13 +37,14 @@ const FormComponent: React.FC = () => {
}
return (
<>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting }) => {
console.log("Form values:", values); // Log form values on submit
try {
console.log(values)
await submitForm(values)
//await submitForm(values)
setFormSubmitted(true)
} catch (error) {
console.error("Error submitting form:", error)
@ -52,43 +53,58 @@ const FormComponent: React.FC = () => {
}
}}
>
{(formik) => (
<Form>
<div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
<div className="flex grow flex-col lg:max-w-[500px]">
<SelectInput key="importName" name="importName" label="Select Import Name:" 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>
{(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 grow flex-col lg:max-w-[500px]">
<SelectInput key="importName" name="importName" label="Select Import Name:" 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 grow flex-col lg:max-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>
<div className="flex grow flex-col lg:max-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" type="submit" disabled={formik.isSubmitting}>
Submit
</button>
</Form>
)}
<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>
</Form>
)
}
}
</Formik>
{formSubmitted && <div>Success</div>}
</>
)
}