diff --git a/src/Map/Layers/Layers.jsx b/src/Map/Layers/Layers.jsx index ed3396d..ffefac9 100644 --- a/src/Map/Layers/Layers.jsx +++ b/src/Map/Layers/Layers.jsx @@ -43,7 +43,7 @@ export const Layers = ({ postGroups, otherGroups }) => { type="vector" tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]} > - {postGroups && postGroups.map((item) => { + {postGroups?.map((item) => { return item.groups.map((itemGroup) => { const dynamicKeyExpressions = dynamicKeyFiltersExpressions.filter((expression) => { const filterKey = expression[0][1][1]; - const range = ranges[filterKey]; - const gtValue = expression[0][2] || 0; - const gtInitial = range ? range[0] : 0; - const ltValue = expression[1][2] || 0; - const ltInitial = range ? range[1] : 0; - - return !(gtValue === gtInitial && ltValue === ltInitial); + return fieldHasChanged(filters, ranges, filterKey).result; }).flat(); const staticKeyExpressions = staticKeyFiltersExpressions.filter((expression) => { const filterKey = expression[0][1][1]; - const gtValue = expression[0][2]; - const gtInitial = ranges[filterKey][0]; - const ltValue = expression[1][2]; - const ltInitial = ranges[filterKey][1]; - - return !(gtValue === gtInitial && ltValue === ltInitial); + return fieldHasChanged(filters, ranges, filterKey).result; }).flat(); const categoryExpression = diff --git a/src/Map/LayersControl/LayersVisibility.jsx b/src/Map/LayersControl/LayersVisibility.jsx index 59eb37a..dbf8ff9 100644 --- a/src/Map/LayersControl/LayersVisibility.jsx +++ b/src/Map/LayersControl/LayersVisibility.jsx @@ -28,7 +28,7 @@ export const LayersVisibility = ({ postGroups, otherGroups }) => { )} - {postGroups && postGroups.map((item) => { + {postGroups?.map((item) => { return (
- {postGroups && postGroups?.map((item) => { + {postGroups?.map((item) => { return })}
- {otherGroups && otherGroups?.map((item) => { + {otherGroups?.map((item) => { return })}
diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx index 064b003..576cf89 100644 --- a/src/Map/MapComponent.jsx +++ b/src/Map/MapComponent.jsx @@ -23,7 +23,7 @@ import { Header } from "./Header"; import { icons } from "../icons/icons-config"; import { LastMLRun } from "./LastMLRun"; import { useGetPendingPointsRange, useOtherGroups, usePostamatesAndPvzGroups } from "../api.js"; -import {transliterate} from "../utils.js"; +import { getFilteredGroups, transliterate } from "../utils.js"; import { usePendingPointsFilters } from "../stores/usePendingPointsFilters.js"; export const MapComponent = () => { @@ -35,10 +35,9 @@ export const MapComponent = () => { const { setLayersVisibility } = useLayersVisibility(); const { mode } = useMode(); const { tableState, openTable } = useTable(); - const { toggleVisibility } = useLayersVisibility(); const { ranges, setRanges } = usePendingPointsFilters(); - const { data: fullRange, isInitialLoading } = useGetPendingPointsRange(); + const { data: fullRange } = useGetPendingPointsRange(); useEffect(() => { if (fullRange) setRanges({...ranges, ...fullRange}); @@ -48,45 +47,21 @@ export const MapComponent = () => { const { data: otherGroups } = useOtherGroups(); const filteredPostamatesGroups = useMemo(() => { - if (!postamatesAndPvzGroups) return []; - return postamatesAndPvzGroups - .filter((category) => category.visible) - .map((category) => { - toggleVisibility(LAYER_IDS.pvz_category + category.id) - return { - ...category, - groups: [...category.groups.filter((group) => group.visible)], - } - }) + return getFilteredGroups(postamatesAndPvzGroups); }, [postamatesAndPvzGroups]); const filteredOtherGroups = useMemo(() => { - if (!otherGroups) return []; - return otherGroups - .filter((category) => !category.visible) - .map((category) => { - return { - ...category, - groups: [...category.groups.filter((group) => group.visible)], - } - }) + return getFilteredGroups(otherGroups); }, [otherGroups]); const mapIcons = useMemo(() => { const res = []; - filteredPostamatesGroups.map((category) => { + [...filteredOtherGroups, ...filteredPostamatesGroups].map((category) => { category.groups.map((group) => { - res.push({name: transliterate(group.name + group.id), url: group.image}) + res.push({name: transliterate(group.name + group.id), url: group.image}); }) }); - - filteredOtherGroups.map((category) => { - category.groups.map((group) => { - res.push({name: transliterate(group.name + group.id), url: group.image}) - }) - }); - return [...res, ...icons]; }, [icons, filteredPostamatesGroups, filteredOtherGroups]); @@ -220,7 +195,7 @@ export const MapComponent = () => { ); img.onload = () => mapRef.current.addImage(icon.name, img); - img.src = icon.url; + img.src = 'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png'; img.crossOrigin = "Anonymous"; }); }} diff --git a/src/Map/Popup/Popup.jsx b/src/Map/Popup/Popup.jsx index 10d6879..8027c3c 100644 --- a/src/Map/Popup/Popup.jsx +++ b/src/Map/Popup/Popup.jsx @@ -11,6 +11,7 @@ import { usePopup } from "../../stores/usePopup.js"; import { PanoramaIcon } from "../../icons/PanoramaIcon"; import {usePostamatesAndPvzGroups} from "../../api.js"; import {useMemo} from "react"; +import {getFilteredGroups} from "../../utils.js"; const SingleFeaturePopup = ({ feature, groups, categories }) => { const { mode } = useMode(); @@ -94,24 +95,16 @@ export const MapPopup = ({ features, lat, lng, onClose }) => { const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups(); const filteredPostamatesCategories = useMemo(() => { - if (!postamatesAndPvzGroups) return []; - return postamatesAndPvzGroups - .filter((category) => category.visible) - .map((category) => { - return { - ...category, - groups: [...category.groups.filter((group) => group.visible)], - } - }) + return getFilteredGroups(postamatesAndPvzGroups); }, [postamatesAndPvzGroups]); const postamatesGroups = useMemo(() => { if (!filteredPostamatesCategories) return []; return filteredPostamatesCategories .map((category) => { - return [...category.groups.filter((group) => group.visible)] + return [...category.groups] }).flat(); - }, [postamatesAndPvzGroups]); + }, [filteredPostamatesCategories]); const getContent = () => { if (features.length === 1) { diff --git a/src/api.js b/src/api.js index 2b99223..7e5a5e6 100644 --- a/src/api.js +++ b/src/api.js @@ -2,7 +2,7 @@ import axios from "axios"; import { useMutation, useQuery } from "@tanstack/react-query"; import { STATUSES } from "./config"; import { usePointSelection } from "./stores/usePointSelection"; -import { usePendingPointsFilters } from "./stores/usePendingPointsFilters"; +import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "./stores/usePendingPointsFilters"; export const BASE_URL = import.meta.env.VITE_API_URL; @@ -189,16 +189,19 @@ export const useGetPendingPointsRange = () => { select: (data) => { const distToGroupsArr = data.dist_to_groups.map((groupRange) => { return { - [`d${groupRange.group_id}`]: groupRange.dist, + [`d${groupRange.group_id}`]: [Math.floor(groupRange.dist[0]), Math.ceil(groupRange.dist[1])], } - }) + }); const distToGroups = Object.assign({}, ...distToGroupsArr); + const rangesArr = RANGE_FILTERS_KEYS.map((key) => { + return { + [key]: [Math.floor(data[key][0]), Math.ceil(data[key][1])] + } + }); + const ranges = Object.assign({}, ...rangesArr); return { prediction: data.prediction_current, - doors: data.doors, - flat_cnt: data.flat_cnt, - flats_cnt: data.flats_cnt, - target_post_cnt: data.target_post_cnt, + ...ranges, ...distToGroups }; }, diff --git a/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFilters.jsx b/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFilters.jsx index 30fbd70..13ca18d 100644 --- a/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFilters.jsx +++ b/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFilters.jsx @@ -4,26 +4,15 @@ import { Collapse } from "antd"; import React, { useMemo } from "react"; import { Title } from "../../../../components/Title.jsx"; import { usePostamatesAndPvzGroups } from "../../../../api.js"; +import { getFilteredGroups } from "../../../../utils.js"; export const AdvancedFilters = () => { - const { - filters, - setFilterWithKey, - ranges - } = usePendingPointsFilters(); + const { filters, ranges } = usePendingPointsFilters(); const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups(); const filteredPostamatesGroups = useMemo(() => { - if (!postamatesAndPvzGroups) return []; - return postamatesAndPvzGroups - .filter((category) => category.visible) - .map((category) => { - return { - ...category, - groups: [...category.groups.filter((group) => group.visible)], - } - }) + return getFilteredGroups(postamatesAndPvzGroups); }, [postamatesAndPvzGroups]); return ( @@ -45,7 +34,6 @@ export const AdvancedFilters = () => {
{
{
{
{
{
{
{
{
{ {filteredPostamatesGroups.map((category) => { return ( {
{category.groups.map((group) => { return ( -
+
{ ) })}
- ) diff --git a/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFiltersWrapper.jsx b/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFiltersWrapper.jsx index 3c7df0b..1a73438 100644 --- a/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFiltersWrapper.jsx +++ b/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFiltersWrapper.jsx @@ -1,5 +1,6 @@ -import {Button, Dropdown} from "antd"; -import {AdvancedFilters} from "./AdvancedFilters.jsx"; +import { Button, Dropdown } from "antd"; +import { AdvancedFilters } from "./AdvancedFilters.jsx"; +import { RightOutlined } from "@ant-design/icons"; export const AdvancedFiltersWrapper = () => { const filtersRender = () => { @@ -17,9 +18,10 @@ export const AdvancedFiltersWrapper = () => { > ); diff --git a/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/Slider.jsx b/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/Slider.jsx index 00ddfda..0b4e947 100644 --- a/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/Slider.jsx +++ b/src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/Slider.jsx @@ -1,11 +1,13 @@ import { SliderComponent as Slider } from "../../../../components/SliderComponent"; import { useEffect } from "react"; import { - INITIAL, + INITIAL, usePendingPointsFilters, } from "../../../../stores/usePendingPointsFilters"; -export const FilterSlider = ({ filterRange, setFilterRange, disabled, fullRange, title, filterKey, dynamicKey }) => { - const handleAfterChange = (range) => setFilterRange(range, filterKey); +export const FilterSlider = ({ filterRange, disabled, fullRange, title, filterKey, dynamicKey }) => { + + const { setFilterWithKey } = usePendingPointsFilters(); + const handleAfterChange = (range) => setFilterWithKey(range, filterKey); useEffect(() => { if (!fullRange) return; @@ -24,7 +26,7 @@ export const FilterSlider = ({ filterRange, setFilterRange, disabled, fullRange, filterRange[1] === 0); if (shouldSetFullRange || (shouldSetDynamicKeyRange && dynamicKey)) { - setFilterRange([min, max], filterKey); + setFilterWithKey([min, max], filterKey); } }, [fullRange]); diff --git a/src/modules/Table/PendingTable/usePendingTableData.js b/src/modules/Table/PendingTable/usePendingTableData.js index 2bbd685..c8612a5 100644 --- a/src/modules/Table/PendingTable/usePendingTableData.js +++ b/src/modules/Table/PendingTable/usePendingTableData.js @@ -3,6 +3,7 @@ import { getPoints } from "../../../api"; import { useMergeTableData } from "../useMergeTableData"; import { STATUSES } from "../../../config"; import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../../stores/usePendingPointsFilters"; +import {fieldHasChanged} from "../../../utils.js"; export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort) => { const { filters, ranges } = usePendingPointsFilters(); @@ -23,12 +24,7 @@ export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort }; RANGE_FILTERS_KEYS.map((filterKey) => { - const gtValue = filters[`${filterKey}__gt`]; - const gtInitial = ranges[filterKey][0]; - const ltValue = filters[`${filterKey}__lt`]; - const ltInitial = ranges[filterKey][1]; - - if (gtValue === gtInitial && ltValue === ltInitial) return; + if (!fieldHasChanged(filters, ranges, filterKey).result) return; tempParams = { ...tempParams, [`${filterKey}__gt`]: filters[`${filterKey}__gt`] - 1, diff --git a/src/stores/usePendingPointsFilters.js b/src/stores/usePendingPointsFilters.js index 6fe386d..bc5eb80 100644 --- a/src/stores/usePendingPointsFilters.js +++ b/src/stores/usePendingPointsFilters.js @@ -18,6 +18,22 @@ export const RANGE_FILTERS_KEYS = [ 'metro_dist', ] +export const RANGE_FILTERS_MAP = { + doors: "Кол-во подъездов в жилом доме", + flat_cnt: "Кол-во квартир в подъезде жилого дома", + rival_post_cnt: "Кол-во постаматов других сетей", + rival_pvz_cnt: "Кол-во ПВЗ", + target_post_cnt: "Кол-во постаматов Мой постамат", + flats_cnt: "Кол-во квартир в окрестности", + tc_cnt: "Кол-во торговых центров", + culture_cnt: "Кол-во объектов культуры (театры, музей и тд)", + mfc_cnt: "Кол-во МФЦ", + public_stop_cnt: "Кол-во остановок ОТ", + supermarket_cnt: "Кол-во супермаркетов", + target_dist: "Расстояние до постамата Мой постамат", + metro_dist: "Расстояние до метро", +} + export const INITIAL = { prediction: [0, 0], categories: [], diff --git a/src/utils.js b/src/utils.js index b589d75..332e4bf 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,5 @@ +import {usePendingPointsFilters} from "./stores/usePendingPointsFilters.js"; + export function download(filename, data) { const downloadLink = window.document.createElement("a"); downloadLink.href = window.URL.createObjectURL( @@ -19,5 +21,32 @@ export function transliterate(word){ }).join(""); } +export function getFilteredGroups(categories) { + if (!categories) return []; + return categories + .filter((category) => category.visible) + .map((category) => { + return { + ...category, + groups: [...category.groups.filter((group) => group.visible)], + } + }) +} + +export function fieldHasChanged(filters, ranges, filterKey) { + const gtValue = filters[`${filterKey}__gt`]; + const gtInitial = ranges[filterKey][0]; + const ltValue = filters[`${filterKey}__lt`]; + const ltInitial = ranges[filterKey][1]; + + const result = !(gtValue === gtInitial && ltValue === ltInitial) + + return { + result, + gtValue, + ltValue, + } +} + export const isNil = (value) => value === undefined || value === null || value === "";