hamid zarghami
104 lines
4.5 KiB
TypeScript
104 lines
4.5 KiB
TypeScript
import { type FC } from 'react'
|
||
import { useFormik } from 'formik'
|
||
import * as Yup from 'yup'
|
||
import { TickCircle } from 'iconsax-react'
|
||
import { toast } from 'react-toastify'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import Button from '@/components/Button'
|
||
import Input from '@/components/Input'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import { useCreateRole, useGetPermissions } from './hooks/useRolesData'
|
||
import type { CreateRoleType } from './types/Types'
|
||
import { Pages } from '@/config/Pages'
|
||
import type { ErrorType } from '@/helpers/types'
|
||
import { extractErrorMessage } from '@/config/func'
|
||
|
||
const CreateRole: FC = () => {
|
||
const navigate = useNavigate()
|
||
const { mutate: createRole, isPending } = useCreateRole()
|
||
const { data: permissionsData } = useGetPermissions()
|
||
const formik = useFormik<CreateRoleType>({
|
||
initialValues: {
|
||
name: '',
|
||
permissionIds: [],
|
||
},
|
||
validationSchema: Yup.object().shape({
|
||
name: Yup.string().required('نام نقش الزامی است'),
|
||
permissionIds: Yup.array().of(Yup.string()),
|
||
}),
|
||
onSubmit: (values) => {
|
||
createRole(values, {
|
||
onSuccess: () => {
|
||
toast.success('نقش با موفقیت ایجاد شد')
|
||
navigate(Pages.roles.list)
|
||
},
|
||
onError: (error: ErrorType) => {
|
||
toast.error(extractErrorMessage(error))
|
||
},
|
||
})
|
||
},
|
||
})
|
||
|
||
return (
|
||
<div className='mt-5'>
|
||
<div className='flex w-full justify-between items-center'>
|
||
<div className='text-lg font-light'>
|
||
نقش جدید
|
||
</div>
|
||
<div>
|
||
<Button
|
||
className='px-5'
|
||
onClick={() => formik.handleSubmit()}
|
||
isLoading={isPending}
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<TickCircle className='size-5' color='white' />
|
||
<div>ثبت نقش</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<div className='bg-white rounded-3xl p-6'>
|
||
<div className='mb-4'>
|
||
<Input
|
||
label='نام نقش'
|
||
name='name'
|
||
value={formik.values.name}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||
/>
|
||
</div>
|
||
<div className='mt-6'>
|
||
<div className='text-sm mb-3'>دسترسیها</div>
|
||
{permissionsData?.data && permissionsData.data.length > 0 ? (
|
||
<div className='flex gap-6 flex-wrap'>
|
||
{permissionsData.data.map((permission) => (
|
||
<div key={permission.id} className='flex items-center gap-2'>
|
||
<Checkbox
|
||
checked={formik.values.permissionIds.includes(permission.id)}
|
||
onCheckedChange={(checked) => {
|
||
const currentIds = formik.values.permissionIds
|
||
if (checked) {
|
||
formik.setFieldValue('permissionIds', [...currentIds, permission.id])
|
||
} else {
|
||
formik.setFieldValue('permissionIds', currentIds.filter((id) => id !== permission.id))
|
||
}
|
||
}}
|
||
/>
|
||
<label className='text-xs cursor-pointer'>{permission.title}</label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className='text-sm text-gray-500'>دسترسیای یافت نشد</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CreateRole |