Add tables for other tabs

src/Map/Popup.jsx

@@ -3,8 +3,9 @@ import { Button, Col, Row } from "antd";
 import { twMerge } from "tailwind-merge";
 import { usePointSelection } from "../stores/usePointSelection";
 import { useEffect, useState } from "react";
-import { CATEGORIES } from "../config";
+import { CATEGORIES, MODES } from "../config";
 import { useClickedPointConfig } from "../stores/useClickedPointConfig";
+import { useMode } from "../stores/useMode";
 
 const popupConfig = [
   {
@@ -109,6 +110,7 @@ const PopupWrapper = ({ lat, lng, onClose, children }) => {
 const SingleFeaturePopup = ({ feature }) => {
   const { include, selection, exclude } = usePointSelection();
   const { setClickedPointConfig } = useClickedPointConfig();
+  const { mode } = useMode();
   const doesMatchFilter = feature.layer.id === "match-points";
   const featureId = feature.properties.location_id;
 
@@ -144,9 +146,16 @@ const SingleFeaturePopup = ({ feature }) => {
           );
         })}
       </div>
-      <Button type="text" className="mt-2 mx-auto" block onClick={handleSelect}>
+      {mode === MODES.INITIAL && (
-        {isSelected ? "Исключить из выборки" : "Добавить в выборку"}
+        <Button
-      </Button>
+          type="text"
+          className="mt-2 mx-auto"
+          block
+          onClick={handleSelect}
+        >
+          {isSelected ? "Исключить из выборки" : "Добавить в выборку"}
+        </Button>
+      )}
     </>
   );
 };

src/modules/Sidebar/InitialSidebar/CategoriesSelect.jsx

@@ -1,8 +1,8 @@
 import { Button } from "antd";
 import { twMerge } from "tailwind-merge";
-import { Title } from "../../components/Title";
+import { Title } from "../../../components/Title";
-import { useFilters } from "../../stores/useFilters";
+import { useFilters } from "../../../stores/useFilters";
-import { CATEGORIES } from "../../config";
+import { CATEGORIES } from "../../../config";
 
 const SelectItem = ({ name, isActive, onClick, disabled }) => {
   return (

src/modules/Sidebar/InitialSidebar/Filters.jsx

@@ -1,12 +1,14 @@
-import { RegionSelect } from "./RegionSelect";
+import { RegionSelect } from "../RegionSelect";
 import { CategoriesSelect } from "./CategoriesSelect";
 import { PredictionSlider } from "./PredictionSlider";
 import { useEffect, useState } from "react";
 import { Tooltip } from "antd";
-import { DISABLED_FILTER_TEXT } from "../../config";
+import { DISABLED_FILTER_TEXT, MODES } from "../../../config";
+import { useMode } from "../../../stores/useMode";
 
 export const Filters = ({ disabled }) => {
   const [hover, setHover] = useState(false);
+  const { mode } = useMode();
 
   useEffect(() => {
     const timer = setTimeout(() => setHover(false), 1500);
@@ -31,8 +33,12 @@ export const Filters = ({ disabled }) => {
     >
       <div className="space-y-5">
         <RegionSelect disabled={disabled} />
-        <CategoriesSelect disabled={disabled} />
+        {mode === MODES.INITIAL && (
-        <PredictionSlider disabled={disabled} />
+          <>
+            <CategoriesSelect disabled={disabled} />
+            <PredictionSlider disabled={disabled} />
+          </>
+        )}
       </div>
     </Tooltip>
   );

src/modules/Sidebar/InitialSidebar/PredictionSlider.jsx

@@ -1,7 +1,7 @@
-import { SliderComponent as Slider } from "../../components/SliderComponent";
+import { SliderComponent as Slider } from "../../../components/SliderComponent";
-import { useFilters } from "../../stores/useFilters";
+import { useFilters } from "../../../stores/useFilters";
 import { useQuery } from "@tanstack/react-query";
-import { api } from "../../api";
+import { api } from "../../../api";
 import { useEffect } from "react";
 
 export const PredictionSlider = ({ disabled }) => {

src/modules/Sidebar/InitialSidebar/TakeToWorkButton.jsx

@@ -1,10 +1,10 @@
 import { Alert, Button, Modal } from "antd";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { api } from "../../api";
+import { api } from "../../../api";
-import { useFilters } from "../../stores/useFilters";
+import { useFilters } from "../../../stores/useFilters";
-import { usePointSelection } from "../../stores/usePointSelection";
+import { usePointSelection } from "../../../stores/usePointSelection";
-import { STATUSES } from "../../config";
+import { STATUSES } from "../../../config";
-import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
+import { useUpdateLayerCounter } from "../../../stores/useUpdateLayerCounter";
 import { useState } from "react";
 
 export const TakeToWorkButton = () => {

src/modules/Sidebar/LayersVisibility.jsx

@@ -1,20 +1,26 @@
 import { Title } from "../../components/Title";
 import { Checkbox } from "antd";
 import { useLayersVisibility } from "../../stores/useLayersVisibility";
+import { useMode } from "../../stores/useMode";
+import { MODES } from "../../config";
 
 export const LayersVisibility = () => {
   const { toggleVisibility, isVisible } = useLayersVisibility();
+  const { mode } = useMode();
 
   return (
     <div>
       <Title text={"Слои"} className={"mb-1"} />
       <div className={"space-y-1 flex flex-col"}>
-        <Checkbox
+        {mode === MODES.INITIAL && (
-          onChange={() => toggleVisibility("points")}
+          <Checkbox
-          checked={isVisible.points}
+            onChange={() => toggleVisibility("points")}
-        >
+            checked={isVisible.points}
-          Локации к рассмотрению
+          >
-        </Checkbox>
+            Локации к рассмотрению
+          </Checkbox>
+        )}
+
         <Checkbox
           className={"!ml-0"}
           onChange={() => toggleVisibility("atd")}

src/modules/Sidebar/Sidebar.jsx

@@ -4,14 +4,17 @@ import {
   useHasManualEdits,
   usePointSelection,
 } from "../../stores/usePointSelection";
-import { TakeToWorkButton } from "./TakeToWorkButton";
+import { TakeToWorkButton } from "./InitialSidebar/TakeToWorkButton";
-import { Filters } from "./Filters";
+import { Filters } from "./InitialSidebar/Filters";
 import { ExportButton } from "./ExportButton";
 import { Header } from "./Header";
+import { useMode } from "../../stores/useMode";
+import { MODES } from "../../config";
 
 export const Sidebar = () => {
   const hasManualEdits = useHasManualEdits();
   const { reset: resetSelection } = usePointSelection();
+  const { mode } = useMode();
 
   return (
     <div className="absolute top-[20px] left-[20px] bg-white-background w-[320px] rounded-xl p-3 max-h-[calc(100%-40px)] overflow-y-auto z-10">
@@ -19,10 +22,12 @@ export const Sidebar = () => {
       <div className="space-y-5">
         <LayersVisibility />
         <Filters disabled={hasManualEdits} />
+
         <div>
           <ExportButton />
-          <TakeToWorkButton />
+          {mode === MODES.INITIAL && <TakeToWorkButton />}
-          {hasManualEdits ? (
+
+          {mode === MODES.INITIAL && hasManualEdits ? (
             <Button
               type="text"
               block

src/modules/Table/ApproveTable/ApproveTable.jsx

@@ -0,0 +1,54 @@
+import { Table } from "../Table";
+import { columns } from "../InitialTable/columns";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../../../api";
+import { useCallback, useState } from "react";
+import { PAGE_SIZE } from "../constants";
+import { STATUSES } from "../../../config";
+import { useMergeTableData } from "../useMergeTableData";
+
+export const ApproveTable = () => {
+  const [pageSize, setPageSize] = useState(PAGE_SIZE);
+  const [page, setPage] = useState(1);
+  const [selectedIds, setSelectedIds] = useState([]);
+  console.log(selectedIds);
+
+  const { data } = useQuery(["approve-points"], async () => {
+    const params = new URLSearchParams({
+      page,
+      page_size: pageSize,
+      "status[]": [STATUSES.approve, STATUSES.working],
+    });
+
+    const { data } = await api.get(
+      `/api/placement_points?${params.toString()}`
+    );
+
+    return data;
+  });
+
+  const { data: mergedData, isClickedPointLoading } = useMergeTableData(
+    data,
+    setPageSize
+  );
+
+  const handlePageChange = useCallback((page) => setPage(page), []);
+
+  const rowSelection = {
+    onChange: (selectedRowKeys) => {
+      setSelectedIds(selectedRowKeys);
+    },
+  };
+
+  return (
+    <Table
+      rowSelection={rowSelection}
+      data={mergedData}
+      onPageChange={handlePageChange}
+      page={page}
+      pageSize={pageSize}
+      isClickedPointLoading={isClickedPointLoading}
+      columns={columns}
+    />
+  );
+};

src/modules/Table/InitialTable/useInitialTableData.js

@@ -5,11 +5,12 @@ import { usePointSelection } from "../../../stores/usePointSelection";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../../../api";
 import { useMergeTableData } from "../useMergeTableData";
+import { STATUSES } from "../../../config";
 
 export const useInitialTableData = (page) => {
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const { filters } = useFilters();
-  const { prediction, status, categories, region } = filters;
+  const { prediction, categories, region } = filters;
   const { selection } = usePointSelection();
 
   const { data } = useQuery(
@@ -19,7 +20,7 @@ export const useInitialTableData = (page) => {
         page,
         page_size: pageSize,
         "prediction_current[]": prediction,
-        "status[]": status,
+        "status[]": [STATUSES.initial],
         "categories[]": categories,
         "included[]": [...selection.included],
       });

src/modules/Table/TableWrapper.jsx

@@ -1,13 +1,19 @@
 import { useMode } from "../../stores/useMode";
 import { MODES } from "../../config";
 import { InitialTable } from "./InitialTable/InitialTable";
+import { ApproveTable } from "./ApproveTable/ApproveTable";
+import { WorkingTable } from "./WorkingTable/WorkingTable";
 
 export const TableWrapper = () => {
   const { mode } = useMode();
 
-  if (mode === MODES.INITIAL) {
+  if (mode === MODES.APPROVE) {
-    return <InitialTable />;
+    return <ApproveTable />;
   }
 
-  return null;
+  if (mode === MODES.WORKING) {
+    return <WorkingTable />;
+  }
+
+  return <InitialTable />;
 };

src/modules/Table/WorkingTable/WorkingTable.jsx

@@ -0,0 +1,45 @@
+import { useCallback, useState } from "react";
+import { PAGE_SIZE } from "../constants";
+import { useQuery } from "@tanstack/react-query";
+import { STATUSES } from "../../../config";
+import { api } from "../../../api";
+import { useMergeTableData } from "../useMergeTableData";
+import { Table } from "../Table";
+import { columns } from "../InitialTable/columns";
+
+export const WorkingTable = () => {
+  const [pageSize, setPageSize] = useState(PAGE_SIZE);
+  const [page, setPage] = useState(1);
+
+  const { data } = useQuery(["working-points"], async () => {
+    const params = new URLSearchParams({
+      page,
+      page_size: pageSize,
+      "status[]": [STATUSES.working],
+    });
+
+    const { data } = await api.get(
+      `/api/placement_points?${params.toString()}`
+    );
+
+    return data;
+  });
+
+  const { data: mergedData, isClickedPointLoading } = useMergeTableData(
+    data,
+    setPageSize
+  );
+
+  const handlePageChange = useCallback((page) => setPage(page), []);
+
+  return (
+    <Table
+      data={mergedData}
+      onPageChange={handlePageChange}
+      page={page}
+      pageSize={pageSize}
+      isClickedPointLoading={isClickedPointLoading}
+      columns={columns}
+    />
+  );
+};

src/stores/useFilters.js

@@ -35,6 +35,11 @@ const store = (set) => ({
     set((state) => {
       state.filters.region = value;
     }),
+
+  setStatus: (newStatus) =>
+    set((state) => {
+      state.filters.status = newStatus;
+    }),
 });
 
 export const useFilters = create(immer(store));

src/stores/useMode.js

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { MODES } from "../config";
+import { MODES, STATUSES } from "../config";
+import { useFilters } from "./useFilters";
 
 const store = (set) => ({
   mode: MODES.INITIAL,
@@ -8,6 +9,18 @@ const store = (set) => ({
   setMode: (mode) => {
     set((state) => {
       state.mode = mode;
+      if (mode === MODES.INITIAL) {
+        useFilters.getState().setStatus([STATUSES.initial]);
+        return state;
+      }
+      if (mode === MODES.APPROVE) {
+        useFilters.getState().setStatus([STATUSES.approve, STATUSES.working]);
+        return state;
+      }
+      if (mode === MODES.WORKING) {
+        useFilters.getState().setStatus([STATUSES.working]);
+        return state;
+      }
     });
   },
 });