Fix filters

src/Map/Layers/layers-config.js

@@ -1,7 +1,7 @@
 const POINT_SIZE = 5;
 const UNMATCH_POINT_SIZE = 3;
 
-export const INITIAL_COLOR = "#001cd2";
+export const INITIAL_COLOR = "#0572c2";
 export const CANCELLED_COLOR = "#CC2222";
 export const APPROVE_COLOR = "#ff7d00";
 export const WORKING_COLOR = "#006e01";
@@ -32,7 +32,7 @@ const getPointConfig = (color = INITIAL_COLOR, size = POINT_SIZE) => {
         0,
         9,
         2,
-        11,
+        13,
         size,
       ],
     },

src/Map/Layers/useRegionFilterExpression.js

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
 const REGION_FIELD_MAPPER = {
-  ao: "okrug_id",
+  ao: "district_id",
-  rayon: "rayon_id",
+  rayon: "area_id",
 };
 
 export const useRegionFilterExpression = (region) => {

src/Map/MapComponent.jsx

@@ -116,12 +116,10 @@ export const MapComponent = () => {
           >
             <Map
               mapLib={maplibregl}
-              // mapStyle={immutableVoyagerStyle}
-              // style={{ width: "100%", height: "100%" }}
               initialViewState={{
                 latitude: 55.7558,
                 longitude: 37.6173,
-                zoom: 9,
+                zoom: 12,
               }}
               dragRotate={false}
               ref={mapRef}

src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx

@@ -66,7 +66,7 @@ export const PendingPointsFilters = ({ fullRange }) => {
               onChange={setRegion}
             />
             <CategoriesSelect disabled={hasManualEdits} />
-            <PredictionSlider disabled={hasManualEdits} fullRange={fullRange} />
+            <PredictionSlider disabled={hasManualEdits} />
           </div>
 
           {hasActiveFilters && (

src/modules/Sidebar/PendingPointsFilters/PredictionSlider.jsx

@@ -4,20 +4,44 @@ import {
   INITIAL,
   usePendingPointsFilters,
 } from "../../../stores/usePendingPointsFilters";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../../../api.js";
+import { STATUSES } from "../../../config.js";
+import { Spin } from "antd";
 
-export const PredictionSlider = ({ disabled, fullRange }) => {
+const useGetPredictionRange = () => {
+  return useQuery(
+    ["prediction-max-min"],
+    async () => {
+      const { data } = await api.get(
+        `/api/placement_points/filters?status[]=${STATUSES.pending}`
+      );
+
+      return data;
+    },
+    {
+      select: (data) => {
+        return [data.prediction_current[0], data.prediction_current[1]];
+      },
+    }
+  );
+};
+
+export const PredictionSlider = ({ disabled }) => {
   const {
     filters: { prediction },
     setPrediction,
   } = usePendingPointsFilters();
 
+  const { data: fullRange, isInitialLoading } = useGetPredictionRange();
+
   const handleAfterChange = (range) => setPrediction(range);
 
   useEffect(() => {
     if (!fullRange) return;
 
-    const min = fullRange.prediction[0];
+    const min = fullRange[0];
-    const max = fullRange.prediction[1];
+    const max = fullRange[1];
 
     const shouldSetFullRange =
       prediction[0] === INITIAL.prediction[0] &&
@@ -28,13 +52,21 @@ export const PredictionSlider = ({ disabled, fullRange }) => {
     }
   }, [fullRange]);
 
+  if (isInitialLoading) {
+    return (
+      <div className={"flex justify-center items-center"}>
+        <Spin />
+      </div>
+    );
+  }
+
   return (
     <Slider
       title={"Прогнозный трафик"}
       value={prediction}
       onAfterChange={handleAfterChange}
-      min={fullRange?.prediction[0]}
+      min={fullRange[0]}
-      max={fullRange?.prediction[1]}
+      max={fullRange[1]}
       range
       disabled={disabled}
     />

src/modules/Sidebar/Sidebar.jsx

@@ -33,7 +33,8 @@ const useGetDataRange = () => {
 export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
   const { mode } = useMode();
 
-  const { data: filtersValueRange } = useGetDataRange();
+  const { data: filtersValueRange, isInitialLoading: isFullRangeLoading } =
+    useGetDataRange();
 
   const getFilters = () => {
     if (mode === MODES.PENDING) {
@@ -44,7 +45,12 @@ export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
       return <OnApprovalPointsFilters />;
     }
 
-    return <WorkingPointsFilters fullRange={filtersValueRange} />;
+    return (
+      <WorkingPointsFilters
+        fullRange={filtersValueRange}
+        isFullRangeLoading={isFullRangeLoading}
+      />
+    );
   };
 
   return (

src/modules/Sidebar/WorkingPointsFilters/AgeSlider.jsx

@@ -14,8 +14,6 @@ export const AgeSlider = ({ fullRange }) => {
   const handleAfterChange = (range) => setAge(range);
 
   useEffect(() => {
-    if (!fullRange) return;
-
     const min = fullRange.age[0];
     const max = fullRange.age[1];
 
@@ -29,8 +27,8 @@ export const AgeSlider = ({ fullRange }) => {
       title={"Зрелость постамата, дней"}
       value={age}
       onAfterChange={handleAfterChange}
-      min={fullRange?.age[0]}
+      min={fullRange.age[0]}
-      max={fullRange?.age[1]}
+      max={fullRange.age[1]}
       range
     />
   );

src/modules/Sidebar/WorkingPointsFilters/DeltaSlider.jsx

@@ -14,8 +14,6 @@ export const DeltaTrafficSlider = ({ fullRange }) => {
   const handleAfterChange = (range) => setDeltaTraffic(range);
 
   useEffect(() => {
-    if (!fullRange) return;
-
     const min = fullRange.deltaTraffic[0];
     const max = fullRange.deltaTraffic[1];
 
@@ -32,8 +30,8 @@ export const DeltaTrafficSlider = ({ fullRange }) => {
       title={"Расхождение факта с прогнозом, %"}
       value={deltaTraffic}
       onAfterChange={handleAfterChange}
-      min={fullRange?.deltaTraffic[0]}
+      min={fullRange.deltaTraffic[0]}
-      max={fullRange?.deltaTraffic[1]}
+      max={fullRange.deltaTraffic[1]}
       range
       showZeroMark={true}
     />

src/modules/Sidebar/WorkingPointsFilters/FactTrafficSlider.jsx

@@ -14,8 +14,6 @@ export const FactTrafficSlider = ({ fullRange }) => {
   const handleAfterChange = (range) => setFactTraffic(range);
 
   useEffect(() => {
-    if (!fullRange) return;
-
     const min = fullRange.factTraffic[0];
     const max = fullRange.factTraffic[1];
 
@@ -32,8 +30,8 @@ export const FactTrafficSlider = ({ fullRange }) => {
       title={"Фактический трафик"}
       value={factTraffic}
       onAfterChange={handleAfterChange}
-      min={fullRange?.fact[0]}
+      min={fullRange.fact[0]}
-      max={fullRange?.fact[1]}
+      max={fullRange.fact[1]}
       range
     />
   );

src/modules/Sidebar/WorkingPointsFilters/WorkingPointsFilters.jsx

@@ -5,10 +5,13 @@ import { FactTrafficSlider } from "./FactTrafficSlider";
 import { AgeSlider } from "./AgeSlider";
 import { ClearFiltersButton } from "../../../components/ClearFiltersButton";
 import { getDynamicActiveFilters } from "../utils";
+import { Spin } from "antd";
 
-export const WorkingPointsFilters = ({ fullRange }) => {
+export const WorkingPointsFilters = ({ fullRange, isFullRangeLoading }) => {
   const { filters, setRegion, clear } = useWorkingPointsFilters();
 
+  console.log(fullRange);
+
   const activeDynamicFilters = getDynamicActiveFilters(filters, fullRange, [
     "deltaTraffic",
     "factTraffic",
@@ -27,10 +30,19 @@ export const WorkingPointsFilters = ({ fullRange }) => {
     <div>
       <RegionSelect value={filters.region?.id} onChange={setRegion} />
       <div className={"space-y-12 mt-4"}>
-        <DeltaTrafficSlider fullRange={fullRange} />
+        {isFullRangeLoading ? (
-        <FactTrafficSlider fullRange={fullRange} />
+          <div className={"flex justify-center items-center"}>
-        <AgeSlider fullRange={fullRange} />
+            <Spin />
+          </div>
+        ) : (
+          <>
+            <DeltaTrafficSlider fullRange={fullRange} />
+            <FactTrafficSlider fullRange={fullRange} />
+            <AgeSlider fullRange={fullRange} />
+          </>
+        )}
       </div>
+
       {hasActiveFilters && <ClearFiltersButton onClick={handleClear} />}
     </div>
   );

src/modules/Table/WorkingTable/columns.js

@@ -7,15 +7,15 @@ export const columns = [
   },
   {
     title: "Район",
-    dataIndex: "rayon",
+    dataIndex: "area",
-    key: "rayon",
+    key: "area",
     width: "120px",
     ellipsis: true,
   },
   {
     title: "Округ",
-    dataIndex: "okrug",
+    dataIndex: "district",
-    key: "okrug",
+    key: "district",
     width: "120px",
     ellipsis: true,
   },