form builder service and hooks

2026-01-29 10:09:51 +03:30
parent 420e011b50
commit 2234c44202
8 changed files with 686 additions and 0 deletions
@@ -0,0 +1,113 @@
+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 { useDeleteAttribute, useGetAttributes } from '../hooks/useProductData'
+import Table from '@/components/Table'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
+
+const AttributeList: FC = () => {
+
+    const { id } = useParams()
+    const { mutate: deleteAttribute, isPending } = useDeleteAttribute()
+    const { data, refetch } = useGetAttributes(Number(id))
+
+    const handleDelete = (id: number) => {
+        deleteAttribute(id, {
+            onSuccess: () => {
+                refetch()
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
+
+
+    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: 'value',
+                            title: 'مقادیر',
+                            render: (item) => {
+                                return (
+                                    <Link to={Paths.product.attributeValue.list + item.id}>
+                                        <Button className='w-fit px-5'>
+                                            میدیریت مقادیر
+                                        </Button>
+                                    </Link>
+                                )
+                            }
+                        },
+                        {
+                            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>
+
+                                        <TrashWithConfrim
+                                            isloading={isPending}
+                                            colorIcon='red'
+                                            onDelete={() => handleDelete(item.id)}
+                                        />
+                                    </div>
+                                )
+                            }
+                        }
+                    ]}
+                    data={data?.data}
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default AttributeList