format
This commit is contained in:
nflnkr
parent
7ee141cf66
commit
7d774410b3
@ -1,144 +1,142 @@
|
||||
import { Box, Typography, FormControl, InputBase, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import CustomButton from "@components/CustomButton";
|
||||
|
||||
import { apiRequestHandler } from "@utils/api/apiRequestHandler";
|
||||
import { ApiError } from "@utils/api/types";
|
||||
|
||||
import { useSnackbar } from "notistack";
|
||||
|
||||
|
||||
export default function CreateTicket() {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const navigate = useNavigate();
|
||||
const [ticketName, setTicketName] = useState<string>("");
|
||||
const [ticketBody, setTicketBody] = useState<string>("");
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const navigate = useNavigate();
|
||||
const [ticketName, setTicketName] = useState<string>("");
|
||||
const [ticketBody, setTicketBody] = useState<string>("");
|
||||
|
||||
async function handleCreateTicket() {
|
||||
const result = await apiRequestHandler.createTicket({
|
||||
Title: ticketName,
|
||||
Message: ticketBody,
|
||||
});
|
||||
if (result instanceof ApiError) {
|
||||
enqueueSnackbar(`Error: ${result.message}`);
|
||||
} else if (result instanceof Error) {
|
||||
console.log(result);
|
||||
enqueueSnackbar(`Unknown error`);
|
||||
} else {
|
||||
navigate(`/support/${result.Ticket}`);
|
||||
async function handleCreateTicket() {
|
||||
const result = await apiRequestHandler.createTicket({
|
||||
Title: ticketName,
|
||||
Message: ticketBody,
|
||||
});
|
||||
if (result instanceof ApiError) {
|
||||
enqueueSnackbar(`Error: ${result.message}`);
|
||||
} else if (result instanceof Error) {
|
||||
console.log(result);
|
||||
enqueueSnackbar(`Unknown error`);
|
||||
} else {
|
||||
navigate(`/support/${result.Ticket}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: upMd ? "white" : undefined,
|
||||
display: "flex",
|
||||
flexDirection: upMd ? "row" : "column",
|
||||
maxHeight: upMd ? "443px" : undefined,
|
||||
borderRadius: "12px",
|
||||
p: upMd ? "20px" : undefined,
|
||||
gap: upMd ? "40px" : "20px",
|
||||
boxShadow: upMd
|
||||
? `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: upMd ? "white" : undefined,
|
||||
display: "flex",
|
||||
flexDirection: upMd ? "row" : "column",
|
||||
maxHeight: upMd ? "443px" : undefined,
|
||||
borderRadius: "12px",
|
||||
p: upMd ? "20px" : undefined,
|
||||
gap: upMd ? "40px" : "20px",
|
||||
boxShadow: upMd
|
||||
? `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "start",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant={upMd ? "h5" : "body2"} mb={upMd ? "30px" : "20px"}>
|
||||
Написать обращение
|
||||
</Typography>
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<InputBase
|
||||
value={ticketName}
|
||||
fullWidth
|
||||
placeholder="Заголовок обращения"
|
||||
id="ticket-header"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${theme.palette.grey2.main}`,
|
||||
borderRadius: "10px",
|
||||
p: 0,
|
||||
: undefined,
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
pt: "10px",
|
||||
pb: "10px",
|
||||
px: "19px",
|
||||
},
|
||||
}}
|
||||
onChange={(e) => setTicketName(e.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
mt: "16px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${theme.palette.grey2.main}`,
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
>
|
||||
<InputBase
|
||||
value={ticketBody}
|
||||
fullWidth
|
||||
placeholder="Текст обращения"
|
||||
id="ticket-body"
|
||||
multiline
|
||||
sx={{
|
||||
p: 0,
|
||||
height: "284px",
|
||||
alignItems: "start",
|
||||
overflow: "auto",
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
pt: "13px",
|
||||
pb: "13px",
|
||||
px: "19px",
|
||||
height: "300px",
|
||||
},
|
||||
}}
|
||||
onChange={(e) => setTicketBody(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box sx={{ alignSelf: upMd ? "end" : "start" }}>
|
||||
<CustomButton
|
||||
onClick={handleCreateTicket}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
Отправить
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "start",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant={upMd ? "h5" : "body2"} mb={upMd ? "30px" : "20px"}>
|
||||
Написать обращение
|
||||
</Typography>
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<InputBase
|
||||
value={ticketName}
|
||||
fullWidth
|
||||
placeholder="Заголовок обращения"
|
||||
id="ticket-header"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${theme.palette.grey2.main}`,
|
||||
borderRadius: "10px",
|
||||
p: 0,
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
pt: "10px",
|
||||
pb: "10px",
|
||||
px: "19px",
|
||||
},
|
||||
}}
|
||||
onChange={(e) => setTicketName(e.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
mt: "16px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${theme.palette.grey2.main}`,
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
>
|
||||
<InputBase
|
||||
value={ticketBody}
|
||||
fullWidth
|
||||
placeholder="Текст обращения"
|
||||
id="ticket-body"
|
||||
multiline
|
||||
sx={{
|
||||
p: 0,
|
||||
height: "284px",
|
||||
alignItems: "start",
|
||||
overflow: "auto",
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
pt: "13px",
|
||||
pb: "13px",
|
||||
px: "19px",
|
||||
height: "300px",
|
||||
},
|
||||
}}
|
||||
onChange={(e) => setTicketBody(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box sx={{ alignSelf: upMd ? "end" : "start" }}>
|
||||
<CustomButton
|
||||
onClick={handleCreateTicket}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
Отправить
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user