From ac5276dbfc9696524900080319109e57054e352f Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sun, 16 Nov 2025 15:28:02 +0330 Subject: [PATCH] update role --- src/pages/roles/Update.tsx | 109 ++++++++++++++++++ .../roles/components/RoleTableColumns.tsx | 8 -- src/pages/roles/hooks/useRolesData.ts | 21 ++++ src/pages/roles/service/RolesService.ts | 20 +++- src/pages/roles/types/Types.ts | 1 + src/router/Main.tsx | 2 + 6 files changed, 152 insertions(+), 9 deletions(-) create mode 100644 src/pages/roles/Update.tsx diff --git a/src/pages/roles/Update.tsx b/src/pages/roles/Update.tsx new file mode 100644 index 0000000..c8df18b --- /dev/null +++ b/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({ + 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 + } + + if (!role) { + return ( +
+
نقش یافت نشد
+
+ ) + } + + return ( +
+
+
+ ویرایش نقش +
+
+ +
+
+ +
+
+
+ +
+
+
+
+ ) +} + +export default UpdateRole \ No newline at end of file diff --git a/src/pages/roles/components/RoleTableColumns.tsx b/src/pages/roles/components/RoleTableColumns.tsx index 9615cdc..ddfd168 100644 --- a/src/pages/roles/components/RoleTableColumns.tsx +++ b/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: 'تاریخ ایجاد', diff --git a/src/pages/roles/hooks/useRolesData.ts b/src/pages/roles/hooks/useRolesData.ts index f10b189..e651c93 100644 --- a/src/pages/roles/hooks/useRolesData.ts +++ b/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] }); + }, + }); +}; diff --git a/src/pages/roles/service/RolesService.ts b/src/pages/roles/service/RolesService.ts index 6a5e814..f9933c0 100644 --- a/src/pages/roles/service/RolesService.ts +++ b/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 => { + const { data } = await axios.get( + `/admin/roles/${id}` + ); + return data; +}; + +export const updateRole = async (id: string, params: CreateRoleType) => { + const { data } = await axios.patch(`/admin/roles/${id}`, params); + return data; +}; diff --git a/src/pages/roles/types/Types.ts b/src/pages/roles/types/Types.ts index 696d41a..d732c23 100644 --- a/src/pages/roles/types/Types.ts +++ b/src/pages/roles/types/Types.ts @@ -33,3 +33,4 @@ export type RoleType = { }; export type GetRolesResponseType = IResponse; +export type GetRoleDetailsResponseType = IResponse; diff --git a/src/router/Main.tsx b/src/router/Main.tsx index d2db34b..5d41323 100644 --- a/src/router/Main.tsx +++ b/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 = () => { } /> } /> } /> + } />