Added stopPropagation to the delete button. Moved modal outside box. subtask #7
This commit is contained in:
aleksandr-raw
parent
aea8df01b7
commit
cfcd5bbb8e
@ -7,7 +7,7 @@ import {
|
|||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useState } from "react";
|
import { MouseEvent, useState } from "react";
|
||||||
import { ContactIcon } from "./icons/ContactIcon";
|
import { ContactIcon } from "./icons/ContactIcon";
|
||||||
import { MessageIcon } from "./icons/MessageIcon";
|
import { MessageIcon } from "./icons/MessageIcon";
|
||||||
import { PhoneIcon } from "./icons/PhoneIcon";
|
import { PhoneIcon } from "./icons/PhoneIcon";
|
||||||
@ -78,167 +78,150 @@ export const CardAnswer = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onClickDelete = (e: MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setOpenDelete(true);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<>
|
||||||
onClick={() => {
|
|
||||||
obsolescenceResult(idResult, editQuizId);
|
|
||||||
openResults();
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
borderRadius: "12px",
|
|
||||||
maxWidth: isTablet ? "450px" : "auto",
|
|
||||||
width: "100%",
|
|
||||||
boxShadow:
|
|
||||||
"0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
<Box
|
||||||
|
onClick={() => {
|
||||||
|
obsolescenceResult(idResult, editQuizId);
|
||||||
|
openResults();
|
||||||
|
}}
|
||||||
sx={{
|
sx={{
|
||||||
|
borderRadius: "12px",
|
||||||
|
maxWidth: isTablet ? "450px" : "auto",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
display: "flex",
|
boxShadow:
|
||||||
justifyContent: "space-between",
|
"0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
|
||||||
flexDirection: isTablet ? "column" : "-moz-initial",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
flexDirection: isTablet ? "column" : "-moz-initial",
|
|
||||||
cursor: "pointer",
|
|
||||||
p: "20px",
|
|
||||||
borderRadius: isTablet
|
|
||||||
? "12px 12px 0 0"
|
|
||||||
: isOpen
|
|
||||||
? "12px 0 0 0"
|
|
||||||
: "12px 0 0 12px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
background: "#FFF",
|
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
flexDirection: isTablet ? "column" : "-moz-initial",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
width: isTablet ? "100%" : "auto",
|
flexDirection: isTablet ? "column" : "-moz-initial",
|
||||||
|
cursor: "pointer",
|
||||||
|
p: "20px",
|
||||||
|
borderRadius: isTablet
|
||||||
|
? "12px 12px 0 0"
|
||||||
|
: isOpen
|
||||||
|
? "12px 0 0 0"
|
||||||
|
: "12px 0 0 12px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
flexDirection: isTablet ? "row-reverse" : "-moz-initial",
|
background: "#FFF",
|
||||||
justifyContent: isTablet ? "space-between" : "-moz-initial",
|
width: "100%",
|
||||||
pb: isTablet ? "20px" : "0",
|
|
||||||
mb: isTablet ? "20px" : "0",
|
|
||||||
borderBottom: isTablet
|
|
||||||
? "1px solid rgba(154, 154, 175, 0.50)"
|
|
||||||
: "0",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
<Box
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: "30px",
|
|
||||||
height: "30px",
|
|
||||||
borderRadius: "50%",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
color: "#7E2AEA",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{idResult}
|
|
||||||
</Box>
|
|
||||||
<IconButton onClick={openResults}>
|
|
||||||
<ArrowDownIcon
|
|
||||||
style={{
|
|
||||||
transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",
|
|
||||||
}}
|
|
||||||
fontSize="10px"
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
sx={{
|
sx={{
|
||||||
ml: isTablet ? "0" : "50px",
|
width: isTablet ? "100%" : "auto",
|
||||||
mr: isTablet ? "0" : "188px",
|
|
||||||
fontSize: "18px",
|
|
||||||
color: "#7E2AEA",
|
|
||||||
maxWidth: "143px",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{dayResult} в {timeResult}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
||||||
{name && (
|
|
||||||
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|
||||||
<ContactIcon />
|
|
||||||
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{email && (
|
|
||||||
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|
||||||
<MessageIcon />
|
|
||||||
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|
||||||
{email}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{phone && (
|
|
||||||
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|
||||||
<PhoneIcon />
|
|
||||||
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|
||||||
{phone}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{address && (
|
|
||||||
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|
||||||
<AddressIcon color={"#9A9AAF"} />
|
|
||||||
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|
||||||
{address}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{!isTablet && isNew && (
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
ml: "auto",
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "flex-start",
|
||||||
justifyContent: "center",
|
flexDirection: isTablet ? "row-reverse" : "-moz-initial",
|
||||||
background: "#FB5607",
|
justifyContent: isTablet ? "space-between" : "-moz-initial",
|
||||||
borderRadius: "8px",
|
pb: isTablet ? "20px" : "0",
|
||||||
width: "77px",
|
mb: isTablet ? "20px" : "0",
|
||||||
height: "36px",
|
borderBottom: isTablet
|
||||||
color: "white",
|
? "1px solid rgba(154, 154, 175, 0.50)"
|
||||||
|
: "0",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Новая
|
<Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
||||||
</Typography>
|
<Box
|
||||||
)}
|
sx={{
|
||||||
</Box>
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
width: "30px",
|
||||||
|
height: "30px",
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: "#EEE4FC",
|
||||||
|
color: "#7E2AEA",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{idResult}
|
||||||
|
</Box>
|
||||||
|
<IconButton onClick={openResults}>
|
||||||
|
<ArrowDownIcon
|
||||||
|
style={{
|
||||||
|
transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",
|
||||||
|
}}
|
||||||
|
fontSize="10px"
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
borderRadius: "8px",
|
|
||||||
p: isTablet ? "20px" : "0",
|
|
||||||
cursor: "pointer",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: isTablet ? "space-between" : "center",
|
|
||||||
width: isTablet ? "100%" : "100px",
|
|
||||||
background: "#F2F3F7",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isTablet && isNew ? (
|
|
||||||
<>
|
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
|
ml: isTablet ? "0" : "50px",
|
||||||
|
mr: isTablet ? "0" : "188px",
|
||||||
|
fontSize: "18px",
|
||||||
|
color: "#7E2AEA",
|
||||||
|
maxWidth: "143px",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dayResult} в {timeResult}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
|
||||||
|
{name && (
|
||||||
|
<Box
|
||||||
|
sx={{ display: "flex", alignItems: "center", gap: "13px" }}
|
||||||
|
>
|
||||||
|
<ContactIcon />
|
||||||
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{email && (
|
||||||
|
<Box
|
||||||
|
sx={{ display: "flex", alignItems: "center", gap: "13px" }}
|
||||||
|
>
|
||||||
|
<MessageIcon />
|
||||||
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
||||||
|
{email}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{phone && (
|
||||||
|
<Box
|
||||||
|
sx={{ display: "flex", alignItems: "center", gap: "13px" }}
|
||||||
|
>
|
||||||
|
<PhoneIcon />
|
||||||
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
||||||
|
{phone}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{address && (
|
||||||
|
<Box
|
||||||
|
sx={{ display: "flex", alignItems: "center", gap: "13px" }}
|
||||||
|
>
|
||||||
|
<AddressIcon color={"#9A9AAF"} />
|
||||||
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
||||||
|
{address}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{!isTablet && isNew && (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
ml: "auto",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
@ -251,202 +234,239 @@ export const CardAnswer = ({
|
|||||||
>
|
>
|
||||||
Новая
|
Новая
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
)}
|
||||||
<IconButton onClick={() => setOpenDelete(true)}>
|
|
||||||
<DeleteIcon color="#4D4D4D" fontSize="34px" />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<IconButton onClick={() => setOpenDelete(true)}>
|
|
||||||
<DeleteIcon color="#4D4D4D" fontSize="34px" />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
<DeleteModal
|
|
||||||
openDelete={openDelete}
|
|
||||||
handleClose={() => setOpenDelete(false)}
|
|
||||||
onClick={() => {
|
|
||||||
deleteResult(Number(idResult));
|
|
||||||
setOpenDelete(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{isOpen && (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
borderRadius: "12px",
|
|
||||||
maxWidth: isTablet ? "450px" : "auto",
|
|
||||||
width: "100%",
|
|
||||||
boxShadow:
|
|
||||||
"0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
p: "20px",
|
|
||||||
borderTop: "1px solid #F1F2F6",
|
|
||||||
background: "#FFF",
|
|
||||||
borderRadius: "0 0 12px 12px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|
||||||
Ответы
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
borderRadius: "8px",
|
||||||
|
p: isTablet ? "20px" : "0",
|
||||||
|
cursor: "pointer",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
gap: isTablet ? "0" : "149px",
|
alignItems: "center",
|
||||||
p: "20px",
|
justifyContent: isTablet ? "space-between" : "center",
|
||||||
flexDirection: isTablet ? "column" : "-moz-initial",
|
width: isTablet ? "100%" : "100px",
|
||||||
|
background: "#F2F3F7",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isTablet && isNew ? (
|
||||||
|
<>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
background: "#FB5607",
|
||||||
|
borderRadius: "8px",
|
||||||
|
width: "77px",
|
||||||
|
height: "36px",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Новая
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||||
|
<IconButton onClick={onClickDelete}>
|
||||||
|
<DeleteIcon color="#4D4D4D" fontSize="34px" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<IconButton onClick={onClickDelete}>
|
||||||
|
<DeleteIcon color="#4D4D4D" fontSize="34px" />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
borderRadius: "12px",
|
||||||
|
maxWidth: isTablet ? "450px" : "auto",
|
||||||
|
width: "100%",
|
||||||
|
boxShadow:
|
||||||
|
"0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
p: "20px",
|
||||||
flexDirection: "column",
|
borderTop: "1px solid #F1F2F6",
|
||||||
gap: "15px",
|
background: "#FFF",
|
||||||
mt: "20px",
|
borderRadius: "0 0 12px 12px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{resultsAnswer.map((answer, id) => {
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
||||||
let titleQuestion;
|
Ответы
|
||||||
let typeOuestion;
|
</Typography>
|
||||||
let typeQuestionFile;
|
|
||||||
let quest = questions; //массив с вопросами
|
|
||||||
let i;
|
|
||||||
let idAnswer = answer.question_id; //айди вопроса у ответа
|
|
||||||
for (i in quest) {
|
|
||||||
if (quest[i].backendId === idAnswer) {
|
|
||||||
titleQuestion = quest[i].title;
|
|
||||||
typeOuestion = quest[i].type;
|
|
||||||
typeQuestionFile = quest[i].content.type;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{ display: "flex", alignItems: "center", gap: "13px" }}
|
|
||||||
>
|
|
||||||
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|
||||||
{id + 1}. {titleQuestion}.
|
|
||||||
</Typography>
|
|
||||||
{typeOuestion === "file" && (
|
|
||||||
<Link
|
|
||||||
download
|
|
||||||
href={answer.content}
|
|
||||||
style={{
|
|
||||||
color: "#7E2AEA",
|
|
||||||
display: "flex",
|
|
||||||
gap: "10px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{typeQuestionFile === "video" && (
|
|
||||||
<video
|
|
||||||
src={answer.content}
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
></video>
|
|
||||||
)}
|
|
||||||
{typeQuestionFile === "picture" && (
|
|
||||||
<img src={answer.content} width={40} height={40} />
|
|
||||||
)}
|
|
||||||
клик для скачивания
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{(typeOuestion === "images" ||
|
|
||||||
typeOuestion === "varimg") && (
|
|
||||||
<>
|
|
||||||
<img
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
src={
|
|
||||||
answer.content
|
|
||||||
.split("<")[1]
|
|
||||||
.split('src="')[1]
|
|
||||||
.split('"/>')[0]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Typography sx={{ fontSize: "18px" }}>
|
|
||||||
{answer.content.split("<")[0]}
|
|
||||||
</Typography>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{!(
|
|
||||||
typeOuestion === "file" ||
|
|
||||||
typeOuestion === "images" ||
|
|
||||||
typeOuestion === "varimg"
|
|
||||||
) && (
|
|
||||||
<Typography sx={{ fontSize: "18px" }}>
|
|
||||||
{answer.content}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
p: "20px",
|
display: "flex",
|
||||||
borderTop: "1px solid #F1F2F6",
|
gap: isTablet ? "0" : "149px",
|
||||||
background: "#FFF",
|
p: "20px",
|
||||||
borderRadius: "0 0 12px 12px",
|
flexDirection: isTablet ? "column" : "-moz-initial",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|
||||||
Результаты
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
{questionsResultState.map((res) => {
|
|
||||||
console.log(questionsResultState, "что за результат тут");
|
|
||||||
return (
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: "15px",
|
gap: "15px",
|
||||||
p: "20px",
|
mt: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
{resultsAnswer.map((answer, id) => {
|
||||||
|
let titleQuestion;
|
||||||
|
let typeOuestion;
|
||||||
|
let typeQuestionFile;
|
||||||
|
let quest = questions; //массив с вопросами
|
||||||
|
let i;
|
||||||
|
let idAnswer = answer.question_id; //айди вопроса у ответа
|
||||||
|
for (i in quest) {
|
||||||
|
if (quest[i].backendId === idAnswer) {
|
||||||
|
titleQuestion = quest[i].title;
|
||||||
|
typeOuestion = quest[i].type;
|
||||||
|
typeQuestionFile = quest[i].content.type;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "13px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
||||||
|
{id + 1}. {titleQuestion}.
|
||||||
|
</Typography>
|
||||||
|
{typeOuestion === "file" && (
|
||||||
|
<Link
|
||||||
|
download
|
||||||
|
href={answer.content}
|
||||||
|
style={{
|
||||||
|
color: "#7E2AEA",
|
||||||
|
display: "flex",
|
||||||
|
gap: "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{typeQuestionFile === "video" && (
|
||||||
|
<video
|
||||||
|
src={answer.content}
|
||||||
|
width={40}
|
||||||
|
height={40}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{typeQuestionFile === "picture" && (
|
||||||
|
<img src={answer.content} width={40} height={40} />
|
||||||
|
)}
|
||||||
|
клик для скачивания
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{(typeOuestion === "images" ||
|
||||||
|
typeOuestion === "varimg") && (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
width={40}
|
||||||
|
height={40}
|
||||||
|
src={
|
||||||
|
answer.content
|
||||||
|
.split("<")[1]
|
||||||
|
.split('src="')[1]
|
||||||
|
.split('"/>')[0]
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography sx={{ fontSize: "18px" }}>
|
||||||
|
{answer.content.split("<")[0]}
|
||||||
|
</Typography>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{!(
|
||||||
|
typeOuestion === "file" ||
|
||||||
|
typeOuestion === "images" ||
|
||||||
|
typeOuestion === "varimg"
|
||||||
|
) && (
|
||||||
|
<Typography sx={{ fontSize: "18px" }}>
|
||||||
|
{answer.content}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
p: "20px",
|
||||||
|
borderTop: "1px solid #F1F2F6",
|
||||||
|
background: "#FFF",
|
||||||
|
borderRadius: "0 0 12px 12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
||||||
|
Результаты
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
{questionsResultState.map((res) => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: "18px",
|
display: "flex",
|
||||||
fontWeight: "500",
|
flexDirection: "column",
|
||||||
wordBreak: "break-word",
|
gap: "15px",
|
||||||
|
p: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{res.description}
|
<Typography
|
||||||
</Typography>
|
sx={{
|
||||||
<Typography sx={{ fontSize: "18px", wordBreak: "break-word" }}>
|
fontSize: "18px",
|
||||||
{res.title}
|
fontWeight: "500",
|
||||||
</Typography>
|
wordBreak: "break-word",
|
||||||
{res.content.useImage &&
|
}}
|
||||||
res.content.back &&
|
>
|
||||||
res.content.back !== " " && (
|
{res.description}
|
||||||
<img
|
</Typography>
|
||||||
src={res.content.back}
|
<Typography
|
||||||
style={{ width: "40px", height: "40px" }}
|
sx={{ fontSize: "18px", wordBreak: "break-word" }}
|
||||||
alt={""}
|
>
|
||||||
/>
|
{res.title}
|
||||||
)}
|
</Typography>
|
||||||
{!res.content.useImage &&
|
{res.content.useImage &&
|
||||||
res.content.back &&
|
res.content.back &&
|
||||||
res.content.back !== " " && (
|
res.content.back !== " " && (
|
||||||
<video
|
<img
|
||||||
src={res.content.back}
|
src={res.content.back}
|
||||||
style={{ width: "40px", height: "40px" }}
|
style={{ width: "40px", height: "40px" }}
|
||||||
></video>
|
alt={""}
|
||||||
)}
|
/>
|
||||||
</Box>
|
)}
|
||||||
);
|
{!res.content.useImage &&
|
||||||
})}
|
res.content.back &&
|
||||||
</Box>
|
res.content.back !== " " && (
|
||||||
)}
|
<video
|
||||||
</Box>
|
src={res.content.back}
|
||||||
|
style={{ width: "40px", height: "40px" }}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<DeleteModal
|
||||||
|
openDelete={openDelete}
|
||||||
|
handleClose={() => setOpenDelete(false)}
|
||||||
|
onClick={() => {
|
||||||
|
deleteResult(Number(idResult));
|
||||||
|
setOpenDelete(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user