adding new logbook entry #24
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user