work in progress
This commit is contained in:
Jesus Vasquez
parent
4adcee4af7
commit
9f250364e4
4 changed files with 76 additions and 50 deletions
|
|
@ -45,12 +45,12 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
|
|||
{label}
|
||||
<RequiredAsterisk required={required} />
|
||||
</label>
|
||||
<div className="drop-area" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
|
||||
<div>
|
||||
<FontAwesomeIcon icon={faFile} />
|
||||
<h4>Drag & Drop Here or Browse</h4>
|
||||
<div className="border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
|
||||
<div className="border border-grey-500 border-dashed flex flex-col gap-4 items-center justify-center rounded-md py-9 w-full">
|
||||
<FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
|
||||
<h4 className="">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
|
||||
</div>
|
||||
<button type="button">Upload Manifest</button>
|
||||
<button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
|
||||
</div>
|
||||
<input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
|
||||
<ErrorMessage touched={meta.touched} error={meta.error} />
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@ export const initialValues: FormValues = {
|
|||
manifestFile: null,
|
||||
splitSchedule: "",
|
||||
client: "",
|
||||
testingCenter: "",
|
||||
testingCenter1: "",
|
||||
testingCenter2: "",
|
||||
testingCenter3: "",
|
||||
testingCenter4: "",
|
||||
toleranceWindow: false,
|
||||
}
|
||||
|
||||
|
|
@ -17,6 +20,9 @@ export const validationSchema = Yup.object({
|
|||
manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
|
||||
splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
|
||||
client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
|
||||
testingCenter: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
|
||||
testingCenter1: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
|
||||
testingCenter2: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
|
||||
testingCenter3: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
|
||||
testingCenter4: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
|
||||
toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>}
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
export interface FormValues {
|
||||
importName: string
|
||||
manifestFile: File | null
|
||||
splitSchedule: string
|
||||
client: string
|
||||
testingCenter: string
|
||||
toleranceWindow: boolean
|
||||
importName: string;
|
||||
manifestFile: File | null;
|
||||
splitSchedule: string;
|
||||
client: string;
|
||||
testingCenter1: string;
|
||||
testingCenter2: string;
|
||||
testingCenter3: string;
|
||||
testingCenter4: string;
|
||||
toleranceWindow: boolean;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue