Disable filters after manual edits

src/Map/Points.jsx

@@ -8,7 +8,7 @@ import { usePointSelection } from "../stores/usePointSelection";
 export const Points = () => {
   const { isVisible } = useLayersVisibility();
   const { filters } = useFilters();
-  const { prediction, status } = filters;
+  const { prediction, status, categories } = filters;
   const { selection } = usePointSelection();
   const includedArr = [...selection.included];
   const excludedArr = [...selection.excluded];
@@ -20,18 +20,30 @@ export const Points = () => {
     ["<=", ["get", "prediction_current"], prediction[1]],
   ];
   const statusExpression = ["in", ["get", "status"], ["literal", status]];
+  const categoryExpression =
+    categories.length > 0
+      ? ["in", ["get", "category"], ["literal", categories]]
+      : true;
 
   const matchFilterExpression = [
     "all",
     statusExpression,
     ["!", excludedExpression],
-    ["any", ["all", ...predictionExpression], includedExpression],
+    [
+      "any",
+      ["all", ...predictionExpression, categoryExpression],
+      includedExpression,
+    ],
   ];
 
   const unmatchFilterExpression = [
     "all",
     statusExpression,
-    ["any", excludedExpression, ["!", ["all", ...predictionExpression]]],
+    [
+      "any",
+      excludedExpression,
+      ["!", ["all", ...predictionExpression, categoryExpression]],
+    ],
   ];
 
   return (

src/Map/Popup.jsx

@@ -5,6 +5,10 @@ import { usePointSelection } from "../stores/usePointSelection";
 import { useState } from "react";
 
 const popupConfig = [
+  {
+    field: "id",
+    name: "id",
+  },
   {
     field: "name",
     name: "Название",

src/modules/Sidebar/ObjectTypesSelect.jsx

@@ -2,6 +2,7 @@ import { Button } from "antd";
 import { twMerge } from "tailwind-merge";
 import { Title } from "../../components/Title";
 import { useFilters } from "../../stores/useFilters";
+import { useHasManualEdits } from "../../stores/usePointSelection";
 
 //kiosk - городские киоски
 // mfc - многофункциональные центры предоставления государственных и муниципальных услуг
@@ -19,7 +20,7 @@ const types = [
   "Дом культуры/Клуб",
 ];
 
-const SelectItem = ({ name, isActive, onClick }) => {
+const SelectItem = ({ name, isActive, onClick, disabled }) => {
   return (
     <Button
       block
@@ -29,6 +30,7 @@ const SelectItem = ({ name, isActive, onClick }) => {
         isActive && "bg-blue hover:bg-blue active:bg-blue focus:bg-blue"
       )}
       onClick={onClick}
+      disabled={disabled}
     >
       {name}
     </Button>
@@ -37,6 +39,7 @@ const SelectItem = ({ name, isActive, onClick }) => {
 
 export const ObjectTypesSelect = () => {
   const { filters, setCategories } = useFilters();
+  const hasManualEdits = useHasManualEdits();
 
   const handleClick = (category) => setCategories(category);
 
@@ -51,6 +54,7 @@ export const ObjectTypesSelect = () => {
             type="text"
             className="text-grey text-xs p-0 hover:bg-transparent active:bg-transparent focus:bg-transparent h-fit"
             onClick={clear}
+            disabled={hasManualEdits}
           >
             сбросить
           </Button>
@@ -64,6 +68,7 @@ export const ObjectTypesSelect = () => {
             name={type}
             isActive={filters.categories.includes(type)}
             onClick={() => handleClick(type)}
+            disabled={hasManualEdits}
           />
         ))}
       </div>

src/modules/Sidebar/PredictionSlider.jsx

@@ -3,9 +3,11 @@ import { useFilters } from "../../stores/useFilters";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../../api";
 import { useEffect } from "react";
+import { useHasManualEdits } from "../../stores/usePointSelection";
 
 export const PredictionSlider = () => {
   const { filters, setPrediction } = useFilters();
+  const hasManualEdits = useHasManualEdits();
   const { data } = useQuery(["max-min"], async () => {
     const { data } = await api.get(`/api/placement_points/filters`);
 
@@ -33,6 +35,7 @@ export const PredictionSlider = () => {
       min={200}
       max={299}
       range
+      disabled={hasManualEdits}
     />
   );
 };

src/modules/Sidebar/Sidebar.jsx

@@ -6,6 +6,10 @@ import { LayersVisibility } from "./LayersVisibility";
 import { useState } from "react";
 import { api } from "../../api";
 import { useFilters } from "../../stores/useFilters";
+import {
+  useHasManualEdits,
+  usePointSelection,
+} from "../../stores/usePointSelection";
 
 function download(filename, data) {
   const downloadLink = window.document.createElement("a");
@@ -38,6 +42,8 @@ export const Sidebar = () => {
   } = useFilters();
 
   const [isExporting, setIsExporting] = useState(false);
+  const hasManualEdits = useHasManualEdits();
+  const { reset: resetSelection } = usePointSelection();
 
   const handleExport = async () => {
     setIsExporting(true);
@@ -97,6 +103,16 @@ export const Sidebar = () => {
           <Button type="primary" block className={"mt-2"} disabled={true}>
             Взять в работу
           </Button>
+          {hasManualEdits ? (
+            <Button
+              type="text"
+              block
+              className={"mt-2"}
+              onClick={resetSelection}
+            >
+              Отменить ручное редактирование
+            </Button>
+          ) : null}
         </div>
       </div>
     </div>

src/modules/Table/Table.jsx

@@ -32,39 +32,39 @@ const columns = [
   },
   {
     title: "Прогноз",
-    dataIndex: "prediction_first",
-    key: "prediction_first",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Зрелость",
-    dataIndex: "age",
-    key: "age",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "План",
-    dataIndex: "plan",
-    key: "plan",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Факт",
-    dataIndex: "fact",
-    key: "fact",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Дельта",
-    dataIndex: "delta",
-    key: "delta",
+    dataIndex: "prediction_current",
+    key: "prediction_current",
     width: "120px",
     ellipsis: true,
   },
+  // {
+  //   title: "Зрелость",
+  //   dataIndex: "age",
+  //   key: "age",
+  //   width: "120px",
+  //   ellipsis: true,
+  // },
+  // {
+  //   title: "План",
+  //   dataIndex: "plan",
+  //   key: "plan",
+  //   width: "120px",
+  //   ellipsis: true,
+  // },
+  // {
+  //   title: "Факт",
+  //   dataIndex: "fact",
+  //   key: "fact",
+  //   width: "120px",
+  //   ellipsis: true,
+  // },
+  // {
+  //   title: "Дельта",
+  //   dataIndex: "delta",
+  //   key: "delta",
+  //   width: "120px",
+  //   ellipsis: true,
+  // },
   {
     title: "АО",
     dataIndex: "okrug",
@@ -89,7 +89,7 @@ export const Table = React.memo(({ height = 200 }) => {
   const [page, setPage] = useState(1);
 
   const { filters } = useFilters();
-  const { prediction, status } = filters;
+  const { prediction, status, categories } = filters;
   const { include, selection, exclude } = usePointSelection();
 
   const { data } = useQuery(
@@ -100,6 +100,7 @@ export const Table = React.memo(({ height = 200 }) => {
         page_size: PAGE_SIZE,
         "prediction_current[]": prediction,
         "status[]": status,
+        "categories[]": categories,
         "included[]": [...selection.included],
         "excluded[]": [...selection.excluded],
       });

src/stores/usePointSelection.js

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
+import { useMemo } from "react";
 
 const INITIAL = {
   included: new Set([]),
@@ -29,6 +30,20 @@ const store = (set) => ({
       }
     });
   },
+
+  reset: () =>
+    set((state) => {
+      state.selection.included.clear();
+      state.selection.excluded.clear();
+    }),
 });
 
 export const usePointSelection = create(immer(store));
+
+export const useHasManualEdits = () => {
+  const { selection } = usePointSelection();
+  return useMemo(
+    () => selection.included.size || selection.excluded.size,
+    [selection]
+  );
+};