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 { Box, Typography, FormControl, InputBase, useMediaQuery, useTheme } from "@mui/material";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import CustomButton from "@components/CustomButton";
|
import CustomButton from "@components/CustomButton";
|
||||||
|
|
||||||
import { apiRequestHandler } from "@utils/api/apiRequestHandler";
|
import { apiRequestHandler } from "@utils/api/apiRequestHandler";
|
||||||
import { ApiError } from "@utils/api/types";
|
import { ApiError } from "@utils/api/types";
|
||||||
|
|
||||||
import { useSnackbar } from "notistack";
|
import { useSnackbar } from "notistack";
|
||||||
|
|
||||||
|
|
||||||
export default function CreateTicket() {
|
export default function CreateTicket() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||||
const { enqueueSnackbar } = useSnackbar();
|
const { enqueueSnackbar } = useSnackbar();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [ticketName, setTicketName] = useState<string>("");
|
const [ticketName, setTicketName] = useState<string>("");
|
||||||
const [ticketBody, setTicketBody] = useState<string>("");
|
const [ticketBody, setTicketBody] = useState<string>("");
|
||||||
|
|
||||||
async function handleCreateTicket() {
|
async function handleCreateTicket() {
|
||||||
const result = await apiRequestHandler.createTicket({
|
const result = await apiRequestHandler.createTicket({
|
||||||
Title: ticketName,
|
Title: ticketName,
|
||||||
Message: ticketBody,
|
Message: ticketBody,
|
||||||
});
|
});
|
||||||
if (result instanceof ApiError) {
|
if (result instanceof ApiError) {
|
||||||
enqueueSnackbar(`Error: ${result.message}`);
|
enqueueSnackbar(`Error: ${result.message}`);
|
||||||
} else if (result instanceof Error) {
|
} else if (result instanceof Error) {
|
||||||
console.log(result);
|
console.log(result);
|
||||||
enqueueSnackbar(`Unknown error`);
|
enqueueSnackbar(`Unknown error`);
|
||||||
} else {
|
} else {
|
||||||
navigate(`/support/${result.Ticket}`);
|
navigate(`/support/${result.Ticket}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
backgroundColor: upMd ? "white" : undefined,
|
backgroundColor: upMd ? "white" : undefined,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: upMd ? "row" : "column",
|
flexDirection: upMd ? "row" : "column",
|
||||||
maxHeight: upMd ? "443px" : undefined,
|
maxHeight: upMd ? "443px" : undefined,
|
||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
p: upMd ? "20px" : undefined,
|
p: upMd ? "20px" : undefined,
|
||||||
gap: upMd ? "40px" : "20px",
|
gap: upMd ? "40px" : "20px",
|
||||||
boxShadow: upMd
|
boxShadow: upMd
|
||||||
? `0px 100px 309px rgba(210, 208, 225, 0.24),
|
? `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
|
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
|
||||||
: undefined,
|
: 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,
|
|
||||||
}}
|
}}
|
||||||
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,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Отправить
|
<Box
|
||||||
</CustomButton>
|
sx={{
|
||||||
</Box>
|
display: "flex",
|
||||||
</Box>
|
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