557 lines
20 KiB
TypeScript
557 lines
20 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useForm, Controller, FormProvider } from 'react-hook-form';
|
|
import {
|
|
Button,
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerHeader,
|
|
DrawerFooter,
|
|
Input,
|
|
PeoplePicker,
|
|
SaveIcon,
|
|
StateSelect,
|
|
Typography,
|
|
XmarkIcon
|
|
} from '@noahspan/noahspan-components';
|
|
import { IPilotFormProps } from './IPilotFormProps';
|
|
import axios, { AxiosInstance, AxiosResponse } from 'axios';
|
|
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
|
|
import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
|
|
import { useIsAuthenticated } from '@azure/msal-react';
|
|
|
|
export enum PilotFormMode {
|
|
ADD = 'ADD',
|
|
EDIT = 'EDIT',
|
|
VIEW = 'VIEW',
|
|
CANCEL = 'CANCEL'
|
|
}
|
|
|
|
const PilotForm: React.FC<IPilotFormProps> = ({
|
|
pilotId,
|
|
isDrawerOpen,
|
|
mode,
|
|
onOpenClose
|
|
}: IPilotFormProps) => {
|
|
const httpClient: AxiosInstance = useHttpClient();
|
|
const [peoplePickerResults, setPeoplePickerResults] = useState<any[]>([]);
|
|
const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
|
|
useState<boolean>(false);
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
const { getAccessToken } = useAccessToken();
|
|
const isAuthenticated = useIsAuthenticated();
|
|
const defaultValues = {
|
|
partitionKey: '',
|
|
rowKey: '',
|
|
id: '',
|
|
name: '',
|
|
address: '',
|
|
city: '',
|
|
state: '',
|
|
postalCode: '',
|
|
email: '',
|
|
phone: ''
|
|
};
|
|
const methods = useForm({
|
|
defaultValues: defaultValues
|
|
});
|
|
const [isDisabled, setIsDisabled] = useState<boolean>(false);
|
|
|
|
const handlePeoplePickerOnClick = (
|
|
event: React.MouseEvent<HTMLDivElement>
|
|
) => {
|
|
const divElement: HTMLDivElement = event.target as HTMLDivElement;
|
|
|
|
methods.setValue('id', divElement.id);
|
|
methods.setValue('name', divElement.textContent!);
|
|
setPeoplePickerResults([]);
|
|
};
|
|
|
|
const handlePeoplePickerOnChange = async (
|
|
event: React.ChangeEvent<HTMLInputElement>
|
|
) => {
|
|
setIsPeoplePickerLoading(true);
|
|
|
|
try {
|
|
methods.setValue('name', event.target.value);
|
|
|
|
const searchString: string = event.target.value;
|
|
const accessToken: string = await getAccessToken();
|
|
const response: AxiosResponse = await httpClient.get(
|
|
`api/personSearch?search=${searchString}`,
|
|
{
|
|
headers: {
|
|
Authorization: accessToken
|
|
}
|
|
}
|
|
);
|
|
console.log(response);
|
|
setPeoplePickerResults(response.data);
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setIsPeoplePickerLoading(false);
|
|
}
|
|
};
|
|
|
|
const onCancel = () => {
|
|
methods.reset(defaultValues);
|
|
onOpenClose(PilotFormMode.CANCEL);
|
|
};
|
|
|
|
const onSubmit = async (data: unknown) => {
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const accessToken: string = await getAccessToken();
|
|
const response: AxiosResponse = await httpClient.post(
|
|
`api/pilots`,
|
|
data,
|
|
{
|
|
headers: {
|
|
Authorization: accessToken
|
|
}
|
|
}
|
|
);
|
|
|
|
if (response) console.log(response);
|
|
} catch (error) {
|
|
if (axios.isAxiosError(error)) {
|
|
const errResp = error.response;
|
|
|
|
console.log(errResp?.data.message);
|
|
} else {
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (mode === PilotFormMode.VIEW) {
|
|
setIsDisabled(true);
|
|
}
|
|
}, [mode]);
|
|
|
|
useEffect(() => {
|
|
const getPilot = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const config = isAuthenticated
|
|
? { headers: { Authorization: await getAccessToken() } }
|
|
: {};
|
|
const response: AxiosResponse = await httpClient.get(
|
|
`api/pilots/${pilotId}`,
|
|
config
|
|
);
|
|
const pilot = response.data;
|
|
console.log(pilot);
|
|
// methods.setValue('blah', pilot.value)
|
|
methods.reset(pilot);
|
|
console.log(methods.getValues());
|
|
} catch (error) {
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
if (pilotId) {
|
|
getPilot();
|
|
}
|
|
}, [pilotId]);
|
|
|
|
return (
|
|
<Drawer
|
|
open={isDrawerOpen}
|
|
placement="right"
|
|
size={1000}
|
|
data-testid="pilot-drawer"
|
|
>
|
|
<FormProvider {...methods}>
|
|
<DrawerHeader text="Add Pilot" onClose={onCancel} />
|
|
<form onSubmit={methods.handleSubmit(onSubmit)}>
|
|
<DrawerBody>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Name *</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="name"
|
|
control={methods.control}
|
|
rules={{ required: 'A name must be selected' }}
|
|
render={({ field: { value } }) => (
|
|
<PeoplePicker
|
|
results={peoplePickerResults}
|
|
inputProps={{
|
|
disabled: isDisabled,
|
|
labelProps: {
|
|
className: 'before:content-none after:content-none'
|
|
},
|
|
onChange: (event) => handlePeoplePickerOnChange(event),
|
|
error: methods.formState.errors.name ? true : false,
|
|
helperText: methods.formState.errors.name
|
|
? methods.formState.errors.name.message?.toString()
|
|
: undefined,
|
|
value: value
|
|
}}
|
|
listItemProps={{
|
|
children: null,
|
|
onClick: handlePeoplePickerOnClick
|
|
}}
|
|
loading={isPeoplePickerLoading}
|
|
data-testid="pilot-form-people-picker"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
{isAuthenticated && (
|
|
<>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Address *</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="address"
|
|
control={methods.control}
|
|
rules={{ required: 'An address is required' }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
className="!border-t-blue-gray-200 focus:!border-t-gray-900"
|
|
disabled={isDisabled}
|
|
labelProps={{
|
|
className: 'before:content-none after:content-none'
|
|
}}
|
|
error={
|
|
methods.formState.errors.address ? true : false
|
|
}
|
|
helperText={
|
|
methods.formState.errors.address
|
|
? methods.formState.errors.address.message?.toString()
|
|
: undefined
|
|
}
|
|
onChange={onChange}
|
|
value={value}
|
|
data-testid="pilot-form-address-input"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isAuthenticated && (
|
|
<>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">City *</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="city"
|
|
control={methods.control}
|
|
rules={{ required: 'A city is required' }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
disabled={isDisabled}
|
|
labelProps={{
|
|
className: 'before:content-none after:content-none'
|
|
}}
|
|
error={methods.formState.errors.city ? true : false}
|
|
helperText={
|
|
methods.formState.errors.city
|
|
? methods.formState.errors.city.message?.toString()
|
|
: undefined
|
|
}
|
|
onChange={onChange}
|
|
value={value}
|
|
data-testid="pilot-form-city-input"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isAuthenticated && (
|
|
<>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">State *</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="state"
|
|
control={methods.control}
|
|
rules={{ required: 'A state must be selected' }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<StateSelect
|
|
disabled={isDisabled}
|
|
labelProps={{
|
|
className: 'before:content-none after:content-none'
|
|
}}
|
|
error={methods.formState.errors.state ? true : false}
|
|
helperText={
|
|
methods.formState.errors.state
|
|
? methods.formState.errors.state.message?.toString()
|
|
: undefined
|
|
}
|
|
onChange={onChange}
|
|
value={value}
|
|
variant="outlined"
|
|
data-testid="pilot-form-state-dropdown"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isAuthenticated && (
|
|
<>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Postal Code *</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="postalCode"
|
|
control={methods.control}
|
|
rules={{ required: 'A postal code is required' }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
disabled={isDisabled}
|
|
labelProps={{
|
|
className: 'before:content-none after:content-none'
|
|
}}
|
|
error={
|
|
methods.formState.errors.postalCode ? true : false
|
|
}
|
|
helperText={
|
|
methods.formState.errors.postalCode
|
|
? methods.formState.errors.postalCode.message?.toString()
|
|
: undefined
|
|
}
|
|
onChange={onChange}
|
|
value={value}
|
|
data-testid="pilot-form-postal-code-input"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isAuthenticated && (
|
|
<>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Email</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="email"
|
|
control={methods.control}
|
|
rules={{
|
|
pattern: {
|
|
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
|
|
message: 'Invalid email address'
|
|
}
|
|
}}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
disabled={isDisabled}
|
|
labelProps={{
|
|
className: 'before:content-none after:content-none'
|
|
}}
|
|
error={methods.formState.errors.email ? true : false}
|
|
helperText={
|
|
methods.formState.errors.email
|
|
? methods.formState.errors.email.message?.toString()
|
|
: undefined
|
|
}
|
|
onChange={onChange}
|
|
value={value}
|
|
data-testid="pilot-form-email-input"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isAuthenticated && (
|
|
<>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Phone Number</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="phone"
|
|
control={methods.control}
|
|
rules={{
|
|
pattern: {
|
|
value: /^[0-9]{3}[-\s\.][0-9]{3}[-\s\.][0-9]{4}$/i,
|
|
message: 'Enter phone number as 123-456-7890'
|
|
}
|
|
}}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
disabled={isDisabled}
|
|
labelProps={{
|
|
className: 'before:content-none after:content-none'
|
|
}}
|
|
error={methods.formState.errors.phone ? true : false}
|
|
helperText={
|
|
methods.formState.errors.phone
|
|
? methods.formState.errors.phone.message?.toString()
|
|
: undefined
|
|
}
|
|
onChange={onChange}
|
|
value={value}
|
|
data-testid="pilot-form-phone-input"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{/* {pilotId && (
|
|
<>
|
|
<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>
|
|
</>
|
|
)} */}
|
|
{/* {pilotId && (
|
|
<>
|
|
<div className="col-span-4">
|
|
<Typography variant="h5">Medical</Typography>
|
|
<hr className="my-3" />
|
|
</div>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Class</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="medicalClass"
|
|
control={methods.control}
|
|
render={({ field }) => {
|
|
return (
|
|
<Select
|
|
labelProps={{
|
|
className:
|
|
'before:content-none after:content-none'
|
|
}}
|
|
{...field}
|
|
>
|
|
<Option key="first" value="First">
|
|
First
|
|
</Option>
|
|
<Option key="second" value="Second">
|
|
Second
|
|
</Option>
|
|
<Option key="third" value="Third">
|
|
Third
|
|
</Option>
|
|
<Option key="basicMed" value="Basic Med">
|
|
Basic Med
|
|
</Option>
|
|
</Select>
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="col-span-1">
|
|
<Typography variant="h6">Expiration Date</Typography>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<Controller
|
|
name="medicalExpiration"
|
|
control={methods.control}
|
|
render={({ field }) => {
|
|
return (
|
|
<DatePicker
|
|
handleDateChanged={(date: string) => {
|
|
methods.setValue('medicalExpiration', date);
|
|
}}
|
|
inputProps={{
|
|
value: field.value
|
|
}}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{pilotId && (
|
|
<>
|
|
<div className="col-span-4">
|
|
<Typography variant="h5">Certificates</Typography>
|
|
<hr className="my-3" />
|
|
</div>
|
|
<PilotFormCertificates certificates={[]} />
|
|
</>
|
|
)}
|
|
{pilotId && (
|
|
<>
|
|
<div className="col-span-4">
|
|
<Typography variant="h5">Endorsements</Typography>
|
|
<hr className="my-3" />
|
|
</div>
|
|
<PilotFormEndorsements endorsements={[]} />
|
|
</>
|
|
)} */}
|
|
</div>
|
|
</DrawerBody>
|
|
<DrawerFooter>
|
|
<>
|
|
{mode !== PilotFormMode.VIEW && (
|
|
<div className="flex gap-2 justify-end justify-self-center pt-4">
|
|
<div>
|
|
<Button
|
|
className="flex items-center gap-3"
|
|
disabled={isDisabled}
|
|
variant="outlined"
|
|
onClick={onCancel}
|
|
data-testid="pilot-cancel-button"
|
|
>
|
|
<XmarkIcon size="lg" />
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
className="flex items-center gap-3"
|
|
disabled={isDisabled}
|
|
loading={isLoading}
|
|
variant="filled"
|
|
type="submit"
|
|
data-testid="pilot-save-button"
|
|
>
|
|
<SaveIcon size="lg" />
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
</DrawerFooter>
|
|
</form>
|
|
</FormProvider>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default PilotForm;
|