services
This commit is contained in:
hamid zarghami
+99
-49
@@ -1,4 +1,4 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } from 'iconsax-react'
|
||||
@@ -7,11 +7,24 @@ import Input from '../../components/Input'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { useGetAllServices, useGetCategoryParents } from './hooks/useServiceData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { ServiceCategoryType, ServiceItemType } from './types/ServiceTypes'
|
||||
import moment from 'moment-jalaali'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import ToggleStatusService from './components/ToggleStatusService'
|
||||
import CheckBoxComponent from '../../components/CheckBoxComponent'
|
||||
|
||||
const ListService: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [category, setCategory] = useState<string>('')
|
||||
const [status, setstatus] = useState<'ACTIVE' | 'IN_ACTIVE' | ''>('')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const [isDanakSuggest, setIsDanakSuggest] = useState<boolean>(false)
|
||||
const getServices = useGetAllServices(search, page, category, status, isDanakSuggest)
|
||||
const getCategory = useGetCategoryParents()
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -40,71 +53,108 @@ const ListService: FC = () => {
|
||||
<div className='flex gap-4'>
|
||||
<Select
|
||||
className='w-36'
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
]}
|
||||
items={
|
||||
getCategory.data?.data ?
|
||||
getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => ({
|
||||
label: item.title,
|
||||
value: item.id,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
placeholder={t('service.category')}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
className='w-36'
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
{ label: t('all'), value: '' },
|
||||
{ label: t('service.active'), value: 'ACTIVE' },
|
||||
{ label: t('service.deactive'), value: 'IN_ACTIVE' },
|
||||
]}
|
||||
placeholder={t('service.status')}
|
||||
onChange={(e) => setstatus(e.target.value as 'ACTIVE' | 'IN_ACTIVE' | '')}
|
||||
/>
|
||||
<div className='flex text-sm items-center'>
|
||||
<div className='text-xs whitespace-nowrap'>
|
||||
{t('service.danak_sujescet')}
|
||||
</div>
|
||||
<CheckBoxComponent
|
||||
checked={isDanakSuggest}
|
||||
onChange={(e) => setIsDanakSuggest(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('service.search')}
|
||||
className='bg-white border border-border'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text='' />
|
||||
<Td text={t('service.title')} />
|
||||
<Td text={t('service.company_developed')} />
|
||||
<Td text={t('service.category')} />
|
||||
<Td text={t('service.publish_date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text=''>
|
||||
<div className='size-10 rounded-lg bg-red-100'></div>
|
||||
</Td>
|
||||
<Td text={'دی منو'} />
|
||||
<Td text={'شرکت داناک'} />
|
||||
<Td text={'رستوران'} />
|
||||
<Td text={'۱۴۰۳/۰۹/۳۰'} />
|
||||
<Td text={''}>
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => null}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{
|
||||
getServices.isPending || getCategory.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='' />
|
||||
<Td text={t('service.title')} />
|
||||
<Td text={t('service.company_developed')} />
|
||||
<Td text={t('service.category')} />
|
||||
<Td text={t('service.publish_date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getServices.data?.data?.services?.map((item: ServiceItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text=''>
|
||||
<div className='size-10 rounded-lg overflow-hidden'>
|
||||
<img src={item.icon} className='size-full' />
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={item.name} />
|
||||
<Td text={item.author} />
|
||||
<Td text={item.category?.title} />
|
||||
<Td text={moment(item.createDate).format('jYYYY-jMM-jDD')} />
|
||||
<Td text={''}>
|
||||
<ToggleStatusService
|
||||
id={item.id}
|
||||
status={item.isActive}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + item.id}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className='flex justify-end pb-5'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getServices.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user