102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
import AdaptableCard from '@/components/shared/AdaptableCard'
|
||
import Container from '@/components/shared/Container'
|
||
import { Table } from '@/components/ui'
|
||
import { getUsers } from '@/services/identity.service'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
import useThemeClass from '@/utils/hooks/useThemeClass'
|
||
import isEmpty from 'lodash/isEmpty'
|
||
import { useEffect, useState } from 'react'
|
||
import PageTitle from '@/components/shared/PageTitle'
|
||
import UsersPermission from './UsersPermission'
|
||
import { IdentityUserDto } from '@/proxy/admin/models'
|
||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
import ActionLink from '@/components/shared/ActionLink'
|
||
|
||
const { Tr, Th, Td, THead, TBody } = Table
|
||
|
||
const Users = () => {
|
||
const { textTheme } = useThemeClass()
|
||
const [userList, setUserList] = useState<IdentityUserDto[]>([])
|
||
const [activeUser, setActiveUser] = useState<IdentityUserDto>()
|
||
const [permissionDialogOpen, setPermissionDialogOpen] = useState(false)
|
||
|
||
const { translate } = useLocalization()
|
||
|
||
const fetchData = async () => {
|
||
const response = await getUsers()
|
||
if (response.data?.items) {
|
||
setUserList(response.data.items)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (isEmpty(userList)) {
|
||
fetchData()
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [])
|
||
|
||
const openPermissionDialog = (user: IdentityUserDto) => {
|
||
setActiveUser(user)
|
||
setPermissionDialogOpen(true)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<PageTitle title={translate('::AbpIdentity.Users')} />
|
||
<Container>
|
||
<AdaptableCard>
|
||
<Table>
|
||
<THead>
|
||
<Tr>
|
||
<Th className="w-1/6"></Th>
|
||
<Th>Adı Soyadı</Th>
|
||
<Th>E-Posta</Th>
|
||
<Th>Telefon</Th>
|
||
<Th>Durum</Th>
|
||
</Tr>
|
||
</THead>
|
||
<TBody>
|
||
{userList.map((user) => (
|
||
<Tr key={user.id}>
|
||
<Td>
|
||
<div
|
||
className={`${textTheme} cursor-pointer select-none font-semibold`}
|
||
onClick={() => openPermissionDialog(user)}
|
||
>
|
||
{translate('::Permission')}
|
||
</div>
|
||
</Td>
|
||
<Td>
|
||
<ActionLink
|
||
href={ROUTES_ENUM.protected.admin.identity.user.detail.replace(
|
||
':userId',
|
||
user.id!,
|
||
)}
|
||
className="font-bold"
|
||
>
|
||
{user.name} {user.surname}
|
||
</ActionLink>
|
||
</Td>
|
||
<Td>{user.email}</Td>
|
||
<Td>{user.phoneNumber}</Td>
|
||
<Td>{user.isActive ? 'Aktif' : 'Pasif'}</Td>
|
||
</Tr>
|
||
))}
|
||
</TBody>
|
||
</Table>
|
||
</AdaptableCard>
|
||
</Container>
|
||
{activeUser?.id && (
|
||
<UsersPermission
|
||
open={permissionDialogOpen}
|
||
onDialogClose={() => setPermissionDialogOpen(false)}
|
||
name={`${activeUser.name ?? ''} ${activeUser.surname ?? ''}`.trim() || activeUser.email || activeUser.id}
|
||
id={activeUser.id}
|
||
></UsersPermission>
|
||
)}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Users
|