Текст в поле WellTreeSelector изменён на

Месторождение / Куст / Скважина

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'
-import { WellIcon, WellIconState } from './icons/WellIcon'
 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
+    value?: DefaultValueType
-    icon?: React.ReactNode
+    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}