change structure dmenu
This commit is contained in:
hamid zarghami
@@ -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
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../../components/Button'
|
||||
import DefaulModal from '../../../../components/DefaulModal'
|
||||
import UploadBox from '../../../../components/UploadBox'
|
||||
import Select from '../../../../components/Select'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { toast } from 'react-toastify'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { useCreateIcon, useGetGroupIcons } from '../../hooks/useIconData'
|
||||
import { useSingleUpload } from '../../../service/hooks/useServiceData'
|
||||
import { CreateIconType, GroupIconType } from '../types/Types'
|
||||
import { ErrorType } from '../../../../helpers/types'
|
||||
|
||||
interface CreateIconProps {
|
||||
open: boolean
|
||||
close: () => void
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
const CreateIcon: FC<CreateIconProps> = ({ open, close, onSuccess }) => {
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const createIcon = useCreateIcon()
|
||||
const singleUpload = useSingleUpload()
|
||||
const { data: groupIcons } = useGetGroupIcons()
|
||||
|
||||
const groups = (groupIcons as unknown as { data?: GroupIconType[] })?.data || []
|
||||
const groupOptions = groups.map((group: GroupIconType) => ({
|
||||
value: group.id,
|
||||
label: group.name
|
||||
}))
|
||||
|
||||
const handleCreateIcon = (values: CreateIconType) => {
|
||||
createIcon.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
setFile(undefined)
|
||||
close()
|
||||
toast.success(t('success'))
|
||||
onSuccess?.()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const formik = useFormik<CreateIconType>({
|
||||
initialValues: {
|
||||
url: '',
|
||||
groupId: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
groupId: Yup.string()
|
||||
.required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (!file) {
|
||||
toast.error(t('errors.required'))
|
||||
return
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
await singleUpload.mutateAsync(formData, {
|
||||
onSuccess: (data) => {
|
||||
values.url = data?.data?.url
|
||||
handleCreateIcon(values)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const handleClose = () => {
|
||||
formik.resetForm()
|
||||
setFile(undefined)
|
||||
close()
|
||||
}
|
||||
|
||||
return (
|
||||
<DefaulModal
|
||||
open={open}
|
||||
close={handleClose}
|
||||
title_header={t('icon.add_new_icon')}
|
||||
isHeader
|
||||
>
|
||||
<div className='mt-6'>
|
||||
<UploadBox
|
||||
label={t('icon.url')}
|
||||
onChange={(files) => setFile(files[0])}
|
||||
isReset={!open}
|
||||
accept="image/svg+xml"
|
||||
/>
|
||||
|
||||
<div className='mt-4'>
|
||||
<Select
|
||||
label={t('icon.group')}
|
||||
className='bg-white bg-opacity-30'
|
||||
items={groupOptions}
|
||||
placeholder={t('icon.select_group')}
|
||||
{...formik.getFieldProps('groupId')}
|
||||
error_text={formik.touched.groupId && formik.errors.groupId ? formik.errors.groupId : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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={createIcon.isPending || singleUpload.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>
|
||||
{t('submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateIcon
|
||||
Reference in New Issue
Block a user