WellSelector применено к композитной скважине

src/pages/Analytics/WellCompositeEditor/index.jsx

@@ -1,15 +1,14 @@
 import { useState, useEffect, memo } from 'react'
 import { Switch, useParams } from 'react-router-dom'
-import { Col, Layout, Menu, Row, Tag, TreeSelect } from 'antd'
+import { Col, Layout, Menu, Row } from 'antd'
 
 import {
-    DepositService,
     OperationStatService,
     WellCompositeService,
 } from '@api'
 import { arrayOrDefault } from '@utils'
-import { hasPermission } from '@utils/permissions'
 import LoaderPortal from '@components/LoaderPortal'
+import WellSelector from '@components/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { PrivateDefaultRoute, PrivateMenuItemLink, PrivateRoute } from '@components/Private'
 
@@ -21,53 +20,25 @@ const { Content } = Layout
 export const WellCompositeEditor = memo(({ idWell, rootPath }) => {
     const { tab } = useParams()
 
-    const [wellsTree, setWellsTree] = useState([])
-    const [wellLabels, setWellLabels] = useState([])
     const [statsWells, setStatsWells] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [showTabLoader, setShowTabLoader] = useState(false)
     const [selectedIdWells, setSelectedIdWells] = useState([])
     const [selectedSections, setSelectedSections] = useState([])
 
-    useEffect(() => {
-        invokeWebApiWrapperAsync(
-            async () => {
-                const deposits = await DepositService.getDeposits()
-                const labels = {}
-                const wellsTree = deposits.map((deposit, dIdx) => ({
-                    title: deposit.caption,
-                    key: `0-${dIdx}`,
-                    value: `0-${dIdx}`,
-                    children: deposit.clusters.map((cluster, cIdx) => ({
-                        title: cluster.caption,
-                        key: `0-${dIdx}-${cIdx}`,
-                        value: `0-${dIdx}-${cIdx}`,
-                        children: cluster.wells.map(well => {
-                            labels[well.id] = `${deposit.caption}.${cluster.caption}.${well.caption}`
-
-                            return ({
-                                title: well.caption,
-                                key: well.id,
-                                value: well.id,
-                            })
-                        }),
-                    })),
-                }))
-                setWellsTree(wellsTree)
-                setWellLabels(labels)
-
-                try {
-                    const selected = await WellCompositeService.get(idWell)
-                    setSelectedSections(arrayOrDefault(selected))
-                } catch(e) {
-                    setSelectedSections([])
-                }
-            },
-            setShowLoader,
-            'Не удалось загрузить список скважин',
-            'Получение списка скважин'
-        )
-    }, [idWell])
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => {
+            try {
+                const selected = await WellCompositeService.get(idWell)
+                setSelectedSections(arrayOrDefault(selected))
+            } catch(e) {
+                setSelectedSections([])
+            }
+        },
+        setShowLoader,
+        'Не удалось загрузить список скважин',
+        'Получение списка скважин'
+    ), [idWell])
 
     useEffect(() => {
         const wellIds = selectedSections.map((value) => value.idWellSrc)
@@ -88,22 +59,10 @@ export const WellCompositeEditor = memo(({ idWell, rootPath }) => {
         <LoaderPortal show={showLoader}>
             <Row align={'middle'} justify={'space-between'} wrap={false} style={{ backgroundColor: 'white' }}>
                 <Col span={18}>
-                    <TreeSelect
-                        multiple
-                        treeCheckable
-                        showCheckedStrategy={TreeSelect.SHOW_CHILD}
-                        treeDefaultExpandAll
-                        treeData={wellsTree}
-                        treeLine={{ showLeafIcon: false }}
-                        onChange={(value) => setSelectedIdWells(value)}
-                        size={'middle'}
-                        style={{ width: '100%' }}
+                    <WellSelector
+                        idWell={idWell}
+                        onChange={setSelectedIdWells}
                         value={selectedIdWells}
-                        placeholder={'Выберите скважины'}
-                        tagRender={(props) => (
-                            <Tag {...props}>{wellLabels[props.value] ?? props.label}</Tag>
-                        )}
-                        disabled={!hasPermission('WellOperation.edit')}
                     />
                 </Col>
                 <Col span={6}>