From 401c712ca4820c52f16ab83f610c9f4cc4c463bd Mon Sep 17 00:00:00 2001 From: Platon Yasev Date: Sun, 5 Mar 2023 23:01:38 +0300 Subject: [PATCH] Add tables for other tabs --- src/Map/Popup.jsx | 17 ++++-- .../{ => InitialSidebar}/CategoriesSelect.jsx | 6 +-- .../Sidebar/{ => InitialSidebar}/Filters.jsx | 14 +++-- .../{ => InitialSidebar}/PredictionSlider.jsx | 6 +-- .../{ => InitialSidebar}/TakeToWorkButton.jsx | 10 ++-- src/modules/Sidebar/LayersVisibility.jsx | 18 ++++--- src/modules/Sidebar/Sidebar.jsx | 13 +++-- .../Table/ApproveTable/ApproveTable.jsx | 54 +++++++++++++++++++ .../Table/InitialTable/useInitialTableData.js | 5 +- src/modules/Table/TableWrapper.jsx | 12 +++-- .../Table/WorkingTable/WorkingTable.jsx | 45 ++++++++++++++++ src/stores/useFilters.js | 5 ++ src/stores/useMode.js | 15 +++++- 13 files changed, 185 insertions(+), 35 deletions(-) rename src/modules/Sidebar/{ => InitialSidebar}/CategoriesSelect.jsx (90%) rename src/modules/Sidebar/{ => InitialSidebar}/Filters.jsx (69%) rename src/modules/Sidebar/{ => InitialSidebar}/PredictionSlider.jsx (83%) rename src/modules/Sidebar/{ => InitialSidebar}/TakeToWorkButton.jsx (86%) create mode 100644 src/modules/Table/ApproveTable/ApproveTable.jsx create mode 100644 src/modules/Table/WorkingTable/WorkingTable.jsx diff --git a/src/Map/Popup.jsx b/src/Map/Popup.jsx index 3dcf19a..2da1a8f 100644 --- a/src/Map/Popup.jsx +++ b/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 }) => { ); })} - + {mode === MODES.INITIAL && ( + + )} ); }; diff --git a/src/modules/Sidebar/CategoriesSelect.jsx b/src/modules/Sidebar/InitialSidebar/CategoriesSelect.jsx similarity index 90% rename from src/modules/Sidebar/CategoriesSelect.jsx rename to src/modules/Sidebar/InitialSidebar/CategoriesSelect.jsx index 822807f..29e8452 100644 --- a/src/modules/Sidebar/CategoriesSelect.jsx +++ b/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 { useFilters } from "../../stores/useFilters"; -import { CATEGORIES } from "../../config"; +import { Title } from "../../../components/Title"; +import { useFilters } from "../../../stores/useFilters"; +import { CATEGORIES } from "../../../config"; const SelectItem = ({ name, isActive, onClick, disabled }) => { return ( diff --git a/src/modules/Sidebar/Filters.jsx b/src/modules/Sidebar/InitialSidebar/Filters.jsx similarity index 69% rename from src/modules/Sidebar/Filters.jsx rename to src/modules/Sidebar/InitialSidebar/Filters.jsx index c92cb9e..06504b8 100644 --- a/src/modules/Sidebar/Filters.jsx +++ b/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 }) => { >
- - + {mode === MODES.INITIAL && ( + <> + + + + )}
); diff --git a/src/modules/Sidebar/PredictionSlider.jsx b/src/modules/Sidebar/InitialSidebar/PredictionSlider.jsx similarity index 83% rename from src/modules/Sidebar/PredictionSlider.jsx rename to src/modules/Sidebar/InitialSidebar/PredictionSlider.jsx index 805a504..7b8a72d 100644 --- a/src/modules/Sidebar/PredictionSlider.jsx +++ b/src/modules/Sidebar/InitialSidebar/PredictionSlider.jsx @@ -1,7 +1,7 @@ -import { SliderComponent as Slider } from "../../components/SliderComponent"; -import { useFilters } from "../../stores/useFilters"; +import { SliderComponent as Slider } from "../../../components/SliderComponent"; +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 }) => { diff --git a/src/modules/Sidebar/TakeToWorkButton.jsx b/src/modules/Sidebar/InitialSidebar/TakeToWorkButton.jsx similarity index 86% rename from src/modules/Sidebar/TakeToWorkButton.jsx rename to src/modules/Sidebar/InitialSidebar/TakeToWorkButton.jsx index 51778b7..6ec034e 100644 --- a/src/modules/Sidebar/TakeToWorkButton.jsx +++ b/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 { useFilters } from "../../stores/useFilters"; -import { usePointSelection } from "../../stores/usePointSelection"; -import { STATUSES } from "../../config"; -import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter"; +import { api } from "../../../api"; +import { useFilters } from "../../../stores/useFilters"; +import { usePointSelection } from "../../../stores/usePointSelection"; +import { STATUSES } from "../../../config"; +import { useUpdateLayerCounter } from "../../../stores/useUpdateLayerCounter"; import { useState } from "react"; export const TakeToWorkButton = () => { diff --git a/src/modules/Sidebar/LayersVisibility.jsx b/src/modules/Sidebar/LayersVisibility.jsx index 419f387..86bc8e6 100644 --- a/src/modules/Sidebar/LayersVisibility.jsx +++ b/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 className={"space-y-1 flex flex-col"}> - <Checkbox - onChange={() => toggleVisibility("points")} - checked={isVisible.points} - > - Локации к рассмотрению - </Checkbox> + {mode === MODES.INITIAL && ( + <Checkbox + onChange={() => toggleVisibility("points")} + checked={isVisible.points} + > + Локации к рассмотрению + </Checkbox> + )} + <Checkbox className={"!ml-0"} onChange={() => toggleVisibility("atd")} diff --git a/src/modules/Sidebar/Sidebar.jsx b/src/modules/Sidebar/Sidebar.jsx index b5e1fae..668a6f1 100644 --- a/src/modules/Sidebar/Sidebar.jsx +++ b/src/modules/Sidebar/Sidebar.jsx @@ -4,14 +4,17 @@ import { useHasManualEdits, usePointSelection, } from "../../stores/usePointSelection"; -import { TakeToWorkButton } from "./TakeToWorkButton"; -import { Filters } from "./Filters"; +import { TakeToWorkButton } from "./InitialSidebar/TakeToWorkButton"; +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 /> - {hasManualEdits ? ( + {mode === MODES.INITIAL && <TakeToWorkButton />} + + {mode === MODES.INITIAL && hasManualEdits ? ( <Button type="text" block diff --git a/src/modules/Table/ApproveTable/ApproveTable.jsx b/src/modules/Table/ApproveTable/ApproveTable.jsx new file mode 100644 index 0000000..1db1358 --- /dev/null +++ b/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} + /> + ); +}; diff --git a/src/modules/Table/InitialTable/useInitialTableData.js b/src/modules/Table/InitialTable/useInitialTableData.js index c4ae7ae..293a3cb 100644 --- a/src/modules/Table/InitialTable/useInitialTableData.js +++ b/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], }); diff --git a/src/modules/Table/TableWrapper.jsx b/src/modules/Table/TableWrapper.jsx index 3870831..c0ad38c 100644 --- a/src/modules/Table/TableWrapper.jsx +++ b/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) { - return <InitialTable />; + if (mode === MODES.APPROVE) { + return <ApproveTable />; } - return null; + if (mode === MODES.WORKING) { + return <WorkingTable />; + } + + return <InitialTable />; }; diff --git a/src/modules/Table/WorkingTable/WorkingTable.jsx b/src/modules/Table/WorkingTable/WorkingTable.jsx new file mode 100644 index 0000000..a393dfe --- /dev/null +++ b/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} + /> + ); +}; diff --git a/src/stores/useFilters.js b/src/stores/useFilters.js index fb93d1e..0b06b4d 100644 --- a/src/stores/useFilters.js +++ b/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)); diff --git a/src/stores/useMode.js b/src/stores/useMode.js index 8ccf9e2..e06ae4a 100644 --- a/src/stores/useMode.js +++ b/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; + } }); }, });