запросы статистики промокодов(сырые, нужны доработки)
This commit is contained in:
parent
7daa2f7e99
commit
153b518914
@ -98,14 +98,19 @@ const deletePromocode = async (id: string): Promise<void> => {
|
||||
}
|
||||
};
|
||||
|
||||
const getPromocodeStatistics = async (id: string) => {
|
||||
const getPromocodeStatistics = async (id: string, from: number, to: number,) => {
|
||||
try {
|
||||
const promocodeStatisticsResponse = await makeRequest<
|
||||
unknown,
|
||||
PromocodeStatistics[]
|
||||
>({
|
||||
url: baseUrl + `/getStatistics/${id}`,
|
||||
method: "GET",
|
||||
url: baseUrl + `/stats`,
|
||||
body: {
|
||||
"id": id,
|
||||
"from": from,
|
||||
"to": to
|
||||
},
|
||||
method: "POST",
|
||||
useToken: false,
|
||||
});
|
||||
|
||||
|
@ -11,7 +11,9 @@ import type {
|
||||
export function usePromocodes(
|
||||
page: number,
|
||||
pageSize: number,
|
||||
promocodeId: string
|
||||
promocodeId: string,
|
||||
to: number,
|
||||
from: number,
|
||||
) {
|
||||
const promocodesCountRef = useRef<number>(0);
|
||||
const swrResponse = useSwr(
|
||||
@ -87,33 +89,33 @@ export function usePromocodes(
|
||||
[page, pageSize]
|
||||
);
|
||||
|
||||
const promocodeStatistics = useSwr(
|
||||
["promocodeStatistics", promocodeId],
|
||||
async ([_, id]) => {
|
||||
if (!id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const promocodeStatisticsResponse =
|
||||
await promocodeApi.getPromocodeStatistics(id);
|
||||
|
||||
return promocodeStatisticsResponse;
|
||||
},
|
||||
{
|
||||
onError(err) {
|
||||
console.log("Error fetching promocode statistics", err);
|
||||
enqueueSnackbar(err.message, { variant: "error" });
|
||||
},
|
||||
focusThrottleInterval: 60e3,
|
||||
keepPreviousData: true,
|
||||
}
|
||||
);
|
||||
// const promocodeStatistics = useSwr(
|
||||
// ["promocodeStatistics", promocodeId, from, to],
|
||||
// async ([_, id, from, to]) => {
|
||||
// if (!id) {
|
||||
// return null;
|
||||
// }
|
||||
//
|
||||
// const promocodeStatisticsResponse =
|
||||
// await promocodeApi.getPromocodeStatistics(id, from, to);
|
||||
//
|
||||
// return promocodeStatisticsResponse;
|
||||
// },
|
||||
// {
|
||||
// onError(err) {
|
||||
// console.log("Error fetching promocode statistics", err);
|
||||
// enqueueSnackbar(err.message, { variant: "error" });
|
||||
// },
|
||||
// focusThrottleInterval: 60e3,
|
||||
// keepPreviousData: true,
|
||||
// }
|
||||
// );
|
||||
|
||||
return {
|
||||
...swrResponse,
|
||||
createPromocode,
|
||||
deletePromocode,
|
||||
promocodeStatistics,
|
||||
//promocodeStatistics,
|
||||
promocodesCount: promocodesCountRef.current,
|
||||
};
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import {useEffect, useState} from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@ -9,18 +9,24 @@ import {
|
||||
useMediaQuery,
|
||||
} from "@mui/material";
|
||||
import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
|
||||
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
|
||||
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";
|
||||
|
||||
type StatisticsModalProps = {
|
||||
id: string;
|
||||
to: number;
|
||||
from: number;
|
||||
setId: (id: string) => void;
|
||||
setTo: (date: number) => void;
|
||||
setFrom: (date: number) => void;
|
||||
// promocodeStatistics: PromocodeStatistics[] | null | undefined;
|
||||
promocodeStatistics: any;
|
||||
// promocodeStatistics: any;
|
||||
};
|
||||
|
||||
const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
|
||||
@ -50,17 +56,34 @@ const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
|
||||
export const StatisticsModal = ({
|
||||
id,
|
||||
setId,
|
||||
promocodeStatistics,
|
||||
setFrom,
|
||||
from,
|
||||
to,
|
||||
setTo,
|
||||
//promocodeStatistics,
|
||||
}: StatisticsModalProps) => {
|
||||
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||
const [endDate, setEndDate] = useState<Date>(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]);
|
||||
return (
|
||||
<Modal
|
||||
open={Boolean(id)}
|
||||
onClose={() => setId("")}
|
||||
onClose={() => {
|
||||
setId("")
|
||||
setStartDate(new Date())
|
||||
setEndDate(new Date())
|
||||
}}
|
||||
sx={{ "& > .MuiBox-root": { outline: "none" } }}
|
||||
>
|
||||
<Box
|
||||
@ -103,7 +126,10 @@ export const StatisticsModal = ({
|
||||
</Button>
|
||||
<Button
|
||||
sx={{ maxWidth: "100px" }}
|
||||
// onClick={() => }
|
||||
onClick={async () =>{
|
||||
const promocodeStatistics = promocodeApi.getPromocodeStatistics(id, moment(startDate).unix(), moment(endDate).unix())
|
||||
setGeneral(promocodeStatistics)
|
||||
} }
|
||||
>
|
||||
Обновить статистику
|
||||
</Button>
|
||||
@ -113,7 +139,7 @@ export const StatisticsModal = ({
|
||||
<Typography sx={{ minWidth: "20px", color: "#FFFFFF" }}>
|
||||
от
|
||||
</Typography>
|
||||
<DesktopDatePicker
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={startDate}
|
||||
onChange={(date) => date && setStartDate(date)}
|
||||
@ -147,7 +173,7 @@ export const StatisticsModal = ({
|
||||
<Typography sx={{ minWidth: "20px", color: "#FFFFFF" }}>
|
||||
до
|
||||
</Typography>
|
||||
<DesktopDatePicker
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={endDate}
|
||||
onChange={(date) => date && setEndDate(date)}
|
||||
@ -174,7 +200,7 @@ export const StatisticsModal = ({
|
||||
</Box>
|
||||
<DataGrid
|
||||
disableSelectionOnClick={true}
|
||||
rows={promocodeStatistics ?? []}
|
||||
rows={[]}
|
||||
columns={COLUMNS}
|
||||
sx={{
|
||||
marginTop: "30px",
|
||||
|
@ -14,21 +14,23 @@ export const PromocodeManagement = () => {
|
||||
const [showStatisticsModalId, setShowStatisticsModalId] =
|
||||
useState<string>("");
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [to, setTo] = useState(0);
|
||||
const [from, setFrom] = useState(0);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
isValidating,
|
||||
promocodesCount,
|
||||
promocodeStatistics,
|
||||
//promocodeStatistics,
|
||||
deletePromocode,
|
||||
createPromocode,
|
||||
} = usePromocodes(page, pageSize, showStatisticsModalId);
|
||||
} = usePromocodes(page, pageSize, showStatisticsModalId, to, from);
|
||||
const columns = usePromocodeGridColDef(
|
||||
setShowStatisticsModalId,
|
||||
deletePromocode
|
||||
);
|
||||
|
||||
console.log(showStatisticsModalId)
|
||||
if (error) return <Typography>Ошибка загрузки промокодов</Typography>;
|
||||
|
||||
return (
|
||||
@ -89,7 +91,11 @@ export const PromocodeManagement = () => {
|
||||
<StatisticsModal
|
||||
id={showStatisticsModalId}
|
||||
setId={setShowStatisticsModalId}
|
||||
promocodeStatistics={promocodeStatistics}
|
||||
//promocodeStatistics={promocodeStatistics}
|
||||
to={to}
|
||||
setTo={setTo}
|
||||
from={from}
|
||||
setFrom={setFrom}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
|
@ -4,12 +4,14 @@ import { Promocode } from "@root/model/promocodes";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { BarChart, Delete } from "@mui/icons-material";
|
||||
import {promocodeApi} from "@root/api/promocode/requests";
|
||||
|
||||
export function usePromocodeGridColDef(
|
||||
setStatistics: (id: string) => void,
|
||||
deletePromocode: (id: string) => void
|
||||
) {
|
||||
return useMemo<GridColDef<Promocode, string | number, string>[]>(
|
||||
const validity = (value:string|number) => {if(value===0){return "неоганичен"}else {return new Date(value).toLocaleString()}}
|
||||
return useMemo<GridColDef<Promocode, string | number, string >[]>(
|
||||
() => [
|
||||
{
|
||||
field: "id",
|
||||
@ -46,7 +48,7 @@ export function usePromocodeGridColDef(
|
||||
width: 160,
|
||||
sortable: false,
|
||||
valueGetter: ({ row }) => row.dueTo * 1000,
|
||||
valueFormatter: ({ value }) => new Date(value).toLocaleString(),
|
||||
valueFormatter: ({ value }) => `${validity(value)}`,
|
||||
},
|
||||
{
|
||||
field: "settings",
|
||||
@ -55,7 +57,10 @@ export function usePromocodeGridColDef(
|
||||
sortable: false,
|
||||
renderCell: (params) => {
|
||||
return (
|
||||
<IconButton onClick={() => setStatistics(params.row.id)}>
|
||||
<IconButton onClick={() => {
|
||||
setStatistics(params.row.id,)
|
||||
promocodeApi.getPromocodeStatistics(params.row.id, 0, 0)
|
||||
}}>
|
||||
<BarChart />
|
||||
</IconButton>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user