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

редактирование промокода

Browse Source
This commit is contained in:
Tamara 2024-05-15 01:21:07 +03:00
parent 9a07609e64
commit dddc5a6b35
6 changed files with 284 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import makeRequest from "@root/api/makeRequest";
import type {
CreatePromocodeBody,
CreatePromocodeBody, EditPromocodeBody,
GetPromocodeListBody,
Promocode,
PromocodeList,
@ -124,6 +124,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> => {
try {
await makeRequest<never, never>({
@ -162,6 +176,7 @@ const getPromocodeStatistics = async (id: string, from: number, to: number) => {
export const promocodeApi = {
getPromocodeList,
createPromocode,
editPromocode,
deletePromocode,
getAllPromocodes,
getNotActivePromocodes,

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

@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
import { promocodeApi } from "./requests";
import type {
CreatePromocodeBody,
CreatePromocodeBody, EditPromocodeBody,
PromocodeList,
} from "@root/model/promocodes";
@ -55,6 +55,29 @@ export function usePromocodes(
[page, pageSize]
);
const editPromocode = useCallback(
async function (body: EditPromocodeBody) {
try {
await promocodeApi.editPromocode(body);
mutate<PromocodeList | undefined, void>(
["promocodes", page, pageSize, active],
);
await promocodeApi.getPromocodeList({
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 {
@ -130,6 +153,7 @@ export function usePromocodes(
...swrResponse,
createPromocode,
deletePromocode,
editPromocode,
createFastLink,
promocodeStatistics: promocodeStatistics.data,
promocodesCount: promocodesCountRef.current,

10
src/model/promocodes.ts
View File

@ -49,3 +49,13 @@ export type PromocodeStatistics = {
usageCount: 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;
let 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>
);
};

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

@ -11,6 +11,7 @@ import { StatisticsModal } from "./StatisticsModal";
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 = () => {
const theme = useTheme();
@ -20,6 +21,8 @@ export const PromocodeManagement = () => {
const [showStatisticsModalId, setShowStatisticsModalId] =
useState<string>("");
const [showEditModalId, setShowEditModalId] =
useState<string>("");
const [page, setPage] = useState<number>(0);
const [to, setTo] = useState(0);
const [from, setFrom] = useState(0);
@ -33,9 +36,11 @@ export const PromocodeManagement = () => {
promocodeStatistics,
deletePromocode,
createPromocode,
editPromocode,
createFastLink,
} = usePromocodes(page, pageSize, showStatisticsModalId, to, from, active);
const columns = usePromocodeGridColDef(
setShowEditModalId,
setShowStatisticsModalId,
deleteModalHC
);
@ -121,6 +126,12 @@ export const PromocodeManagement = () => {
autoHeight
/>
</Box>
<EditModal
id={showEditModalId}
setId={setShowEditModalId}
promocodes={data?.items ?? []}
editPromocode={editPromocode}
/>
<StatisticsModal
id={showStatisticsModalId}
setId={setShowStatisticsModalId}

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

@ -3,10 +3,11 @@ import { GridColDef } from "@mui/x-data-grid";
import { Promocode } from "@root/model/promocodes";
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";
export function usePromocodeGridColDef(
setEdit: (id: string) => void,
setStatistics: (id: string) => void,
deletePromocode: (id: string) => void
) {
@ -64,6 +65,23 @@ export function usePromocodeGridColDef(
sortable: false,
valueGetter: ({ row }) => row.description,
},
{
field: "edit",
headerName: "",
width: 60,
sortable: false,
renderCell: (params) => {
return (
<IconButton
onClick={() => {
setEdit(params.row.id);
}}
>
<Edit />
</IconButton>
);
},
},
{
field: "settings",
headerName: "",
@ -96,6 +114,6 @@ export function usePromocodeGridColDef(
},
},
],
[deletePromocode, setStatistics]
[deletePromocode, setStatistics, setEdit]
);
}