From f3b66d92e0a9f17016d66b4444ca57ef79417643 Mon Sep 17 00:00:00 2001 From: Nastya Date: Sat, 30 Mar 2024 23:19:53 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4=20=D1=82=D0=B0?= =?UTF-8?q?=D0=B1=D0=BB=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/promocode/requests.ts | 2 +- .../PromocodeManagement/DeleteModal.tsx | 59 +++++++++++++++++ .../PromocodeManagement/StatisticsModal.tsx | 66 ++++++++++++------- .../Content/PromocodeManagement/index.tsx | 8 ++- .../usePromocodeGridColDef.tsx | 2 +- 5 files changed, 112 insertions(+), 25 deletions(-) create mode 100644 src/pages/dashboard/Content/PromocodeManagement/DeleteModal.tsx diff --git a/src/api/promocode/requests.ts b/src/api/promocode/requests.ts index 98283f0..005ccf0 100644 --- a/src/api/promocode/requests.ts +++ b/src/api/promocode/requests.ts @@ -113,7 +113,7 @@ const getPromocodeStatistics = async (id: string, from: number, to: number,) => method: "POST", useToken: false, }); - +console.log(promocodeStatisticsResponse) return promocodeStatisticsResponse; } catch (nativeError) { const [error] = parseAxiosError(nativeError); diff --git a/src/pages/dashboard/Content/PromocodeManagement/DeleteModal.tsx b/src/pages/dashboard/Content/PromocodeManagement/DeleteModal.tsx new file mode 100644 index 0000000..5302a00 --- /dev/null +++ b/src/pages/dashboard/Content/PromocodeManagement/DeleteModal.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Modal from '@mui/material/Modal'; +import Button from '@mui/material/Button'; +import { Typography } from '@mui/material'; + +const style = { + position: 'absolute' as 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 400, + bgcolor: '#c1c1c1', + border: '2px solid #000', + boxShadow: 24, + pt: 2, + px: 4, + pb: 3, +}; + +interface Props { + id: string; + setModal: (id: string) => void; + deletePromocode: (id: string) => Promise; +} + +export default function ({ + id, + setModal, + deletePromocode +}: Props) { + return ( + setModal("")} + > + + Точно удалить промокод? + + + + + + + ); +} diff --git a/src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx b/src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx index aee23ff..ae80115 100644 --- a/src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx +++ b/src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx @@ -1,4 +1,4 @@ -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import { Box, Button, @@ -16,7 +16,7 @@ import { fadeIn } from "@root/utils/style/keyframes"; import type { GridColDef } from "@mui/x-data-grid"; import type { PromocodeStatistics } from "@root/model/promocodes"; import moment from "moment"; -import {promocodeApi} from "@root/api/promocode/requests"; +import { promocodeApi } from "@root/api/promocode/requests"; type StatisticsModalProps = { id: string; @@ -26,7 +26,7 @@ type StatisticsModalProps = { setTo: (date: number) => void; setFrom: (date: number) => void; // promocodeStatistics: PromocodeStatistics[] | null | undefined; - // promocodeStatistics: any; + // promocodeStatistics: any; }; const COLUMNS: GridColDef[] = [ @@ -53,6 +53,11 @@ const COLUMNS: GridColDef[] = [ }, ]; +type ROW = { + link: string, + useCount: number +} + export const StatisticsModal = ({ id, setId, @@ -66,23 +71,43 @@ export const StatisticsModal = ({ const [endDate, setEndDate] = useState(new Date()); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(550)); - const [general, setGeneral] = useState({}); - // const formatTo = to === null ? 0 : moment(to).unix() - // const formatFrom = from === null ? 0 : moment(from).unix() - console.log(startDate) - // useEffect(() => { - // (async () => { - // const gottenGeneral = await promocodeStatistics(id, startDate, endDate) - // setGeneral(gottenGeneral[0]) - // })() - // }, [to, from]); + const [general, setGeneral] = useState({}); + const [rows, setRows] = useState([]); + const getParseData = async () => { + const promocodeStatistics = await promocodeApi.getPromocodeStatistics(id, moment(startDate).unix(), moment(endDate).unix()) + const rows = [] as ROW[] + //@ts-ignore + for (const [key, value] of Object.entries(promocodeStatistics.usageMap)) { + rows.push({ + link: key, + //@ts-ignore + useCount: value, + id:rows.length + }) + } + setGeneral(promocodeStatistics) + //@ts-ignore + setRows(rows) + } + useEffect(() => { + if (id.length > 0) getParseData() + }, [id]) + // const formatTo = to === null ? 0 : moment(to).unix() + // const formatFrom = from === null ? 0 : moment(from).unix() + console.log(general) + // useEffect(() => { + // (async () => { + // const gottenGeneral = await promocodeStatistics(id, startDate, endDate) + // setGeneral(gottenGeneral[0]) + // })() + // }, [to, from]); return ( { - setId("") - setStartDate(new Date()) - setEndDate(new Date()) + setId("") + setStartDate(new Date()) + setEndDate(new Date()) }} sx={{ "& > .MuiBox-root": { outline: "none" } }} > @@ -120,16 +145,13 @@ export const StatisticsModal = ({ > @@ -200,7 +222,7 @@ export const StatisticsModal = ({ { const theme = useTheme(); + + const [deleteModal, setDeleteModal] = useState("") + const deleteModalHC = (id:string) => setDeleteModal(id) + const [showStatisticsModalId, setShowStatisticsModalId] = useState(""); const [page, setPage] = useState(0); @@ -28,7 +33,7 @@ export const PromocodeManagement = () => { } = usePromocodes(page, pageSize, showStatisticsModalId, to, from); const columns = usePromocodeGridColDef( setShowStatisticsModalId, - deletePromocode + deleteModalHC ); console.log(showStatisticsModalId) if (error) return Ошибка загрузки промокодов; @@ -97,6 +102,7 @@ export const PromocodeManagement = () => { from={from} setFrom={setFrom} /> + ); }; diff --git a/src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx b/src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx index 278baa9..2bd6da9 100644 --- a/src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx +++ b/src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx @@ -1,7 +1,7 @@ import { IconButton } from "@mui/material"; import { GridColDef } from "@mui/x-data-grid"; import { Promocode } from "@root/model/promocodes"; -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import { BarChart, Delete } from "@mui/icons-material"; import {promocodeApi} from "@root/api/promocode/requests";