adding new logbook entry #24

Merged
noahspannbauer merged 2 commits from feature/22-logbook-add-new-entry into main 2024-11-17 08:56:01 -05:00
2 changed files with 246 additions and 246 deletions
Showing only changes of commit 7291ca7cc9 - Show all commits

View File

@@ -1,134 +1,134 @@
import { IPilotFormCertificates } from './IPilotFormCertificates';
import {
Button,
DatePicker,
Input,
Option,
PlusIcon,
Select,
TrashIcon,
Typography
} from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
// import { IPilotFormCertificates } from './IPilotFormCertificates';
// import {
// Button,
// DatePicker,
// Input,
// Option,
// PlusIcon,
// Select,
// TrashIcon,
// Typography
// } from '@noahspan/noahspan-components';
// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
certificates
}: IPilotFormCertificates) => {
const {
control,
formState: { errors },
setValue
} = useFormContext();
// const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
// certificates
// }: IPilotFormCertificates) => {
// const {
// control,
// formState: { errors },
// setValue
// } = useFormContext();
const { fields, append, remove } = useFieldArray({
name: 'certificates',
control
});
// const { fields, append, remove } = useFieldArray({
// name: 'certificates',
// control
// });
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 (
<>
<div className="col-span-1">
<Controller
name={`certificates.${index}.type`}
control={control}
render={({ field }) => {
return (
<Select label="Type" {...field}>
<Option key="student" value="Student">
Student
</Option>
<Option key="private" value="Private">
Private
</Option>
<Option key="instrument" value="Instrument">
Instrument
</Option>
<Option key="recreational" value="Recreational">
Recreational
</Option>
<Option key="sport" value="Sport">
Sport
</Option>
</Select>
);
}}
/>
</div>
<div className="col-span-1">
<Controller
name={`certificates.${index}.number`}
control={control}
render={({ field }) => {
return <Input label="Number" {...field} />;
}}
/>
</div>
<div className="col-span-1">
<Controller
name={`certificates.${index}.dateOfIssue`}
control={control}
render={({ field }) => {
return (
<DatePicker
handleDateChanged={(date: string) => {
setValue(`certificates.${index}.dateOfIssue`, date);
}}
inputProps={{
value: field.value
}}
/>
);
}}
/>
</div>
<div className="col-span-1">
<Button
className="flex items-center gap-3"
onClick={() => remove(index)}
variant="outlined"
>
<TrashIcon size="lg" />
Delete
</Button>
</div>
</>
);
})}
<div className="col-span-4">
<Button
className="flex items-center gap-3"
onClick={() => {
append({
type: '',
number: '',
dateOfIssue: null
});
}}
variant="outlined"
>
<PlusIcon size="lg" />
Add Certificate
</Button>
</div>
</>
);
};
// 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 (
// <>
// <div className="col-span-1">
// <Controller
// name={`certificates.${index}.type`}
// control={control}
// render={({ field }) => {
// return (
// <Select label="Type" {...field}>
// <Option key="student" value="Student">
// Student
// </Option>
// <Option key="private" value="Private">
// Private
// </Option>
// <Option key="instrument" value="Instrument">
// Instrument
// </Option>
// <Option key="recreational" value="Recreational">
// Recreational
// </Option>
// <Option key="sport" value="Sport">
// Sport
// </Option>
// </Select>
// );
// }}
// />
// </div>
// <div className="col-span-1">
// <Controller
// name={`certificates.${index}.number`}
// control={control}
// render={({ field }) => {
// return <Input label="Number" {...field} />;
// }}
// />
// </div>
// <div className="col-span-1">
// <Controller
// name={`certificates.${index}.dateOfIssue`}
// control={control}
// render={({ field }) => {
// return (
// <DatePicker
// handleDateChanged={(date: string) => {
// setValue(`certificates.${index}.dateOfIssue`, date);
// }}
// inputProps={{
// value: field.value
// }}
// />
// );
// }}
// />
// </div>
// <div className="col-span-1">
// <Button
// className="flex items-center gap-3"
// onClick={() => remove(index)}
// variant="outlined"
// >
// <TrashIcon size="lg" />
// Delete
// </Button>
// </div>
// </>
// );
// })}
// <div className="col-span-4">
// <Button
// className="flex items-center gap-3"
// onClick={() => {
// append({
// type: '',
// number: '',
// dateOfIssue: null
// });
// }}
// variant="outlined"
// >
// <PlusIcon size="lg" />
// Add Certificate
// </Button>
// </div>
// </>
// );
// };
export default PilotFormCertificates;
// export default PilotFormCertificates;

View File

@@ -1,120 +1,120 @@
import { IPilotFormEndorsements } from './IPilotFormEndorsements';
import {
Button,
DatePicker,
Input,
Option,
PlusIcon,
Select,
TrashIcon,
Typography
} from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
// import { IPilotFormEndorsements } from './IPilotFormEndorsements';
// import {
// Button,
// DatePicker,
// Input,
// Option,
// PlusIcon,
// Select,
// TrashIcon,
// Typography
// } from '@noahspan/noahspan-components';
// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
endorsements
}: IPilotFormEndorsements) => {
const {
control,
formState: { errors },
setValue
} = useFormContext();
// const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
// endorsements
// }: IPilotFormEndorsements) => {
// const {
// control,
// formState: { errors },
// setValue
// } = useFormContext();
const { fields, append, remove } = useFieldArray({
name: 'endorsements',
control
});
// const { fields, append, remove } = useFieldArray({
// name: 'endorsements',
// control
// });
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 (
<>
<div className="col-span-1">
<Controller
name={`endorsements.${index}.type`}
control={control}
render={({ field }) => {
return (
<Select label="Type" {...field}>
<Option key="complex" value="Complex">
Complex
</Option>
<Option key="highPerformance" value="High Performance">
High Performance
</Option>
<Option key="highAltitude" value="High Altitude">
High Altitude
</Option>
<Option key="tailwheel" value="Tailwheel">
Tailwheel
</Option>
</Select>
);
}}
/>
</div>
<div className="col-span-1">
<Controller
name={`endorsements.${index}.dateOfIssue`}
control={control}
render={({ field }) => {
return (
<DatePicker
handleDateChanged={(date: string) => {
setValue(`endorsements.${index}.dateOfIssue`, date);
}}
inputProps={{
value: field.value
}}
/>
);
}}
/>
</div>
<div className="col-span-1">
<Button
className="flex items-center gap-3"
onClick={() => remove(index)}
variant="outlined"
>
<TrashIcon size="lg" />
Delete
</Button>
</div>
</>
);
})}
<div className="col-span-4">
<Button
className="flex items-center gap-3"
onClick={() => {
append({
type: '',
number: '',
dateOfIssue: null
});
}}
variant="outlined"
>
<PlusIcon size="lg" />
Add Endorsement
</Button>
</div>
</>
);
};
// 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 (
// <>
// <div className="col-span-1">
// <Controller
// name={`endorsements.${index}.type`}
// control={control}
// render={({ field }) => {
// return (
// <Select label="Type" {...field}>
// <Option key="complex" value="Complex">
// Complex
// </Option>
// <Option key="highPerformance" value="High Performance">
// High Performance
// </Option>
// <Option key="highAltitude" value="High Altitude">
// High Altitude
// </Option>
// <Option key="tailwheel" value="Tailwheel">
// Tailwheel
// </Option>
// </Select>
// );
// }}
// />
// </div>
// <div className="col-span-1">
// <Controller
// name={`endorsements.${index}.dateOfIssue`}
// control={control}
// render={({ field }) => {
// return (
// <DatePicker
// handleDateChanged={(date: string) => {
// setValue(`endorsements.${index}.dateOfIssue`, date);
// }}
// inputProps={{
// value: field.value
// }}
// />
// );
// }}
// />
// </div>
// <div className="col-span-1">
// <Button
// className="flex items-center gap-3"
// onClick={() => remove(index)}
// variant="outlined"
// >
// <TrashIcon size="lg" />
// Delete
// </Button>
// </div>
// </>
// );
// })}
// <div className="col-span-4">
// <Button
// className="flex items-center gap-3"
// onClick={() => {
// append({
// type: '',
// number: '',
// dateOfIssue: null
// });
// }}
// variant="outlined"
// >
// <PlusIcon size="lg" />
// Add Endorsement
// </Button>
// </div>
// </>
// );
// };
export default PilotFormEndorsements;
// export default PilotFormEndorsements;