Merge branch 'feature/popup_fix' into 'dev'

popup fix

See merge request spatial/postamates_frontend!32

src/Map/Popup/Popup.jsx

@@ -11,9 +11,10 @@ import { usePopup } from "../../stores/usePopup.js";
 import { PanoramaIcon } from "../../icons/PanoramaIcon";
 import {useOtherGroups, usePostamatesAndPvzGroups} from "../../api.js";
 import {useMemo} from "react";
-import {getFilteredGroups} from "../../utils.js";
+import {doesMatchFilter, getFilteredGroups} from "../../utils.js";
 import Checkbox from "antd/es/checkbox/Checkbox";
 import {usePointSelection} from "../../stores/usePointSelection.js";
+import {usePendingPointsFilters} from "../../stores/usePendingPointsFilters.js";
 
 const getRivalsName = (feature) => {
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
@@ -88,12 +89,14 @@ const SingleFeaturePopup = ({ feature }) => {
 const MultipleFeaturesPopup = ({ features }) => {
   const { setPopup } = usePopup();
   const { selection, include, exclude } = usePointSelection();
+  const { filters, ranges } = usePendingPointsFilters();
 
   return (
     <div className="space-y-2 p-1">
       {features.map((feature) => {
         const featureId = feature.properties.id;
-        const isSelected = !selection.excluded.has(featureId) || selection.included.has(featureId);
+        const isSelected = (doesMatchFilter(filters, ranges, feature) && !selection.excluded.has(featureId)) ||
+          selection.included.has(featureId);
         const handleSelect = () => {
           if (isSelected) {
             exclude(featureId);
@@ -111,7 +114,7 @@ const MultipleFeaturesPopup = ({ features }) => {
             )}
 
             <Button
-              className="text-start flex-1 w-0"
+              className="text-start flex-1 !w-0"
               block
               onClick={() => {
                 setPopup({

src/Map/Popup/mode-popup/PendingPointPopup.jsx

@@ -5,50 +5,17 @@ import { FeatureProperties } from "./FeatureProperties";
 import { Button } from "antd";
 import { useCanEdit } from "../../../api";
 import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
+import { doesMatchFilter } from "../../../utils.js";
 
 export const PendingPointPopup = ({ feature }) => {
   const { include, selection, exclude } = usePointSelection();
   const { setClickedPointConfig } = useClickedPointConfig();
-  const { filters } = usePendingPointsFilters();
-  const doesMatchFilter = () => {
-    const { prediction, categories, region } = filters;
-    const {
-      prediction_current,
-      category,
-      area,
-      district,
-      area_id,
-      district_id,
-    } = feature.properties;
-
-    const doesMatchPredictionFilter =
-      prediction_current >= prediction[0] &&
-      prediction_current <= prediction[1];
-
-    const doesMatchCategoriesFilter =
-      categories.length > 0 ? categories.includes(category) : true;
-
-    const doesMatchRegionFilter = () => {
-      if (!region) return true;
-
-      if (region.type === "ao") {
-        return (district ?? district_id) === region.id;
-      } else {
-        return (area ?? area_id) === region.id;
-      }
-    };
-
-    return (
-      doesMatchPredictionFilter &&
-      doesMatchCategoriesFilter &&
-      doesMatchRegionFilter()
-    );
-  };
+  const { filters, ranges } = usePendingPointsFilters();
 
   const featureId = feature.properties.id;
 
   const isSelected =
-    (doesMatchFilter() && !selection.excluded.has(featureId)) ||
+    (doesMatchFilter(filters, ranges, feature) && !selection.excluded.has(featureId)) ||
     selection.included.has(featureId);
 
   useEffect(

src/utils.js

@@ -1,3 +1,5 @@
+import {RANGE_FILTERS_KEYS} from "./stores/usePendingPointsFilters.js";
+
 export function download(filename, data) {
   const downloadLink = window.document.createElement("a");
   downloadLink.href = window.URL.createObjectURL(
@@ -47,5 +49,54 @@ export function fieldHasChanged(filters, ranges, filterKey) {
   }
 }
 
+export const doesMatchFilter = (filters, ranges, feature) => {
+  const { prediction, categories, region } = filters;
+  const {
+    prediction_current,
+    category,
+    area,
+    district,
+    area_id,
+    district_id,
+  } = feature.properties;
+
+  const doesMatchPredictionFilter =
+    prediction_current >= prediction[0] &&
+    prediction_current <= prediction[1];
+
+  const doesMatchCategoriesFilter =
+    categories.length > 0 ? categories.includes(category) : true;
+
+  const doesMatchOtherFilters = () => {
+    let res = true;
+    RANGE_FILTERS_KEYS.map((filterKey) => {
+      if (fieldHasChanged(filters, ranges, filterKey) && res) {
+        res =
+          feature.properties[filterKey] >= filters[`${filterKey}__gt`] &&
+          feature.properties[filterKey] <= filters[`${filterKey}__lt`];
+      }
+    });
+
+    return res;
+  }
+
+  const doesMatchRegionFilter = () => {
+    if (!region) return true;
+
+    if (region.type === "ao") {
+      return (district ?? district_id) === region.id;
+    } else {
+      return (area ?? area_id) === region.id;
+    }
+  };
+
+  return (
+    doesMatchPredictionFilter &&
+    doesMatchCategoriesFilter &&
+    doesMatchRegionFilter() &&
+    doesMatchOtherFilters()
+  );
+};
+
 export const isNil = (value) =>
   value === undefined || value === null || value === "";