124 lines
3.2 KiB
TypeScript
124 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Button,
|
||
FormControl,
|
||
FormLabel,
|
||
Input,
|
||
Drawer,
|
||
DrawerBody,
|
||
DrawerCloseButton,
|
||
DrawerContent,
|
||
DrawerFooter,
|
||
DrawerHeader,
|
||
DrawerOverlay,
|
||
useToast,
|
||
InputGroup,
|
||
InputLeftElement,
|
||
} from '@chakra-ui/react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { PhoneIcon } from '@chakra-ui/icons';
|
||
|
||
import { api } from '../../__data__/service/api';
|
||
|
||
const MasterDrawer = ({ isOpen, onClose }) => {
|
||
const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
|
||
const toast = useToast();
|
||
|
||
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
|
||
|
||
const handleSave = async () => {
|
||
const trimMaster = {
|
||
phone: newMaster.phone.trim(),
|
||
name: newMaster.name.trim(),
|
||
};
|
||
|
||
if (trimMaster.name === '' || trimMaster.phone === '') {
|
||
return;
|
||
}
|
||
|
||
addMaster(trimMaster);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (isSuccess) {
|
||
toast({
|
||
title: 'Мастер создан.',
|
||
description: `Мастер "${newMaster.name}" успешно добавлен.`,
|
||
status: 'success',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
position: 'top-right',
|
||
});
|
||
onClose();
|
||
}
|
||
}, [isSuccess]);
|
||
|
||
useEffect(() => {
|
||
if (error) {
|
||
toast({
|
||
title: 'Ошибка при создании мастера.',
|
||
description: 'Не удалось добавить мастера. Попробуйте еще раз.',
|
||
status: 'error',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
position: 'top-right',
|
||
});
|
||
console.error(error);
|
||
}
|
||
}, [error]);
|
||
|
||
const { t } = useTranslation('~', {
|
||
keyPrefix: 'dry-wash.arm.master.drawer',
|
||
});
|
||
|
||
return (
|
||
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
|
||
<DrawerOverlay />
|
||
<DrawerContent>
|
||
<DrawerCloseButton />
|
||
<DrawerHeader>{t('title')}</DrawerHeader>
|
||
<DrawerBody>
|
||
<FormControl mb='4'>
|
||
<FormLabel>{t('inputName.label')}</FormLabel>
|
||
<Input
|
||
// isInvalid
|
||
value={newMaster.name}
|
||
onChange={(e) =>
|
||
setNewMaster({ ...newMaster, name: e.target.value })
|
||
}
|
||
placeholder={t('inputName.placeholder')}
|
||
/>
|
||
</FormControl>
|
||
<FormControl>
|
||
<FormLabel>{t('inputPhone.label')}</FormLabel>
|
||
|
||
<InputGroup>
|
||
<InputLeftElement pointerEvents='none'>
|
||
<PhoneIcon color='gray.300' />
|
||
</InputLeftElement>
|
||
<Input
|
||
// isInvalid
|
||
value={newMaster.phone}
|
||
onChange={(e) =>
|
||
setNewMaster({ ...newMaster, phone: e.target.value })
|
||
}
|
||
placeholder={t('inputPhone.placeholder')}
|
||
/>
|
||
</InputGroup>
|
||
</FormControl>
|
||
</DrawerBody>
|
||
<DrawerFooter>
|
||
<Button colorScheme='teal' mr={3} onClick={handleSave}>
|
||
{t('button.save')}
|
||
</Button>
|
||
<Button variant='ghost' onClick={onClose}>
|
||
{t('button.cancel')}
|
||
</Button>
|
||
</DrawerFooter>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default MasterDrawer;
|