132 lines
4.0 KiB
TypeScript
132 lines
4.0 KiB
TypeScript
import { useState } from 'react'
|
||
import useSWR from 'swr'
|
||
import { fetcher } from '../../http/axiosInstance'
|
||
import { BASE_URL } from '../../constants'
|
||
import { NavLink, Stack, Text } from '@mantine/core';
|
||
import { IconChevronDown } from '@tabler/icons-react';
|
||
import { setSelectedObjectType } from '../../store/map';
|
||
import { setCurrentObjectId, useObjectsStore } from '../../store/objects';
|
||
|
||
const ObjectTree = ({
|
||
map_id
|
||
}: {
|
||
map_id: string,
|
||
}) => {
|
||
const { selectedYear, selectedDistrict } = useObjectsStore().id[map_id]
|
||
const [existingCount, setExistingCount] = useState(0)
|
||
const [planningCount, setPlanningCount] = useState(0)
|
||
|
||
const { data: existingObjectsList } = useSWR(
|
||
selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=0` : null,
|
||
(url) => fetcher(url, BASE_URL.ems).then(res => {
|
||
if (Array.isArray(res)) {
|
||
let count = 0
|
||
res.forEach(el => {
|
||
count = count + el.count
|
||
})
|
||
setExistingCount(count)
|
||
}
|
||
return res
|
||
}),
|
||
{
|
||
revalidateOnFocus: false
|
||
}
|
||
)
|
||
|
||
const { data: planningObjectsList } = useSWR(
|
||
selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=1` : null,
|
||
(url) => fetcher(url, BASE_URL.ems).then(res => {
|
||
if (Array.isArray(res)) {
|
||
let count = 0
|
||
res.forEach(el => {
|
||
count = count + el.count
|
||
})
|
||
setPlanningCount(count)
|
||
}
|
||
return res
|
||
}),
|
||
{
|
||
revalidateOnFocus: false
|
||
}
|
||
)
|
||
|
||
if (selectedDistrict) {
|
||
return (
|
||
<Stack gap={0}>
|
||
<TypeTree map_id={map_id} label='Существующие' value={'existing'} count={existingCount} objectList={existingObjectsList} planning={0} />
|
||
<TypeTree map_id={map_id} label='Планируемые' value={'planning'} count={planningCount} objectList={planningObjectsList} planning={1} />
|
||
</Stack>
|
||
)
|
||
} else {
|
||
return (
|
||
<Text size='xs'>Выберите регион и населённый пункт, чтобы увидеть список объектов.</Text>
|
||
)
|
||
}
|
||
|
||
|
||
}
|
||
|
||
interface TypeTreeProps {
|
||
label: string;
|
||
value: string;
|
||
count: number;
|
||
objectList: unknown;
|
||
planning: number;
|
||
map_id: string;
|
||
}
|
||
|
||
const TypeTree = ({
|
||
label,
|
||
objectList,
|
||
count,
|
||
planning,
|
||
map_id
|
||
}: TypeTreeProps) => {
|
||
|
||
return (
|
||
<NavLink p={0} label={`${label} ${count ? `(${count})` : ''}`}>
|
||
{Array.isArray(objectList) && objectList.map(list => (
|
||
<ObjectList map_id={map_id} key={list.id} label={list.name} id={list.id} planning={planning} count={list.count} />
|
||
))}
|
||
</NavLink>
|
||
)
|
||
}
|
||
|
||
interface IObjectList {
|
||
label: string;
|
||
id: number;
|
||
planning: number;
|
||
count: number;
|
||
map_id: string;
|
||
}
|
||
|
||
const ObjectList = ({
|
||
label,
|
||
id,
|
||
planning,
|
||
count,
|
||
map_id
|
||
}: IObjectList) => {
|
||
const { selectedDistrict, selectedYear } = useObjectsStore().id[map_id]
|
||
|
||
const { data } = useSWR(
|
||
selectedDistrict && selectedYear ? `/general/objects/list?type=${id}&city_id=${selectedDistrict}&year=${selectedYear}&planning=${planning}` : null,
|
||
(url) => fetcher(url, BASE_URL.ems),
|
||
{
|
||
revalidateOnFocus: false,
|
||
revalidateIfStale: false
|
||
}
|
||
)
|
||
|
||
return (
|
||
<NavLink onClick={() => {
|
||
setSelectedObjectType(map_id, id)
|
||
}} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>
|
||
{Array.isArray(data) && data.map((type) => (
|
||
<NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} p={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
|
||
))}
|
||
</NavLink>
|
||
)
|
||
}
|
||
|
||
export default ObjectTree |