adding pilot
This commit is contained in:
@@ -16,13 +16,16 @@
|
||||
"@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.5.1",
|
||||
"@hookform/resolvers": "^3.9.0",
|
||||
"@noahspan/noahspan-components": "^0.5.6",
|
||||
"axios": "^1.7.2",
|
||||
"framer-motion": "^11.1.7",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.51.4",
|
||||
"react-router-dom": "^6.23.0"
|
||||
"react-router-dom": "^6.23.0",
|
||||
"yup": "^1.4.0",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/microsoft-graph-types": "^2.40.0",
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useForm, Controller, FormProvider } from 'react-hook-form';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionBody,
|
||||
AccordionHeader,
|
||||
Button,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
DatePicker,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
@@ -24,6 +19,40 @@ import { Person } from '@microsoft/microsoft-graph-types';
|
||||
import { AxiosInstance, AxiosResponse } from 'axios';
|
||||
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
|
||||
import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { IPilotFormCertificates } from '../pilotFormCertificates/IPilotFormCertificates';
|
||||
import { IPilotFormEndorsements } from '../pilotFormEndorsements/IPilotFormEndorsements';
|
||||
|
||||
interface PilotFormSchema {
|
||||
id: string;
|
||||
name: string;
|
||||
address: string;
|
||||
city: string;
|
||||
state: string;
|
||||
postalCode: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
certificates: IPilotFormCertificates[];
|
||||
endorsements: IPilotFormEndorsements[];
|
||||
medicalClass: string;
|
||||
medicalExpiration: string;
|
||||
}
|
||||
|
||||
const schema = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
address: z.string(),
|
||||
city: z.string(),
|
||||
state: z.string(),
|
||||
postalCode: z.string(),
|
||||
email: z.string(),
|
||||
phone: z.string(),
|
||||
// certificates: z.array(),
|
||||
// endorsements: z.array(),
|
||||
medicalClass: z.string(),
|
||||
medicalExpiration: z.string()
|
||||
});
|
||||
|
||||
interface PilotFormProps {
|
||||
isDrawerOpen: boolean;
|
||||
@@ -39,9 +68,11 @@ const PilotForm: React.FC<PilotFormProps> = ({
|
||||
const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
|
||||
useState<boolean>(false);
|
||||
const { getAccessToken } = useAccessToken();
|
||||
const methods = useForm();
|
||||
const methods = useForm<PilotFormSchema>({
|
||||
resolver: zodResolver(schema)
|
||||
});
|
||||
|
||||
const onSubmit = (data: unknown) => {
|
||||
const onSubmit = (data: PilotFormSchema) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
@@ -120,6 +151,7 @@ const PilotForm: React.FC<PilotFormProps> = ({
|
||||
control={methods.control}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="!border-t-blue-gray-200 focus:!border-t-gray-900"
|
||||
labelProps={{
|
||||
className: 'before:content-none after:content-none'
|
||||
}}
|
||||
@@ -213,6 +245,27 @@ const PilotForm: React.FC<PilotFormProps> = ({
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Typography variant="h6">Last Review</Typography>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<Controller
|
||||
name="lastReview"
|
||||
control={methods.control}
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<DatePicker
|
||||
handleDateChanged={(date: string) => {
|
||||
methods.setValue('lastReview', date);
|
||||
}}
|
||||
inputProps={{
|
||||
value: field.value
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<Typography variant="h5">Certificates</Typography>
|
||||
<hr className="my-3" />
|
||||
|
||||
@@ -6,7 +6,8 @@ import {
|
||||
Option,
|
||||
PlusIcon,
|
||||
Select,
|
||||
TrashIcon
|
||||
TrashIcon,
|
||||
Typography
|
||||
} from '@noahspan/noahspan-components';
|
||||
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
|
||||
|
||||
@@ -26,6 +27,20 @@ const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
{fields.length > 0 && (
|
||||
<>
|
||||
<div className="col-span-1">
|
||||
<Typography variant="h6">Type</Typography>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Typography variant="h6">Number</Typography>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Typography variant="h6">Date of Issue</Typography>
|
||||
</div>
|
||||
<div className="col-span-1"></div>
|
||||
</>
|
||||
)}
|
||||
{fields.map((field, index) => {
|
||||
return (
|
||||
<>
|
||||
@@ -87,6 +102,7 @@ const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
|
||||
<Button
|
||||
className="flex items-center gap-3"
|
||||
onClick={() => remove(index)}
|
||||
variant="outlined"
|
||||
>
|
||||
<TrashIcon size="lg" />
|
||||
Delete
|
||||
|
||||
@@ -6,7 +6,8 @@ import {
|
||||
Option,
|
||||
PlusIcon,
|
||||
Select,
|
||||
TrashIcon
|
||||
TrashIcon,
|
||||
Typography
|
||||
} from '@noahspan/noahspan-components';
|
||||
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
|
||||
|
||||
@@ -26,6 +27,18 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
{fields.length > 0 && (
|
||||
<>
|
||||
<div className="col-span-1">
|
||||
<Typography variant="h6">Type</Typography>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Typography variant="h6">Date of Issue</Typography>
|
||||
</div>
|
||||
<div className="col-span-1"></div>
|
||||
<div className="col-span-1"></div>
|
||||
</>
|
||||
)}
|
||||
{fields.map((field, index) => {
|
||||
return (
|
||||
<>
|
||||
@@ -75,6 +88,7 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
|
||||
<Button
|
||||
className="flex items-center gap-3"
|
||||
onClick={() => remove(index)}
|
||||
variant="outlined"
|
||||
>
|
||||
<TrashIcon size="lg" />
|
||||
Delete
|
||||
|
||||
Reference in New Issue
Block a user