hamid zarghami
113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
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 { useDeleteField, useGetFields } from './hooks/useFormBuilderData'
|
||
import Table from '@/components/Table'
|
||
import TrashWithConfrim from '@/components/TrashWithConfrim'
|
||
import { toast } from 'react-toastify'
|
||
import { extractErrorMessage } from '@/config/func'
|
||
|
||
const FormBuilderList: FC = () => {
|
||
|
||
const { id, type } = useParams()
|
||
const { mutate: deleteField, isPending } = useDeleteField()
|
||
const { data, refetch } = useGetFields(Number(id))
|
||
|
||
const handleDelete = (id: number) => {
|
||
deleteField(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.formBuilder.create + id + `/${type}`}
|
||
>
|
||
<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.formBuilder.values + 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.formBuilder.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 FormBuilderList |