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

feat: Promocode statistics modal

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-26 18:41:22 +03:00
parent e4ecd541ff
commit fd80f38b4f
6 changed files with 577 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,12 @@
import { makeRequest } from "@frontend/kitui"; import { makeRequest } from "@frontend/kitui";
import { CreatePromocodeBody, GetPromocodeListBody, Promocode, PromocodeList } from "@root/model/promocodes";
import type {
CreatePromocodeBody,
GetPromocodeListBody,
Promocode,
PromocodeList,
PromocodeStatistics,
} from "@root/model/promocodes";
import { parseAxiosError } from "@root/utils/parse-error"; import { parseAxiosError } from "@root/utils/parse-error";
import { isAxiosError } from "axios"; import { isAxiosError } from "axios";
@ -7,62 +14,84 @@ import { isAxiosError } from "axios";
const baseUrl = process.env.REACT_APP_DOMAIN + "/codeword/promocode"; const baseUrl = process.env.REACT_APP_DOMAIN + "/codeword/promocode";
const getPromocodeList = async (body: GetPromocodeListBody) => { const getPromocodeList = async (body: GetPromocodeListBody) => {
try { try {
const promocodeListResponse = await makeRequest< const promocodeListResponse = await makeRequest<
GetPromocodeListBody, GetPromocodeListBody,
PromocodeList PromocodeList
>({ >({
url: baseUrl + "/getList", url: baseUrl + "/getList",
method: "POST", method: "POST",
body, body,
useToken: false, useToken: false,
}); });
return promocodeListResponse; return promocodeListResponse;
} catch (nativeError) { } catch (nativeError) {
const [error] = parseAxiosError(nativeError); const [error] = parseAxiosError(nativeError);
throw new Error(`Ошибка при получении списка промокодов. ${error}`); throw new Error(`Ошибка при получении списка промокодов. ${error}`);
} }
}; };
const createPromocode = async (body: CreatePromocodeBody) => { const createPromocode = async (body: CreatePromocodeBody) => {
try { try {
const createPromocodeResponse = await makeRequest< const createPromocodeResponse = await makeRequest<
CreatePromocodeBody, CreatePromocodeBody,
Promocode Promocode
>({ >({
url: baseUrl + "/create", url: baseUrl + "/create",
method: "POST", method: "POST",
body, body,
useToken: false, useToken: false,
}); });
return createPromocodeResponse; return createPromocodeResponse;
} catch (nativeError) { } catch (nativeError) {
if (isAxiosError(nativeError) && nativeError.response?.data.error === "Duplicate Codeword") { if (
throw new Error(`Промокод уже существует`); isAxiosError(nativeError) &&
} nativeError.response?.data.error === "Duplicate Codeword"
) {
const [error] = parseAxiosError(nativeError); throw new Error(`Промокод уже существует`);
throw new Error(`Ошибка создания промокода. ${error}`);
} }
const [error] = parseAxiosError(nativeError);
throw new Error(`Ошибка создания промокода. ${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>({
url: `${baseUrl}/${id}`, url: `${baseUrl}/${id}`,
method: "DELETE", method: "DELETE",
useToken: false, useToken: false,
}); });
} catch (nativeError) { } catch (nativeError) {
const [error] = parseAxiosError(nativeError); const [error] = parseAxiosError(nativeError);
throw new Error(`Ошибка удаления промокода. ${error}`); throw new Error(`Ошибка удаления промокода. ${error}`);
} }
};
const getPromocodeStatistics = async (id: string) => {
try {
const promocodeStatisticsResponse = await makeRequest<
unknown,
PromocodeStatistics[]
>({
url: baseUrl + `/getStatistics/${id}`,
method: "GET",
useToken: false,
});
return promocodeStatisticsResponse;
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
throw new Error(`Ошибка при получении статистики промокода. ${error}`);
}
}; };
export const promocodeApi = { export const promocodeApi = {
getPromocodeList, getPromocodeList,
createPromocode, createPromocode,
deletePromocode, deletePromocode,
getPromocodeStatistics,
}; };

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

@ -1,81 +1,119 @@
import { CreatePromocodeBody, PromocodeList } from "@root/model/promocodes";
import { enqueueSnackbar } from "notistack";
import { useCallback, useRef } from "react"; import { useCallback, useRef } from "react";
import useSwr, { mutate } from "swr"; import useSwr, { mutate } from "swr";
import { enqueueSnackbar } from "notistack";
import { promocodeApi } from "./requests"; import { promocodeApi } from "./requests";
import type {
CreatePromocodeBody,
PromocodeList,
} from "@root/model/promocodes";
export function usePromocodes(page: number, pageSize: number) { export function usePromocodes(
const promocodesCountRef = useRef<number>(0); page: number,
const swrResponse = useSwr( pageSize: number,
["promocodes", page, pageSize], promocodeId: string
async (key) => { ) {
const result = await promocodeApi.getPromocodeList({ const promocodesCountRef = useRef<number>(0);
limit: key[2], const swrResponse = useSwr(
filter: { ["promocodes", page, pageSize],
active: true, async (key) => {
}, const result = await promocodeApi.getPromocodeList({
page: key[1], limit: key[2],
}); filter: {
active: true,
promocodesCountRef.current = result.count;
return result;
}, },
{ page: key[1],
onError(err) { });
console.log("Error fetching promocodes", err);
enqueueSnackbar(err.message, { variant: "error" }); promocodesCountRef.current = result.count;
return result;
},
{
onError(err) {
console.log("Error fetching promocodes", err);
enqueueSnackbar(err.message, { variant: "error" });
},
focusThrottleInterval: 60e3,
keepPreviousData: true,
}
);
const createPromocode = useCallback(
async function (body: CreatePromocodeBody) {
try {
await promocodeApi.createPromocode(body);
mutate(["promocodes", page, pageSize]);
} catch (error) {
console.log("Error creating 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 {
count: displayedData.count - 1,
items: displayedData.items.filter((item) => item.id !== id),
};
}, },
focusThrottleInterval: 60e3, rollbackOnError: true,
keepPreviousData: true, populateCache(result, currentData) {
} if (!currentData) return;
);
const createPromocode = useCallback(async function (body: CreatePromocodeBody) { return {
try { count: currentData.count - 1,
await promocodeApi.createPromocode(body); items: currentData.items.filter((item) => item.id !== id),
mutate(["promocodes", page, pageSize]); };
} catch (error) { },
console.log("Error creating promocode", error); }
if (error instanceof Error) enqueueSnackbar(error.message, { variant: "error" }); );
} } catch (error) {
}, [page, pageSize]); console.log("Error deleting promocode", error);
if (error instanceof Error)
enqueueSnackbar(error.message, { variant: "error" });
}
},
[page, pageSize]
);
const deletePromocode = useCallback(async function (id: string) { const promocodeStatistics = useSwr(
try { ["promocodeStatistics", promocodeId],
await mutate<PromocodeList | undefined, void>( async ([_, id]) => {
["promocodes", page, pageSize], if (!id) {
promocodeApi.deletePromocode(id), return null;
{ }
optimisticData(currentData, displayedData) {
if (!displayedData) return;
return { const promocodeStatisticsResponse =
count: displayedData.count - 1, await promocodeApi.getPromocodeStatistics(id);
items: displayedData.items.filter((item) => item.id !== id),
};
},
rollbackOnError: true,
populateCache(result, currentData) {
if (!currentData) return;
return { return promocodeStatisticsResponse;
count: currentData.count - 1, },
items: currentData.items.filter((item) => item.id !== id), {
}; onError(err) {
}, console.log("Error fetching promocode statistics", err);
} enqueueSnackbar(err.message, { variant: "error" });
); },
} catch (error) { focusThrottleInterval: 60e3,
console.log("Error deleting promocode", error); keepPreviousData: true,
if (error instanceof Error) enqueueSnackbar(error.message, { variant: "error" }); }
} );
}, [page, pageSize]);
return { return {
...swrResponse, ...swrResponse,
createPromocode, createPromocode,
deletePromocode, deletePromocode,
promocodesCount: promocodesCountRef.current, promocodeStatistics: promocodeStatistics.data,
}; promocodesCount: promocodesCountRef.current,
} };
}

65
src/model/promocodes.ts
View File

@ -1,41 +1,48 @@
export type CreatePromocodeBody = { export type CreatePromocodeBody = {
codeword: string; codeword: string;
description: string; description: string;
greetings: string; greetings: string;
dueTo: number; dueTo: number;
activationCount: number; activationCount: number;
bonus: { bonus: {
privilege: { privilege: {
privilegeID: string; privilegeID: string;
amount: number; amount: number;
};
discount: {
layer: number;
factor: number;
target: string;
threshold: number;
};
}; };
discount: {
layer: number;
factor: number;
target: string;
threshold: number;
};
};
}; };
export type GetPromocodeListBody = { export type GetPromocodeListBody = {
page: number; page: number;
limit: number; limit: number;
filter: { filter: {
active: boolean; active: boolean;
text?: string; text?: string;
}; };
}; };
export type Promocode = CreatePromocodeBody & { export type Promocode = CreatePromocodeBody & {
id: string; id: string;
outdated: boolean; outdated: boolean;
offLimit: boolean; offLimit: boolean;
delete: boolean; delete: boolean;
createdAt: string; createdAt: string;
}; };
export type PromocodeList = { export type PromocodeList = {
count: number; count: number;
items: Promocode[]; items: Promocode[];
};
export type PromocodeStatistics = {
id: string;
link: string;
useCount: number;
purchasesCount: number;
}; };

203
src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx Normal file
View File

@ -0,0 +1,203 @@
import { useState } from "react";
import {
Box,
Button,
Typography,
Modal,
TextField,
useTheme,
useMediaQuery,
} from "@mui/material";
import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
import { fadeIn } from "@root/utils/style/keyframes";
import type { GridColDef } from "@mui/x-data-grid";
import type { PromocodeStatistics } from "@root/model/promocodes";
type StatisticsModalProps = {
id: string;
setId: (id: string) => void;
promocodeStatistics: PromocodeStatistics[] | null | undefined;
};
const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
{
field: "link",
headerName: "Ссылка",
width: 320,
sortable: false,
valueGetter: ({ row }) => row.link,
},
{
field: "useCount",
headerName: "Использований",
width: 120,
sortable: false,
valueGetter: ({ row }) => String(row.useCount),
},
{
field: "purchasesCount",
headerName: "Покупок",
width: 70,
sortable: false,
valueGetter: ({ row }) => String(row.purchasesCount),
},
];
export const StatisticsModal = ({
id,
setId,
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));
return (
<Modal
open={Boolean(id)}
onClose={() => setId("")}
sx={{ "& > .MuiBox-root": { outline: "none" } }}
>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "95%",
maxWidth: "600px",
bgcolor: "background.paper",
border: "2px solid gray",
borderRadius: "6px",
boxShadow: 24,
p: 4,
}}
>
<Box
sx={{
display: "flex",
gap: "30px",
justifyContent: "center",
alignItems: "center",
flexDirection: isMobile ? "column" : "row",
}}
>
<Box
sx={{
display: "flex",
gap: "30px",
justifyContent: "center",
alignItems: "center",
}}
>
<Button
sx={{ maxWidth: "100px" }}
// onClick={() => }
>
Создать короткую ссылку
</Button>
<Button
sx={{ maxWidth: "100px" }}
// onClick={() => }
>
Обновить статистику
</Button>
</Box>
<Box sx={{ minWidth: "200px" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Typography sx={{ minWidth: "20px" }}>от</Typography>
<DesktopDatePicker
inputFormat="DD/MM/YYYY"
value={startDate}
onChange={(date) => date && setStartDate(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
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginTop: "10px",
}}
>
<Typography sx={{ minWidth: "20px" }}>до</Typography>
<DesktopDatePicker
inputFormat="DD/MM/YYYY"
value={endDate}
onChange={(date) => date && setEndDate(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>
</Box>
<DataGrid
disableSelectionOnClick={true}
rows={promocodeStatistics ?? []}
columns={COLUMNS}
sx={{
marginTop: "30px",
background: "#1F2126",
color: theme.palette.secondary.main,
"& .MuiDataGrid-iconSeparator": { display: "none" },
"& .css-levciy-MuiTablePagination-displayedRows": {
color: theme.palette.secondary.main,
},
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
"& .MuiTablePagination-selectLabel": {
color: theme.palette.secondary.main,
},
"& .MuiInputBase-root": { color: theme.palette.secondary.main },
"& .MuiButton-text": { color: theme.palette.secondary.main },
"& .MuiDataGrid-overlay": {
backgroundColor: "rgba(255, 255, 255, 0.1)",
animation: `${fadeIn} 0.5s ease-out`,
},
}}
components={{
Toolbar: GridToolbar,
LoadingOverlay: GridLoadingOverlay,
}}
rowsPerPageOptions={[10, 25, 50, 100]}
autoHeight
/>
</Box>
</Modal>
);
};

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

@ -1,78 +1,96 @@
import { useState } from "react";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, 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";
import { usePromocodes } from "@root/api/promocode/swr"; import { usePromocodes } from "@root/api/promocode/swr";
import { fadeIn } from "@root/utils/style/keyframes"; import { fadeIn } from "@root/utils/style/keyframes";
import { useState } from "react";
import { CreatePromocodeForm } from "./CreatePromocodeForm"; import { CreatePromocodeForm } from "./CreatePromocodeForm";
import { usePromocodeGridColDef } from "./usePromocodeGridColDef"; import { usePromocodeGridColDef } from "./usePromocodeGridColDef";
import { StatisticsModal } from "./StatisticsModal";
export const PromocodeManagement = () => { export const PromocodeManagement = () => {
const theme = useTheme(); const theme = useTheme();
const [page, setPage] = useState<number>(0); const [showStatisticsModalId, setShowStatisticsModalId] =
const [pageSize, setPageSize] = useState<number>(10); useState<string>("");
const { data, error, isValidating, promocodesCount, deletePromocode, createPromocode } = usePromocodes(page, pageSize); const [page, setPage] = useState<number>(0);
const columns = usePromocodeGridColDef(deletePromocode); const [pageSize, setPageSize] = useState<number>(10);
const {
data,
error,
isValidating,
promocodesCount,
promocodeStatistics,
deletePromocode,
createPromocode,
} = usePromocodes(page, pageSize, showStatisticsModalId);
const columns = usePromocodeGridColDef(
setShowStatisticsModalId,
deletePromocode
);
if (error) return <Typography>Ошибка загрузки промокодов</Typography>; 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 style={{ width: "80%", marginTop: "55px" }}>
<DataGrid <DataGrid
disableSelectionOnClick={true} disableSelectionOnClick={true}
rows={data?.items ?? []} rows={data?.items ?? []}
columns={columns} columns={columns}
sx={{ sx={{
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
"& .MuiDataGrid-iconSeparator": { display: "none" }, "& .MuiDataGrid-iconSeparator": { display: "none" },
"& .css-levciy-MuiTablePagination-displayedRows": { "& .css-levciy-MuiTablePagination-displayedRows": {
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}, },
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main }, "& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
"& .MuiTablePagination-selectLabel": { "& .MuiTablePagination-selectLabel": {
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}, },
"& .MuiInputBase-root": { color: theme.palette.secondary.main }, "& .MuiInputBase-root": { color: theme.palette.secondary.main },
"& .MuiButton-text": { color: theme.palette.secondary.main }, "& .MuiButton-text": { color: theme.palette.secondary.main },
"& .MuiDataGrid-overlay": { "& .MuiDataGrid-overlay": {
backgroundColor: "rgba(255, 255, 255, 0.1)", backgroundColor: "rgba(255, 255, 255, 0.1)",
animation: `${fadeIn} 0.5s ease-out`, animation: `${fadeIn} 0.5s ease-out`,
}, },
}} }}
components={{ components={{
Toolbar: GridToolbar, Toolbar: GridToolbar,
LoadingOverlay: GridLoadingOverlay, LoadingOverlay: GridLoadingOverlay,
}} }}
loading={isValidating} loading={isValidating}
paginationMode="server" paginationMode="server"
page={page} page={page}
onPageChange={setPage} onPageChange={setPage}
rowCount={promocodesCount} rowCount={promocodesCount}
pageSize={pageSize} pageSize={pageSize}
onPageSizeChange={setPageSize} onPageSizeChange={setPageSize}
rowsPerPageOptions={[10, 25, 50, 100]} rowsPerPageOptions={[10, 25, 50, 100]}
autoHeight autoHeight
/> />
</Box> </Box>
</LocalizationProvider> <StatisticsModal
); id={showStatisticsModalId}
setId={setShowStatisticsModalId}
promocodeStatistics={promocodeStatistics}
/>
</LocalizationProvider>
);
}; };

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

@ -1,59 +1,80 @@
import DeleteIcon from '@mui/icons-material/Delete';
import { IconButton } from "@mui/material"; import { IconButton } from "@mui/material";
import { GridColDef } from "@mui/x-data-grid"; import { GridColDef } from "@mui/x-data-grid";
import { Promocode } from "@root/model/promocodes"; import { Promocode } from "@root/model/promocodes";
import { useMemo } from "react"; import { useMemo } from "react";
export function usePromocodeGridColDef(deletePromocode: (id: string) => void) { import { BarChart, Delete } from "@mui/icons-material";
return useMemo<GridColDef<Promocode, string | number, string>[]>(() => [
{ export function usePromocodeGridColDef(
field: "id", setStatistics: (id: string) => void,
headerName: "ID", deletePromocode: (id: string) => void
width: 30, ) {
sortable: false, return useMemo<GridColDef<Promocode, string | number, string>[]>(
valueGetter: ({ row }) => row.id, () => [
{
field: "id",
headerName: "ID",
width: 30,
sortable: false,
valueGetter: ({ row }) => row.id,
},
{
field: "codeword",
headerName: "Кодовое слово",
width: 160,
sortable: false,
valueGetter: ({ row }) => row.codeword,
},
{
field: "factor",
headerName: "Коэф. скидки",
width: 120,
sortable: false,
valueGetter: ({ row }) =>
Math.round(row.bonus.discount.factor * 1000) / 1000,
},
{
field: "activationCount",
headerName: "Кол-во активаций",
width: 140,
sortable: false,
valueGetter: ({ row }) => row.activationCount,
},
{
field: "dueTo",
headerName: "Истекает",
width: 160,
sortable: false,
valueGetter: ({ row }) => row.dueTo * 1000,
valueFormatter: ({ value }) => new Date(value).toLocaleString(),
},
{
field: "settings",
headerName: "",
width: 60,
sortable: false,
renderCell: (params) => {
return (
<IconButton onClick={() => setStatistics(params.row.id)}>
<BarChart />
</IconButton>
);
}, },
{ },
field: "codeword", {
headerName: "Кодовое слово", field: "delete",
width: 160, headerName: "",
sortable: false, width: 60,
valueGetter: ({ row }) => row.codeword, sortable: false,
renderCell: (params) => {
return (
<IconButton onClick={() => deletePromocode(params.row.id)}>
<Delete />
</IconButton>
);
}, },
{ },
field: "factor", ],
headerName: "Коэф. скидки", [deletePromocode, setStatistics]
width: 120, );
sortable: false,
valueGetter: ({ row }) => Math.round(row.bonus.discount.factor * 1000) / 1000,
},
{
field: "activationCount",
headerName: "Кол-во активаций",
width: 140,
sortable: false,
valueGetter: ({ row }) => row.activationCount,
},
{
field: "dueTo",
headerName: "Истекает",
width: 160,
sortable: false,
valueGetter: ({ row }) => row.dueTo * 1000,
valueFormatter: ({ value }) => new Date(value).toLocaleString(),
},
{
field: "delete",
headerName: "",
width: 60,
sortable: false,
renderCell: (params) => {
return (
<IconButton onClick={() => deletePromocode(params.row.id)}>
<DeleteIcon />
</IconButton>
);
},
},
], [deletePromocode]);
} }