diff --git a/src/components/WellTreeSelector.tsx b/src/components/WellTreeSelector.tsx index 051dd1c..7111b8c 100644 --- a/src/components/WellTreeSelector.tsx +++ b/src/components/WellTreeSelector.tsx @@ -26,9 +26,36 @@ export type TreeNodeData = { children?: TreeNodeData[] } +const getLabel = (wellsTree: any[], value?: string): string | undefined => { + if (!value) return value + const type = value.replaceAll('/', ' ').trim().split(' ')[0] + let deposit: any, cluster: any, well: any + switch (type) { + case 'cluster': + deposit = wellsTree.find((deposit) => ( + cluster = deposit.children?.find((cluster: any) => cluster.value === value) + )) + if (deposit && cluster) + return `${deposit.title} / ${cluster.title}` + break + case 'well': + deposit = wellsTree.find((deposit) => ( + cluster = deposit.children?.find((cluster: any) => ( + well = cluster.children?.find((well: any) => well.value === value) + )) + )) + if (deposit && cluster && well) + return `${deposit.title} / ${cluster.title} / ${well.title}` + break + default: break + } + return value +} + export const WellTreeSelector = () => { - const [wellsTree, setWellsTree] = useState([]) // TODO: Исправить тип (необходимо разобраться с типом значения rc-select) + const [wellsTree, setWellsTree] = useState([]) // TODO: Исправить тип (необходимо разобраться с типом значения rc-select) const [showLoader, setShowLoader] = useState(false) + const [value, setValue] = useState() const history = useHistory() const routeMatch = useRouteMatch('/:route/:id') @@ -39,26 +66,14 @@ export const WellTreeSelector = () => { const wellsTree: TreeNodeData[] = deposits.map(deposit =>({ title: deposit.caption, key: `/deposit/${deposit.id}`, - value: { - value: `/deposit/${deposit.id}`, - label: deposit.caption, - }, icon: , children: deposit.clusters?.map(cluster => ({ title: cluster.caption, key: `/cluster/${cluster.id}`, - value: { - value: `/cluster/${cluster.id}`, - label: `${deposit.caption} / ${cluster.caption}`, - }, icon: , children: cluster.wells?.map(well => ({ title: well.caption, key: `/well/${well.id}`, - value: { - value: `/well/${well.id}`, - label: `${deposit.caption} / ${cluster.caption} / ${well.caption}` - }, icon: { })), })) setWellsTree(wellsTree) + setValue(getLabel(wellsTree, routeMatch?.url)) }, setShowLoader, `Не удалось загрузить список скважин` ) }, []) + const onChange = (value: string): void => { + if (wellsTree) + setValue(getLabel(wellsTree, value)) + } + const onSelect = (value: string): void => { if (value) history.push(value) } @@ -82,7 +103,6 @@ export const WellTreeSelector = () => { return ( { treeData={wellsTree} treeDefaultExpandAll onSelect={onSelect} - value = {routeMatch?.url} + onChange={onChange} + value={value} /> )