role crud fix

src/pages/roles/Create.tsx

@@ -6,16 +6,17 @@ import { toast } from 'react-toastify'
 import { useNavigate } from 'react-router-dom'
 import Button from '@/components/Button'
 import Input from '@/components/Input'
-import { useCreateRole } from './hooks/useRolesData'
+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 { mutate: createRole, isPending } = useCreateRole()
     const navigate = useNavigate()
-
+    const { mutate: createRole, isPending } = useCreateRole()
+    const { data: permissionsData } = useGetPermissions()
     const formik = useFormik<CreateRoleType>({
         initialValues: {
             name: '',
@@ -69,6 +70,31 @@ const CreateRole: FC = () => {
                             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>

src/pages/roles/Update.tsx

@@ -6,7 +6,8 @@ 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 { Checkbox } from '@/components/ui/checkbox'
+import { useUpdateRole, useGetRoleDetails, useGetPermissions } from './hooks/useRolesData'
 import type { CreateRoleType } from './types/Types'
 import { Pages } from '@/config/Pages'
 import type { ErrorType } from '@/helpers/types'
@@ -16,6 +17,7 @@ import PageLoading from '@/components/PageLoading'
 const UpdateRole: FC = () => {
     const { id } = useParams<{ id: string }>()
     const { data: roleData, isLoading } = useGetRoleDetails(id || '')
+    const { data: permissionsData } = useGetPermissions()
     const { mutate: updateRole, isPending } = useUpdateRole()
     const navigate = useNavigate()
 
@@ -100,6 +102,31 @@ const UpdateRole: FC = () => {
                             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>

src/pages/roles/hooks/useRolesData.ts

@@ -48,3 +48,10 @@ export const useUpdateRole = () => {
     },
   });
 };
+
+export const useGetPermissions = () => {
+  return useQuery({
+    queryKey: ["permissions"],
+    queryFn: api.getPermissions,
+  });
+};

src/pages/roles/service/RolesService.ts

@@ -3,6 +3,7 @@ import type {
   CreateRoleType,
   GetRolesResponseType,
   GetRoleDetailsResponseType,
+  GetPermissionsResponseType,
 } from "../types/Types";
 
 export type GetRolesParams = {
@@ -43,3 +44,10 @@ export const updateRole = async (id: string, params: CreateRoleType) => {
   const { data } = await axios.patch(`/admin/roles/${id}`, params);
   return data;
 };
+
+export const getPermissions = async (): Promise<GetPermissionsResponseType> => {
+  const { data } = await axios.get<GetPermissionsResponseType>(
+    `/admin/permissions`
+  );
+  return data;
+};

src/pages/roles/types/Types.ts

@@ -11,6 +11,7 @@ export type PermissionType = {
   updatedAt: string;
   deletedAt: string | null;
   name: string;
+  title: string;
   [key: string]: unknown;
 };
 
@@ -34,3 +35,4 @@ export type RoleType = {
 
 export type GetRolesResponseType = IResponse<RoleType[]>;
 export type GetRoleDetailsResponseType = IResponse<RoleType>;
+export type GetPermissionsResponseType = IResponse<PermissionType[]>;