update value

src/pages/product/attribute/AttributeValues.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import { useGetAttributeValues } from '../hooks/useProductData'
 import CreateValue from '../components/CreateValue'
 import Table from '@/components/Table'
-import { Edit } from 'iconsax-react'
+import UpdateValue from '../components/UpdateValue'
 
 const AttributeValues: FC = () => {
 
@@ -35,12 +35,12 @@ const AttributeValues: FC = () => {
                         {
                             key: 'actions',
                             title: '',
-                            render: () => {
+                            render: (item) => {
                                 return (
                                     <div className='flex gap-2 items-center'>
-                                        <Edit
-                                            size={20}
-                                            color='#0037FF'
+                                        <UpdateValue
+                                            id={item.id}
+                                            refetch={refetch}
                                         />
                                     </div>
                                 )

src/pages/product/components/UpdateValue.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState, type FC } from 'react'
+import Button from '@/components/Button'
+import { Edit, TickCircle } from 'iconsax-react'
+import DefaulModal from '@/components/DefaulModal'
+import { useFormik } from 'formik'
+import type { CreateAttributeValueType } from '../types/Types'
+import * as Yup from 'yup'
+import Input from '@/components/Input'
+import { useGetAttributeValueDetail, useUpdateAttributeValue } from '../hooks/useProductData'
+import { extractErrorMessage } from '@/config/func'
+import { toast } from 'react-toastify'
+
+type Props = {
+    id: number,
+    refetch: () => void,
+}
+
+const UpdateValue: FC<Props> = ({ id, refetch }) => {
+
+
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const { mutate: updateValue } = useUpdateAttributeValue()
+    const { data, refetch: refetchDeetail } = useGetAttributeValueDetail(id, showModal)
+
+    const formik = useFormik<CreateAttributeValueType>({
+        initialValues: {
+            value: '',
+            order: 1
+        },
+        validationSchema: Yup.object({
+            value: Yup.string().required('این فیلد اجباری است')
+        }),
+        onSubmit: (values) => {
+            updateValue({ id: id, params: values }, {
+                onSuccess: () => {
+                    refetch()
+                    refetchDeetail()
+                    setShowModal(false)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                }
+
+            })
+        }
+    })
+
+    useEffect(() => {
+
+        if (data) {
+            formik.setValues({
+                value: data?.data.value,
+                order: data?.data.order
+            })
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data])
+
+
+    return (
+        <div>
+            <Edit
+                onClick={() => setShowModal(true)}
+                size={20}
+                color='#0037FF'
+            />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header='ویرایش مقدار'
+            >
+                <div className='mt-5'>
+                    <Input
+                        label='مقدار'
+                        {...formik.getFieldProps('value')}
+                        error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
+                    />
+                </div>
+
+                <div className='mt-5'>
+                    <Input
+                        label='ترتیب اولویت'
+                        {...formik.getFieldProps('order')}
+                    />
+                </div>
+
+                <div className='mt-6 flex justify-end'>
+                    <Button
+                        className='w-fit px-6'
+                        onClick={() => formik.handleSubmit()}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle
+                                size={18}
+                                color='black'
+                            />
+                            <div>ذخیره</div>
+                        </div>
+                    </Button>
+                </div>
+
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default UpdateValue

src/pages/product/hooks/useProductData.ts

@@ -160,3 +160,23 @@ export const useCreateAttributeValue = () => {
     }) => api.createAttributeValues(id, params),
   });
 };
+
+export const useUpdateAttributeValue = () => {
+  return useMutation({
+    mutationFn: ({
+      id,
+      params,
+    }: {
+      id: number;
+      params: CreateAttributeValueType;
+    }) => api.updateAttributeValues(id, params),
+  });
+};
+
+export const useGetAttributeValueDetail = (id: number, enabled: boolean) => {
+  return useQuery({
+    queryKey: ["attrbute-values-detail", id],
+    queryFn: () => api.getAttributeValueDetail(id),
+    enabled: !!id && enabled,
+  });
+};

src/pages/product/service/ProductService.ts

@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import { type AttributeDetailResponseType, type AttributeResponseType, type AttributeValuesResponseType, type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateAttributeValueType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types";
+import { type AttributeDetailResponseType, type AttributeResponseType, type AttributeValueDetailResponseType, type AttributeValuesResponseType, type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateAttributeValueType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types";
 
 export const getCategory = async () => {
   const { data } = await axios.get<CategoriesResponse>("/admin/category");
@@ -84,4 +84,14 @@ export const getAttributeValues = async (id: number) => {
 export const createAttributeValues = async (id: number, params:CreateAttributeValueType) => {
   const { data } = await axios.post(`/admin/product/attribute/${id}/value`, params);
   return data;
+};
+
+export const updateAttributeValues = async (id: number, params:CreateAttributeValueType) => {
+  const { data } = await axios.patch(`/admin/products/attributes/value/${id}`, params);
+  return data;
+};
+
+export const getAttributeValueDetail = async (id: number) => {
+  const { data } = await axios.get<AttributeValueDetailResponseType>(`/admin/products/attributes/value/${id}`);
+  return data;
 };

src/pages/product/types/Types.ts

@@ -85,3 +85,4 @@ export type AttributeValueType = {
 }
 
 export type AttributeValuesResponseType = BaseResponse<AttributeValueType[]>;
+export type AttributeValueDetailResponseType = BaseResponse<AttributeValueType>;