From 997b701be478043136df7a32b39b67a7c527bf3e Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Tue, 21 Dec 2021 13:03:15 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A2=D0=B5=D0=BA=D1=81=D1=82=20=D0=B2=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D0=B5=20WellTreeSelector=20=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=91=D0=BD=20=D0=BD=D0=B0=20=D0=9C=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D0=BE=D1=80=D0=BE=D0=B6=D0=B4=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20/=20=D0=9A=D1=83=D1=81=D1=82=20/=20=D0=A1=D0=BA=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=B6=D0=B8=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WellTreeSelector.tsx | 33 +++++++++++++++++++----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/WellTreeSelector.tsx b/src/components/WellTreeSelector.tsx
index 00011e5..051dd1c 100644
--- a/src/components/WellTreeSelector.tsx
+++ b/src/components/WellTreeSelector.tsx
@@ -1,32 +1,33 @@
 import { TreeSelect } from 'antd'
-import { useState, useEffect } from 'react'
+import { DefaultValueType } from 'rc-tree-select/lib/interface'
+import { useState, useEffect, ReactNode } from 'react'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import LoaderPortal from './LoaderPortal'
 import { DepositService } from '../services/api'
 import { invokeWebApiWrapperAsync } from './factory'
-import '../styles/wellTreeSelect.css'
-import { WellIcon, WellIconState } from './icons/WellIcon'
+import { WellIcon, WellIconState } from './icons'
 import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg'
 import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg'
 import { DepositDto } from '../services/api'
 import { RawDate } from '../utils/DateTimeUtils'
+import '../styles/wellTreeSelect.css'
 
 export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown'
 export const checkIsWellOnline = (lastTelemetryDate?: RawDate): boolean => {
-    if (!lastTelemetryDate) return false
+    if (!lastTelemetryDate || isNaN(+new Date(lastTelemetryDate))) return false
     return Date.now() - +new Date(lastTelemetryDate) < 600_000
 }
 
-interface TreeNodeData {
+export type TreeNodeData = {
     title?: string | null
     key?: string
-    value?: string
-    icon?: React.ReactNode
+    value?: DefaultValueType
+    icon?: ReactNode
     children?: TreeNodeData[]
 }
 
 export const WellTreeSelector = () => {
-    const [wellsTree, setWellsTree] = useState<TreeNodeData[]>([])
+    const [wellsTree, setWellsTree] = useState<any>([]) // TODO: Исправить тип (необходимо разобраться с типом значения  rc-select)
     const [showLoader, setShowLoader] = useState<boolean>(false)
     const history = useHistory()
     const routeMatch = useRouteMatch('/:route/:id')
@@ -38,17 +39,26 @@ export const WellTreeSelector = () => {
                 const wellsTree: TreeNodeData[] = deposits.map(deposit =>({
                     title: deposit.caption,
                     key: `/deposit/${deposit.id}`,
-                    value: `/deposit/${deposit.id}`,
+                    value: {
+                        value: `/deposit/${deposit.id}`,
+                        label: deposit.caption,
+                    },
                     icon: <DepositIcon width={24} height={24}/>,
                     children: deposit.clusters?.map(cluster => ({
                         title: cluster.caption,
                         key: `/cluster/${cluster.id}`,
-                        value: `/cluster/${cluster.id}`,
+                        value: {
+                            value: `/cluster/${cluster.id}`,
+                            label: `${deposit.caption} / ${cluster.caption}`,
+                        },
                         icon: <ClusterIcon width={24} height={24}/>,
                         children: cluster.wells?.map(well => ({
                             title: well.caption,
                             key: `/well/${well.id}`,
-                            value: `/well/${well.id}`,
+                            value: {
+                                value: `/well/${well.id}`,
+                                label: `${deposit.caption} / ${cluster.caption} / ${well.caption}`
+                            },
                             icon: <WellIcon
                                 width={24}
                                 height={24}
@@ -72,6 +82,7 @@ export const WellTreeSelector = () => {
     return (
         <LoaderPortal show={showLoader}>
             <TreeSelect
+                labelInValue
                 treeIcon
                 className={'header-tree-select'}
                 bordered={false}