change structure dmenu

2025-12-29 11:40:52 +03:30
parent 3251f0a791
commit 782ceae3e5
11 changed files with 93 additions and 47 deletions
@@ -0,0 +1,99 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../../components/Button'
+import DefaulModal from '../../../../components/DefaulModal'
+import Input from '../../../../components/Input'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { TickCircle } from 'iconsax-react'
+import { useCreateGroupIcon } from '../../hooks/useIconData'
+import { CreateGroupIconType } from '../types/Types'
+import { ErrorType } from '../../../../helpers/types'
+
+interface CreateGroupIconProps {
+    open: boolean
+    close: () => void
+    onSuccess?: () => void
+}
+
+const CreateGroupIcon: FC<CreateGroupIconProps> = ({ open, close, onSuccess }) => {
+    const { t } = useTranslation('global')
+    const createGroupIcon = useCreateGroupIcon()
+
+    const formik = useFormik<CreateGroupIconType>({
+        initialValues: {
+            name: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: (values) => {
+            createGroupIcon.mutate(values, {
+                onSuccess: () => {
+                    formik.resetForm()
+                    close()
+                    toast.success(t('success'))
+                    onSuccess?.()
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    const handleClose = () => {
+        formik.resetForm()
+        close()
+    }
+
+    return (
+        <DefaulModal
+            open={open}
+            close={handleClose}
+            title_header={t('icon.add_new_group')}
+            isHeader
+        >
+            <div className='mt-6'>
+                <Input
+                    label={t('title')}
+                    className='bg-white bg-opacity-30'
+                    name='name'
+                    value={formik.values.name}
+                    onChange={formik.handleChange}
+                    error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                />
+
+                <div className='mt-12 border-t border-border pt-5 flex justify-end'>
+                    <div className='flex gap-5 items-center'>
+                        <Button
+                            className='w-[150px] bg-white bg-opacity-15 text-description'
+                            label={t('cancel')}
+                            onClick={handleClose}
+                        />
+
+                        <Button
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createGroupIcon.isPending}
+                        >
+                            <div className='flex gap-2'>
+                                <TickCircle
+                                    size={20}
+                                    color='white'
+                                />
+                                <div>
+                                    {t('submit')}
+                                </div>
+                            </div>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default CreateGroupIcon
+