hamid zarghami
137 lines
6.1 KiB
TypeScript
137 lines
6.1 KiB
TypeScript
import { FC, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Button from '../../components/Button'
|
|
import { Add, Eye } from 'iconsax-react'
|
|
import Input from '../../components/Input'
|
|
import Td from '../../components/Td'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
import { Pages } from '../../config/Pages'
|
|
import { useDeleteUser, useGetUsers } from './hooks/useUserData'
|
|
import { UserItemType } from './types/UserTypes'
|
|
import PageLoading from '../../components/PageLoading'
|
|
import { toast } from '../../components/Toast';
|
|
import { ErrorType } from '../../helpers/types'
|
|
import Pagination from '../../components/Pagination'
|
|
import TrashWithConfrim from '../../components/TrashWithConfrim'
|
|
const UsersList: FC = () => {
|
|
|
|
const navigate = useNavigate()
|
|
const { t } = useTranslation('global')
|
|
const [page, setPage] = useState<number>(1)
|
|
const [search, setSearch] = useState<string>('')
|
|
const getUsers = useGetUsers(search, undefined, page)
|
|
const deleteUser = useDeleteUser()
|
|
|
|
const handleDeleteUser = (id: string) => {
|
|
deleteUser.mutate(id, {
|
|
onSuccess: () => {
|
|
toast(t('success'), 'success')
|
|
getUsers.refetch()
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast(error.response?.data?.error?.message[0], 'error')
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className='mt-4'>
|
|
<div className='flex w-full justify-between items-center'>
|
|
<div>
|
|
{t('user.users_list')}
|
|
</div>
|
|
<div>
|
|
<Button
|
|
className='px-5'
|
|
onClick={() => navigate(Pages.users.create)}
|
|
>
|
|
<div className='flex gap-2'>
|
|
<Add
|
|
className='size-5'
|
|
color='#fff'
|
|
/>
|
|
<div>{t('user.add_user')}</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex justify-between items-center mt-12'>
|
|
|
|
<div>
|
|
<Input
|
|
variant='search'
|
|
placeholder={t('service.search')}
|
|
className='bg-white border border-border'
|
|
onChangeSearchFinal={(value) => setSearch(value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
getUsers.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('user.name')} />
|
|
<Td text={t('user.email')} />
|
|
<Td text={t('user.role')} />
|
|
<Td text={t('detail')} />
|
|
<Td text={''} />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
getUsers.data?.data?.users?.map((item: UserItemType) => {
|
|
return (
|
|
<tr key={item.id} className='tr'>
|
|
<Td text={item.firstName + ' ' + item.lastName} />
|
|
<Td text={item.email} />
|
|
<Td text={''}>
|
|
<div className='flex flex-wrap gap-2'>
|
|
{
|
|
item.roles.map((role) => (
|
|
<div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
|
|
{role.name}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</Td>
|
|
<Td text={''}>
|
|
<div className='flex gap-2'>
|
|
<Link to={Pages.users.detail + item.id}>
|
|
<Eye size={20} color='#8C90A3' />
|
|
</Link>
|
|
|
|
<TrashWithConfrim
|
|
size={20}
|
|
color='#8C90A3'
|
|
onDelete={() => handleDeleteUser(item.id)}
|
|
isLoading={deleteUser.isPending}
|
|
/>
|
|
</div>
|
|
</Td>
|
|
<Td text={''} />
|
|
</tr>
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
|
|
<Pagination
|
|
totalPages={getUsers.data?.data?.pager?.totalPages}
|
|
currentPage={page}
|
|
onPageChange={setPage}
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UsersList |