Улучшен вид UserView

This commit is contained in:
goodmice 2022-09-12 12:30:07 +05:00
parent 567e6c4510
commit a22b043af9

View File

@ -1,4 +1,4 @@
import { memo } from 'react' import { HTMLProps, memo } from 'react'
import { Tooltip } from 'antd' import { Tooltip } from 'antd'
import { UserOutlined } from '@ant-design/icons' import { UserOutlined } from '@ant-design/icons'
@ -6,33 +6,58 @@ import { UserDto } from '@api'
import { Grid, GridItem } from '@components/Grid' import { Grid, GridItem } from '@components/Grid'
import { CompanyView } from './CompanyView' import { CompanyView } from './CompanyView'
export type UserViewProps = { export type UserViewProps = HTMLProps<HTMLSpanElement> & {
user?: UserDto user?: UserDto
} }
export const UserView = memo<UserViewProps>(({ user }) => user ? ( export const UserView = memo<UserViewProps>(({ user, ...other }) =>
<Tooltip title={( user ? (
<Grid style={{ columnGap: '8px' }}> <Tooltip
<GridItem row={1} col={1}>Фамилия:</GridItem> title={
<GridItem row={1} col={2}>{user?.surname}</GridItem> <Grid style={{ columnGap: '8px' }}>
<GridItem row={1} col={1}>
Фамилия:
</GridItem>
<GridItem row={1} col={2}>
{user?.surname}
</GridItem>
<GridItem row={2} col={1}>Имя:</GridItem> <GridItem row={2} col={1}>
<GridItem row={2} col={2}>{user?.name}</GridItem> Имя:
</GridItem>
<GridItem row={2} col={2}>
{user?.name}
</GridItem>
<GridItem row={3} col={1}>Отчество:</GridItem> <GridItem row={3} col={1}>
<GridItem row={3} col={2}>{user?.patronymic}</GridItem> Отчество:
</GridItem>
<GridItem row={3} col={2}>
{user?.patronymic}
</GridItem>
<GridItem row={4} col={1}>Компания:</GridItem> <GridItem row={4} col={1}>
<GridItem row={4} col={2}> Компания:
<CompanyView company={user?.company}/> </GridItem>
</GridItem> <GridItem row={4} col={2}>
</Grid> <CompanyView company={user?.company} />
)}> </GridItem>
<UserOutlined style={{ marginRight: 8 }}/> </Grid>
{user?.login} }
</Tooltip> >
) : ( <span {...other}>
<Tooltip title='нет пользователя'>-</Tooltip> <UserOutlined style={{ marginRight: 8 }} />
)) {user?.login}
</span>
</Tooltip>
) : (
<Tooltip title={'нет пользователя'}>
<span {...other}>
<UserOutlined style={{ marginRight: 8 }} />
---
</span>
</Tooltip>
)
)
export default UserView export default UserView