stage two update

src/Map/Layers/Points.jsx

@@ -6,9 +6,14 @@ import { OnApprovalPoints } from "./OnApprovalPoints";
 import { WorkingPoints } from "./WorkingPoints";
 import { FilteredWorkingPoints } from "./FilteredWorkingPoints";
 import { CancelledPoints } from "./CancelledPoints";
+import {useEffect} from "react";
 
 export const Points = () => {
-  const { updateCounter } = useUpdateLayerCounter();
+  const { updateCounter, toggleUpdateCounter } = useUpdateLayerCounter();
+  const layer = getSourceLayerName();
+  useEffect(() => {
+    toggleUpdateCounter();
+  }, [layer]);
 
   return (
     <>
@@ -17,7 +22,7 @@ export const Points = () => {
         type="vector"
         key={`points-${updateCounter}`}
         tiles={[
-          `${BASE_URL}/martin/${getSourceLayerName()}/{z}/{x}/{y}.pbf`,
+          `${BASE_URL}/martin/${layer}/{z}/{x}/{y}.pbf`,
         ]}
       >
         <PendingPoints />

src/Map/MapComponent.jsx

@@ -22,13 +22,12 @@ import { LAYER_IDS } from "./Layers/constants";
 import { Header } from "./Header";
 import { icons } from "../icons/icons-config";
 import { LastMLRun } from "./LastMLRun";
-import { useGetPendingPointsRange, useOtherGroups, usePostamatesAndPvzGroups } from "../api.js";
+import { useOtherGroups, usePostamatesAndPvzGroups } from "../api.js";
 import { getFilteredGroups, transliterate } from "../utils.js";
 import {
   CATEGORIES_MAP,
   RANGE_FILTERS_KEYS,
-  RANGE_FILTERS_MAP,
-  usePendingPointsFilters
+  RANGE_FILTERS_MAP
 } from "../stores/usePendingPointsFilters.js";
 
 export const MapComponent = () => {
@@ -41,13 +40,6 @@ export const MapComponent = () => {
   const { mode } = useMode();
   const { tableState, openTable } = useTable();
 
-  const { ranges, setRanges } = usePendingPointsFilters();
-  const { data: fullRange } = useGetPendingPointsRange();
-
-  useEffect(() => {
-    if (fullRange) setRanges({...ranges, ...fullRange});
-  }, [fullRange]);
-
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
   const { data: otherGroups } = useOtherGroups();
 

src/Map/Popup/Popup.jsx

@@ -53,7 +53,6 @@ const MultipleFeaturesPopup = ({ features, points }) => {
         const point = points.find(p => p.id = featureId);
         const isSelected = (doesMatchFilter(filters, ranges, feature) && !selection.excluded.has(featureId)) ||
           selection.included.has(featureId);
-        console.log(isSelected, doesMatchFilter(filters, ranges, feature));
         const handleSelect = () => {
           if (isSelected) {
             exclude(featureId);

src/api.js

@@ -243,20 +243,17 @@ export const useLastMLRun = () => {
   );
 }
 
-export const useGetPendingPointsRange = () => {
-  const link = getApiName();
-
+export const useGetPendingPointsRange = (link) => {
   return useQuery(
     ["prediction-max-min", link],
     async () => {
-      const { data } = await api.get(
+      const { data, isInitialLoading, isFetching } = await api.get(
         `/api/${link}/filters?status[]=${STATUSES.pending}`
       );
-
-      return data;
+      return {data, isLoading: isInitialLoading || isFetching};
     },
     {
-      select: (data) => {
+      select: ({data, isLoading}) => {
         const distToGroupsArr = data.dist_to_groups.map((groupRange) => {
           return {
             [`d${groupRange.group_id}`]:  [Math.floor(groupRange.dist[0]), Math.min(Math.ceil(groupRange.dist[1]), 4000)],
@@ -271,9 +268,12 @@ export const useGetPendingPointsRange = () => {
         }).filter(item => !!item);
         const ranges = Object.assign({}, ...rangesArr);
         return {
-          prediction: data.prediction_current,
+          fullRange: {
+            prediction: data.prediction_current,
           ...ranges,
           ...distToGroups
+          },
+          isLoading: isLoading
         };
       },
     }

src/modules/ImportMode/LoadingStage.jsx

@@ -17,8 +17,8 @@ export const LoadingStage = ({setFileId}) => {
     };
     try {
       const {id} = await uploadPointsFile(file, config);
-      setFileId(id);
       onSuccess("Ok");
+      setFileId(id);
     } catch (e) {
       //
     }

src/modules/ImportMode/OnLoadModal.jsx

@@ -6,7 +6,7 @@ import { ReportStage } from "./ReportStage.jsx";
 import { CheckCircleOutlined, LoadingOutlined } from "@ant-design/icons";
 
 export const OnLoadModal = ({onClose, isOpened}) => {
-  const [fileId, setFileId] = useState(31);
+  const [fileId, setFileId] = useState();
   const [report, setReport] = useState();
   const [isImporting, setIsImporting] = useState(false);
   const [isReportStage, setIsReportStage] = useState(false);

src/modules/ImportMode/SidebarButtons.jsx

@@ -4,9 +4,10 @@ import { ImportOutlined } from "@ant-design/icons";
 import { OnLoadModal } from "./OnLoadModal.jsx";
 import { useState } from "react";
 import { AddPointsModal } from "./AddPointsModal.jsx";
+import { MODES } from "../../config.js";
 
 export const ImportModeSidebarButtons = () => {
-  const {isImportMode, setImportMode} = useMode();
+  const { mode, isImportMode, setImportMode } = useMode();
   const [loadModalOpen, setLoadModalOpen] = useState(false);
   const [addPointsModalOpen, setAddPointsModalOpen] = useState(false);
 
@@ -45,7 +46,7 @@ export const ImportModeSidebarButtons = () => {
     );
   }
 
-  return (
+  return mode === MODES.PENDING && (
     <div className="flex flex-col flex-0 border-t-[1px] border-b-[1px]">
       <Button type="default" onClick={onImport}>
         <ImportOutlined />

src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx

@@ -1,5 +1,5 @@
 import { DISABLED_FILTER_TEXT } from "../../../config";
-import { Button, Tooltip } from "antd";
+import {Button, Spin, Tooltip} from "antd";
 import { SelectedLocations } from "./SelectedLocations";
 import { TakeToWorkButton } from "./TakeToWorkButton";
 import { RegionSelect } from "../../../components/RegionSelect";
@@ -13,13 +13,30 @@ import {
 import {RANGE_FILTERS_KEYS, usePendingPointsFilters} from "../../../stores/usePendingPointsFilters";
 import { ClearFiltersButton } from "../../../components/ClearFiltersButton";
 import { getDynamicActiveFilters } from "../utils";
-import { useCanEdit } from "../../../api";
+import { getApiName, 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 } = usePendingPointsFilters();
+  const { ranges, filters, setRegion, setFilterWithKey, setPrediction, setCategories, setRanges } = usePendingPointsFilters();
+  const link = getApiName();
+  const { data } = useGetPendingPointsRange(link);
+
+  useEffect(() => {
+    const newRanges = data?.fullRange;
+    if (!newRanges) return;
+    RANGE_FILTERS_KEYS.map((key) => {
+      const gtChanged = ranges[key][0] !== newRanges[key][0];
+      const ltChanged = ranges[key][1] !== newRanges[key][1];
+
+      if (gtChanged || ltChanged) setFilterWithKey(newRanges[key], key);
+    });
+    const gtChanged = ranges.prediction[0] !== newRanges.prediction[0];
+    const ltChanged = ranges.prediction[1] !== newRanges.prediction[1];
+    if (gtChanged || ltChanged) setPrediction(newRanges.prediction);
+    setRanges({...ranges, ...newRanges});
+  }, [data]);
 
   const [isSelectionEmpty, setIsSelectionEmpty] = useState(false);
 
@@ -84,12 +101,16 @@ export const PendingPointsFilters = () => {
               onChange={setRegion}
             />
             <CategoriesSelect disabled={hasManualEdits} />
-            <PredictionSlider
-              disabled={hasManualEdits}
-              fullRange={ranges}
-              isLoading={false}
-            />
-            <AdvancedFiltersWrapper />
+            {data?.isLoading ? <Spin /> :
+              <>
+                <PredictionSlider
+                  disabled={hasManualEdits}
+                  fullRange={ranges}
+                  isLoading={false}
+                />
+                <AdvancedFiltersWrapper />
+              </>
+            }
           </div>
 
           {hasActiveFilters && (

src/modules/Table/PendingTable/PendingTable.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, {useCallback, useMemo, useState} from "react";
 import { Table } from "../Table";
 import { usePointSelection } from "../../../stores/usePointSelection";
 import { useClickedPointConfig } from "../../../stores/useClickedPointConfig";
@@ -9,6 +9,23 @@ import { useCanEdit } from "../../../api";
 import { useColumns } from "../useColumns.jsx";
 import { PAGE_SIZE } from "../constants.js";
 import { usePopup } from "../../../stores/usePopup.js";
+import { useMode } from "../../../stores/useMode.js";
+
+const MATCHING_STATUS = {
+  Unmatched: {
+    name: 'Новая',
+    color: '#52c41a'
+  },
+  Error: {
+    name: 'Ошибка',
+    color: '#f5222d'
+  },
+  Matched: {
+    name: 'Совпадение',
+    color: '#2f54eb'
+  },
+
+}
 
 const tableKey = 'pendingTable';
 export const PendingTable = ({ fullWidth }) => {
@@ -16,7 +33,29 @@ export const PendingTable = ({ fullWidth }) => {
   const { clickedPointConfig, setClickedPointConfig } = useClickedPointConfig();
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
-  const {columns, orderColumns, sort, setSort} = useColumns([], tableKey);
+  const { isImportMode } = useMode();
+  const fields = useMemo(() => {
+    return isImportMode ? [{
+      title: "Результат геокодирования",
+      dataIndex: "matching_status",
+      key: "matching_status",
+      width: "120px",
+      ellipsis: true,
+      sorter: true,
+      showSorterTooltip: false,
+      render: (_, record) => {
+        if (!record.matching_status) return;
+        const name = MATCHING_STATUS[record.matching_status].name;
+        const color = MATCHING_STATUS[record.matching_status].color;
+        return (
+          <div className={`bg-[${color}] bg-opacity-25 text-[${color}] rounded-md px-2 py-1 text-center border-solid border-[2px] border-[${color}]`}>
+            {name}
+          </div>
+        );
+      },
+    }] : [];
+  }, [isImportMode])
+  const {columns, orderColumns, sort, setSort} = useColumns(fields, tableKey);
   const { setPopup } = usePopup();
 
   const onSort = (sortDirection, key) => {

src/modules/Table/TableSettings.jsx

@@ -38,6 +38,7 @@ export const TableSettings = ({orderColumns}) => {
               <div className="flex flex-col" {...provided.droppableProps} ref={provided.innerRef}>
                 {columnsList.map((item, index) => {
                   const num = item.position;
+                  if (!orderColumns.defaultColumns[num]) return;
                   return (
                     <Draggable key={`list-${num}`} draggableId={`list-${num}`} index={index}>
                       {(provided) => (

src/modules/Table/useColumns.jsx

@@ -7,21 +7,12 @@ import { AddressSearch } from "../../Map/AddressSearch.jsx";
 import { SearchOutlined } from "@ant-design/icons";
 import { useTable } from "../../stores/useTable.js";
 import useLocalStorage from "../../hooks/useLocalStorage.js";
-
-const DEFAULT_LENGTH = 39;
 export const useColumns = (fields = [], key) => {
   const { data: regions } = useGetRegions();
   const {
     tableState: { fullScreen },
   } = useTable();
 
-  const [order, setOrder] = useLocalStorage(`${key}Order`, [...Array(DEFAULT_LENGTH).keys()].map((position) => {
-    return {
-      position,
-      show: true,
-    }
-  }));
-
   const [sort, setSort] = useLocalStorage(`${key}Sort`, null);
 
   const defaultColumns = useMemo(() => {
@@ -402,9 +393,17 @@ export const useColumns = (fields = [], key) => {
         showSorterTooltip: false,
       },
       ...fields,
-    ];
+    ].filter(c => !!c);
   }, [regions?.normalized, fields, fullScreen]);
 
+  const [order, setOrder] = useLocalStorage(`${key}Order`, defaultColumns.map((column, index) => {
+    return {
+      key: column.key,
+      position: index,
+      show: true,
+    }
+  }));
+
   const columns = useMemo(() => {
     return order.flatMap((item) => !item.show ? [] : defaultColumns[item.position])
       .map((column) => {
@@ -413,7 +412,7 @@ export const useColumns = (fields = [], key) => {
           defaultSortOrder: sort.includes('-') ? 'descend' : 'ascend',
         };
         return column;
-      });
+      }).filter(c => !!c);
   }, [defaultColumns, order, fullScreen]);
 
   return {