list of attributes

src/pages/product/attribute/List.tsx

@@ -0,0 +1,78 @@
+import Button from '@/components/Button'
+import { Paths } from '@/config/Paths'
+import { AddSquare, Edit } from 'iconsax-react'
+import { type FC } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { useGetAttributes } from '../hooks/useProductData'
+import Table from '@/components/Table'
+
+const AttributeList: FC = () => {
+
+    const { id } = useParams()
+    const { data } = useGetAttributes(Number(id))
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>ویژگی ها</h1>
+
+                <Link
+                    to={Paths.product.attribute.create + id}
+                >
+                    <Button
+                        className='w-fit px-6'
+                    >
+                        <div className='flex gap-1.5'>
+                            <AddSquare size={18} color='black' />
+                            <div className='text-[13px] font-light'>ویژگی جدید</div>
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+
+            <div className='mt-8'>
+                <Table
+                    columns={[
+                        {
+                            key: 'name',
+                            title: 'نام'
+                        },
+                        {
+                            key: 'type',
+                            title: 'نوع'
+                        },
+                        {
+                            key: 'isRequired',
+                            title: 'احباری',
+                            render: (item) => {
+                                return (
+                                    <div>{item.isRequired ? 'اجباری' : 'اختیاری'}</div>
+                                )
+                            }
+                        },
+                        {
+                            key: 'actions',
+                            title: '',
+                            render: (item) => {
+                                return (
+                                    <div className='flex gap-2 items-center'>
+                                        <Link to={Paths.product.attribute.update + item.id}>
+                                            <Edit
+                                                color='#0037FF'
+                                                size={20}
+                                            />
+                                        </Link>
+                                    </div>
+                                )
+                            }
+                        }
+                    ]}
+                    data={data?.data}
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default AttributeList

src/pages/product/hooks/useProductData.ts

@@ -97,3 +97,11 @@ export const useCreateAttribute = () => {
       api.createAttribute(id, params),
   });
 };
+
+export const useGetAttributes = (id: number) => {
+  return useQuery({
+    queryKey: ["product-attributes", id],
+    queryFn: () => api.getAttributes(id),
+    enabled: !!id,
+  });
+};

src/pages/product/service/ProductService.ts

@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import { type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types";
+import { 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<CategoriesResponse>("/admin/category");
@@ -54,4 +54,9 @@ export const deleteProduct = async (id: number) => {
 export const createAttribute = async (id: number, params:CreateAttributeType) => {
   const { data } = await axios.post(`/admin/product/${id}/attribute`, params);
   return data;
+};
+
+export const getAttributes = async (id: number) => {
+  const { data } = await axios.get<AttributeResponseType>(`/admin/products/${id}/attributes`);
+  return data;
 };

src/pages/product/types/Types.ts

@@ -57,4 +57,16 @@ export type CreateAttributeType = {
   isRequired: boolean,
   type: FieldTypeEnum,
   order: number
-}
+}
+
+export type AttributeType = {
+    createdAt: string,
+    id: number,
+    isRequired: boolean,
+    name: string,
+    order: number,
+    product: number,
+    type: FieldTypeEnum
+}
+
+export type AttributeResponseType = BaseResponse<AttributeType[]>;

src/router/MainRouter.tsx

@@ -30,6 +30,7 @@ import CreateCategory from '@/pages/product/category/Create'
 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'
 
 const MainRouter: FC = () => {
     return (
@@ -51,6 +52,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.product.create} element={<CreateProduct />} />
                             <Route path={Paths.product.update + ':id'} element={<UpdateProduct />} />
                             <Route path={Paths.product.attribute.create + ':id'} element={<CreateAttribute />} />
+                            <Route path={Paths.product.attribute.list + ':id'} element={<AttributeList />} />
                             <Route path={Paths.product.category.list} element={<CategoryList />} />
                             <Route path={Paths.product.category.create} element={<CreateCategory />} />
                             <Route path={Paths.product.category.update + ':id'} element={<UpdateCategory />} />