popup checkboxes

src/Map/Popup/Popup.jsx

@@ -12,6 +12,8 @@ import { PanoramaIcon } from "../../icons/PanoramaIcon";
 import {useOtherGroups, usePostamatesAndPvzGroups} from "../../api.js";
 import {useMemo} from "react";
 import {getFilteredGroups} from "../../utils.js";
+import Checkbox from "antd/es/checkbox/Checkbox";
+import {usePointSelection} from "../../stores/usePointSelection.js";
 
 const getRivalsName = (feature) => {
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
@@ -64,7 +66,6 @@ const SingleFeaturePopup = ({ feature }) => {
   const isPendingPoint = feature.properties.status === STATUSES.pending;
   const isWorkingPoint = feature.properties.status === STATUSES.working;
 
-  console.log(feature)
   if (isRivals) {
     const { name, groupName } = getRivalsName(feature);
     return <FeatureProperties feature={feature} name={name} groupName={groupName} />;
@@ -86,38 +87,57 @@ const SingleFeaturePopup = ({ feature }) => {
 
 const MultipleFeaturesPopup = ({ features }) => {
   const { setPopup } = usePopup();
+  const { selection, include, exclude } = usePointSelection();
 
   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 handleSelect = () => {
+          if (isSelected) {
+            exclude(featureId);
+          } else {
+            include(featureId);
+          }
+        };
         return (
-          <Button
-            className="text-start w-full"
-            block
-            onClick={() => {
-              setPopup({
-                features: [feature],
-                coordinates: feature.geometry.coordinates,
-              });
-            }}
-            key={feature.properties.id}
-          >
-            {feature.properties.category === CATEGORIES.residential ? (
-              <div className="space-x-2 flex items-center w-full">
-                <span className="flex-1 truncate inline-block">
-                  {feature.properties.address}
-                </span>
-                <span>{feature.properties.name}</span>
-              </div>
-            ) : (
-              <div className="flex w-full">
-                <span className="truncate">
-                  {feature.properties.name ?? feature.properties.category}
-                  {feature.properties.category_id && getRivalsName(feature).name}
-                </span>
-              </div>
+          <div className="flex flex-row items-center gap-2 w-full">
+            {feature.properties.status === STATUSES.pending && (
+              <Checkbox
+                checked={isSelected}
+                onClick={handleSelect}
+              />
             )}
-          </Button>
+
+            <Button
+              className="text-start flex-1 w-0"
+              block
+              onClick={() => {
+                setPopup({
+                  features: [feature],
+                  coordinates: feature.geometry.coordinates,
+                });
+              }}
+              key={feature.properties.id}
+            >
+              {feature.properties.category === CATEGORIES.residential ? (
+                <div className="space-x-2 flex items-center w-full">
+                  <span className="flex-1 truncate inline-block">
+                    {feature.properties.address}
+                  </span>
+                  <span>{feature.properties.name}</span>
+                </div>
+              ) : (
+                <div className="flex w-full">
+                  <span className="truncate">
+                    {feature.properties.name ?? feature.properties.category}
+                    {feature.properties.category_id && getRivalsName(feature).name}
+                  </span>
+                </div>
+              )}
+            </Button>
+          </div>
         );
       })}
     </div>

src/Map/Popup/PopupWrapper.jsx

@@ -7,7 +7,7 @@ export const PopupWrapper = ({ lat, lng, onClose, children }) => {
       latitude={lat}
       onClose={onClose}
       closeOnClick={false}
-      style={{ minWidth: "300px" }}
+      style={{ minWidth: "330px" }}
     >
       {children}
     </Popup>