hide category image

groups popup

src/Map/LayersControl/LayersVisibility.jsx

@@ -29,7 +29,6 @@ export const LayersVisibility = ({ postGroups, otherGroups }) => {
         </>
       )}
       {postGroups && postGroups.map((item) => {
-        console.log(LAYER_IDS.pvz_category + item.id, isVisible[LAYER_IDS.pvz_category + item.id])
         return (
           <Checkbox
             key={item.id}

src/Map/Legend.jsx

@@ -10,7 +10,7 @@ import {Logo} from "../icons/Logo.jsx";
 import {Collapse, Image} from "antd";
 import React from "react";
 
-const LegendPointItem = ({color, imageSrc, name}) => {
+const LegendPointItem = ({color, imageSrc, name, hideImage}) => {
   return (
     <div className="flex gap-2 items-center">
       {imageSrc && <Image src={imageSrc} width={12} height={12} className='flex items-center' preview={false}/>}
@@ -20,7 +20,7 @@ const LegendPointItem = ({color, imageSrc, name}) => {
           style={{backgroundColor: color}}
         />
       )}
-      {!imageSrc && !color && (
+      {!imageSrc && !color && !hideImage && (
         <Logo width={12} height={12} fill="#E63941"/>
       )}
 
@@ -61,7 +61,7 @@ const LegendGroupItem = ({item, color}) => {
     >
       <Collapse.Panel
         key={"opened"}
-        header={<LegendPointItem name={item.name} imageSrc={item.image} color={color}/>}
+        header={<LegendPointItem name={item.name} hideImage />}
       >
         <div className="ml-3 my-1">
           {item.groups && item.groups?.map((groupItem) => {

src/Map/Popup/Popup.jsx

@@ -9,17 +9,20 @@ import { WorkingPointPopup } from "./mode-popup/WorkingPointPopup";
 import { FeatureProperties } from "./mode-popup/FeatureProperties";
 import { usePopup } from "../../stores/usePopup.js";
 import { PanoramaIcon } from "../../icons/PanoramaIcon";
+import {usePostamatesAndPvzGroups} from "../../api.js";
+import {useMemo} from "react";
 
-const SingleFeaturePopup = ({ feature }) => {
+const SingleFeaturePopup = ({ feature, groups, categories }) => {
   const { mode } = useMode();
   const isRivals =
     feature.layer?.id === LAYER_IDS.pvz ||
-    feature.layer?.id === LAYER_IDS.other;
+    feature.layer?.id === LAYER_IDS.other ||
+    feature.layer?.id.includes(LAYER_IDS.pvz);
   const isPendingPoint = feature.properties.status === STATUSES.pending;
   const isWorkingPoint = feature.properties.status === STATUSES.working;
 
   if (isRivals) {
-    return <FeatureProperties feature={feature} />;
+    return <FeatureProperties feature={feature} groups={groups} categories={categories} />;
   }
 
   if (mode === MODES.ON_APPROVAL && !isPendingPoint) {
@@ -36,7 +39,7 @@ const SingleFeaturePopup = ({ feature }) => {
   return <FeatureProperties feature={feature} />;
 };
 
-const MultipleFeaturesPopup = ({ features }) => {
+const MultipleFeaturesPopup = ({ features, categories }) => {
   const { setPopup } = usePopup();
 
   return (
@@ -65,6 +68,7 @@ const MultipleFeaturesPopup = ({ features }) => {
               <div className="flex w-full">
                 <span className="truncate">
                   {feature.properties.name ?? feature.properties.category}
+                  {feature.properties.category_id && categories.find(c => c.id === feature.properties.category_id).name}
                 </span>
               </div>
             )}
@@ -87,12 +91,34 @@ const YandexPanoramaLink = ({ lat, lng }) => {
 }
 
 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)],
+        }
+      })
+  }, [postamatesAndPvzGroups]);
+
+  const postamatesGroups = useMemo(() => {
+    if (!filteredPostamatesCategories) return [];
+    return filteredPostamatesCategories
+      .map((category) => {
+        return [...category.groups.filter((group) => group.visible)]
+      }).flat();
+  }, [postamatesAndPvzGroups]);
+
   const getContent = () => {
     if (features.length === 1) {
-      return <SingleFeaturePopup feature={features[0]} />;
+      return <SingleFeaturePopup feature={features[0]} groups={postamatesGroups} categories={filteredPostamatesCategories} />;
     }
 
-    return <MultipleFeaturesPopup features={features} />;
+    return <MultipleFeaturesPopup features={features} categories={filteredPostamatesCategories} />;
   };
 
   return (

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

@@ -11,7 +11,7 @@ import { LAYER_IDS } from "../../Layers/constants";
 import { isNil } from "../../../utils.js";
 import { useGetRegions } from "../../../components/RegionSelect.jsx";
 
-export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
+export const FeatureProperties = ({ feature, dynamicStatus, postamatId, groups, categories }) => {
   const { data } = useGetRegions();
   const isResidential = feature.properties.category === CATEGORIES.residential;
   const isWorking = feature.properties.status === STATUSES.working;
@@ -33,6 +33,16 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
   const getValue = ({ field, render, empty, type, fallbackField }) => {
     let value = feature.properties[field];
 
+    if (field === "category_id") {
+      const category = categories.find(category => category.id === value);
+      value = category.name;
+    }
+
+    if (field === "group_id") {
+      const category = groups.find(group => group.id === value);
+      value = category.name;
+    }
+
     if (field === "status" && dynamicStatus) {
       value = dynamicStatus;
     }

src/Map/Popup/mode-popup/config.js

@@ -69,12 +69,7 @@ export const workingPointFields = [
   { name: "id постамата", field: "postamat_id", empty: "Не указан" },
 ];
 
-const RIVALS_MAPPER = {
-  pvz: "ПВЗ",
-  post: "Постамат",
-};
-
 export const rivalsConfig = [
-  { name: "Инфо", field: "info" },
-  { name: "Категория", field: "type", render: (value) => RIVALS_MAPPER[value] },
+  { name: "Категория", field: "category_id" },
+  { name: "Группа", field: "group_id" },
 ];