ilnaz 658e23d4e3
Some checks are pending
it-academy/dry-wash-pl/pipeline/pr-main Build started...
it-academy/dry-wash-pl/pipeline/head This commit looks good
fix: place orders in the model
2025-02-08 22:36:30 +03:00

143 lines
3.9 KiB
TypeScript

import React, { useEffect } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import {
Button,
FormControl,
FormLabel,
Input,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
InputGroup,
InputLeftElement,
FormErrorMessage,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { PhoneIcon } from '@chakra-ui/icons';
import { useAddMasterMutation } from '../../__data__/service/api';
import { DrawerInputs } from '../../models/arm/form';
import useShowToast from '../../hooks/useShowToast';
interface MasterDrawerProps {
isOpen: boolean;
onClose: () => void;
}
const MasterDrawer = ({ isOpen, onClose }: MasterDrawerProps) => {
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<DrawerInputs>();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.drawer',
});
const onSubmit: SubmitHandler<DrawerInputs> = async (data) => {
const trimMaster = {
name: data.name.trim(),
phone: data.phone.trim(),
};
const isEmptyFields = trimMaster.name === '' || trimMaster.phone === '';
if (isEmptyFields) {
showToast(t('toast.error.base'), 'error', t('toast.error.empty-fields'));
return;
}
await addMaster(trimMaster);
};
const [addMaster, { error, isSuccess }] = useAddMasterMutation();
const showToast = useShowToast();
useEffect(() => {
if (isSuccess) {
showToast(t('toast.create-master'), 'success');
reset();
onClose();
}
}, [isSuccess]);
useEffect(() => {
if (error) {
showToast(
t('toast.error.create-master'),
'error',
t('toast.error.create-master-details'),
);
console.error(error);
}
}, [error]);
return (
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
<DrawerOverlay />
<DrawerContent>
<form onSubmit={handleSubmit(onSubmit)}>
<DrawerCloseButton />
<DrawerHeader>{t('title')}</DrawerHeader>
<DrawerBody>
<FormControl mb='4' isInvalid={!!errors.name}>
<FormLabel>{t('inputName.label')}</FormLabel>
<Input
{...register('name', {
required: t('form.name.required'),
minLength: {
value: 2,
message: t('form.name.minLength'),
},
})}
placeholder={t('inputName.placeholder')}
/>
<FormErrorMessage>
{errors.name && errors.name.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!!errors.phone}>
<FormLabel>{t('inputPhone.label')}</FormLabel>
<InputGroup>
<InputLeftElement pointerEvents='none'>
<PhoneIcon color='gray.300' />
</InputLeftElement>
<Input
{...register('phone', {
required: t('form.phone.required'),
pattern: {
value: /^(\+7|8)\d{10}$/,
message: t('form.phone.pattern'),
},
setValueAs: (value) => value.replace(/[^\d+]/g, ''),
})}
placeholder={t('inputPhone.placeholder')}
/>
</InputGroup>
<FormErrorMessage>
{errors.phone && errors.phone.message}
</FormErrorMessage>
</FormControl>
</DrawerBody>
<DrawerFooter>
<Button colorScheme='teal' mr={3} type='submit'>
{t('button.save')}
</Button>
<Button variant='ghost' onClick={onClose}>
{t('button.cancel')}
</Button>
</DrawerFooter>
</form>
</DrawerContent>
</Drawer>
);
};
export default MasterDrawer;