Update status from approve table

src/Map/MapComponent.jsx

@@ -12,12 +12,21 @@ import { useClickedPointConfig } from "../stores/useClickedPointConfig";
 import { Legend } from "../modules/Sidebar/Legend";
 import { AddressSearch } from "../modules/Sidebar/AddressSearch";
 import { TableWrapper } from "../modules/Table/TableWrapper";
+import { useFilters } from "../stores/useFilters";
+import { useMode } from "../stores/useMode";
+import { MODE_TO_STATUS_MAPPER } from "../config";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
   const mapContainerRef = useRef(null);
   const { popup, setPopup } = usePopup();
   const { setClickedPointConfig } = useClickedPointConfig();
+  const { setStatus } = useFilters();
+  const { mode } = useMode();
+
+  useEffect(() => {
+    setStatus(MODE_TO_STATUS_MAPPER[mode]);
+  }, [mode]);
 
   const handleClick = (event) => {
     if (!event.features) {

src/Map/Popup.jsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { CATEGORIES, MODES } from "../config";
 import { useClickedPointConfig } from "../stores/useClickedPointConfig";
 import { useMode } from "../stores/useMode";
+import { useUpdateLayerCounter } from "../stores/useUpdateLayerCounter";
 
 const popupConfig = [
   {
@@ -114,6 +115,8 @@ const SingleFeaturePopup = ({ feature }) => {
   const doesMatchFilter = feature.layer.id === "match-points";
   const featureId = feature.properties.location_id;
 
+  const { updateCounter } = useUpdateLayerCounter();
+
   useEffect(() => setClickedPointConfig(featureId, doesMatchFilter), [feature]);
 
   const isResidential = feature.properties.category === CATEGORIES.residential;
@@ -134,7 +137,7 @@ const SingleFeaturePopup = ({ feature }) => {
 
   return (
     <>
-      <div>
+      <div key={`popup-${updateCounter}`}>
         {config.map(({ field, name }) => {
           return (
             <Row className={twMerge("p-1")} key={field}>

src/config.js

@@ -22,3 +22,9 @@ export const MODES = {
   APPROVE: "APPROVE",
   WORKING: "WORKING",
 };
+
+export const MODE_TO_STATUS_MAPPER = {
+  [MODES.INITIAL]: [STATUSES.initial],
+  [MODES.APPROVE]: [STATUSES.approve, STATUSES.working],
+  [MODES.WORKING]: [STATUSES.working],
+};

src/hooks/useUpdateStatus.js

@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+import { api } from "../api";
+import { useUpdateLayerCounter } from "../stores/useUpdateLayerCounter";
+
+export const useUpdateStatus = ({ onSuccess }) => {
+  const { toggleUpdateCounter } = useUpdateLayerCounter();
+
+  return useMutation({
+    mutationFn: (params) => {
+      return api.put(
+        `/api/placement_points/update_status?${params.toString()}`
+      );
+    },
+    onSuccess: () => {
+      toggleUpdateCounter();
+      onSuccess();
+    },
+  });
+};

src/modules/Sidebar/InitialSidebar/TakeToWorkButton.jsx

@@ -1,44 +1,36 @@
 import { Alert, Button, Modal } from "antd";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { api } from "../../../api";
+import { useQueryClient } from "@tanstack/react-query";
 import { useFilters } from "../../../stores/useFilters";
 import { usePointSelection } from "../../../stores/usePointSelection";
 import { STATUSES } from "../../../config";
-import { useUpdateLayerCounter } from "../../../stores/useUpdateLayerCounter";
 import { useState } from "react";
+import { useUpdateStatus } from "../../../hooks/useUpdateStatus";
 
 export const TakeToWorkButton = () => {
   const { filters } = useFilters();
   const { prediction, categories } = filters;
   const { selection } = usePointSelection();
   const queryClient = useQueryClient();
-  const { toggleUpdateCounter } = useUpdateLayerCounter();
 
   const [isSuccessModalOpened, setIsSuccessModalOpened] = useState(false);
 
-  const { mutate } = useMutation({
-    mutationFn: () => {
-      const params = new URLSearchParams({
-        status: STATUSES.approve,
-        "prediction_current[]": prediction,
-        "categories[]": categories,
-        "included[]": [...selection.included],
-        "excluded[]": [...selection.excluded],
-      });
-
-      return api.put(
-        `/api/placement_points/update_status?${params.toString()}`
-      );
-    },
+  const { mutate: updateStatus } = useUpdateStatus({
     onSuccess: () => {
       queryClient.invalidateQueries(["table", 1, filters]);
-      toggleUpdateCounter();
       setIsSuccessModalOpened(true);
     },
   });
 
   const takeToWork = () => {
-    mutate();
+    const params = new URLSearchParams({
+      status: STATUSES.approve,
+      "prediction_current[]": prediction,
+      "categories[]": categories,
+      "included[]": [...selection.included],
+      "excluded[]": [...selection.excluded],
+    });
+
+    updateStatus(params);
   };
 
   return (

src/modules/Table/ApproveTable/ApproveTable.jsx

@@ -1,17 +1,105 @@
 import { Table } from "../Table";
 import { columns } from "../InitialTable/columns";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } 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";
+import { Button, Select } from "antd";
+import { useUpdateStatus } from "../../../hooks/useUpdateStatus";
+
+const statusOptions = [
+  { label: STATUSES.approve, value: STATUSES.approve },
+  { label: STATUSES.working, value: STATUSES.working },
+];
+
+const StatusSelect = ({ value, onChange, disabled }) => {
+  const handleClick = (e) => e.stopPropagation();
+
+  const handleChange = (value) => {
+    onChange(value);
+  };
+
+  return (
+    <Select
+      style={{
+        width: 250,
+      }}
+      value={value}
+      onChange={handleChange}
+      options={statusOptions}
+      disabled={disabled}
+      placeholder="Выберите статус"
+      onClick={handleClick}
+    />
+  );
+};
+
+const ChangeStatusButton = ({ selectedIds, selectedStatus }) => {
+  const queryClient = useQueryClient();
+
+  const { mutate: updateStatus } = useUpdateStatus({
+    onSuccess: () => {
+      queryClient.invalidateQueries(["approve-points"]);
+    },
+  });
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+
+    const params = new URLSearchParams({
+      status: selectedStatus,
+      "location_ids[]": selectedIds,
+    });
+
+    updateStatus(params);
+  };
+
+  return (
+    <Button type="primary" onClick={handleClick}>
+      Обновить статус
+    </Button>
+  );
+};
+
+const Header = ({ selectedIds, onClearSelected }) => {
+  const [status, setStatus] = useState(STATUSES.approve);
+
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClearSelected();
+  };
+
+  return (
+    <div className={"flex items-center w-full justify-between"}>
+      <div className={"flex items-center gap-x-4"}>
+        <span className="py-[5px]">Таблица атрибутов</span>
+        {selectedIds.length > 0 && (
+          <>
+            <StatusSelect value={status} onChange={setStatus} />
+            <ChangeStatusButton
+              selectedIds={selectedIds}
+              selectedStatus={status}
+            />
+          </>
+        )}
+      </div>
+      {selectedIds.length > 0 && (
+        <Button type="text" onClick={handleClear}>
+          Очистить все
+        </Button>
+      )}
+    </div>
+  );
+};
 
 export const ApproveTable = () => {
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const [page, setPage] = useState(1);
   const [selectedIds, setSelectedIds] = useState([]);
-  console.log(selectedIds);
+
+  const clearSelected = () => setSelectedIds([]);
 
   const { data } = useQuery(["approve-points"], async () => {
     const params = new URLSearchParams({
@@ -35,13 +123,16 @@ export const ApproveTable = () => {
   const handlePageChange = useCallback((page) => setPage(page), []);
 
   const rowSelection = {
-    onChange: (selectedRowKeys) => {
-      setSelectedIds(selectedRowKeys);
-    },
+    selectedRowKeys: selectedIds,
+    onChange: (selectedRowKeys) => setSelectedIds(selectedRowKeys),
+    hideSelectAll: true,
   };
 
   return (
     <Table
+      header={
+        <Header selectedIds={selectedIds} onClearSelected={clearSelected} />
+      }
       rowSelection={rowSelection}
       data={mergedData}
       onPageChange={handlePageChange}

src/modules/Table/Table.css

@@ -58,3 +58,11 @@
 .ant-table-tbody > tr.ant-table-row.scroll-row:hover > td {
   @apply bg-lime-200;
 }
+
+.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  @apply !items-center;
+}
+
+.ant-collapse-header-text {
+  @apply flex items-center;
+}

src/modules/Table/Table.jsx

@@ -5,6 +5,7 @@ import parse from "wellknown";
 import { useMap } from "react-map-gl";
 import { useClickedPointConfig } from "../../stores/useClickedPointConfig";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { twMerge } from "tailwind-merge";
 
 export const Table = React.memo(
   ({
@@ -16,6 +17,7 @@ export const Table = React.memo(
     page,
     onPageChange,
     columns,
+    header,
   }) => {
     const { clickedPointConfig } = useClickedPointConfig();
     const { map } = useMap();
@@ -38,7 +40,16 @@ export const Table = React.memo(
     return (
       <div className="w-screen">
         <Collapse>
-          <Collapse.Panel key="1" header="Таблица атрибутов">
+          <Collapse.Panel
+            key="1"
+            header={
+              header ? (
+                header
+              ) : (
+                <span className="py-[5px]">Таблица атрибутов</span>
+              )
+            }
+          >
             <AntdTable
               ref={tableRef}
               className="table"
@@ -74,9 +85,10 @@ export const Table = React.memo(
               }}
               rowSelection={rowSelection}
               rowClassName={(record) =>
-                record.location_id === clickedPointConfig?.id
-                  ? "scroll-row"
-                  : ""
+                twMerge(
+                  "cursor-pointer",
+                  record.location_id === clickedPointConfig?.id && "scroll-row"
+                )
               }
             />
           </Collapse.Panel>

src/stores/useFilters.js

@@ -1,11 +1,12 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
+import { STATUSES } from "../config";
 
 const INITIAL = {
   prediction: [200, 299],
   categories: [],
   region: null,
-  status: ["К рассмотрению"],
+  status: [STATUSES.initial],
 };
 
 const store = (set) => ({

src/stores/useMode.js

@@ -1,26 +1,13 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { MODES, STATUSES } from "../config";
-import { useFilters } from "./useFilters";
+import { MODES } from "../config";
 
 const store = (set) => ({
-  mode: MODES.INITIAL,
+  mode: MODES.APPROVE,
 
   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;
-      }
     });
   },
 });