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));