PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: conflicts resolved

Browse Source
This commit is contained in:
IlyaDoronin 2024-05-21 11:53:09 +03:00
commit 5ccffb8196
10 changed files with 734 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
eslint.config.js
View File

@ -1,7 +1,7 @@
import eslint from "@eslint/js"; const eslint = require("@eslint/js");
import tseslint from "typescript-eslint"; const tseslint = require("typescript-eslint");
export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, { module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, {
rules: { rules: {
semi: "error", semi: "error",
"prefer-const": "error", "prefer-const": "error",

1
package.json
View File

@ -2,7 +2,6 @@
"name": "adminka", "name": "adminka",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"type": "module",
"dependencies": { "dependencies": {
"@date-io/dayjs": "^2.15.0", "@date-io/dayjs": "^2.15.0",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",

66
src/api/promocode/requests.ts
View File

@ -1,11 +1,12 @@
import makeRequest from "@root/api/makeRequest"; import makeRequest from "@root/api/makeRequest";
import type { import type {
CreatePromocodeBody, CreatePromocodeBody,
GetPromocodeListBody, EditPromocodeBody,
Promocode, GetPromocodeListBody,
PromocodeList, Promocode,
PromocodeStatistics, PromocodeList,
PromocodeStatistics,
} from "@root/model/promocodes"; } from "@root/model/promocodes";
import { parseAxiosError } from "@root/utils/parse-error"; import { parseAxiosError } from "@root/utils/parse-error";
@ -68,6 +69,33 @@ export const getAllPromocodes = async () => {
} }
}; };
export const getNotActivePromocodes = async () => {
try {
const promocodes: Promocode[] = [];
let page = 0;
while (true) {
const promocodeList = await getPromocodeList({
limit: 100,
filter: {
active: false,
},
page,
});
if (promocodeList.items.length === 0) break;
promocodes.push(...promocodeList.items);
page++;
}
return promocodes;
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
throw new Error(`Ошибка при получении списка промокодов. ${error}`);
}
};
const createPromocode = async (body: CreatePromocodeBody) => { const createPromocode = async (body: CreatePromocodeBody) => {
try { try {
const createPromocodeResponse = await makeRequest<CreatePromocodeBody, Promocode>({ const createPromocodeResponse = await makeRequest<CreatePromocodeBody, Promocode>({
@ -88,6 +116,20 @@ const createPromocode = async (body: CreatePromocodeBody) => {
} }
}; };
const editPromocode = async (body: EditPromocodeBody) => {
try {
const editPromocodeResponse = await makeRequest<unknown, Promocode>({
url: process.env.REACT_APP_DOMAIN + "/codeword/promocode" + "/edit",
method: "PUT",
body,
});
return [editPromocodeResponse];
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
return [null, `Ошибка редактирования промокода. ${error}`];
}
};
const deletePromocode = async (id: string): Promise<void> => { const deletePromocode = async (id: string): Promise<void> => {
try { try {
await makeRequest<never, never>({ await makeRequest<never, never>({
@ -121,10 +163,12 @@ const getPromocodeStatistics = async (id: string, from: number, to: number) => {
}; };
export const promocodeApi = { export const promocodeApi = {
getPromocodeList, getPromocodeList,
createPromocode, createPromocode,
deletePromocode, editPromocode,
getAllPromocodes, deletePromocode,
getPromocodeStatistics, getAllPromocodes,
createFastlink, getNotActivePromocodes,
getPromocodeStatistics,
createFastlink,
}; };

107
src/api/promocode/swr.ts
View File

@ -3,20 +3,30 @@ import useSwr, { mutate } from "swr";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { promocodeApi } from "./requests"; import { promocodeApi } from "./requests";
import type { CreatePromocodeBody, PromocodeList } from "@root/model/promocodes"; import type {
CreatePromocodeBody, EditPromocodeBody,
PromocodeList,
} from "@root/model/promocodes";
export function usePromocodes(page: number, pageSize: number, promocodeId: string, to: number, from: number) { export function usePromocodes(
const promocodesCountRef = useRef<number>(0); page: number,
const swrResponse = useSwr( pageSize: number,
["promocodes", page, pageSize], promocodeId: string,
async (key) => { to: number,
const result = await promocodeApi.getPromocodeList({ from: number,
limit: key[2], active: boolean
filter: { ) {
active: true, const promocodesCountRef = useRef<number>(0);
}, const swrResponse = useSwr(
page: key[1], ["promocodes", page, pageSize, active],
}); async (key) => {
const result = await promocodeApi.getPromocodeList({
limit: key[2],
filter: {
active: key[3],
},
page: key[1],
});
promocodesCountRef.current = result.count; promocodesCountRef.current = result.count;
return result; return result;
@ -44,15 +54,38 @@ export function usePromocodes(page: number, pageSize: number, promocodeId: strin
[page, pageSize] [page, pageSize]
); );
const deletePromocode = useCallback( const editPromocode = useCallback(
async function (id: string) { async function (body: EditPromocodeBody) {
try { try {
await mutate<PromocodeList | undefined, void>( await promocodeApi.editPromocode(body);
["promocodes", page, pageSize], mutate<PromocodeList | undefined, void>(
promocodeApi.deletePromocode(id), ["promocodes", page, pageSize, active],
{ );
optimisticData(currentData, displayedData) { await promocodeApi.getPromocodeList({
if (!displayedData) return; limit: pageSize,
filter: {
active: active,
},
page: page,
});
} catch (error) {
console.error("Error editing promocode", error);
if (error instanceof Error)
enqueueSnackbar(error.message, { variant: "error" });
}
},
[page, pageSize,]
);
const deletePromocode = useCallback(
async function (id: string) {
try {
await mutate<PromocodeList | undefined, void>(
["promocodes", page, pageSize],
promocodeApi.deletePromocode(id),
{
optimisticData(currentData, displayedData) {
if (!displayedData) return;
return { return {
count: displayedData.count - 1, count: displayedData.count - 1,
@ -112,14 +145,15 @@ export function usePromocodes(page: number, pageSize: number, promocodeId: strin
[page, pageSize] [page, pageSize]
); );
return { return {
...swrResponse, ...swrResponse,
createPromocode, createPromocode,
deletePromocode, deletePromocode,
createFastLink, editPromocode,
promocodeStatistics: promocodeStatistics.data, createFastLink,
promocodesCount: promocodesCountRef.current, promocodeStatistics: promocodeStatistics.data,
}; promocodesCount: promocodesCountRef.current,
};
} }
export function useAllPromocodes() { export function useAllPromocodes() {
@ -134,3 +168,16 @@ export function useAllPromocodes() {
return data; return data;
} }
export function useNotActivePromocodes() {
const { data } = useSwr("notActivePromocodes", promocodeApi.getNotActivePromocodes, {
keepPreviousData: true,
suspense: true,
onError(err) {
console.error("Error fetching all promocodes", err);
enqueueSnackbar(err.message, { variant: "error" });
},
});
return data;
}

10
src/model/promocodes.ts
View File

@ -49,3 +49,13 @@ export type PromocodeStatistics = {
usageCount: number; usageCount: number;
usageMap: Record<string, number>; usageMap: Record<string, number>;
}; };
export type EditPromocodeBody = {
id: string,
description: string,
greetings: string,
dueTo: number,
activationCount: number,
delete: boolean
}

202
src/pages/dashboard/Content/PromocodeManagement/EditModal.tsx Normal file
View File

@ -0,0 +1,202 @@
import {
Box,
Button,
Typography,
Modal,
TextField,
useTheme,
useMediaQuery,
TextFieldProps,
} from "@mui/material";
import {CustomTextField} from "@kitUI/CustomTextField";
import {DesktopDatePicker} from "@mui/x-date-pickers/DesktopDatePicker";
import {useEffect, useState} from "react";
import {EditPromocodeBody, Promocode} from "@root/model/promocodes";
import {enqueueSnackbar} from "notistack";
const host = window.location.hostname;
const isTest = host.includes("s");
type EditModalProps = {
id: string;
setId: (id: string) => void;
promocodes: Promocode[];
editPromocode: (body: EditPromocodeBody) => Promise<void>
};
export const EditModal = ({id, setId, promocodes, editPromocode}: EditModalProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(550));
const promocode = promocodes.find((item) => item.id === id);
const [descriptionField, setDescriptionField] = useState<string>("");
const [greetingsField, setGreetingsField] = useState<string>("");
const [dueToField, setDueToField] = useState<number>(0);
const [activationField, setActivationField] = useState<number>(0);
useEffect(
function setCurrentPromocodeFields() {
if (!promocode) return;
setDescriptionField(promocode.description);
setGreetingsField(promocode.greetings);
setDueToField(promocode.dueTo);
setActivationField(promocode.activationCount);
},
[promocode]
);
async function handleEditClick() {
if (!promocode) return enqueueSnackbar(`Тариф ${id} не найден`);
if (!descriptionField) return enqueueSnackbar('Поле "Описание" пустое');
if (!greetingsField) return enqueueSnackbar('Поле "Приветственное сообщение" пустое');
const editPromocodeBody: EditPromocodeBody = {
id: id,
description: descriptionField,
greetings: greetingsField,
dueTo: dueToField,
activationCount: activationField,
delete: promocode.delete
};
await editPromocode(editPromocodeBody);
setId("");
}
return (
<Modal
open={Boolean(id)}
onClose={() => {
setId("");
}}
sx={{
"& > .MuiBox-root": { outline: "none", padding: "32px 32px 16px" },
}}
>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "95%",
maxWidth: "600px",
background: "#1F2126",
border: "2px solid gray",
borderRadius: "6px",
boxShadow: 24,
p: 4,
}}
>
<Box
sx={{
display: "flex",
gap: "30px",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<Box
sx={{display: "flex",
flexDirection: "column",
gap: "15px"
}}
>
<Typography
variant="h4"
sx={{
height: "40px",
fontWeight: "normal",
color: theme.palette.secondary.main,
}}
>Редактировать промокод: {promocode?.codeword}</Typography>
{promocode && (
<>
<CustomTextField
id={""}
name="description"
label="Описание"
value={descriptionField}
onChange={(event) => setDescriptionField(event.target.value)}
/>
<CustomTextField
id={""}
name="greetings"
label="Приветственое сообщение"
value={greetingsField}
onChange={(event) => setGreetingsField(event.target.value)}
/>
<Typography
variant="h4"
sx={{
height: "40px",
fontWeight: "normal",
marginTop: "15px",
color: theme.palette.secondary.main,
}}
>
Время существования промокода
</Typography>
<DesktopDatePicker
inputFormat="DD/MM/YYYY"
value={dueToField === 0 ? null : new Date(Number(dueToField) * 1000)}
onChange={(event: any) => {
setDueToField(event.$d.getTime() / 1000 || 0);
}}
renderInput={(params: TextFieldProps) => <TextField {...params} />}
InputProps={{
sx: {
height: "40px",
color: theme.palette.secondary.main,
border: "1px solid",
borderColor: theme.palette.secondary.main,
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
},
}}
/>
<CustomTextField
id={""}
name="activationCount"
label="Количество активаций промокода"
value={activationField}
onChange={({ target }) =>
setActivationField(Number(target.value.replace(/\D/g, "")))
}
/>
</>
)}
</Box>
<Box
sx={{
display: "flex",
gap: "30px",
justifyContent: "center",
alignItems: "center",
}}
>
<Button sx={{ maxWidth: "100px" }}
onClick={handleEditClick}
>
Сохранить изменения
</Button>
<Button sx={{ maxWidth: "100px" }} onClick={() => {
setId("");
}}>
Отмена
</Button>
</Box>
</Box>
</Box>
</Modal>
);
};

221
src/pages/dashboard/Content/PromocodeManagement/index.tsx
View File

@ -1,5 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { Box, Typography, useTheme } from "@mui/material"; import {Box, Button, FormControl, InputLabel, MenuItem, Select, Typography, useTheme} from "@mui/material";
import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid"; import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@ -9,6 +9,9 @@ import { CreatePromocodeForm } from "./CreatePromocodeForm";
import { usePromocodeGridColDef } from "./usePromocodeGridColDef"; import { usePromocodeGridColDef } from "./usePromocodeGridColDef";
import { StatisticsModal } from "./StatisticsModal"; import { StatisticsModal } from "./StatisticsModal";
import DeleteModal from "./DeleteModal"; import DeleteModal from "./DeleteModal";
import {promocodeApi} from "@root/api/promocode/requests";
import {SelectChangeEvent} from "@mui/material/Select";
import {EditModal} from "@pages/dashboard/Content/PromocodeManagement/EditModal";
export const PromocodeManagement = () => { export const PromocodeManagement = () => {
const theme = useTheme(); const theme = useTheme();
@ -16,91 +19,135 @@ export const PromocodeManagement = () => {
const [deleteModal, setDeleteModal] = useState<string>(""); const [deleteModal, setDeleteModal] = useState<string>("");
const deleteModalHC = (id: string) => setDeleteModal(id); const deleteModalHC = (id: string) => setDeleteModal(id);
const [showStatisticsModalId, setShowStatisticsModalId] = useState<string>(""); const [showStatisticsModalId, setShowStatisticsModalId] =
const [page, setPage] = useState<number>(0); useState<string>("");
const [to, setTo] = useState(0); const [showEditModalId, setShowEditModalId] =
const [from, setFrom] = useState(0); useState<string>("");
const [pageSize, setPageSize] = useState<number>(10); const [page, setPage] = useState<number>(0);
const { const [to, setTo] = useState(0);
data, const [from, setFrom] = useState(0);
error, const [pageSize, setPageSize] = useState<number>(10);
isValidating, const [active, setActive] = useState(true);
promocodesCount, const {
promocodeStatistics, data,
deletePromocode, error,
createPromocode, isValidating,
createFastLink, promocodesCount,
} = usePromocodes(page, pageSize, showStatisticsModalId, to, from); promocodeStatistics,
const columns = usePromocodeGridColDef(setShowStatisticsModalId, deleteModalHC); deletePromocode,
if (error) return <Typography>Ошибка загрузки промокодов</Typography>; createPromocode,
editPromocode,
createFastLink,
} = usePromocodes(page, pageSize, showStatisticsModalId, to, from, active);
const columns = usePromocodeGridColDef(
setShowEditModalId,
setShowStatisticsModalId,
deleteModalHC
);
if (error) return <Typography>Ошибка загрузки промокодов</Typography>;
return ( return (
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<Typography <Typography
variant="subtitle1" variant="subtitle1"
sx={{ sx={{
width: "90%", width: "90%",
height: "60px", height: "60px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
textTransform: "uppercase", textTransform: "uppercase",
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}} }}
> >
Создание промокода Создание промокода
</Typography> </Typography>
<CreatePromocodeForm createPromocode={createPromocode} /> <CreatePromocodeForm createPromocode={createPromocode} />
<Box style={{ width: "80%", marginTop: "55px" }}> <Box sx={{marginTop: "55px", width: "80%", display: "flex"}}>
<DataGrid <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
disableSelectionOnClick={true} <Select
rows={data?.items ?? []} labelId="demo-simple-select-standard-label"
columns={columns} id="demo-simple-select-standard"
sx={{ sx={{color: "white",
color: theme.palette.secondary.main, backgroundColor: "transparent",
"& .MuiDataGrid-iconSeparator": { display: "none" }, padding: "5px",
"& .css-levciy-MuiTablePagination-displayedRows": { border: "1px solid white",
color: theme.palette.secondary.main, borderRadius: "4px",
}, ".MuiSelect-icon": {
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main }, color: "white"
"& .MuiTablePagination-selectLabel": { }
color: theme.palette.secondary.main, }}
}, value={active? "true" : "false"}
"& .MuiInputBase-root": { color: theme.palette.secondary.main }, onChange={(event: SelectChangeEvent) => {
"& .MuiButton-text": { color: theme.palette.secondary.main }, setActive((event.target.value) === "true" ? true : false);
"& .MuiDataGrid-overlay": { }}
backgroundColor: "rgba(255, 255, 255, 0.1)", label="Age"
animation: `${fadeIn} 0.5s ease-out`, >
}, <MenuItem value={"true"}>Активные</MenuItem>
}} <MenuItem value={"false"}>Неактивные</MenuItem>
components={{ </Select>
Toolbar: GridToolbar, </FormControl>
LoadingOverlay: GridLoadingOverlay, </Box>
}} <Box style={{ width: "80%", marginTop: "25px" }}>
loading={isValidating} <DataGrid
paginationMode="server" disableSelectionOnClick={true}
page={page} rows={data?.items ?? []}
onPageChange={setPage} columns={columns}
rowCount={promocodesCount} sx={{
pageSize={pageSize} color: theme.palette.secondary.main,
onPageSizeChange={setPageSize} "& .MuiDataGrid-iconSeparator": { display: "none" },
rowsPerPageOptions={[10, 25, 50, 100]} "& .css-levciy-MuiTablePagination-displayedRows": {
autoHeight color: theme.palette.secondary.main,
/> },
</Box> "& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
<StatisticsModal "& .MuiTablePagination-selectLabel": {
id={showStatisticsModalId} color: theme.palette.secondary.main,
setId={setShowStatisticsModalId} },
promocodeStatistics={promocodeStatistics} "& .MuiInputBase-root": { color: theme.palette.secondary.main },
to={to} "& .MuiButton-text": { color: theme.palette.secondary.main },
setTo={setTo} "& .MuiDataGrid-overlay": {
from={from} backgroundColor: "rgba(255, 255, 255, 0.1)",
setFrom={setFrom} animation: `${fadeIn} 0.5s ease-out`,
promocodes={data?.items ?? []} },
createFastLink={createFastLink} }}
/> components={{
<DeleteModal id={deleteModal} setModal={setDeleteModal} deletePromocode={deletePromocode} /> Toolbar: GridToolbar,
</LocalizationProvider> LoadingOverlay: GridLoadingOverlay,
); }}
loading={isValidating}
paginationMode="server"
page={page}
onPageChange={setPage}
rowCount={promocodesCount}
pageSize={pageSize}
onPageSizeChange={setPageSize}
rowsPerPageOptions={[10, 25, 50, 100]}
autoHeight
/>
</Box>
<EditModal
id={showEditModalId}
setId={setShowEditModalId}
promocodes={data?.items ?? []}
editPromocode={editPromocode}
/>
<StatisticsModal
id={showStatisticsModalId}
setId={setShowStatisticsModalId}
promocodeStatistics={promocodeStatistics}
to={to}
setTo={setTo}
from={from}
setFrom={setFrom}
promocodes={data?.items ?? []}
createFastLink={createFastLink}
/>
<DeleteModal
id={deleteModal}
setModal={setDeleteModal}
deletePromocode={deletePromocode}
/>
</LocalizationProvider>
);
}; };

200
src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx
View File

@ -3,95 +3,117 @@ import { GridColDef } from "@mui/x-data-grid";
import { Promocode } from "@root/model/promocodes"; import { Promocode } from "@root/model/promocodes";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { BarChart, Delete } from "@mui/icons-material"; import { BarChart, Delete, Edit } from "@mui/icons-material";
import { promocodeApi } from "@root/api/promocode/requests"; import { promocodeApi } from "@root/api/promocode/requests";
export function usePromocodeGridColDef(setStatistics: (id: string) => void, deletePromocode: (id: string) => void) { export function usePromocodeGridColDef(
const validity = (value: string | number) => { setEdit: (id: string) => void,
if (value === 0) { setStatistics: (id: string) => void,
return "неоганичен"; deletePromocode: (id: string) => void
} else { ) {
return new Date(value).toLocaleString(); const validity = (value: string | number) => {
} if (value === 0) {
}; return "неоганичен";
return useMemo<GridColDef<Promocode, string | number, string>[]>( } else {
() => [ return new Date(value).toLocaleString();
{ }
field: "id", };
headerName: "ID", return useMemo<GridColDef<Promocode, string | number, string>[]>(
width: 30, () => [
sortable: false, {
valueGetter: ({ row }) => row.id, field: "id",
}, headerName: "ID",
{ width: 30,
field: "codeword", sortable: false,
headerName: "Кодовое слово", valueGetter: ({ row }) => row.id,
width: 160, },
sortable: false, {
valueGetter: ({ row }) => row.codeword, field: "codeword",
}, headerName: "Кодовое слово",
{ width: 160,
field: "factor", sortable: false,
headerName: "Коэф. скидки", valueGetter: ({ row }) => row.codeword,
width: 120, },
sortable: false, {
valueGetter: ({ row }) => Math.round(row.bonus.discount.factor * 1000) / 1000, field: "factor",
}, headerName: "Коэф. скидки",
{ width: 120,
field: "activationCount", sortable: false,
headerName: "Кол-во активаций", valueGetter: ({ row }) =>
width: 140, Math.round(row.bonus.discount.factor * 1000) / 1000,
sortable: false, },
valueGetter: ({ row }) => row.activationCount, {
}, field: "activationCount",
{ headerName: "Кол-во активаций",
field: "dueTo", width: 140,
headerName: "Истекает", sortable: false,
width: 160, valueGetter: ({ row }) => row.activationCount,
sortable: false, },
valueGetter: ({ row }) => row.dueTo * 1000, {
valueFormatter: ({ value }) => `${validity(value)}`, field: "dueTo",
}, headerName: "Истекает",
{ width: 160,
field: "description", sortable: false,
headerName: "Описание", valueGetter: ({ row }) => row.dueTo * 1000,
minWidth: 200, valueFormatter: ({ value }) => `${validity(value)}`,
flex: 1, },
sortable: false, {
valueGetter: ({ row }) => row.description, field: "description",
}, headerName: "Описание",
{ minWidth: 200,
field: "settings", flex: 1,
headerName: "", sortable: false,
width: 60, valueGetter: ({ row }) => row.description,
sortable: false, },
renderCell: (params) => { {
return ( field: "edit",
<IconButton headerName: "",
onClick={() => { width: 60,
setStatistics(params.row.id); sortable: false,
promocodeApi.getPromocodeStatistics(params.row.id, 0, 0); renderCell: (params) => {
}} return (
> <IconButton
<BarChart /> onClick={() => {
</IconButton> setEdit(params.row.id);
); }}
}, >
}, <Edit />
{ </IconButton>
field: "delete", );
headerName: "", },
width: 60, },
sortable: false, {
renderCell: (params) => { field: "settings",
return ( headerName: "",
<IconButton onClick={() => deletePromocode(params.row.id)}> width: 60,
<Delete /> sortable: false,
</IconButton> renderCell: (params) => {
); return (
}, <IconButton
}, onClick={() => {
], setStatistics(params.row.id);
[deletePromocode, setStatistics] promocodeApi.getPromocodeStatistics(params.row.id, 0, 0);
); }}
>
<BarChart />
</IconButton>
);
},
},
{
field: "delete",
headerName: "",
width: 60,
sortable: false,
renderCell: (params) => {
return (
<IconButton onClick={() => deletePromocode(params.row.id)}>
<Delete />
</IconButton>
);
},
},
],
[deletePromocode, setStatistics, setEdit]
);
} }

190
src/pages/dashboard/Content/QuizStatistics/StastisticsPromocode.tsx
View File

@ -1,70 +1,144 @@
import { useState } from "react"; import { useState } from "react";
import moment from "moment"; import moment from "moment";
import { Table, TableBody, TableCell, TableHead, TableRow, Typography, useTheme } from "@mui/material"; import {
Box,
FormControl, MenuItem, Select,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
useTheme,
} from "@mui/material";
import { DateFilter } from "./DateFilter"; import { DateFilter } from "./DateFilter";
import { useAllPromocodes } from "@root/api/promocode/swr"; import {useAllPromocodes, useNotActivePromocodes} from "@root/api/promocode/swr";
import { usePromocodeStatistics } from "@root/utils/hooks/usePromocodeStatistics"; import { usePromocodeStatistics } from "@root/utils/hooks/usePromocodeStatistics";
import type { Moment } from "moment"; import type { Moment } from "moment";
import {SelectChangeEvent} from "@mui/material/Select";
type PropStatistic = {
"id": string,
"Regs": number,
"Money": number,
"codeword": string,
}
export const StatisticsPromocode = () => { export const StatisticsPromocode = () => {
const [from, setFrom] = useState<Moment | null>(moment(moment().subtract(4, "weeks"))); const [from, setFrom] = useState<Moment | null>(
const [to, setTo] = useState<Moment | null>(moment()); moment(moment().subtract(4, "weeks"))
const promocodes = useAllPromocodes(); );
const promocodeStatistics = usePromocodeStatistics({ to, from }); const [to, setTo] = useState<Moment | null>(moment());
const theme = useTheme(); const [active, setActive] = useState(true);
const promocodes = useAllPromocodes();
const promocodesNot = useNotActivePromocodes();
const promocodeStatistics = usePromocodeStatistics({ to, from });
const theme = useTheme();
return ( const filterPromo = active ? promocodes : promocodesNot;
<> console.log(promocodes, "active");
<Typography sx={{ marginTop: "30px" }}>Статистика промокодов</Typography> console.log(promocodesNot);
<DateFilter from={from} to={to} setFrom={setFrom} setTo={setTo} />
<Table const filteredPromoStatistics = () => {
sx={{ const copyPromocodeStatistics:PropStatistic[] = [];
width: "80%", Object.entries(promocodeStatistics).map(([key, { Regs, Money }]) => {
border: "2px solid",
borderColor: theme.palette.secondary.main, for(const i in filterPromo){
bgcolor: theme.palette.content.main, if(filterPromo[i].id === key) {
color: "white", copyPromocodeStatistics.push(
marginTop: "30px", {
}} "id": key,
> "Regs": Regs,
<TableHead> "Money": Money,
<TableRow "codeword": filterPromo[i].codeword,
sx={{ }
borderBottom: "2px solid", );
borderColor: theme.palette.grayLight.main,
height: "100px", }}
}}
> });
<TableCell sx={{ color: "inherit" }} align="center"> return copyPromocodeStatistics;
Промокод };
</TableCell>
<TableCell sx={{ color: "inherit" }} align="center"> const filteredStat = filteredPromoStatistics();
Регистации
</TableCell> return (
<TableCell sx={{ color: "inherit" }} align="center"> <>
Внесено <Typography sx={{ marginTop: "30px" }}>Статистика промокодов</Typography>
</TableCell> <DateFilter from={from} to={to} setFrom={setFrom} setTo={setTo} />
</TableRow> <Box sx={{marginTop: "55px", width: "80%", display: "flex"}}>
</TableHead> <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
{Object.entries(promocodeStatistics).map(([key, { Regs, Money }]) => ( <Select
<TableBody key={key}> labelId="demo-simple-select-standard-label"
<TableRow> id="demo-simple-select-standard"
<TableCell sx={{ color: "inherit" }} align="center"> sx={{color: "white",
{promocodes.find(({ id }) => id === key)?.codeword ?? ""} backgroundColor: "transparent",
</TableCell> padding: "5px",
<TableCell sx={{ color: "inherit" }} align="center"> border: "1px solid white",
{Regs} borderRadius: "4px",
</TableCell> ".MuiSelect-icon": {
<TableCell sx={{ color: "inherit" }} align="center"> color: "white"
{(Money / 100).toFixed(2)} }
</TableCell> }}
</TableRow> value={active? "true" : "false"}
</TableBody> onChange={(event: SelectChangeEvent) => {
))} setActive((event.target.value) === "true" ? true : false);
</Table> }}
</> label="Age"
); >
<MenuItem value={"true"}>Активные</MenuItem>
<MenuItem value={"false"}>Неактивные</MenuItem>
</Select>
</FormControl>
</Box>
<Table
sx={{
width: "80%",
border: "2px solid",
borderColor: theme.palette.secondary.main,
bgcolor: theme.palette.content.main,
color: "white",
marginTop: "30px",
}}
>
<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>
</TableRow>
</TableHead>
{filteredStat.map((stat) => (
<TableBody>
<TableRow>
<TableCell sx={{ color: "inherit" }} align="center">
{stat?.codeword}
</TableCell>
<TableCell sx={{ color: "inherit" }} align="center">
{stat?.Regs}
</TableCell>
<TableCell sx={{ color: "inherit" }} align="center">
{(stat?.Money / 100).toFixed(2)}
</TableCell>
</TableRow>
</TableBody>
))}
</Table>
</>
);
}; };

10
src/test/test.tsx Normal file
View File

@ -0,0 +1,10 @@
export const Test = () => {
console.log(1);
let a;
return <div></div>;
};