merge points api

src/Map/Layers/CancelledPoints.jsx

@@ -6,7 +6,7 @@ import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useMode } from "../../stores/useMode";
 import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.cancelled];
 
@@ -18,6 +18,7 @@ export const CancelledPoints = () => {
   const regionFilterExpression = useRegionFilterExpression(region);
 
   const { mode } = useMode();
+  const layerName = useSourceLayerName();
 
   const getFilter = () => {
     if (mode === MODES.ON_APPROVAL) {
@@ -35,7 +36,7 @@ export const CancelledPoints = () => {
         {...cancelledPointLayer}
         id={LAYER_IDS.cancelled}
         source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
         layout={{
           visibility: isVisible[LAYER_IDS.cancelled] ? "visible" : "none",
         }}

src/Map/Layers/FilteredWorkingPoints.jsx

@@ -5,12 +5,13 @@ import { STATUSES } from "../../config";
 import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useWorkingPointsFilters } from "../../stores/useWorkingPointsFilters";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.working];
 
 export const FilteredWorkingPoints = () => {
   const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
   const {
     filters: { deltaTraffic, factTraffic, age, region },
   } = useWorkingPointsFilters();
@@ -54,7 +55,7 @@ export const FilteredWorkingPoints = () => {
         {...workingPointSymbolLayer}
         id={LAYER_IDS.filteredWorking}
         source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
         layout={{
           ...workingPointSymbolLayer.layout,
           visibility: isVisible[LAYER_IDS.filteredWorking] ? "visible" : "none",

src/Map/Layers/OnApprovalPoints.jsx

@@ -5,12 +5,13 @@ import { STATUSES } from "../../config";
 import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.onApproval];
 
 export const OnApprovalPoints = () => {
   const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
   const {
     filters: { region },
   } = useOnApprovalPointsFilters();
@@ -26,7 +27,7 @@ export const OnApprovalPoints = () => {
         {...approvePointLayer}
         id={LAYER_IDS.approve}
         source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
         layout={{
           visibility: isVisible[LAYER_IDS.approve] ? "visible" : "none",
         }}

src/Map/Layers/PendingPoints.jsx

@@ -10,7 +10,7 @@ import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../stores/usePendingPointsFilters";
 import { fieldHasChanged } from "../../utils.js";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.pending];
 
@@ -89,6 +89,7 @@ const useFilterExpression = () => {
 
 export const PendingPoints = () => {
   const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
   const { match: matchFilterExpression, unmatch: unmatchFilterExpression } =
     useFilterExpression();
 
@@ -98,7 +99,7 @@ export const PendingPoints = () => {
         {...matchInitialPointLayer}
         id={LAYER_IDS["initial-unmatch"]}
         source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={useSourceLayerName()}
         layout={{
           ...matchInitialPointLayer.layout,
           visibility: isVisible[LAYER_IDS.initial] ? "visible" : "none",
@@ -110,7 +111,7 @@ export const PendingPoints = () => {
         {...matchInitialPointLayer}
         id={LAYER_IDS["initial-match"]}
         source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
         layout={{
           ...matchInitialPointLayer.layout,
           visibility: isVisible[LAYER_IDS.initial] ? "visible" : "none",

src/Map/Layers/Points.jsx

@@ -1,16 +1,16 @@
 import { Source } from "react-map-gl";
-import { BASE_URL, getSourceLayerName } from "../../api";
+import { BASE_URL, useSourceLayerName } from "../../api";
 import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
 import { PendingPoints } from "./PendingPoints";
 import { OnApprovalPoints } from "./OnApprovalPoints";
 import { WorkingPoints } from "./WorkingPoints";
 import { FilteredWorkingPoints } from "./FilteredWorkingPoints";
 import { CancelledPoints } from "./CancelledPoints";
-import {useEffect} from "react";
+import { useEffect } from "react";
 
 export const Points = () => {
   const { updateCounter, toggleUpdateCounter } = useUpdateLayerCounter();
-  const layer = getSourceLayerName();
+  const layer = useSourceLayerName();
   useEffect(() => {
     toggleUpdateCounter();
   }, [layer]);

src/Map/Layers/WorkingPoints.jsx

@@ -6,12 +6,13 @@ import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useMode } from "../../stores/useMode";
 import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
-import {getSourceLayerName} from "../../api.js";
+import {useSourceLayerName} from "../../api.js";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.working];
 
 export const WorkingPoints = () => {
   const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
   const {
     filters: { region },
   } = useOnApprovalPointsFilters();
@@ -35,7 +36,7 @@ export const WorkingPoints = () => {
         {...workingPointSymbolLayer}
         id={LAYER_IDS.working}
         source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
         layout={{
           ...workingPointSymbolLayer.layout,
           visibility: isVisible[LAYER_IDS.working] ? "visible" : "none",

src/api.js

@@ -3,7 +3,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { STATUSES } from "./config";
 import { usePointSelection } from "./stores/usePointSelection";
 import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "./stores/usePendingPointsFilters";
-import { fieldHasChanged } from "./utils.js";
+import { appendFiltersInUse } from "./utils.js";
 import { useMode } from "./stores/useMode.js";
 
 export const BASE_URL = import.meta.env.VITE_API_URL;
@@ -18,13 +18,13 @@ export const api = axios.create({
   xsrfCookieName: "csrftoken",
 });
 
-export const getApiName = () => {
+export const useDbTableName = () => {
   const {isImportMode} = useMode();
   if (isImportMode) return "pre_placement_points";
   return "placement_points";
 }
 
-export const getSourceLayerName = () => {
+export const useSourceLayerName = () => {
   const {isImportMode} = useMode();
   if (isImportMode) return "public.service_preplacementpoint";
   return "public.points_with_dist";
@@ -46,11 +46,11 @@ const enrichParamsWithRegionFilter = (params, region) => {
   return resultParams;
 };
 
-export const getPoints = async (params, region, link = "placement_points") => {
+export const getPoints = async (params, region, dbTable = "placement_points") => {
   const resultParams = enrichParamsWithRegionFilter(params, region);
 
   const { data } = await api.get(
-    `/api/${link}/?${resultParams.toString()}`
+    `/api/${dbTable}/?${resultParams.toString()}`
   );
 
   return data;
@@ -91,9 +91,9 @@ export const importPoints = async (id) => {
 };
 
 export const useGetTotalInitialPointsCount = () => {
-  const link = getApiName();
+  const dbTable = useDbTableName();
   return useQuery(
-    ["all-initial-count", link],
+    ["all-initial-count", dbTable],
     async () => {
       const params = new URLSearchParams({
         page: 1,
@@ -101,13 +101,13 @@ export const useGetTotalInitialPointsCount = () => {
         "status[]": [STATUSES.pending],
       });
 
-      return await getPoints(params, null, link);
+      return await getPoints(params, null, dbTable);
     },
     { select: (data) => data.count }
   );
 };
 
-export const useGetFilteredPendingPointsCount = () => {
+export const useGetFilteredPendingPointsCount = (isMerge) => {
   const { filters, ranges } = usePendingPointsFilters();
   const {
     prediction,
@@ -128,45 +128,61 @@ export const useGetFilteredPendingPointsCount = () => {
       "categories[]": categories,
       "included[]": includedIds,
     });
-
-
-    RANGE_FILTERS_KEYS.map((filterKey) => {
-      if (!fieldHasChanged(filters, ranges, filterKey).result) return;
-      if (/d[0-9]/.test(filterKey)) {
-        params.append('dist_to_group__gt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__gt`] - 1
-        ].join(','));
-        params.append('dist_to_group__lt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__lt`] + 1
-        ].join(','));
-      } else {
-        params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
-        params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);
-      }
-
-    });
+    appendFiltersInUse(params, filters, ranges);
+    if (isMerge) params.append("matching_status", "New")
 
     return params;
   }
 
-  const link = getApiName();
+  const dbTable = useDbTableName();
 
   return useQuery(
-    ["filtered-points", filters, link, includedIds],
+    ["filtered-points", filters, dbTable, includedIds],
     async () => {
       const params = getParams();
 
-      return await getPoints(params, region, link);
+      return await getPoints(params, region, dbTable);
     },
     { select: (data) => data.count, keepPreviousData: true }
   );
 };
 
+export const useMergePointsToDb = () => {
+  const { filters, ranges } = usePendingPointsFilters();
+  const {
+    prediction,
+    categories,
+  } = filters;
+  const {
+    selection: { included },
+  } = usePointSelection();
+
+  const includedIds = [...included];
+  const getParams = () => {
+    const params = new URLSearchParams({
+      page: 1,
+      page_size: 1,
+      "prediction_current[]": prediction,
+      "categories[]": categories,
+      "included[]": includedIds,
+    });
+    appendFiltersInUse(params, filters, ranges);
+
+    return params;
+  }
+
+  return useMutation({
+    mutationFn: () => {
+      return api.post(
+        `/api/pre_placement_points/move_points/?${getParams().toString()}`
+      );
+    },
+  });
+};
+
 export const useGetPermissions = () => {
   return useQuery(["permissions"], async () => {
-    const { data } = await api.get("/api/me");
+    const { data } = await api.get("/api/me/");
 
     if (data?.groups?.includes("Редактор")) {
       return "editor";
@@ -186,7 +202,7 @@ export const useUpdatePostamatId = () => {
   return useMutation({
     mutationFn: (params) => {
       return api.put(
-        `/api/placement_points/update_postamat_id?${params.toString()}`
+        `/api/placement_points/update_postamat_id/?${params.toString()}`
       );
     },
   });
@@ -243,12 +259,12 @@ export const useLastMLRun = () => {
   );
 }
 
-export const useGetPendingPointsRange = (link) => {
+export const useGetPendingPointsRange = (dbTable) => {
   return useQuery(
-    ["prediction-max-min", link],
+    ["prediction-max-min", dbTable],
     async () => {
       const { data, isInitialLoading, isFetching } = await api.get(
-        `/api/${link}/filters?status[]=${STATUSES.pending}`
+        `/api/${dbTable}/filters/?status[]=${STATUSES.pending}`
       );
       return {data, isLoading: isInitialLoading || isFetching};
     },
@@ -282,7 +298,7 @@ export const useGetPendingPointsRange = (link) => {
 
 export const useGetPopupPoints = (features) => {
   const pointsIds = features.map(f => f.properties.id);
-  const link = getApiName();
+  const dbTable = useDbTableName();
 
   const { data, isInitialLoading, isFetching } = useQuery(
     ["popup_data", features],
@@ -292,7 +308,7 @@ export const useGetPopupPoints = (features) => {
       });
 
       const { data } = await api.get(
-        `/api/${link}/?${params.toString()}`
+        `/api/${dbTable}/?${params.toString()}`
       );
 
       return data.results;

src/modules/ImportMode/MergePointsModal.jsx

@@ -1,22 +1,28 @@
 import { Button, Modal, Spin } from "antd";
 import { useState } from "react";
-import { useGetFilteredPendingPointsCount } from "../../api.js";
+import {useGetFilteredPendingPointsCount, useMergePointsToDb} from "../../api.js";
 import { CheckCircleOutlined, InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useMode } from "../../stores/useMode.js";
 
-export const AddPointsModal = ({isOpened, onClose}) => {
+export const MergePointsModal = ({isOpened, onClose}) => {
   const {setImportMode} = useMode();
   const [isLoading, setIsLoading] = useState(false);
   const { data: filteredCount, isInitialLoading: isFilteredLoading } =
-    useGetFilteredPendingPointsCount();
+    useGetFilteredPendingPointsCount(true);
   const [isSuccess, setIsSuccess] = useState(false);
+  const {mutateAsync: mergePoints} = useMergePointsToDb();
 
-  const onConfirm = () => {
+  const onConfirm = async () => {
     setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
+
+    try {
+      await mergePoints();
       setIsSuccess(true);
-    }, 2000);
+    } catch (e) {
+      //
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   const getFooter = () => {

src/modules/ImportMode/PointsFileUploadModal.jsx

@@ -3,13 +3,14 @@ import { useState } from "react";
 import { importPoints } from "../../api.js";
 import { LoadingStage } from "./LoadingStage.jsx";
 import { ReportStage } from "./ReportStage.jsx";
-import { CheckCircleOutlined, LoadingOutlined } from "@ant-design/icons";
+import {CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined} from "@ant-design/icons";
 
-export const OnLoadModal = ({onClose, isOpened}) => {
+export const PointsFileUploadModal = ({onClose, isOpened}) => {
   const [fileId, setFileId] = useState();
   const [report, setReport] = useState();
   const [isImporting, setIsImporting] = useState(false);
   const [isReportStage, setIsReportStage] = useState(false);
+  const [isError, setIsError] = useState(false);
 
   const onImportPoints = async () => {
     setIsImporting(true);
@@ -17,13 +18,22 @@ export const OnLoadModal = ({onClose, isOpened}) => {
       const { message } = await importPoints(fileId);
       setReport(message);
     } catch (e) {
-      console.log(e);
+      setIsError(true);
     } finally {
       setIsImporting(false);
     }
   }
 
   const getFooter = () => {
+    if (isError) return [
+      <Button
+        key="error-button"
+        type="primary"
+        onClick={onClose}
+      >
+        Закрыть
+      </Button>
+    ]
     if (isReportStage) return [
       <Button
         key="finish-button"
@@ -61,9 +71,15 @@ export const OnLoadModal = ({onClose, isOpened}) => {
     ]
   }
   const getContent = () => {
+    if (isError) return (
+      <div className="flex items-center justify-center font-bold gap-2">
+        <CloseCircleOutlined style={{ fontSize: 24, color: "#FF4D4F" }} />
+        При импорте точек произошла ошибка
+      </div>
+    )
     if (isImporting) return (
       <div className="flex flex-col justify-center gap-2 items-center">
-        <Spin indicator={<LoadingOutlined style={{ fontSize: 64}} spin />} />
+        <Spin indicator={<LoadingOutlined style={{ fontSize: 64 }} spin />} />
         Импортируем точки...
       </div>
     );

src/modules/ImportMode/SidebarButtons.jsx

@@ -1,14 +1,14 @@
 import { useMode } from "../../stores/useMode.js";
 import { Button } from "antd";
 import { ImportOutlined } from "@ant-design/icons";
-import { OnLoadModal } from "./OnLoadModal.jsx";
+import { PointsFileUploadModal } from "./PointsFileUploadModal.jsx";
 import { useState } from "react";
-import { AddPointsModal } from "./AddPointsModal.jsx";
+import { MergePointsModal } from "./MergePointsModal.jsx";
 import { MODES } from "../../config.js";
 
 export const ImportModeSidebarButtons = () => {
   const { mode, isImportMode, setImportMode } = useMode();
-  const [loadModalOpen, setLoadModalOpen] = useState(false);
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
   const [addPointsModalOpen, setAddPointsModalOpen] = useState(false);
 
   const onCancel = () => {
@@ -17,7 +17,7 @@ export const ImportModeSidebarButtons = () => {
 
   const onImport = () => {
     setImportMode(true);
-    setLoadModalOpen(true);
+    setUploadModalOpen(true);
   };
 
   if (isImportMode) {
@@ -29,14 +29,14 @@ export const ImportModeSidebarButtons = () => {
         <Button type="primary" className="flex-1" onClick={() => setAddPointsModalOpen(true)}>
           Добавить в базу
         </Button>
-        {loadModalOpen &&
-          <OnLoadModal
-            isOpened={loadModalOpen}
-            onClose={() => setLoadModalOpen(false)}
+        {uploadModalOpen &&
+          <PointsFileUploadModal
+            isOpened={uploadModalOpen}
+            onClose={() => setUploadModalOpen(false)}
           />
         }
         {addPointsModalOpen &&
-          <AddPointsModal
+          <MergePointsModal
             isOpened={addPointsModalOpen}
             onClose={() => setAddPointsModalOpen(false)}
           />

src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx

@@ -13,15 +13,15 @@ import {
 import {RANGE_FILTERS_KEYS, usePendingPointsFilters} from "../../../stores/usePendingPointsFilters";
 import { ClearFiltersButton } from "../../../components/ClearFiltersButton";
 import { getDynamicActiveFilters } from "../utils";
-import { getApiName, useCanEdit, useGetPendingPointsRange } from "../../../api";
+import { useDbTableName, useCanEdit, useGetPendingPointsRange } from "../../../api";
 import { AdvancedFiltersWrapper } from "./AdvancedFilters/AdvancedFiltersWrapper.jsx";
 
 export const PendingPointsFilters = () => {
   const hasManualEdits = useHasManualEdits();
   const { reset: resetPointSelection } = usePointSelection();
   const { ranges, filters, setRegion, setFilterWithKey, setPrediction, setCategories, setRanges } = usePendingPointsFilters();
-  const link = getApiName();
-  const { data } = useGetPendingPointsRange(link);
+  const dbTable = useDbTableName();
+  const { data } = useGetPendingPointsRange(dbTable);
 
   useEffect(() => {
     const newRanges = data?.fullRange;

src/modules/Table/PendingTable/usePendingTableData.js

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
-import { getApiName, getPoints } from "../../../api";
+import { useDbTableName, getPoints } from "../../../api";
 import { useMergeTableData } from "../useMergeTableData";
 import { STATUSES } from "../../../config";
-import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
-import {fieldHasChanged} from "../../../utils.js";
+import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
+import { appendFiltersInUse } from "../../../utils.js";
 
 export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort) => {
   const { filters, ranges } = usePendingPointsFilters();
@@ -13,7 +13,7 @@ export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort
     region,
   } = filters;
 
-  const link = getApiName();
+  const dbTable = useDbTableName();
 
   const getParams = () => {
     const params = new URLSearchParams({
@@ -25,34 +25,17 @@ export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort
       ordering: sort,
     });
 
-
-    RANGE_FILTERS_KEYS.map((filterKey) => {
-      if (!fieldHasChanged(filters, ranges, filterKey).result) return;
-      if (/d[0-9]/.test(filterKey)) {
-        params.append('dist_to_group__gt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__gt`] - 1
-        ].join(','));
-        params.append('dist_to_group__lt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__lt`] + 1
-        ].join(','));
-      } else {
-        params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
-        params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);
-      }
-
-    });
+    appendFiltersInUse(params, filters, ranges);
 
     return params;
   }
 
   const {data, isInitialLoading, isFetching} = useQuery(
-    ["table", page, filters, sort, link],
+    ["table", page, filters, sort, dbTable],
     async () => {
       const params = getParams();
 
-      return await getPoints(params, region, link);
+      return await getPoints(params, region, dbTable);
     },
     {
       keepPreviousData: true,

src/modules/Table/useColumns.jsx

@@ -393,7 +393,7 @@ export const useColumns = (fields = [], key) => {
         showSorterTooltip: false,
       },
       ...fields,
-    ].filter(c => !!c);
+    ].filter(Boolean);
   }, [regions?.normalized, fields, fullScreen]);
 
   const [order, setOrder] = useLocalStorage(`${key}Order`, defaultColumns.map((column, index) => {
@@ -412,7 +412,7 @@ export const useColumns = (fields = [], key) => {
           defaultSortOrder: sort.includes('-') ? 'descend' : 'ascend',
         };
         return column;
-      }).filter(c => !!c);
+      }).filter(Boolean);
   }, [defaultColumns, order, fullScreen]);
 
   return {

src/utils.js

@@ -99,5 +99,24 @@ export const doesMatchFilter = (filters, ranges, feature) => {
   );
 };
 
+export const appendFiltersInUse = (params, filters, ranges) => {
+  RANGE_FILTERS_KEYS.map((filterKey) => {
+    if (!fieldHasChanged(filters, ranges, filterKey).result) return;
+    if (/d[0-9]/.test(filterKey)) {
+      params.append('dist_to_group__gt', [
+        filterKey.split('d')[1],
+        filters[`${filterKey}__gt`] - 1
+      ].join(','));
+      params.append('dist_to_group__lt', [
+        filterKey.split('d')[1],
+        filters[`${filterKey}__lt`] + 1
+      ].join(','));
+    } else {
+      params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
+      params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);
+    }
+  });
+}
+
 export const isNil = (value) =>
   value === undefined || value === null || value === "";