From 33130ba76d888afef0fc06dd31e53d3071a9b717 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sun, 25 Jan 2026 10:23:56 +0330 Subject: [PATCH] update attribute --- src/pages/product/attribute/Update.tsx | 143 ++++++++++++++++++++ src/pages/product/hooks/useProductData.ts | 28 ++++ src/pages/product/service/ProductService.ts | 12 +- src/pages/product/types/Types.ts | 1 + src/router/MainRouter.tsx | 2 + 5 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 src/pages/product/attribute/Update.tsx diff --git a/src/pages/product/attribute/Update.tsx b/src/pages/product/attribute/Update.tsx new file mode 100644 index 0000000..257ff86 --- /dev/null +++ b/src/pages/product/attribute/Update.tsx @@ -0,0 +1,143 @@ +import { useFormik } from 'formik' +import { useEffect, type FC } from 'react' +import type { CreateAttributeType } from '../types/Types' +import { FieldTypeEnum } from '../enum/Enum' +import * as Yup from 'yup' +import Button from '@/components/Button' +import { AddSquare } from 'iconsax-react' +import Input from '@/components/Input' +import Select from '@/components/Select' +import SwitchComponent from '@/components/Switch' +import { useGetAttributeDetail, useUpdateAttribute } from '../hooks/useProductData' +import { useNavigate, useParams } from 'react-router-dom' +import { toast } from 'react-toastify' +import { extractErrorMessage } from '@/config/func' + +const UpdateAttribute: FC = () => { + + const { id } = useParams() + const navigate = useNavigate() + const { data, refetch } = useGetAttributeDetail(Number(id)) + const { mutate: createAttribute, isPending } = useUpdateAttribute() + + const formik = useFormik({ + initialValues: { + name: '', + isRequired: true, + order: 1, + type: FieldTypeEnum.text, + }, + validationSchema: Yup.object({ + name: Yup.string().required('این فیلد اجباری می باشد') + }), + onSubmit: (values) => { + createAttribute({ id: Number(id), params: values }, { + onSuccess: () => { + toast.success('با موفقیت ذخیره شد') + refetch() + navigate(-1) + }, + onError: (error) => { + toast.error(extractErrorMessage(error)) + } + }) + } + }) + + useEffect(() => { + + if (data) { + formik.setValues({ + isRequired: data?.data?.isRequired, + name: data?.data?.name, + order: data?.data?.order, + type: data?.data?.type + }) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data]) + + + return ( +
+
+ +

ویرایش ویژگی

+ +
+ +
+
+ + + +
+ +
+ formik.setFieldValue('isRequired', value)} + label='اجباری' + /> +
+
+ +
+ ) +} + +export default UpdateAttribute \ No newline at end of file diff --git a/src/pages/product/hooks/useProductData.ts b/src/pages/product/hooks/useProductData.ts index 37227e8..4127cbd 100644 --- a/src/pages/product/hooks/useProductData.ts +++ b/src/pages/product/hooks/useProductData.ts @@ -92,9 +92,16 @@ export const useDeleteProduct = () => { }; export const useCreateAttribute = () => { + const queryClient = new QueryClient(); + return useMutation({ mutationFn: ({ id, params }: { id: number; params: CreateAttributeType }) => api.createAttribute(id, params), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["product-attributes"], + }); + }, }); }; @@ -105,3 +112,24 @@ export const useGetAttributes = (id: number) => { enabled: !!id, }); }; + +export const useGetAttributeDetail = (id: number) => { + return useQuery({ + queryKey: ["product-attribute", id], + queryFn: () => api.getAttributeDetail(id), + enabled: !!id, + }); +}; + +export const useUpdateAttribute = () => { + const queryClient = new QueryClient(); + return useMutation({ + mutationFn: ({ id, params }: { id: number; params: CreateAttributeType }) => + api.updateAttribute(id, params), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["product-attributes"], + }); + }, + }); +}; diff --git a/src/pages/product/service/ProductService.ts b/src/pages/product/service/ProductService.ts index 1ab8184..fc1f85a 100644 --- a/src/pages/product/service/ProductService.ts +++ b/src/pages/product/service/ProductService.ts @@ -1,5 +1,5 @@ import axios from "@/config/axios"; -import { type AttributeResponseType, type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types"; +import { type AttributeDetailResponseType, type AttributeResponseType, type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types"; export const getCategory = async () => { const { data } = await axios.get("/admin/category"); @@ -59,4 +59,14 @@ export const createAttribute = async (id: number, params:CreateAttributeType) => export const getAttributes = async (id: number) => { const { data } = await axios.get(`/admin/products/${id}/attributes`); return data; +}; + +export const getAttributeDetail = async (id: number) => { + const { data } = await axios.get(`/admin/products/attributes/${id}`); + return data; +}; + +export const updateAttribute = async (id: number, params:CreateAttributeType) => { + const { data } = await axios.patch(`/admin/products/attributes/${id}`, params); + return data; }; \ No newline at end of file diff --git a/src/pages/product/types/Types.ts b/src/pages/product/types/Types.ts index d92bcd4..c51ac01 100644 --- a/src/pages/product/types/Types.ts +++ b/src/pages/product/types/Types.ts @@ -70,3 +70,4 @@ export type AttributeType = { } export type AttributeResponseType = BaseResponse; +export type AttributeDetailResponseType = BaseResponse; diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx index 3862a77..d0f33e7 100644 --- a/src/router/MainRouter.tsx +++ b/src/router/MainRouter.tsx @@ -31,6 +31,7 @@ import UpdateCategory from '@/pages/product/category/Update' import UpdateProduct from '@/pages/product/Update' import CreateAttribute from '@/pages/product/attribute/Create' import AttributeList from '@/pages/product/attribute/List' +import UpdateAttribute from '@/pages/product/attribute/Update' const MainRouter: FC = () => { return ( @@ -53,6 +54,7 @@ const MainRouter: FC = () => { } /> } /> } /> + } /> } /> } /> } />