diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx
index e8cad31..d6fc965 100644
--- a/src/Map/MapComponent.jsx
+++ b/src/Map/MapComponent.jsx
@@ -137,7 +137,7 @@ export const MapComponent = () => {
-
diff --git a/src/modules/Table/ApproveAndWorkingTable/ApproveAndWorkingTable.jsx b/src/modules/Table/ApproveAndWorkingTable/ApproveAndWorkingTable.jsx
index 6f0a7aa..45bb8b9 100644
--- a/src/modules/Table/ApproveAndWorkingTable/ApproveAndWorkingTable.jsx
+++ b/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 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, isInitialLoading } = useQuery(
+ ["approve-working-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,
@@ -150,6 +153,7 @@ export const ApproveAndWorkingTable = ({ fullWidth }) => {
isClickedPointLoading={isClickedPointLoading}
columns={columns}
fullWidth={fullWidth}
+ loading={isInitialLoading}
/>
);
};
diff --git a/src/modules/Table/InitialTable/InitialTable.jsx b/src/modules/Table/InitialTable/InitialTable.jsx
index e140232..ac56e10 100644
--- a/src/modules/Table/InitialTable/InitialTable.jsx
+++ b/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={}
+ loading={isDataLoading}
/>
);
};
diff --git a/src/modules/Table/InitialTable/useInitialTableData.js b/src/modules/Table/InitialTable/useInitialTableData.js
index 293a3cb..5defa1c 100644
--- a/src/modules/Table/InitialTable/useInitialTableData.js
+++ b/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,
};
};
diff --git a/src/modules/Table/Table.jsx b/src/modules/Table/Table.jsx
index 736c53a..9935e48 100644
--- a/src/modules/Table/Table.jsx
+++ b/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 (
-
- }>
+
+ }
+ >
}}
pagination={{
@@ -80,6 +87,7 @@ export const Table = React.memo(
)
}
data-fullwidth={fullWidth}
+ loading={loading}
/>
diff --git a/src/modules/Table/WorkingTable/WorkingTable.jsx b/src/modules/Table/WorkingTable/WorkingTable.jsx
index 7ee37f6..d6a1d1a 100644
--- a/src/modules/Table/WorkingTable/WorkingTable.jsx
+++ b/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={}
+ loading={isInitialLoading}
/>
);
};
diff --git a/src/stores/useMode.js b/src/stores/useMode.js
index 3f6dc31..8ccf9e2 100644
--- a/src/stores/useMode.js
+++ b/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) => {
diff --git a/src/stores/useTable.js b/src/stores/useTable.js
new file mode 100644
index 0000000..c3dd9c0
--- /dev/null
+++ b/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));