update role

2025-11-16 15:28:02 +03:30
parent 63e9a80bb6
commit ac5276dbfc
6 changed files with 152 additions and 9 deletions
@@ -0,0 +1,109 @@
+import { type FC, useEffect } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate, useParams } from 'react-router-dom'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import { useUpdateRole, useGetRoleDetails } 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'
+import PageLoading from '@/components/PageLoading'
+
+const UpdateRole: FC = () => {
+    const { id } = useParams<{ id: string }>()
+    const { data: roleData, isLoading } = useGetRoleDetails(id || '')
+    const { mutate: updateRole, isPending } = useUpdateRole()
+    const navigate = useNavigate()
+
+    const role = roleData?.data
+
+    const formik = useFormik<CreateRoleType>({
+        initialValues: {
+            name: '',
+            permissionIds: [],
+        },
+        validationSchema: Yup.object().shape({
+            name: Yup.string().required('نام نقش الزامی است'),
+            permissionIds: Yup.array().of(Yup.string()),
+        }),
+        onSubmit: (values) => {
+            if (!id) return
+            updateRole(
+                { id, params: values },
+                {
+                    onSuccess: () => {
+                        toast.success('نقش با موفقیت به‌روزرسانی شد')
+                        navigate(Pages.roles.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error))
+                    },
+                }
+            )
+        },
+    })
+
+    useEffect(() => {
+        if (role) {
+            formik.setValues({
+                name: role.name || '',
+                permissionIds: role.permissions?.map((p) => p.id) || [],
+            })
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [role])
+
+    if (isLoading) {
+        return <PageLoading />
+    }
+
+    if (!role) {
+        return (
+            <div className='w-full mt-4 flex justify-center items-center'>
+                <div>نقش یافت نشد</div>
+            </div>
+        )
+    }
+
+    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>
+            </div>
+        </div>
+    )
+}
+
+export default UpdateRole