noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

feature/4-pilots---add

Browse Source
This commit is contained in:
Noah Spannbauer
2024-06-22 10:51:41 -05:00
parent 9d5a6f7d09
commit 2d0670b572
4 changed files with 160 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/package.json
View File

@@ -16,7 +16,7 @@
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@noahspan/noahspan-components": "^0.3.0",
"@noahspan/noahspan-components": "^0.3.1",
"axios": "^1.7.2",
"framer-motion": "^11.1.7",
"react": "^18.2.0",

305
app/src/components/pilotForm/PilotForm.tsx
View File

@@ -1,157 +1,162 @@
// import {
// Accordion,
// AccordionItem,
// Button,
// DatePicker,
// Input,
// Select,
// SelectItem
// } from '@nextui-org/react';
// import { useForm, Controller, FormProvider, SubmitHandler, Form } from 'react-hook-form';
import { useState } from 'react';
import { useForm, Controller, FormProvider } from 'react-hook-form';
import {
Accordion,
AccordionBody,
AccordionHeader,
Input
} from '@noahspan/noahspan-components';
// import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
// const PilotForm: React.FC<unknown> = () => {
// const methods = useForm({
// defaultValues: {
// certificates: [
// {
// type: '',
// number: '',
// dateOfIssue: null
// }
// ]
// }
// });
// const { control, handleSubmit } = methods;
const PilotForm: React.FC<unknown> = () => {
const [open, setOpen] = useState<number>(0);
const handleOpen = (value: number) => {
setOpen(open === value ? 0 : value);
};
const methods = useForm();
const { control, handleSubmit } = methods;
// const onSubmit = (data: unknown) => {
// console.log(data);
// };
const onSubmit = (data: unknown) => {
console.log(data);
};
// return (
// <FormProvider {...methods}>
// <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
// <Accordion>
// <AccordionItem title='Profile'>
// <div className="grid grid-cols-3 gap-4">
// <div className="self-center">
// <label>First Name</label>
// </div>
// <div className='col-span-2'>
// <Controller
// name="firstName"
// control={control}
// render={({ field }) => <Input />}
// />
// </div>
// <div className="self-center">
// <label>Last Name</label>
// </div>
// <div className='col-span-2'>
// <Controller
// name="lastName"
// control={control}
// render={({ field }) => <Input />}
// />
// </div>
// <div className='self-center'>
// <label>Address</label>
// </div>
// <div className='col-span-2'>
// <Controller
// name='address'
// control={control}
// render={({ field }) => <Input />}
// />
// </div>
// <div className='self-center'>
// <label>City</label>
// </div>
// <div className='col-span-2'>
// <Controller
// name='city'
// control={control}
// render={({ field }) => <Input />}
// />
// </div>
// <div className='self-center'>
// <label>State</label>
// </div>
// <div className='col-span-2'>
// <Controller
// name='state'
// control={control}
// render={({ field }) => <Input />}
// />
// </div>
// <div className='self-center'>
// <label>Postal Code</label>
// </div>
// <div className='col-span-2'>
// <Controller
// name='postalCode'
// control={control}
// render={({ field }) => <Input />}
// />
// </div>
// </div>
// </AccordionItem>
// </Accordion>
return (
<FormProvider {...methods}>
<form className="m-10" onSubmit={handleSubmit(onSubmit)}>
<Accordion open={open === 1}>
<AccordionHeader onClick={() => handleOpen(1)}>Info</AccordionHeader>
<AccordionBody>
<div className="grid grid-cols-3 gap-4">
<div className="self-center">
<label>First Name</label>
</div>
<div className="col-span-2">
<Controller
name="firstName"
control={control}
render={({ field }) => (
<Input disabled={field.disabled} value={field.value} />
)}
/>
</div>
<div className="self-center">
<label>Last Name</label>
</div>
<div className="col-span-2">
<Controller
name="lastName"
control={control}
render={({ field }) => (
<Input disabled={field.disabled} value={field.value} />
)}
/>
</div>
<div className="self-center">
<label>Address</label>
</div>
<div className="col-span-2">
<Controller
name="address"
control={control}
render={({ field }) => (
<Input disabled={field.disabled} value={field.value} />
)}
/>
</div>
<div className="self-center">
<label>City</label>
</div>
<div className="col-span-2">
<Controller
name="city"
control={control}
render={({ field }) => (
<Input disabled={field.disabled} value={field.value} />
)}
/>
</div>
<div className="self-center">
<label>State</label>
</div>
<div className="col-span-2">
<Controller
name="state"
control={control}
render={({ field }) => (
<Input disabled={field.disabled} value={field.value} />
)}
/>
</div>
<div className="self-center">
<label>Postal Code</label>
</div>
<div className="col-span-2">
<Controller
name="postalCode"
control={control}
render={({ field }) => (
<Input disabled={field.disabled} value={field.value} />
)}
/>
</div>
</div>
</AccordionBody>
</Accordion>
// <Accordion>
// <AccordionItem title='Certificates'>
// <PilotFormCertificates certificates={[]}/>
// </AccordionItem>
// </Accordion>
// <Accordion>
// <AccordionItem title='Endorsements'>
{/* <Accordion>
<AccordionItem title='Certificates'>
<PilotFormCertificates certificates={[]}/>
</AccordionItem>
</Accordion>
<Accordion>
<AccordionItem title='Endorsements'>
// </AccordionItem>
// </Accordion>
// <Accordion>
// <AccordionItem title="Medical">
// <div className="grid grid-cols-2 gap-4">
// <div className="self-center">
// <label>Class</label>
// </div>
// <div>
// <Controller
// name="medicalClass"
// control={control}
// render={({ field }) => (
// <Select>
// <SelectItem key="first" value="First">
// First
// </SelectItem>
// <SelectItem key="second" value="Second">
// Second
// </SelectItem>
// <SelectItem key="third" value="Third">
// Third
// </SelectItem>
// <SelectItem key="basicMed" value="Basic Med">
// Basic Med
// </SelectItem>
// </Select>
// )}
// />
// </div>
// <div className="self-center">
// <label>Expires</label>
// </div>
// <div>
// <Controller
// name="medicalExpiration"
// control={control}
// render={({ field }) => <DatePicker />}
// />
// </div>
// </div>
// </AccordionItem>
// </Accordion>
// </form>
// </FormProvider>
// );
// };
</AccordionItem>
</Accordion>
<Accordion>
<AccordionItem title="Medical">
<div className="grid grid-cols-2 gap-4">
<div className="self-center">
<label>Class</label>
</div>
<div>
<Controller
name="medicalClass"
control={control}
render={({ field }) => (
<Select value={field.value}>
<Option value={first}>
First
</Option>
<Option>
Second
</Option>
<Option>
Third
</Option>
<Option>
Basic Med
</Option>
</Select>
)}
/>
</div>
<div className="self-center">
<label>Expires</label>
</div>
<div>
<Controller
name="medicalExpiration"
control={control}
render={({ field }) => <DatePicker />}
/>
</div>
</div>
</AccordionItem>
</Accordion> */}
</form>
</FormProvider>
);
};
// export default PilotForm;
export default PilotForm;

1
app/src/components/pilots/Pilots.tsx
View File

@@ -10,7 +10,6 @@ const Pilots: React.FC<unknown> = () => {
return (
<div className="container mx-auto">
blah
<div className="px-6">
<h1 role="heading">Pilots</h1>
<Button