TRUNK
/
postnet-front
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filters styling

Browse Source
dev
RekHoto 3 years ago
parent b4bc4f3fda
commit c89ca72070
6 changed files with 85 additions and 70 deletions
Show Stats Download Patch File Download Diff File

2
src/Map/LastMLRun.jsx
Unescape View File

@ -19,7 +19,7 @@ export function LastMLRun() {
trigger="click" trigger="click"
placement={"leftBottom"} placement={"leftBottom"}
> >
<Tooltip title="Последний запуск"> <Tooltip title="Инфо">
<Button className="absolute bottom-[64px] right-[20px] flex items-center justify-center p-3"> <Button className="absolute bottom-[64px] right-[20px] flex items-center justify-center p-3">
<InfoCircleOutlined className="w-4 h-4" /> <InfoCircleOutlined className="w-4 h-4" />
</Button> </Button>

9
src/Map/MapComponent.jsx
Unescape View File

@ -69,11 +69,14 @@ export const MapComponent = () => {
const res = [] const res = []
filteredPostamatesGroups.map((item) => { filteredPostamatesGroups.map((item) => {
RANGE_FILTERS_MAP[`category${item.id}`] = {
name: item.name,
};
item.groups.map((groupItem) => { item.groups.map((groupItem) => {
RANGE_FILTERS_KEYS.push(`d${groupItem.id}`); if (!RANGE_FILTERS_KEYS.includes(`d${groupItem.id}`)) RANGE_FILTERS_KEYS.push(`d${groupItem.id}`);
RANGE_FILTERS_MAP[`d${groupItem.id}`] = groupItem.name; RANGE_FILTERS_MAP[`category${item.id}`][`d${groupItem.id}`] = groupItem.name;
res.push(LAYER_IDS.pvz + groupItem.id); res.push(LAYER_IDS.pvz + groupItem.id);
}) });
}); });
filteredOtherGroups.map((item) => { filteredOtherGroups.map((item) => {

61
src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFilters.jsx
Unescape View File

@ -5,9 +5,10 @@ import React, { useMemo } from "react";
import { Title } from "../../../../components/Title.jsx"; import { Title } from "../../../../components/Title.jsx";
import { usePostamatesAndPvzGroups } from "../../../../api.js"; import { usePostamatesAndPvzGroups } from "../../../../api.js";
import {fieldHasChanged, getFilteredGroups} from "../../../../utils.js"; import {fieldHasChanged, getFilteredGroups} from "../../../../utils.js";
import {CloseOutlined} from "@ant-design/icons";
export const AdvancedFilters = () => { export const AdvancedFilters = ({onClose}) => {
const { filters, ranges, tempFilters, setFilterWithKey, setTempFilterWithKey } = usePendingPointsFilters(); const { filters, ranges, setFilterWithKey } = usePendingPointsFilters();
const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups(); const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
@ -18,27 +19,22 @@ export const AdvancedFilters = () => {
const selectedCnt = useMemo(() => { const selectedCnt = useMemo(() => {
let counter = 0; let counter = 0;
RANGE_FILTERS_KEYS.map((key) => { RANGE_FILTERS_KEYS.map((key) => {
if (fieldHasChanged(tempFilters, ranges, key).result) counter += 1; if (fieldHasChanged(filters, ranges, key).result) counter += 1;
}) });
return counter; return counter;
}, [tempFilters]); }, [filters]);
const onApply = () => { const clearFilters = () => {
RANGE_FILTERS_KEYS.map((key) => { RANGE_FILTERS_KEYS.map((key) => {
setFilterWithKey([tempFilters[`${key}__gt`], tempFilters[`${key}__lt`]], key); setFilterWithKey(ranges[key], key);
}) });
}; };
const onCancel = () => {
RANGE_FILTERS_KEYS.map((key) => {
setTempFilterWithKey([filters[`${key}__gt`], filters[`${key}__lt`]], key);
})
}
return ( return (
<div className="ml-4 bg-white rounded-xl z-20 mt-[5vh] shadow-2xl" style={{maxHeight: '90vh', width: '350px', maxWidth: '450px'}}> <div className="ml-4 bg-white rounded-xl z-20 mt-[5vh] shadow-2xl" style={{maxHeight: '90vh', width: '350px', maxWidth: '450px'}}>
<div className="font-semibold p-4 border-0 border-b border-solid border-gray-300"> <div className="flex items-center justify-between font-semibold p-4 border-0 border-b border-solid border-gray-300">
Расширенные фильтры Расширенные фильтры
<CloseOutlined onClick={onClose}/>
</div> </div>
<div style={{maxHeight: 'calc(90vh - 150px)'}} className="overflow-y-scroll py-3 px-6"> <div style={{maxHeight: 'calc(90vh - 150px)'}} className="overflow-y-scroll py-3 px-6">
<Collapse <Collapse
@ -57,7 +53,7 @@ export const AdvancedFilters = () => {
<div className="mt-4 mb-12"> <div className="mt-4 mb-12">
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.doors__gt, tempFilters.doors__lt]} filterRange={[filters.doors__gt, filters.doors__lt]}
title={"Кол-во подъездов в жилом доме"} title={"Кол-во подъездов в жилом доме"}
fullRange={ranges.doors || [0, 0]} fullRange={ranges.doors || [0, 0]}
filterKey={"doors"} filterKey={"doors"}
@ -65,7 +61,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.flat_cnt__gt, tempFilters.flat_cnt__lt]} filterRange={[filters.flat_cnt__gt, filters.flat_cnt__lt]}
title={"Кол-во квартир в подъезде жилого дома"} title={"Кол-во квартир в подъезде жилого дома"}
fullRange={ranges.flat_cnt || [0, 0]} fullRange={ranges.flat_cnt || [0, 0]}
filterKey={"flat_cnt"} filterKey={"flat_cnt"}
@ -92,7 +88,7 @@ export const AdvancedFilters = () => {
<div className="mt-4 mb-12"> <div className="mt-4 mb-12">
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.rival_post_cnt__gt, tempFilters.rival_post_cnt__lt]} filterRange={[filters.rival_post_cnt__gt, filters.rival_post_cnt__lt]}
title={"Кол-во постаматов других сетей"} title={"Кол-во постаматов других сетей"}
fullRange={ranges.rival_post_cnt || [0, 0]} fullRange={ranges.rival_post_cnt || [0, 0]}
filterKey={"rival_post_cnt"} filterKey={"rival_post_cnt"}
@ -100,7 +96,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.rival_pvz_cnt__gt, tempFilters.rival_pvz_cnt__lt]} filterRange={[filters.rival_pvz_cnt__gt, filters.rival_pvz_cnt__lt]}
title={"Кол-во ПВЗ"} title={"Кол-во ПВЗ"}
fullRange={ranges.rival_pvz_cnt || [0, 0]} fullRange={ranges.rival_pvz_cnt || [0, 0]}
filterKey={"rival_pvz_cnt"} filterKey={"rival_pvz_cnt"}
@ -108,7 +104,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.target_post_cnt__gt, tempFilters.target_post_cnt__lt]} filterRange={[filters.target_post_cnt__gt, filters.target_post_cnt__lt]}
title={"Кол-во постаматов Мой постамат"} title={"Кол-во постаматов Мой постамат"}
fullRange={ranges.target_post_cnt || [0, 0]} fullRange={ranges.target_post_cnt || [0, 0]}
filterKey={"target_post_cnt"} filterKey={"target_post_cnt"}
@ -116,7 +112,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.flats_cnt__gt, tempFilters.flats_cnt__lt]} filterRange={[filters.flats_cnt__gt, filters.flats_cnt__lt]}
title={"Кол-во квартир в окрестности"} title={"Кол-во квартир в окрестности"}
fullRange={ranges.flats_cnt || [0, 0]} fullRange={ranges.flats_cnt || [0, 0]}
filterKey={"flats_cnt"} filterKey={"flats_cnt"}
@ -124,7 +120,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.tc_cnt__gt, tempFilters.tc_cnt__lt]} filterRange={[filters.tc_cnt__gt, filters.tc_cnt__lt]}
title={"Кол-во торговых центров"} title={"Кол-во торговых центров"}
fullRange={ranges.tc_cnt || [0, 0]} fullRange={ranges.tc_cnt || [0, 0]}
filterKey={"tc_cnt"} filterKey={"tc_cnt"}
@ -132,7 +128,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.culture_cnt__gt, tempFilters.culture_cnt__lt]} filterRange={[filters.culture_cnt__gt, filters.culture_cnt__lt]}
title={"Кол-во объектов культуры (театры, музей и тд)"} title={"Кол-во объектов культуры (театры, музей и тд)"}
fullRange={ranges.culture_cnt || [0, 0]} fullRange={ranges.culture_cnt || [0, 0]}
filterKey={"culture_cnt"} filterKey={"culture_cnt"}
@ -140,7 +136,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.mfc_cnt__gt, tempFilters.mfc_cnt__lt]} filterRange={[filters.mfc_cnt__gt, filters.mfc_cnt__lt]}
title={"Кол-во МФЦ"} title={"Кол-во МФЦ"}
fullRange={ranges.mfc_cnt || [0, 0]} fullRange={ranges.mfc_cnt || [0, 0]}
filterKey={"mfc_cnt"} filterKey={"mfc_cnt"}
@ -148,7 +144,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.public_stop_cnt__gt, tempFilters.public_stop_cnt__lt]} filterRange={[filters.public_stop_cnt__gt, filters.public_stop_cnt__lt]}
title={"Кол-во остановок ОТ"} title={"Кол-во остановок ОТ"}
fullRange={ranges.public_stop_cnt || [0, 0]} fullRange={ranges.public_stop_cnt || [0, 0]}
filterKey={"public_stop_cnt"} filterKey={"public_stop_cnt"}
@ -156,7 +152,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.supermarket_cnt__gt, tempFilters.supermarket_cnt__lt]} filterRange={[filters.supermarket_cnt__gt, filters.supermarket_cnt__lt]}
title={"Кол-во супермаркетов"} title={"Кол-во супермаркетов"}
fullRange={ranges.supermarket_cnt || [0, 0]} fullRange={ranges.supermarket_cnt || [0, 0]}
filterKey={"supermarket_cnt"} filterKey={"supermarket_cnt"}
@ -164,7 +160,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.target_dist__gt, tempFilters.target_dist__lt]} filterRange={[filters.target_dist__gt, filters.target_dist__lt]}
title={"Расстояние до постамата Мой постамат"} title={"Расстояние до постамата Мой постамат"}
fullRange={ranges.target_dist || [0, 0]} fullRange={ranges.target_dist || [0, 0]}
filterKey={"target_dist"} filterKey={"target_dist"}
@ -172,7 +168,7 @@ export const AdvancedFilters = () => {
</div> </div>
<div> <div>
<FilterSlider <FilterSlider
filterRange={[tempFilters.metro_dist__gt, tempFilters.metro_dist__lt]} filterRange={[filters.metro_dist__gt, filters.metro_dist__lt]}
title={"Расстояние до метро"} title={"Расстояние до метро"}
fullRange={ranges.metro_dist || [0, 0]} fullRange={ranges.metro_dist || [0, 0]}
filterKey={"metro_dist"} filterKey={"metro_dist"}
@ -203,7 +199,7 @@ export const AdvancedFilters = () => {
return ( return (
<div key={group.id}> <div key={group.id}>
<FilterSlider <FilterSlider
filterRange={[tempFilters[`d${group.id}__gt`], tempFilters[`d${group.id}__lt`]]} filterRange={[filters[`d${group.id}__gt`], filters[`d${group.id}__lt`]]}
title={group.name} title={group.name}
fullRange={ranges[`d${group.id}`] || [0, 0]} fullRange={ranges[`d${group.id}`] || [0, 0]}
filterKey={`d${group.id}`} filterKey={`d${group.id}`}
@ -221,11 +217,8 @@ export const AdvancedFilters = () => {
<div className="flex items-center justify-between p-4 border-0 border-t border-solid border-gray-300"> <div className="flex items-center justify-between p-4 border-0 border-t border-solid border-gray-300">
<span>Выбрано: {selectedCnt}</span> <span>Выбрано: {selectedCnt}</span>
<div className="flex gap-2"> <div className="flex gap-2">
<Button onClick={() => onCancel()}> <Button onClick={() => clearFilters()} type="primary">
Отменить Сбросить фильтры
</Button>
<Button onClick={() => onApply()} type="primary">
Применить
</Button> </Button>
</div> </div>
</div> </div>

39
src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFiltersWrapper.jsx
Unescape View File

@ -1,7 +1,7 @@
import { Button, Dropdown, Popover } from "antd"; import { Button, Dropdown, Popover } from "antd";
import { AdvancedFilters } from "./AdvancedFilters.jsx"; import { AdvancedFilters } from "./AdvancedFilters.jsx";
import { RightOutlined } from "@ant-design/icons"; import { RightOutlined } from "@ant-design/icons";
import { useMemo } from "react"; import {useMemo, useState} from "react";
import { import {
RANGE_FILTERS_KEYS, RANGE_FILTERS_KEYS,
@ -31,19 +31,38 @@ export const AdvancedFiltersWrapper = () => {
} }
return ( return (
<div> <ul className="mb-0 max-w-[300px] pl-5">
{keys.map((key) => { {Object.keys(RANGE_FILTERS_MAP).map((category_object) => {
if (RANGE_FILTERS_MAP[key]) return ( const obj = RANGE_FILTERS_MAP[category_object];
<p className="my-0.5 text-white " key={key}>{RANGE_FILTERS_MAP[key]}</p> const selectedArr = [];
keys.map((key) => {
if (obj[key]) selectedArr.push(obj[key]);
});
if (selectedArr.length === 0) return;
return (
<li className="text-white">
<span></span>
{obj.name + ' '}
<span className="text-gray-400">
({selectedArr.join(", ")})
</span>
</li>
); );
})} })}
</div> </ul>
); );
} }
const [open, setOpen] = useState(false);
const handleOpenChange = (flag) => {
setOpen(flag);
};
const filtersRender = () => { const filtersRender = () => {
return ( return (
<AdvancedFilters /> <AdvancedFilters onClose={() => setOpen(false)}/>
) )
}; };
@ -51,6 +70,8 @@ export const AdvancedFiltersWrapper = () => {
<Dropdown <Dropdown
trigger="click" trigger="click"
dropdownRender={() => filtersRender()} dropdownRender={() => filtersRender()}
onOpenChange={handleOpenChange}
open={open}
forceRender forceRender
placement='right' placement='right'
> >
@ -64,14 +85,14 @@ export const AdvancedFiltersWrapper = () => {
content={getPopoverContent} content={getPopoverContent}
trigger="hover" trigger="hover"
placement={"rightBottom"} placement={"rightBottom"}
className="rounded-xl mt-0.5 bg-gray-200 p-1 flex justify-center items-center w-[25px] h-[25px] z-10 hover:text-black" className="rounded-xl mt-0.5 bg-gray-200 p-1 flex justify-center items-center w-[22px] h-[22px] z-10 !text-black"
color="#000000cc" color="#000000cc"
zIndex={4000} zIndex={4000}
> >
{selectedCnt} {selectedCnt}
</Popover> </Popover>
</div> </div>
<RightOutlined className="mt-0.5 mr-1"/> <RightOutlined rotate={open ? 0 : 180} className="mt-0.5 mr-1"/>
</Button> </Button>
</Dropdown> </Dropdown>
); );

5
src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/Slider.jsx
Unescape View File

@ -6,8 +6,8 @@ import {
export const FilterSlider = ({ filterRange, disabled, fullRange, title, filterKey, dynamicKey }) => { export const FilterSlider = ({ filterRange, disabled, fullRange, title, filterKey, dynamicKey }) => {
const { setFilterWithKey, setTempFilterWithKey } = usePendingPointsFilters(); const { setFilterWithKey } = usePendingPointsFilters();
const handleAfterChange = (range) => setTempFilterWithKey(range, filterKey); const handleAfterChange = (range) => setFilterWithKey(range, filterKey);
useEffect(() => { useEffect(() => {
if (!fullRange) return; if (!fullRange) return;
@ -26,7 +26,6 @@ export const FilterSlider = ({ filterRange, disabled, fullRange, title, filterKe
filterRange[1] === 0); filterRange[1] === 0);
if (shouldSetFullRange || (shouldSetDynamicKeyRange && dynamicKey)) { if (shouldSetFullRange || (shouldSetDynamicKeyRange && dynamicKey)) {
setTempFilterWithKey([min, max], filterKey);
setFilterWithKey([min, max], filterKey); setFilterWithKey([min, max], filterKey);
} }
}, [fullRange]); }, [fullRange]);

39
src/stores/usePendingPointsFilters.js
Unescape View File

@ -19,19 +19,25 @@ export const RANGE_FILTERS_KEYS = [
] ]
export const RANGE_FILTERS_MAP = { export const RANGE_FILTERS_MAP = {
doors: "Кол-во подъездов в жилом доме", common: {
flat_cnt: "Кол-во квартир в подъезде жилого дома", name: "Общие",
rival_post_cnt: "Кол-во постаматов других сетей", doors: "Кол-во подъездов в жилом доме",
rival_pvz_cnt: "Кол-во ПВЗ", flat_cnt: "Кол-во квартир в подъезде жилого дома",
target_post_cnt: "Кол-во постаматов Мой постамат", },
flats_cnt: "Кол-во квартир в окрестности", objects_dist: {
tc_cnt: "Кол-во торговых центров", name: "Кол-во объектов в окрестности 500м",
culture_cnt: "Кол-во объектов культуры (театры, музей и тд)", rival_post_cnt: "Кол-во постаматов других сетей",
mfc_cnt: "Кол-во МФЦ", rival_pvz_cnt: "Кол-во ПВЗ",
public_stop_cnt: "Кол-во остановок ОТ", target_post_cnt: "Кол-во постаматов Мой постамат",
supermarket_cnt: "Кол-во супермаркетов", flats_cnt: "Кол-во квартир в окрестности",
target_dist: "Расстояние до постамата Мой постамат", tc_cnt: "Кол-во торговых центров",
metro_dist: "Расстояние до метро", culture_cnt: "Кол-во объектов культуры (театры, музей и тд)",
mfc_cnt: "Кол-во МФЦ",
public_stop_cnt: "Кол-во остановок ОТ",
supermarket_cnt: "Кол-во супермаркетов",
target_dist: "Расстояние до постамата Мой постамат",
metro_dist: "Расстояние до метро",
},
} }
export const INITIAL = { export const INITIAL = {
@ -86,7 +92,6 @@ const INITIAL_RANGES = {
const store = (set) => ({ const store = (set) => ({
filters: INITIAL, filters: INITIAL,
ranges: INITIAL_RANGES, ranges: INITIAL_RANGES,
tempFilters: INITIAL,
setPrediction: (value) => { setPrediction: (value) => {
set((state) => { set((state) => {
@ -110,12 +115,6 @@ const store = (set) => ({
state.filters[`${key}__lt`] = value[1]; state.filters[`${key}__lt`] = value[1];
}), }),
setTempFilterWithKey: (value, key) =>
set((state) => {
state.tempFilters[`${key}__gt`] = value[0];
state.tempFilters[`${key}__lt`] = value[1];
}),
setRanges: (value) => setRanges: (value) =>
set((state) => { set((state) => {
state.ranges = value; state.ranges = value;

Write Preview
Loading…
Cancel
Save