Control table state

src/Map/MapComponent.jsx

@@ -137,7 +137,7 @@ export const MapComponent = () => {
             <LayersControl />
           </Map>
         </div>
-        <div className="w-full">
+        <div className="w-full border-solid border-border border-0 border-t-[1px]">
           <TableWrapper fullWidth={isSidebarCollapsed} />
         </div>
       </div>

src/modules/Table/ApproveAndWorkingTable/ApproveAndWorkingTable.jsx

@@ -110,19 +110,22 @@ export const ApproveAndWorkingTable = ({ fullWidth }) => {
 
   const clearSelected = () => setSelectedIds([]);
 
-  const { data } = useQuery(["approve-working-points"], async () => {
+  const { data, isInitialLoading } = useQuery(
-    const params = new URLSearchParams({
+    ["approve-working-points"],
-      page,
+    async () => {
-      page_size: pageSize,
+      const params = new URLSearchParams({
-      "status[]": [STATUSES.approve, STATUSES.working],
+        page,
-    });
+        page_size: pageSize,
-
+        "status[]": [STATUSES.approve, STATUSES.working],
-    const { data } = await api.get(
+      });
-      `/api/placement_points?${params.toString()}`
+
-    );
+      const { data } = await api.get(
-
+        `/api/placement_points?${params.toString()}`
-    return data;
+      );
-  });
+
+      return data;
+    }
+  );
 
   const { data: mergedData, isClickedPointLoading } = useMergeTableData(
     data,
@@ -150,6 +153,7 @@ export const ApproveAndWorkingTable = ({ fullWidth }) => {
       isClickedPointLoading={isClickedPointLoading}
       columns={columns}
       fullWidth={fullWidth}
+      loading={isInitialLoading}
     />
   );
 };

src/modules/Table/InitialTable/InitialTable.jsx

@@ -12,7 +12,8 @@ export const InitialTable = ({ fullWidth }) => {
   const { clickedPointConfig } = useClickedPointConfig();
   const [page, setPage] = useState(1);
 
-  const { data, pageSize, isClickedPointLoading } = useInitialTableData(page);
+  const { data, pageSize, isClickedPointLoading, isDataLoading } =
+    useInitialTableData(page);
 
   const getSelectedRowKeys = useCallback(() => {
     const ids = data?.results.map((item) => item.location_id) ?? [];
@@ -58,6 +59,7 @@ export const InitialTable = ({ fullWidth }) => {
       columns={columns}
       fullWidth={fullWidth}
       header={<HeaderWrapper exportProvider={useExportInitialData} />}
+      loading={isDataLoading}
     />
   );
 };

src/modules/Table/InitialTable/useInitialTableData.js

@@ -13,7 +13,7 @@ export const useInitialTableData = (page) => {
   const { prediction, categories, region } = filters;
   const { selection } = usePointSelection();
 
-  const { data } = useQuery(
+  const { data, isInitialLoading } = useQuery(
     ["table", page, filters, selection],
     async () => {
       const params = new URLSearchParams({
@@ -53,5 +53,6 @@ export const useInitialTableData = (page) => {
     data: mergedData,
     pageSize,
     isClickedPointLoading,
+    isDataLoading: isInitialLoading,
   };
 };

src/modules/Table/Table.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { Collapse, Empty, Table as AntdTable } from "antd";
 import "./Table.css";
 import parse from "wellknown";
@@ -7,6 +7,7 @@ import { useClickedPointConfig } from "../../stores/useClickedPointConfig";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { twMerge } from "tailwind-merge";
 import { HeaderWrapper } from "./HeaderWrapper";
+import { useTable } from "../../stores/useTable";
 
 export const Table = React.memo(
   ({
@@ -20,10 +21,11 @@ export const Table = React.memo(
     columns,
     header,
     fullWidth,
+    loading,
   }) => {
     const { clickedPointConfig } = useClickedPointConfig();
     const { map } = useMap();
-    const tableRef = useRef(null);
+    const { isOpened, setIsOpened } = useTable();
 
     const SCROLL = {
       y: `${height}px`,
@@ -40,11 +42,16 @@ export const Table = React.memo(
     }, [clickedPointConfig, data]);
 
     return (
-      <Collapse>
+      <Collapse
-        <Collapse.Panel key="1" header={header ? header : <HeaderWrapper />}>
+        bordered={false}
+        onChange={setIsOpened}
+        defaultActiveKey={isOpened ? "opened" : null}
+      >
+        <Collapse.Panel
+          key={"opened"}
+          header={header ? header : <HeaderWrapper />}
+        >
           <AntdTable
-            ref={tableRef}
-            // className="max-w-full"
             size="small"
             locale={{ emptyText: <Empty description="Нет данных" /> }}
             pagination={{
@@ -80,6 +87,7 @@ export const Table = React.memo(
               )
             }
             data-fullwidth={fullWidth}
+            loading={loading}
           />
         </Collapse.Panel>
       </Collapse>

src/modules/Table/WorkingTable/WorkingTable.jsx

@@ -13,7 +13,7 @@ export const WorkingTable = ({ fullWidth }) => {
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const [page, setPage] = useState(1);
 
-  const { data } = useQuery(["working-points"], async () => {
+  const { data, isInitialLoading } = useQuery(["working-points"], async () => {
     const params = new URLSearchParams({
       page,
       page_size: pageSize,
@@ -44,6 +44,7 @@ export const WorkingTable = ({ fullWidth }) => {
       columns={columns}
       fullWidth={fullWidth}
       header={<HeaderWrapper exportProvider={useExportWorkingData} />}
+      loading={isInitialLoading}
     />
   );
 };

src/stores/useMode.js

@@ -3,7 +3,7 @@ import { immer } from "zustand/middleware/immer";
 import { MODES } from "../config";
 
 const store = (set) => ({
-  mode: MODES.APPROVE,
+  mode: MODES.INITIAL,
 
   setMode: (mode) => {
     set((state) => {

src/stores/useTable.js

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+const store = (set) => ({
+  isOpened: false,
+
+  setIsOpened: (value) => {
+    set((state) => {
+      state.isOpened = value[0] === "opened";
+    });
+  },
+});
+
+export const useTable = create(immer(store));