121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
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 { 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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PilotFormEndorsements;
|