From 08fcf2736ef99a4e2dd2fbbc078dede0d9816228 Mon Sep 17 00:00:00 2001
From: goodmice <hamel2517@gmail.com>
Date: Thu, 8 Dec 2022 11:14:37 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A2=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B0=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
 =?UTF-8?q?=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=90=D0=9A=D0=91=20=D0=BF=D0=B5=D1=80=D0=B5=D1=80=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=82=D0=B0=D0=BD=D0=B0=20=D0=B2=20=D0=BF=D0=BE=D0=B4?=
 =?UTF-8?q?=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/views/WellView.tsx             |  4 +-
 .../Deposit/GeneralSubsystemStatistics.jsx    | 76 +++++++++----------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/components/views/WellView.tsx b/src/components/views/WellView.tsx
index 614dc52..125303a 100644
--- a/src/components/views/WellView.tsx
+++ b/src/components/views/WellView.tsx
@@ -19,6 +19,8 @@ export type WellViewProps = TooltipProps & {
     labelProps?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
 }
 
+export const getWellTitle = (well: WellDto) => `${well.deposit || '-'} / ${well.cluster || '-'} / ${well.caption || '-'}`
+
 export const WellView = memo<WellViewProps>(({ well, iconProps, labelProps, ...other }) => well ? (
     <Tooltip {...other} title={(
         <Grid style={{ columnGap: '8px' }}>
@@ -53,7 +55,7 @@ export const WellView = memo<WellViewProps>(({ well, iconProps, labelProps, ...o
             <WellIcon state={wellState[well.idState || 0].enum} width={'1em'} height={'1em'} />
         </span>
         <span {...labelProps}>
-            {well.deposit} / {well.cluster} / {well.caption}
+            {getWellTitle(well)}
         </span>
     </Tooltip>
 ) : (
diff --git a/src/pages/Deposit/GeneralSubsystemStatistics.jsx b/src/pages/Deposit/GeneralSubsystemStatistics.jsx
index 2f9d4cd..ddde54e 100644
--- a/src/pages/Deposit/GeneralSubsystemStatistics.jsx
+++ b/src/pages/Deposit/GeneralSubsystemStatistics.jsx
@@ -1,13 +1,13 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import {
     CheckOutlined,
     StopOutlined,
     QuestionCircleOutlined,
     WarningOutlined,
 } from '@ant-design/icons'
-import { Card, Empty } from 'antd'
+import { Card, Empty, Popover } from 'antd'
 
-import { WellView } from '@components/views'
+import { getWellTitle, WellView } from '@components/views'
 import LoaderPortal from '@components/LoaderPortal'
 import { DateRangeWrapper, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 import { invokeWebApiWrapperAsync } from '@components/factory'
@@ -68,19 +68,18 @@ const generateSubsystem = (subsystem) => {
     )
 }
 
+const onRow = (record) => {
+    const state = getSubsystemState(record)
+    if (state === null) return null
+    const color = getSubsystemColor(state)
+    return { style: { backgroundColor: color, color: 'white' } }
+}
+
 const GeneralSubsystemStatistics = memo(() => {
     const [data, setData] = useState([])
     const [isLoading, setIsLoading] = useState(false)
-    const [selected, setSelected] = useState(null)
     const [dates, setDates] = useState([null, null])
 
-    const onRow = useCallback((record) => {
-        const state = getSubsystemState(record)
-        if (state === null) return null
-        const color = getSubsystemColor(state)
-        return { style: { backgroundColor: color } }
-    }, [selected])
-
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
@@ -97,29 +96,45 @@ const GeneralSubsystemStatistics = memo(() => {
         )
     }, [dates])
 
-    const makeOnCardClick = useCallback((row) => () => {
-        setSelected((prev) => (prev?.well.id === row.well.id) ? null : row)
-    }, [])
-
     const cards = useMemo(() => {
         return data.map((row) => {
             const state = getCardState(row.subsystems)
-            const isSelected = row.well.id === selected?.well.id
 
             const cardStyle = {
-                boxShadow: `0 0 5px 2px ${isSelected ? 'gray' : getSubsystemColor(state)}`,
+                boxShadow: `0 0 5px 2px ${getSubsystemColor(state)}`,
                 userSelect: 'none',
             }
 
-            return (
-                <Card key={row.well.id} title={<WellView well={row.well} />} onClick={state ? makeOnCardClick(row) : null} style={cardStyle}>
+            const card = (
+                <Card key={row.well.id} title={getWellTitle(row.well)} style={cardStyle}>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                         {state ? row.subsystems.map((ss) => generateSubsystem(ss)) : <Empty />}
                     </div>
                 </Card>
             )
+
+            if (!state) return card
+
+            const detailTitle = (
+                <>
+                    <span style={{ paddingRight: 15 }}>Детальная информация по скважине</span>
+                    <WellView well={row.well} />
+                </>
+            )
+
+            const detailContent = (
+                <Table
+                    size={'small'}
+                    pagination={false}
+                    dataSource={row.subsystems}
+                    columns={columns}
+                    onRow={onRow}
+                />
+            )
+
+            return <Popover title={detailTitle} content={detailContent}>{card}</Popover>
         })
-    }, [data, selected])
+    }, [data])
 
     return (
         <LoaderPortal show={isLoading} style={{ flex: 1 }}>
@@ -128,26 +143,9 @@ const GeneralSubsystemStatistics = memo(() => {
                     <span>Диапазон дат:</span>
                     <DateRangeWrapper allowClear onChange={setDates} value={dates} />
                 </div>
-                <div style={{ flex: 1, overflowY: 'scroll' }}>
-                    <div style={{ padding: 15, display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 15 }}>
-                        {cards}
-                    </div>
+                <div style={{ padding: 15, display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 15 }}>
+                    {cards}
                 </div>
-                {selected && (
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                        <div style={{ display: 'flex', gap: 15, alignItems: 'center', justifyContent: 'center', fontSize: '1.25em', fontWeight: 600 }}>
-                            <span>Детальная информация по скважине</span>
-                            <WellView well={selected.well} />
-                        </div>
-                        <Table
-                            size={'small'}
-                            pagination={false}
-                            dataSource={selected.subsystems}
-                            columns={columns}
-                            onRow={onRow}
-                        />
-                    </div>
-                )}
             </div>
         </LoaderPortal>
     )