create attibute value

src/pages/product/attribute/AttributeValues.tsx

@@ -0,0 +1,26 @@
+import { type FC } from 'react'
+import { useParams } from 'react-router-dom'
+import { useGetAttributeValues } from '../hooks/useProductData'
+import CreateValue from '../components/CreateValue'
+
+const AttributeValues: FC = () => {
+
+    const { id } = useParams()
+    const { data, refetch } = useGetAttributeValues(Number(id))
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>مقادیر</h1>
+
+                <CreateValue
+                    id={Number(id)}
+                    refetch={refetch}
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default AttributeValues

src/pages/product/attribute/List.tsx

@@ -66,6 +66,19 @@ const AttributeList: FC = () => {
                                 )
                             }
                         },
+                        {
+                            key: 'value',
+                            title: 'مقادیر',
+                            render: (item) => {
+                                return (
+                                    <Link to={Paths.product.attributeValue.list + item.id}>
+                                        <Button className='w-fit px-5'>
+                                            میدیریت مقادیر
+                                        </Button>
+                                    </Link>
+                                )
+                            }
+                        },
                         {
                             key: 'actions',
                             title: '',

src/pages/product/components/CreateValue.tsx

@@ -0,0 +1,99 @@
+import { useState, type FC } from 'react'
+import Button from '@/components/Button'
+import { AddSquare, 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 { useCreateAttributeValue } from '../hooks/useProductData'
+import { extractErrorMessage } from '@/config/func'
+import { toast } from 'react-toastify'
+
+type Props = {
+    id: number,
+    refetch: () => void,
+}
+
+const CreateValue: FC<Props> = ({ id, refetch }) => {
+
+
+    const { mutate: createValue } = useCreateAttributeValue()
+    const [showModal, setShowModal] = useState<boolean>(false)
+
+    const formik = useFormik<CreateAttributeValueType>({
+        initialValues: {
+            value: '',
+            order: 1
+        },
+        validationSchema: Yup.object({
+            value: Yup.string().required('این فیلد اجباری است')
+        }),
+        onSubmit: (values) => {
+            createValue({ id: id, params: values }, {
+                onSuccess: () => {
+                    refetch()
+                    setShowModal(false)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                }
+
+            })
+        }
+    })
+
+    return (
+        <div>
+            <Button
+                className='w-fit px-6'
+                onClick={() => setShowModal(true)}
+            >
+                <div className='flex gap-1.5'>
+                    <AddSquare size={18} color='black' />
+                    <div className='text-[13px] font-light'>مقدار جدید</div>
+                </div>
+            </Button>
+
+            <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 CreateValue

src/pages/product/hooks/useProductData.ts

@@ -7,6 +7,7 @@ import {
 import * as api from "../service/ProductService";
 import type {
   CreateAttributeType,
+  CreateAttributeValueType,
   CreateCategoryType,
   CreateProductType,
 } from "../types/Types";
@@ -139,3 +140,23 @@ export const useDeleteAttribute = () => {
     mutationFn: (id: number) => api.deleteAttributes(id),
   });
 };
+
+export const useGetAttributeValues = (id: number) => {
+  return useQuery({
+    queryKey: ["attrbute-values", id],
+    queryFn: () => api.getAttributeValues(id),
+    enabled: !!id,
+  });
+};
+
+export const useCreateAttributeValue = () => {
+  return useMutation({
+    mutationFn: ({
+      id,
+      params,
+    }: {
+      id: number;
+      params: CreateAttributeValueType;
+    }) => api.createAttributeValues(id, params),
+  });
+};

src/pages/product/service/ProductService.ts

@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import { type AttributeDetailResponseType, 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 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");
@@ -74,4 +74,14 @@ export const updateAttribute = async (id: number, params:CreateAttributeType) =>
 export const deleteAttributes = async (id: number) => {
   const { data } = await axios.delete(`/admin/products/attributes/${id}`);
   return data;
+};
+
+export const getAttributeValues = async (id: number) => {
+  const { data } = await axios.get<AttributeValuesResponseType>(`/admin/products/attributes/${id}/values`);
+  return data;
+};
+
+export const createAttributeValues = async (id: number, params:CreateAttributeValueType) => {
+  const { data } = await axios.post(`/admin/product/attribute/${id}/value`, params);
+  return data;
 };

src/pages/product/types/Types.ts

@@ -71,3 +71,17 @@ export type AttributeType = {
 
 export type AttributeResponseType = BaseResponse<AttributeType[]>;
 export type AttributeDetailResponseType = BaseResponse<AttributeType>;
+
+export type CreateAttributeValueType = {
+    value: string,
+    order: number,
+}
+
+export type AttributeValueType = {
+    createdAt: string,
+    id: number,
+    order: number,
+    value: string,
+}
+
+export type AttributeValuesResponseType = BaseResponse<AttributeValueType[]>;