hamid zarghami
150 lines
6.8 KiB
TypeScript
150 lines
6.8 KiB
TypeScript
import { FC, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Button from '../../components/Button'
|
|
import { Add, Edit, Trash } from 'iconsax-react'
|
|
import Td from '../../components/Td'
|
|
import { Link } from 'react-router-dom'
|
|
import { Pages } from '../../config/Pages'
|
|
import Input from '../../components/Input'
|
|
import { useGetDiscounts, useDeleteDiscount } from './hooks/useDiscountData'
|
|
import { DiscountItemType } from './types/DiscountTypes'
|
|
import moment from 'moment-jalaali'
|
|
import ToggleStatusDiscount from './components/ToggleStatusDiscount'
|
|
import PageLoading from '../../components/PageLoading'
|
|
import { NumberFormat } from '../../config/func'
|
|
import { toast } from '../../components/Toast';
|
|
import { ErrorType } from '../../helpers/types'
|
|
import { usePermissions } from '../../hooks/usePermissions'
|
|
|
|
const DiscountList: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const { canCreate, canUpdate, canDelete } = usePermissions()
|
|
const [search, setSearch] = useState<string>('')
|
|
const getDiscounts = useGetDiscounts(search)
|
|
const deleteDiscount = useDeleteDiscount()
|
|
|
|
const handleDelete = (id: string) => {
|
|
deleteDiscount.mutate(id, {
|
|
onSuccess: () => {
|
|
getDiscounts.refetch()
|
|
toast(t('success'), 'success')
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast(error.response?.data?.error.message[0], 'error')
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<div className='mt-4 min-h-[500px]'>
|
|
<div className='flex justify-between items-center'>
|
|
<div>
|
|
{t('discount.list')}
|
|
</div>
|
|
|
|
{canCreate('discounts') &&
|
|
<Link to={Pages.discount.create}>
|
|
<Button
|
|
className='w-[172px]'
|
|
>
|
|
<div className='flex gap-2 items-center'>
|
|
<Add size={20} color='white' />
|
|
<div>
|
|
{t('discount.add_new_discount')}
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='mt-4'>
|
|
<div className='flex justify-end items-center'>
|
|
|
|
<div className='xl:w-[300px] w-full'>
|
|
<Input
|
|
variant='search'
|
|
placeholder={t('ads.search')}
|
|
className='bg-white w-full'
|
|
onChangeSearchFinal={(value) => setSearch(value)}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{
|
|
getDiscounts.isPending ?
|
|
<PageLoading />
|
|
:
|
|
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
|
<table className='w-full text-sm '>
|
|
<thead className='thead'>
|
|
<tr>
|
|
<Td text={t('discount.title')} />
|
|
<Td text={t('discount.type')} />
|
|
<Td text={t('discount.customer')} />
|
|
<Td text={t('discount.code')} />
|
|
<Td text={t('discount.startDate')} />
|
|
<Td text={t('discount.endDate')} />
|
|
<Td text={t('discount.price_or_percent')} />
|
|
<Td text={t('discount.status')} />
|
|
<Td text={t('')} />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
getDiscounts.data?.data?.discounts?.map((item: DiscountItemType) => {
|
|
return (
|
|
<tr key={item.id} className='tr'>
|
|
<Td text={item.title} />
|
|
<Td text={t(`discount.${item.type}`)} />
|
|
<Td text={item.user ? item.user.firstName + ' ' + item.user.lastName : '-'} />
|
|
<Td text={item.code} />
|
|
<Td text={moment(item.startDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
|
|
<Td text={moment(item.endDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
|
|
<Td text={NumberFormat(+item.value)} />
|
|
<Td text={t('')}>
|
|
<ToggleStatusDiscount
|
|
defaultActive={item.isActive}
|
|
id={item.id}
|
|
/>
|
|
</Td>
|
|
<Td text={t('')}>
|
|
<div className='flex gap-2 items-center'>
|
|
{canUpdate('discounts') &&
|
|
<Link
|
|
to={Pages.discount.detail + item.id}
|
|
>
|
|
<Edit size={20} color='#888888' />
|
|
</Link>
|
|
}
|
|
|
|
{canDelete('discounts') &&
|
|
<Trash
|
|
size={20}
|
|
color='#888888'
|
|
onClick={() => handleDelete(item.id)}
|
|
/>
|
|
}
|
|
</div>
|
|
</Td>
|
|
</tr>
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DiscountList |