update role + and fox

src/pages/users/RoleUpdate.tsx

@@ -0,0 +1,141 @@
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import { useGetPermissions, useGetRoleDetail, useUpdateRole } from './hooks/useUserData'
+import PageLoading from '../../components/PageLoading'
+import { useFormik } from 'formik'
+import { CreateRoleType, RolePermissionType } from './types/UserTypes'
+import * as Yup from 'yup'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
+
+const RoleUpdate: FC = () => {
+
+    const { id } = useParams()
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const [permissions, setPermissions] = useState<string[]>([])
+    const getPermissions = useGetPermissions()
+    const { data: roleDetail, isPending: isRoleDetailPending } = useGetRoleDetail(id || '')
+    const updateRole = useUpdateRole()
+
+    const handleAdd = (permissionId: string) => {
+        if (permissions.includes(permissionId)) {
+            setPermissions(permissions.filter(permission => permission !== permissionId))
+        } else {
+            setPermissions([...permissions, permissionId])
+        }
+    }
+
+    const formik = useFormik<CreateRoleType>({
+        initialValues: {
+            name: '',
+            permissions: [],
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: (values) => {
+            if (permissions.length > 0) {
+                values.permissions = permissions
+                updateRole.mutate({ id: id || '', params: values }, {
+                    onSuccess: () => {
+                        toast.success(t('success'))
+                        navigate(Pages.users.roleList)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('user.error_count_permission'))
+            }
+        }
+    })
+
+    useEffect(() => {
+        const role = roleDetail?.data?.role
+        if (role) {
+            formik.setFieldValue('name', role.name)
+            const permissionIds = role.permissions?.map((permission: string | RolePermissionType) =>
+                typeof permission === 'string' ? permission : permission.id
+            ) || []
+            setPermissions(permissionIds)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [roleDetail])
+
+    if (getPermissions.isPending || isRoleDetailPending) {
+        return <PageLoading />
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('user.update_role')}
+                </div>
+                <Button
+                    className='w-fit px-8'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={updateRole.isPending}
+                >
+                    <div className='flex gap-2'>
+                        <TickCircle
+                            className='size-5'
+                            color='white'
+                        />
+                        <div className='text-sm'>
+                            {t('user.submit_role')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='flex gap-6 mt-9'>
+                <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+
+                    <Input
+                        label={t('user.title_role')}
+                        {...formik.getFieldProps('name')}
+                        error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                    />
+
+                    <div className='mt-8'>
+                        <div className='text-sm'>
+                            {t('user.permissions')}
+                        </div>
+
+                        <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                            {
+                                getPermissions.data?.data?.permissions?.map((item: { id: string, name: string }) => {
+                                    return (
+                                        <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                                            <CheckBoxComponent
+                                                checked={permissions.includes(item.id)}
+                                                onChange={() => handleAdd(item.id)}
+                                            />
+                                            <div>{item.name}</div>
+                                        </div>
+                                    )
+                                })
+                            }
+                            <div className='flex flex-1 min-w-[23%] items-center'></div>
+                            <div className='flex flex-1 min-w-[23%] items-center'></div>
+                            <div className='flex flex-1 min-w-[23%] items-center'></div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default RoleUpdate

src/pages/users/RolesList.tsx

@@ -1,10 +1,10 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add } from 'iconsax-react'
+import { Add, Eye } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useGetRoles } from './hooks/useUserData'
 import { RoleItemType } from './types/UserTypes'
@@ -57,6 +57,7 @@ const RolesList: FC = () => {
                             <Td text={t('user.title')} />
                             <Td text={t('user.user')} />
                             <Td text={t('user.is_admin')} />
+                            <Td text={''} />
                         </tr>
                     </thead>
                     <tbody>
@@ -67,11 +68,11 @@ const RolesList: FC = () => {
                                         <Td text={item.name} />
                                         <Td text={item.userCount + ''} />
                                         <Td text={item.isAdmin ? t('yes') : t('no')} />
-                                        {/* <Td text={''}>
-                                            <Link to={Pages.ticket.detail + '1'}>
+                                        <Td text={''}>
+                                            <Link to={Pages.users.roleUpdate + item.id}>
                                                 <Eye size={20} color='#8C90A3' />
                                             </Link>
-                                        </Td> */}
+                                        </Td>
                                     </tr>
                                 )
                             })

src/pages/users/hooks/useUserData.ts

@@ -26,6 +26,21 @@ export const useGetRoles = (search: string) => {
   });
 };
 
+export const useGetRoleDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["role-detail", id],
+    queryFn: () => api.getRoleDetail(id),
+    enabled: !!id,
+  });
+};
+
+export const useUpdateRole = () => {
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateRoleType }) =>
+      api.updateRole(id, params),
+  });
+};
+
 export const useCreateUser = () => {
   return useMutation({
     mutationFn: (variables: CreateUserType) => api.createUser(variables),

src/pages/users/service/UserService.ts

@@ -20,6 +20,16 @@ export const getRoles = async (search: string) => {
   return data;
 };
 
+export const getRoleDetail = async (id: string) => {
+  const { data } = await axios.get(`/users/roles/${id}`);
+  return data;
+};
+
+export const updateRole = async (id: string, params: CreateRoleType) => {
+  const { data } = await axios.patch(`/users/roles/${id}`, params);
+  return data;
+};
+
 export const createUser = async (params: CreateUserType) => {
   const { data } = await axios.post(`/users/admins`, params);
   return data;

src/pages/users/types/UserTypes.ts

@@ -12,6 +12,18 @@ export type RoleItemType = {
   userCount: number;
 };
 
+export type RolePermissionType = {
+  id: string;
+  name: string;
+};
+
+export type RoleDetailType = {
+  id: string;
+  name: string;
+  isAdmin: boolean;
+  permissions: (string | RolePermissionType)[];
+};
+
 export type CreateUserType = {
   phone: string;
   firstName: string;