444 lines
14 KiB
TypeScript
444 lines
14 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import {
|
|
Box,
|
|
Checkbox,
|
|
FormControl,
|
|
FormControlLabel,
|
|
IconButton,
|
|
InputAdornment,
|
|
Paper,
|
|
TextField,
|
|
useMediaQuery,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
|
|
import { ChooseAnswerModal } from "./ChooseAnswerModal";
|
|
import TypeQuestions from "../TypeQuestions";
|
|
import SwitchQuestionsPage from "../SwitchQuestionsPage";
|
|
|
|
import {
|
|
questionStore,
|
|
updateQuestionsList,
|
|
createQuestion,
|
|
copyQuestion,
|
|
removeQuestion,
|
|
removeQuestionForce,
|
|
} from "@root/questions";
|
|
|
|
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
|
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
|
import { OneIcon } from "@icons/questionsPage/OneIcon";
|
|
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
|
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
|
|
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
|
|
import { HideIcon } from "@icons/questionsPage/hideIcon";
|
|
import Answer from "@icons/questionsPage/answer";
|
|
import OptionsPict from "@icons/questionsPage/options_pict";
|
|
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
|
|
import Emoji from "@icons/questionsPage/emoji";
|
|
import Input from "@icons/questionsPage/input";
|
|
import DropDown from "@icons/questionsPage/drop_down";
|
|
import Date from "@icons/questionsPage/date";
|
|
import Slider from "@icons/questionsPage/slider";
|
|
import Download from "@icons/questionsPage/download";
|
|
import Page from "@icons/questionsPage/page";
|
|
import RatingIcon from "@icons/questionsPage/rating";
|
|
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
|
|
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
|
|
|
|
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
|
|
import type { QuizQuestionBase } from "../../../model/questionTypes/shared";
|
|
|
|
interface Props {
|
|
totalIndex: number;
|
|
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
|
|
isDragging: boolean;
|
|
}
|
|
|
|
const IconAndrom = (isExpanded: boolean, switchState: string) => {
|
|
switch (switchState) {
|
|
case "variant":
|
|
return (
|
|
<Answer
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "images":
|
|
return (
|
|
<OptionsPict
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "varimg":
|
|
return (
|
|
<OptionsAndPict
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "emoji":
|
|
return (
|
|
<Emoji
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "text":
|
|
return (
|
|
<Input
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "select":
|
|
return (
|
|
<DropDown
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "date":
|
|
return (
|
|
<Date
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "number":
|
|
return (
|
|
<Slider
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "file":
|
|
return (
|
|
<Download
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "page":
|
|
return (
|
|
<Page
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
case "rating":
|
|
return (
|
|
<RatingIcon
|
|
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
|
sx={{ height: "22px", width: "20px" }}
|
|
/>
|
|
);
|
|
default:
|
|
return <></>;
|
|
}
|
|
};
|
|
export default function QuestionsPageCard({
|
|
totalIndex,
|
|
draggableProps,
|
|
isDragging,
|
|
}: Props) {
|
|
const [plusVisible, setPlusVisible] = useState<boolean>(false);
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
const quizId = Number(useParams().quizId);
|
|
const theme = useTheme();
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
|
const { listQuestions } = questionStore();
|
|
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
|
|
const anchorRef = useRef(null);
|
|
const debounced = useDebouncedCallback((title) => {
|
|
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
|
|
}, 200);
|
|
|
|
useEffect(() => {
|
|
if (question.deleteTimeoutId) {
|
|
clearTimeout(question.deleteTimeoutId);
|
|
}
|
|
}, [question]);
|
|
|
|
return (
|
|
<>
|
|
<Paper
|
|
id={String(totalIndex)}
|
|
sx={{
|
|
maxWidth: "796px",
|
|
width: "100%",
|
|
borderRadius: "12px",
|
|
boxShadow: "none",
|
|
backgroundColor: question.expanded ? "white" : "#EEE4FC",
|
|
border: question.expanded ? "none" : "1px solid #9A9AAF",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: isMobile ? "10px" : "20px 10px 20px 20px",
|
|
flexDirection: isMobile ? "column" : null,
|
|
}}
|
|
>
|
|
<FormControl
|
|
variant="standard"
|
|
sx={{
|
|
p: 0,
|
|
maxWidth: isTablet ? "549px" : "640px",
|
|
width: "100%",
|
|
marginRight: isMobile ? "0px" : "16.1px",
|
|
}}
|
|
>
|
|
<TextField
|
|
defaultValue={question.title}
|
|
placeholder={"Заголовок вопроса"}
|
|
onChange={({ target }) => debounced(target.value)}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<Box>
|
|
<InputAdornment
|
|
ref={anchorRef}
|
|
position="start"
|
|
sx={{ cursor: "pointer" }}
|
|
onClick={() => setOpen((isOpened) => !isOpened)}
|
|
>
|
|
{IconAndrom(question.expanded, question.type)}
|
|
</InputAdornment>
|
|
<ChooseAnswerModal
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
anchorRef={anchorRef}
|
|
totalIndex={totalIndex}
|
|
switchState={question.type}
|
|
/>
|
|
</Box>
|
|
),
|
|
}}
|
|
sx={{
|
|
margin: isMobile ? "10px 0" : 0,
|
|
"& .MuiInputBase-root": {
|
|
color: question.expanded ? "#9A9AAF" : "#4D4D4D",
|
|
backgroundColor: question.expanded
|
|
? theme.palette.background.default
|
|
: "transparent",
|
|
height: "48px",
|
|
borderRadius: "10px",
|
|
".MuiOutlinedInput-notchedOutline": {
|
|
borderWidth: "1px !important",
|
|
border: !question.expanded ? "none" : null,
|
|
},
|
|
"& .MuiInputBase-input::placeholder": {
|
|
color: "#4D4D4D",
|
|
opacity: 0.8,
|
|
},
|
|
},
|
|
}}
|
|
inputProps={{
|
|
sx: {
|
|
fontSize: "18px",
|
|
lineHeight: "21px",
|
|
py: 0,
|
|
paddingLeft: question.type.length === 0 ? 0 : "18px",
|
|
},
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "flex-end",
|
|
width: isMobile ? "100%" : "auto",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<IconButton
|
|
sx={{ padding: "0", margin: "5px" }}
|
|
disableRipple
|
|
onClick={() =>
|
|
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
|
expanded: !question.expanded,
|
|
})
|
|
}
|
|
>
|
|
{question.expanded ? (
|
|
<ArrowDownIcon
|
|
style={{
|
|
width: "18px",
|
|
color: "#4D4D4D",
|
|
}}
|
|
/>
|
|
) : (
|
|
<ExpandLessIcon
|
|
sx={{
|
|
boxSizing: "border-box",
|
|
fill: theme.palette.brightPurple.main,
|
|
background: "#FFF",
|
|
borderRadius: "6px",
|
|
height: "30px",
|
|
width: "30px",
|
|
}}
|
|
/>
|
|
)}
|
|
</IconButton>
|
|
{question.expanded ? (
|
|
<></>
|
|
) : (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
height: "30px",
|
|
borderRight: "solid 1px #4D4D4D",
|
|
}}
|
|
>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
icon={
|
|
<HideIcon
|
|
style={{
|
|
boxSizing: "border-box",
|
|
color: "#7E2AEA",
|
|
background: "#FFF",
|
|
borderRadius: "6px",
|
|
height: "30px",
|
|
width: "30px",
|
|
padding: "3px",
|
|
}}
|
|
/>
|
|
}
|
|
checkedIcon={<CrossedEyeIcon />}
|
|
/>
|
|
}
|
|
label={""}
|
|
sx={{
|
|
color: theme.palette.grey2.main,
|
|
ml: "-9px",
|
|
mr: 0,
|
|
userSelect: "none",
|
|
}}
|
|
/>
|
|
<IconButton
|
|
sx={{ padding: "0" }}
|
|
onClick={() => copyQuestion(quizId, totalIndex)}
|
|
>
|
|
<CopyIcon
|
|
style={{ color: theme.palette.brightPurple.main }}
|
|
/>
|
|
</IconButton>
|
|
<IconButton
|
|
sx={{
|
|
cursor: "pointer",
|
|
borderRadius: "6px",
|
|
padding: "0",
|
|
margin: "0 5px 0 10px",
|
|
}}
|
|
onClick={() => {
|
|
const removedId = question.id;
|
|
if (question.deleteTimeoutId) {
|
|
clearTimeout(question.deleteTimeoutId);
|
|
}
|
|
|
|
removeQuestion(quizId, totalIndex);
|
|
|
|
const newTimeoutId = window.setTimeout(() => {
|
|
removeQuestionForce(quizId, removedId);
|
|
}, 5000);
|
|
|
|
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
|
...question,
|
|
deleteTimeoutId: newTimeoutId,
|
|
});
|
|
}}
|
|
>
|
|
<DeleteIcon
|
|
style={{ color: theme.palette.brightPurple.main }}
|
|
/>
|
|
</IconButton>
|
|
</Box>
|
|
)}
|
|
|
|
<OneIcon
|
|
style={{
|
|
fontSize: "30px",
|
|
marginLeft: "3px",
|
|
color: !question.expanded ? "#FFF" : "",
|
|
fill: question.expanded
|
|
? "#EEE4FC"
|
|
: theme.palette.brightPurple.main,
|
|
}}
|
|
/>
|
|
<IconButton
|
|
disableRipple
|
|
sx={{
|
|
padding: isMobile ? "0" : "0 5px",
|
|
right: isMobile ? "0" : null,
|
|
bottom: isMobile ? "0" : null,
|
|
}}
|
|
{...draggableProps}
|
|
>
|
|
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
{question.expanded && (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
padding: 0,
|
|
borderRadius: "12px",
|
|
}}
|
|
>
|
|
{question.type.length === 0 ? (
|
|
<TypeQuestions totalIndex={totalIndex} />
|
|
) : (
|
|
<SwitchQuestionsPage totalIndex={totalIndex} />
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Paper>
|
|
<Box
|
|
onMouseEnter={() => setPlusVisible(true)}
|
|
onMouseLeave={() => setPlusVisible(false)}
|
|
sx={{
|
|
maxWidth: "825px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
height: "40px",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<Box
|
|
onClick={() => createQuestion(quizId, "", totalIndex + 1)}
|
|
sx={{
|
|
display: plusVisible && !isDragging ? "flex" : "none",
|
|
width: "100%",
|
|
alignItems: "center",
|
|
columnGap: "10px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
boxSizing: "border-box",
|
|
width: "100%",
|
|
height: "1px",
|
|
backgroundPosition: "bottom",
|
|
backgroundRepeat: "repeat-x",
|
|
backgroundSize: "20px 1px",
|
|
backgroundImage:
|
|
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
|
|
}}
|
|
/>
|
|
<PlusIcon />
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|