update role

src/pages/roles/Update.tsx

@@ -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

src/pages/roles/components/RoleTableColumns.tsx

@@ -1,6 +1,5 @@
 import type { ColumnType } from '@/components/types/TableTypes'
 import type { RoleType } from '../types/Types'
-import Status from '@/components/Status'
 import TrashWithConfrim from '@/components/TrashWithConfrim'
 import { Eye } from 'iconsax-react'
 import { Link } from 'react-router-dom'
@@ -24,13 +23,6 @@ export const getRoleTableColumns = ({ onDelete, isDeleting }: GetRoleTableColumn
                 return item.permissions?.length || 0
             }
         },
-        {
-            key: 'restaurant',
-            title: 'رستوران',
-            render: (item: RoleType) => {
-                return item.restaurant ? 'دارد' : '-'
-            }
-        },
         {
             key: 'createdAt',
             title: 'تاریخ ایجاد',

src/pages/roles/hooks/useRolesData.ts

@@ -1,5 +1,6 @@
 import * as api from "../service/RolesService";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { CreateRoleType } from "../types/Types";
 
 export const useGetRoles = (params?: api.GetRolesParams) => {
   return useQuery({
@@ -8,6 +9,14 @@ export const useGetRoles = (params?: api.GetRolesParams) => {
   });
 };
 
+export const useGetRoleDetails = (id: string) => {
+  return useQuery({
+    queryKey: ["roles", id],
+    queryFn: () => api.getRoleDetails(id),
+    enabled: !!id,
+  });
+};
+
 export const useDeleteRole = () => {
   const queryClient = useQueryClient();
   return useMutation({
@@ -27,3 +36,15 @@ export const useCreateRole = () => {
     },
   });
 };
+
+export const useUpdateRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateRoleType }) =>
+      api.updateRole(id, params),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ["roles"] });
+      queryClient.invalidateQueries({ queryKey: ["roles", id] });
+    },
+  });
+};

src/pages/roles/service/RolesService.ts

@@ -1,5 +1,9 @@
 import axios from "@/config/axios";
-import type { CreateRoleType, GetRolesResponseType } from "../types/Types";
+import type {
+  CreateRoleType,
+  GetRolesResponseType,
+  GetRoleDetailsResponseType,
+} from "../types/Types";
 
 export type GetRolesParams = {
   page?: number;
@@ -25,3 +29,17 @@ export const deleteRole = async (id: string) => {
   const { data } = await axios.delete(`/admin/roles/${id}`);
   return data;
 };
+
+export const getRoleDetails = async (
+  id: string
+): Promise<GetRoleDetailsResponseType> => {
+  const { data } = await axios.get<GetRoleDetailsResponseType>(
+    `/admin/roles/${id}`
+  );
+  return data;
+};
+
+export const updateRole = async (id: string, params: CreateRoleType) => {
+  const { data } = await axios.patch(`/admin/roles/${id}`, params);
+  return data;
+};

src/pages/roles/types/Types.ts

@@ -33,3 +33,4 @@ export type RoleType = {
 };
 
 export type GetRolesResponseType = IResponse<RoleType[]>;
+export type GetRoleDetailsResponseType = IResponse<RoleType>;

src/router/Main.tsx

@@ -21,6 +21,7 @@ import ScheduleList from '@/pages/schedule/List'
 import CreateSchedule from '@/pages/schedule/Create'
 import RolesList from '@/pages/roles/List'
 import CreateRole from '@/pages/roles/Create'
+import UpdateRole from '@/pages/roles/Update'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -53,6 +54,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.schedule.create} element={<CreateSchedule />} />
                             <Route path={Pages.roles.list} element={<RolesList />} />
                             <Route path={Pages.roles.add} element={<CreateRole />} />
+                            <Route path={Pages.roles.update + ':id'} element={<UpdateRole />} />
                         </Routes>
                     </div>
                 </div>