Separate all and filtered working points

src/Map/Layers/FilteredWorkingPoints.jsx

@@ -0,0 +1,64 @@
+import { Layer } from "react-map-gl";
+import { workingPointLayer } from "./layers-config";
+import { useLayersVisibility } from "../../stores/useLayersVisibility";
+import { STATUSES } from "../../config";
+import { useRegionFilterExpression } from "./useRegionFilterExpression";
+import { LAYER_IDS } from "./constants";
+import { useFilters } from "../../stores/useFilters";
+
+const statusExpression = ["==", ["get", "status"], STATUSES.working];
+
+export const FilteredWorkingPoints = () => {
+  const { isVisible } = useLayersVisibility();
+  const regionFilterExpression = useRegionFilterExpression();
+  const {
+    filters: { deltaTraffic, factTraffic, age },
+  } = useFilters();
+
+  const deltaExpression = [
+    [">=", ["get", "delta_current"], deltaTraffic[0]],
+    ["<=", ["get", "delta_current"], deltaTraffic[1]],
+  ];
+
+  const factExpression = [
+    [">=", ["get", "fact"], factTraffic[0]],
+    ["<=", ["get", "fact"], factTraffic[1]],
+  ];
+
+  const ageExpression = [
+    [">=", ["get", "age_day"], age[0]],
+    ["<=", ["get", "age_day"], age[1]],
+  ];
+
+  const filter = regionFilterExpression
+    ? [
+        "all",
+        statusExpression,
+        ...deltaExpression,
+        ...factExpression,
+        ...ageExpression,
+        regionFilterExpression,
+      ]
+    : [
+        "all",
+        statusExpression,
+        ...deltaExpression,
+        ...factExpression,
+        ...ageExpression,
+      ];
+
+  return (
+    <>
+      <Layer
+        {...workingPointLayer}
+        id={LAYER_IDS.filteredWorking}
+        source={"points"}
+        source-layer={"public.service_placementpoint"}
+        layout={{
+          visibility: isVisible[LAYER_IDS.filteredWorking] ? "visible" : "none",
+        }}
+        filter={filter}
+      />
+    </>
+  );
+};

src/Map/Layers/Points.jsx

@@ -4,6 +4,7 @@ import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
 import { InitialPoints } from "./InitialPoints";
 import { ApprovePoints } from "./ApprovePoints";
 import { WorkingPoints } from "./WorkingPoints";
+import { FilteredWorkingPoints } from "./FilteredWorkingPoints";
 
 export const Points = () => {
   const { updateCounter } = useUpdateLayerCounter();
@@ -21,6 +22,7 @@ export const Points = () => {
         <InitialPoints />
         <ApprovePoints />
         <WorkingPoints />
+        <FilteredWorkingPoints />
       </Source>
     </>
   );

src/Map/Layers/WorkingPoints.jsx

@@ -4,48 +4,16 @@ import { useLayersVisibility } from "../../stores/useLayersVisibility";
 import { STATUSES } from "../../config";
 import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
-import { useFilters } from "../../stores/useFilters";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.working];
 
 export const WorkingPoints = () => {
   const { isVisible } = useLayersVisibility();
   const regionFilterExpression = useRegionFilterExpression();
-  const {
-    filters: { deltaTraffic, factTraffic, age },
-  } = useFilters();
-
-  const deltaExpression = [
-    [">=", ["get", "delta_current"], deltaTraffic[0]],
-    ["<=", ["get", "delta_current"], deltaTraffic[1]],
-  ];
-
-  const factExpression = [
-    [">=", ["get", "fact"], factTraffic[0]],
-    ["<=", ["get", "fact"], factTraffic[1]],
-  ];
-
-  const ageExpression = [
-    [">=", ["get", "age_day"], age[0]],
-    ["<=", ["get", "age_day"], age[1]],
-  ];
 
   const filter = regionFilterExpression
-    ? [
-        "all",
-        statusExpression,
-        ...deltaExpression,
-        ...factExpression,
-        ...ageExpression,
-        regionFilterExpression,
-      ]
-    : [
-        "all",
-        statusExpression,
-        ...deltaExpression,
-        ...factExpression,
-        ...ageExpression,
-      ];
+    ? ["all", statusExpression, regionFilterExpression]
+    : ["all", statusExpression];
 
   return (
     <>

src/Map/Layers/constants.js

@@ -4,6 +4,7 @@ export const LAYER_IDS = {
   "initial-unmatch": "initial-unmatch-points",
   approve: "approve-points",
   working: "working-points",
+  filteredWorking: "filtered-working-points",
   cancelled: "cancelled-points",
   atd: "atd",
 };

src/Map/LayersControl/LayersVisibility.jsx

@@ -1,9 +1,6 @@
 import { Title } from "../../components/Title";
-import { Checkbox } from "antd";
 import { useLayersVisibility } from "../../stores/useLayersVisibility";
 import { useMode } from "../../stores/useMode";
-import { MODES } from "../../config";
-import { LAYER_IDS } from "../Layers/constants";
 
 export const LayersVisibility = () => {
   const { toggleVisibility, isVisible } = useLayersVisibility();
@@ -22,17 +19,17 @@ export const LayersVisibility = () => {
         {/*  </Checkbox>*/}
         {/*)}*/}
 
-        {mode === MODES.WORKING && (
-          <>
-            <Checkbox
-              className={"!ml-0"}
-              onChange={() => toggleVisibility(LAYER_IDS.working)}
-              checked={isVisible[LAYER_IDS.working]}
-            >
-              Работает
-            </Checkbox>
-          </>
-        )}
+        {/*{mode === MODES.WORKING && (*/}
+        {/*  <>*/}
+        {/*    <Checkbox*/}
+        {/*      className={"!ml-0"}*/}
+        {/*      onChange={() => toggleVisibility(LAYER_IDS.working)}*/}
+        {/*      checked={isVisible[LAYER_IDS.working]}*/}
+        {/*    >*/}
+        {/*      Работает*/}
+        {/*    </Checkbox>*/}
+        {/*  </>*/}
+        {/*)}*/}
       </div>
     </div>
   );

src/config.js

@@ -33,16 +33,7 @@ export const MODE_TO_STATUS_MAPPER = {
 };
 
 export const MODE_TO_LAYER_VISIBILITY_MAPPER = {
-  [MODES.INITIAL]: {
-    visible: [LAYER_IDS.initial],
-    invisible: [LAYER_IDS.approve, LAYER_IDS.working],
-  },
-  [MODES.APPROVE_WORKING]: {
-    visible: [LAYER_IDS.approve, LAYER_IDS.working],
-    invisible: [LAYER_IDS.initial],
-  },
-  [MODES.WORKING]: {
-    visible: [LAYER_IDS.working],
-    invisible: [LAYER_IDS.initial, LAYER_IDS.approve],
-  },
+  [MODES.INITIAL]: [LAYER_IDS.initial],
+  [MODES.APPROVE_WORKING]: [LAYER_IDS.approve, LAYER_IDS.working],
+  [MODES.WORKING]: [LAYER_IDS.filteredWorking],
 };

src/stores/useLayersVisibility.js

@@ -6,6 +6,8 @@ const INITIAL_STATE = {
   [LAYER_IDS.initial]: true,
   [LAYER_IDS.approve]: false,
   [LAYER_IDS.working]: false,
+  [LAYER_IDS.filteredWorking]: false,
+  [LAYER_IDS.cancelled]: false,
 };
 
 const store = (set) => ({
@@ -16,12 +18,15 @@ const store = (set) => ({
       state.isVisible[layerId] = !state.isVisible[layerId];
     }),
 
-  setLayersVisibility: (config) =>
+  setLayersVisibility: (visibleLayerIds) =>
     set((state) => {
-      config.visible.forEach((layerId) => {
+      visibleLayerIds.forEach((layerId) => {
         state.isVisible[layerId] = true;
       });
-      config.invisible.forEach((layerId) => {
+      const invisibleLayersIds = Object.keys(state.isVisible).filter(
+        (l) => !visibleLayerIds.includes(l)
+      );
+      invisibleLayersIds.forEach((layerId) => {
         state.isVisible[layerId] = false;
       });
     }),