styling
This commit is contained in:
Jesus Vasquez
parent
fadaa0fe4a
commit
1e0594a488
11 changed files with 145 additions and 99 deletions
|
|
@ -13,7 +13,7 @@ type ClientFieldProps = {
|
|||
// Destructure the props in the function parameter
|
||||
const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4 text-sm leading-tight">
|
||||
{testingCenters.map((testingCenter) => (
|
||||
<div key={Utils.camelize(testingCenter)} className="flex items-center gap-14">
|
||||
<span>{testingCenter}</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react"
|
|||
|
||||
const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
|
||||
if (touched && error) {
|
||||
return <p className="text-xs">{error}</p>
|
||||
return <p className="text-xs text-red-500">{error}</p>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
|
|||
{/* Title */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<Separator/>
|
||||
<label className="text-md" htmlFor={props.name}>
|
||||
<label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={props.name}>
|
||||
{label}
|
||||
<RequiredAsterisk required={required} />
|
||||
</label>
|
||||
|
|
@ -99,7 +99,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
|
|||
>
|
||||
<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>Drag & Drop Here or <span className="font-bold">Browse</span></h4>
|
||||
<h4 className="text-sm leading-tight">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
|
||||
</div>
|
||||
<button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@ import Separator from "./Separator"
|
|||
const RadioGroupField = ({
|
||||
name,
|
||||
label,
|
||||
separator,
|
||||
options,
|
||||
...props
|
||||
}: {
|
||||
name: string
|
||||
label: string
|
||||
separator?: boolean
|
||||
options: string[]
|
||||
[x: string]: any // Allow any other props
|
||||
}) => {
|
||||
|
|
@ -26,8 +28,8 @@ const RadioGroupField = ({
|
|||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Separator/>
|
||||
<label className="text-md" htmlFor={label}>
|
||||
{separator && <Separator/>}
|
||||
<label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={label}>
|
||||
{label}
|
||||
<RequiredAsterisk required={required} />
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ const StatusField = ({
|
|||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Separator/>
|
||||
<h4>{label}</h4>
|
||||
<h4 className="font-bold text-sm leading-tight text-indigo-900">{label}</h4>
|
||||
</div>
|
||||
<span className={statusColor}>{statusLabel}</span>
|
||||
<span className={`text-sm leading-tight ${statusColor}`}>{statusLabel}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,25 +21,28 @@ const ToggleField = ({
|
|||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Separator/>
|
||||
<label className="flex items-center gap-2">
|
||||
<label className="flex items-center gap-2 font-bold text-sm leading-tight text-indigo-900">
|
||||
{children}
|
||||
<RequiredAsterisk required={required} />
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-3 itens-center">
|
||||
<SwitchPrimitive.Root
|
||||
className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blue-950 shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
||||
className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
|
||||
checked={checked}
|
||||
onCheckedChange={(isChecked) => {
|
||||
setChecked(isChecked)
|
||||
field.onChange({ target: { name: field.name, value: isChecked } })
|
||||
}}
|
||||
>
|
||||
<SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
||||
<SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
||||
</SwitchPrimitive.Root>
|
||||
<span>Toggle ON</span>
|
||||
<span>|</span>
|
||||
<span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
|
||||
<div className="flex gap-4 items-center text-sm leading-tight">
|
||||
<span>Toggle ON</span>
|
||||
<span>|</span>
|
||||
<span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ErrorMessage touched={meta.touched} error={meta.error} />
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ export const data = {
|
|||
importNames: ["Import ABC", "Import DEF", "Import GHI"],
|
||||
splitScheduleOptions: ["Yes", "No"],
|
||||
clientOptions: ["Single", "Multiple"],
|
||||
testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
|
||||
clientsOptions: ["client 1", "client 2", "client 3"],
|
||||
testingCenterOptions: ["Testing Center 1", "Testing Center 2", "Testing Center 3", "Testing Center 4"],
|
||||
clientsOptions: ["Client 1", "Client 2", "Client 3"],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client"
|
||||
|
||||
import axios from "axios"
|
||||
import { Form, Formik } from "formik"
|
||||
import { Form, Formik, useFormikContext } from "formik"
|
||||
import React, { useState } from "react"
|
||||
|
||||
//Dependencies
|
||||
|
|
@ -17,6 +17,24 @@ import StatusField from "./StatusField"
|
|||
import ToggleField from "./ToggleField"
|
||||
|
||||
import { FormValues } from "./types"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { faXmark } from "@fortawesome/free-solid-svg-icons"
|
||||
|
||||
{/* Close button */}
|
||||
const CloseButton: React.FC = () => {
|
||||
const { resetForm,setFieldValue } = useFormikContext();
|
||||
const handleReset = () => {
|
||||
resetForm();
|
||||
setFieldValue("manifestFile", "");
|
||||
}
|
||||
|
||||
return (
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950 text-white" onClick={() => handleReset()}>
|
||||
<FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
|
||||
</button>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
const FormComponent: React.FC = () => {
|
||||
const [formSubmitted, setFormSubmitted] = useState(false);
|
||||
|
|
@ -38,76 +56,101 @@ 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 {
|
||||
//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>
|
||||
</>
|
||||
|
||||
<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>
|
||||
<CloseButton />
|
||||
{/* Title */}
|
||||
<div className="flex justify-center mb-12">
|
||||
<h1 className="border-grey-300 w-fit border-b pb-4 font-bold text-3xl text-indigo-900">Document Upload</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-12">
|
||||
|
||||
{/* Form layout */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
|
||||
{/* Left Column */}
|
||||
<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>
|
||||
{/* Right Column */}
|
||||
<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} separator />
|
||||
<ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Footer */}
|
||||
<div className="flex flex-col gap-6">
|
||||
<p className="text-lg leading-tight text-center">Data in the import file is correct. Please press Continue to import.</p>
|
||||
<div className="flex gap-6 justify-center">
|
||||
<button
|
||||
className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all bg-blue-950 text-white min-w-[240px]"
|
||||
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>
|
||||
<button
|
||||
className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all border-2 border-amber-500 text-amber-500 min-w-[240px]"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{formSubmitted && <div className="text-center text-green-500">Success</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
}
|
||||
</Formik>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue