Merge branch 'dev' into 'staging'
Dev See merge request frontend/admin!76
This commit is contained in:
commit
4f9ae1c51d
@ -1,4 +1,5 @@
|
||||
import makeRequest from "@root/api/makeRequest";
|
||||
import {parseAxiosError} from "@root/utils/parse-error";
|
||||
|
||||
export type QuizStatisticResponse = {
|
||||
Registrations: number;
|
||||
@ -26,3 +27,24 @@ export const getStatistic = async (
|
||||
return { Registrations: 0, Quizes: 0, Results: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
export const getStatisticSchild = async (
|
||||
from: any, to: any): Promise<unknown> => {
|
||||
try {
|
||||
const StatisticResponse = await makeRequest<unknown, unknown>({
|
||||
url: process.env.REACT_APP_DOMAIN + "/customer/quizlogo/stat" ,
|
||||
method: "post",
|
||||
useToken: true,
|
||||
body: {
|
||||
"to": to,
|
||||
"from": from,
|
||||
"page": 0,
|
||||
"limit": 100
|
||||
},
|
||||
});
|
||||
return StatisticResponse;
|
||||
} catch (nativeError) {
|
||||
|
||||
return [{ID: 0, Regs: 0, Money: 0, Quizes:[{QuizID: 0, Regs: 0, Money: 0}]}];
|
||||
}
|
||||
};
|
||||
|
||||
245
src/pages/dashboard/Content/QuizStatistic/StatisticSchild.tsx
Normal file
245
src/pages/dashboard/Content/QuizStatistic/StatisticSchild.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import moment, {Moment} from "moment";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails, AccordionSummary,
|
||||
Box,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment";
|
||||
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import ModalUser from "@pages/dashboard/ModalUser";
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import useSchildStatistic from "@root/utils/hooks/useSchildStatistic";
|
||||
|
||||
export default function StatisticSchild() {
|
||||
const theme = useTheme()
|
||||
const [isOpen, setOpen] = useState<boolean>(false);
|
||||
const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
|
||||
|
||||
const [openUserModal, setOpenUserModal] = useState<boolean>(false);
|
||||
const [activeUserId, setActiveUserId] = useState<string>("");
|
||||
|
||||
const [from, setFrom] = useState<Moment | null>(moment("01.01.2023"));
|
||||
const [to, setTo] = useState<Moment | null>(moment(Date.now()));
|
||||
|
||||
const statistic = useSchildStatistic(from, to)
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const onAdornmentClick = () => {
|
||||
setOpen((old) => !old);
|
||||
if (isOpenEnd) {
|
||||
handleCloseEnd();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseEnd = () => {
|
||||
setOpenEnd(false);
|
||||
};
|
||||
|
||||
const handleOpenEnd = () => {
|
||||
setOpenEnd(true);
|
||||
};
|
||||
|
||||
const onAdornmentClickEnd = () => {
|
||||
setOpenEnd((old) => !old);
|
||||
if (isOpen) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!openUserModal) {
|
||||
setActiveUserId("");
|
||||
}
|
||||
}, [openUserModal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeUserId) {
|
||||
setOpenUserModal(true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenUserModal(false);
|
||||
}, [activeUserId]);
|
||||
|
||||
console.log(statistic)
|
||||
|
||||
return(
|
||||
<LocalizationProvider dateAdapter={AdapterMoment}>
|
||||
<Typography sx={{mt: "20px", mb: "20px"}}>Статистика переходов с шильдика</Typography>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата начала
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={from}
|
||||
onChange={(date) => date && setFrom(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата окончания
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={to}
|
||||
onChange={(date) => date && setTo(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Table
|
||||
sx={{
|
||||
width: "80%",
|
||||
border: "2px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
bgcolor: theme.palette.content.main,
|
||||
color: "white",
|
||||
mt: "20px"
|
||||
}}
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow
|
||||
sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px",
|
||||
}}
|
||||
>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Пользователь</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Регистраций</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Деньги</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Квизы</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{statistic.map((stat: any) => (
|
||||
<TableBody>
|
||||
<TableCell
|
||||
sx={{color: "inherit"}} align="center"
|
||||
onClick={()=> setActiveUserId(stat?.ID)}
|
||||
>{stat?.ID}</TableCell>
|
||||
<ModalUser
|
||||
open={openUserModal}
|
||||
onClose={() => setOpenUserModal(false)}
|
||||
userId={activeUserId}
|
||||
/>
|
||||
<TableCell sx={{color: "inherit"}} align="center">{stat?.Regs}</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">{stat?.Money}</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
sx={{backgroundColor: "#26272c", color: "#FFFFFF"}}
|
||||
expandIcon={<ExpandMoreIcon sx={{color: "#FFFFFF"}}/>}
|
||||
aria-controls="panel1-content"
|
||||
id="panel1-header"
|
||||
>
|
||||
Статистика по квизам
|
||||
</AccordionSummary>
|
||||
<AccordionDetails sx={{backgroundColor: "#26272c",}}>
|
||||
<Table
|
||||
sx={{
|
||||
width: "80%",
|
||||
border: "2px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
bgcolor: theme.palette.content.main,
|
||||
color: "white"
|
||||
}}
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow
|
||||
sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px",
|
||||
}}
|
||||
>
|
||||
<TableCell sx={{color: "inherit"}} align="center">QuizID</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Регистрации</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Деньги</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
{stat?.Quizes.map((quiz:any)=> (
|
||||
<TableBody>
|
||||
<TableCell sx={{color: "inherit"}} align="center">{quiz?.QuizID}</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">{quiz?.Regs}</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">{quiz?.Money}</TableCell>
|
||||
</TableBody>
|
||||
))}
|
||||
|
||||
|
||||
</Table>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</TableCell>
|
||||
</TableBody>
|
||||
))
|
||||
}
|
||||
|
||||
</Table>
|
||||
</LocalizationProvider>
|
||||
)
|
||||
|
||||
}
|
||||
@ -5,9 +5,7 @@ import type { Moment } from "moment";
|
||||
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { useQuizStatistic } from '@root/utils/hooks/useQuizStatistic';
|
||||
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
|
||||
import makeRequest from "@root/api/makeRequest";
|
||||
import {Discount} from "@frontend/kitui";
|
||||
import {parseAxiosError} from "@root/utils/parse-error";
|
||||
import StatisticSchild from "./StatisticSchild";
|
||||
|
||||
export default () => {
|
||||
const theme = useTheme()
|
||||
@ -19,6 +17,7 @@ export default () => {
|
||||
const [to, setTo] = useState<Moment | null>(moment(Date.now()));
|
||||
|
||||
|
||||
|
||||
const { Registrations, Quizes, Results } = useQuizStatistic({
|
||||
from,
|
||||
to,
|
||||
@ -59,29 +58,6 @@ export default () => {
|
||||
}
|
||||
};
|
||||
|
||||
const StatisticsShild = async (from: any, to: any) => {
|
||||
try {
|
||||
const StatisticResponse = await makeRequest<unknown, unknown>({
|
||||
url: process.env.REACT_APP_DOMAIN + "/customer/quizlogo/stat" ,
|
||||
method: "post",
|
||||
useToken: true,
|
||||
body: {
|
||||
"to": to.unix(),
|
||||
"from": from.unix(),
|
||||
"page": 0,
|
||||
"limit": 100
|
||||
},
|
||||
});
|
||||
|
||||
return [StatisticResponse];
|
||||
} catch (nativeError) {
|
||||
const [error] = parseAxiosError(nativeError);
|
||||
|
||||
return [null, `Ошибка запроса статистики. ${error}`];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return <>
|
||||
<LocalizationProvider dateAdapter={AdapterMoment}>
|
||||
<Box>
|
||||
@ -160,15 +136,6 @@ export default () => {
|
||||
>
|
||||
Сбросить даты
|
||||
</Button>
|
||||
<Button
|
||||
sx={{
|
||||
m: '10px 0'
|
||||
}}
|
||||
onClick={async() =>StatisticsShild(from, to)}
|
||||
>
|
||||
Запросить статистику(тест)
|
||||
</Button>
|
||||
|
||||
<Table
|
||||
sx={{
|
||||
width: "80%",
|
||||
@ -197,6 +164,9 @@ export default () => {
|
||||
<TableCell sx={{color: "inherit"}} align="center">{Results}</TableCell>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<StatisticSchild/>
|
||||
|
||||
</LocalizationProvider>
|
||||
</>
|
||||
}
|
||||
@ -66,7 +66,10 @@ export default function CloseTicketModal({ticketId, openModal, setOpenModal}: Pr
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={CloseTicket}
|
||||
onClick={async ()=>{
|
||||
CloseTicket()
|
||||
setOpenModal(false)
|
||||
}}
|
||||
sx={{width: "40px", height: "25px"}}
|
||||
>
|
||||
Да
|
||||
|
||||
@ -48,7 +48,7 @@ export const UserTab = ({ userId }: UserTabProps) => {
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "20px" }}>Email</Typography>
|
||||
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
|
||||
{user?.email}
|
||||
{user?.email || user?.login}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
|
||||
17
src/utils/hooks/useSchildStatistic.ts
Normal file
17
src/utils/hooks/useSchildStatistic.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {getStatisticSchild} from "@root/api/quizStatistic";
|
||||
|
||||
|
||||
export default function useSchildStatistic (from: any, to: any){
|
||||
const formatTo = to?.unix();
|
||||
const formatFrom = from?.unix();
|
||||
const [statistic, setStatistic] = useState<any>([])
|
||||
useEffect(() => {
|
||||
const StatisticsShild = async () => {
|
||||
const gottenData = await getStatisticSchild(Number(formatFrom), Number(formatTo));
|
||||
setStatistic(gottenData)
|
||||
}
|
||||
StatisticsShild()
|
||||
}, []);
|
||||
return statistic
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user