From 33146c59d828f80de3adf1497aa16d57c782bc46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?=
 <nikita.grigorevich@gmail.com>
Date: Tue, 31 Aug 2021 18:03:08 +0500
Subject: [PATCH] Add components for simple view users and companies. Add
 Grid.jsx for css grid.

---
 src/components/CompanyView.jsx | 25 ++++++++++++++++++
 src/components/Grid.jsx        | 30 ++++++++++++++++++++++
 src/components/UserView.jsx    | 46 +++++++++++++++++++---------------
 3 files changed, 81 insertions(+), 20 deletions(-)
 create mode 100644 src/components/CompanyView.jsx
 create mode 100644 src/components/Grid.jsx

diff --git a/src/components/CompanyView.jsx b/src/components/CompanyView.jsx
new file mode 100644
index 0000000..195a490
--- /dev/null
+++ b/src/components/CompanyView.jsx
@@ -0,0 +1,25 @@
+import {Tooltip} from 'antd'
+import {BankOutlined} from '@ant-design/icons'
+import {Grid, GridItem} from './Grid'
+
+export const CompanyView = ({company}) => {
+  if(!company)
+    return <Tooltip title='нет данных'>-</Tooltip>
+
+  const displayName = company?.caption
+
+  const tooltipInfo = <Grid columnGap='8px'>
+    <GridItem row={1} col={1}>
+      тип:
+    </GridItem>
+    <GridItem row={1} col={2}>
+      {company?.companyTypeCaption}
+    </GridItem>
+  </Grid>
+
+  return <Tooltip title={tooltipInfo}>
+    <BankOutlined style={{marginRight:8}}/>
+    {displayName}
+  </Tooltip>
+  
+}
\ No newline at end of file
diff --git a/src/components/Grid.jsx b/src/components/Grid.jsx
new file mode 100644
index 0000000..d72a77b
--- /dev/null
+++ b/src/components/Grid.jsx
@@ -0,0 +1,30 @@
+export const Grid = ({children, ...other}) => {
+  const gridContainerStyle = {
+    display: 'grid',
+    columnGap: '4px',
+    rowGap: '4px',
+    ...other,
+  }
+
+  return <div style={gridContainerStyle}>
+    {children}
+  </div>
+}
+
+export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
+  const localRow = +row
+  const localCol = +col
+  const localColSpan = colSpan ? colSpan - 1 : 0
+  const localRowSpan = rowSpan ? rowSpan - 1 : 0
+  const gridItemStyle = {
+    gridColumnStart: localCol,
+    gridColumnEnd: localCol + localColSpan,
+    gridRowStart: localRow,
+    gridRowEnd: localRow + localRowSpan,
+    ...other,
+  }
+
+  return <div style={gridItemStyle}>
+    {children}
+  </div>
+}
\ No newline at end of file
diff --git a/src/components/UserView.jsx b/src/components/UserView.jsx
index 8d45740..c668cc2 100644
--- a/src/components/UserView.jsx
+++ b/src/components/UserView.jsx
@@ -1,6 +1,6 @@
 import {Tooltip} from 'antd'
-import { UserOutlined } from '@ant-design/icons'
-import '../styles/grid.css'
+import {UserOutlined} from '@ant-design/icons'
+import {Grid, GridItem} from './Grid'
 
 export const UserView = ({user}) => {
   if(!user)
@@ -8,29 +8,35 @@ export const UserView = ({user}) => {
 
   const displayName = user?.login
 
-  const tooltipInfo = <div className='grid_container'>
-    <div className='c1 r1'>
-      Имя
-    </div>
-    <div className='c2 r1'>
+  const tooltipInfo = <Grid columnGap='8px'>
+    <GridItem row={1} col={1}>
+      Имя:
+    </GridItem>
+    <GridItem row={1} col={2}>
       {user?.name}
-    </div>
-    <div className='c1 r2'>
-      Фамилия
-    </div>
-    <div className='c2 r2'>
+    </GridItem>
+    <GridItem row={2} col={1}>
+      Фамилия:
+    </GridItem>
+    <GridItem row={3} col={2}>
       {user?.surname}
-    </div>
-    <div className='c1 r3'>
-      Отчество
-    </div>
-    <div className='c2 r3'>
+    </GridItem>
+    <GridItem row={3} col={1}>
+      Отчество:
+    </GridItem>
+    <GridItem row={3} col={2}>
       {user?.patronymic}
-    </div>
-  </div>
+    </GridItem>
+    <GridItem row={4} col={1}>
+      Компания:
+    </GridItem>
+    <GridItem row={4} col={2}>
+      {user?.company?.caption}
+    </GridItem>
+  </Grid>
 
   return <Tooltip title={tooltipInfo}>
-    <UserOutlined/>
+    <UserOutlined style={{marginRight:8}}/>
     {displayName}
   </Tooltip>