516 lines
19 KiB
TypeScript
516 lines
19 KiB
TypeScript
import { Box, MenuItem, FormControl, Checkbox, FormControlLabel, Radio, RadioGroup, Typography, useTheme, Select, Chip, IconButton, TextField } from "@mui/material"
|
||
import RadioCheck from "@ui_kit/RadioCheck"
|
||
import RadioIcon from "@ui_kit/RadioIcon"
|
||
import { QuizQuestionBase } from "model/questionTypes/shared"
|
||
import { useState, useRef, useEffect } from "react";
|
||
import { useParams } from "react-router-dom";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { updateQuestion, getQuestionById } from "@root/questions/actions";
|
||
import { AnyQuizQuestion } from "../../../model/questionTypes/shared"
|
||
import { SelectChangeEvent } from '@mui/material/Select';
|
||
|
||
import InfoIcon from "@icons/Info";
|
||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||
|
||
const CONDITIONS = [
|
||
"Все условия обязательны",
|
||
"Обязательно хотя бы одно условие",
|
||
];
|
||
interface Props {
|
||
parentQuestion: AnyQuizQuestion;
|
||
targetQuestion: AnyQuizQuestion;
|
||
ruleIndex: number;
|
||
}
|
||
|
||
|
||
//Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
|
||
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex }: Props) => {
|
||
|
||
switch (parentQuestion.type) {
|
||
// case 'nonselected':
|
||
// return <BlockRule text={"Не выбран тип родительского вопроса"} />
|
||
// break;
|
||
|
||
case "variant":
|
||
case "images":
|
||
case "varimg":
|
||
case "emoji":
|
||
case "select":
|
||
|
||
return (parentQuestion.content.variants === undefined ? <BlockRule text={"У родителя нет вариантов"} /> :
|
||
<SelectorType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
|
||
//Реализован
|
||
)
|
||
break;
|
||
|
||
case "date":
|
||
// return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
|
||
return <></>
|
||
|
||
break;
|
||
|
||
case "number":
|
||
return <NumberInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
|
||
//Реализован
|
||
break;
|
||
|
||
case "page":
|
||
case "date":
|
||
return <BlockRule text={"У такого родителя может быть только один потомок"} />
|
||
break;
|
||
|
||
case "text":
|
||
return <TextInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
|
||
//Реализован
|
||
break;
|
||
|
||
case "file":
|
||
return <FileInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
|
||
//Реализован
|
||
break;
|
||
|
||
case "rating":
|
||
return <RatingInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
|
||
//Реализован
|
||
break;
|
||
|
||
default:
|
||
return <BlockRule text={"Не распознан тип родительского вопроса"} />
|
||
break;
|
||
}
|
||
|
||
}
|
||
|
||
export const BlockRule = ({ text }: { text: string }) => {
|
||
return (
|
||
<Typography
|
||
sx={{
|
||
margin: "100px 0",
|
||
textAlign: "center"
|
||
}}
|
||
>{text}</Typography>
|
||
)
|
||
}
|
||
const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
|
||
const theme = useTheme();
|
||
const quizId = Number(useParams().quizId);
|
||
return (
|
||
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
margin: "20px",
|
||
borderRadius: "8px",
|
||
bgcolor: "#F2F3F7",
|
||
height: "280px",
|
||
overflow: "auto"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pb: "5px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Новое условие
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
const newParentQuestion = { ...parentQuestion }
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
pb: "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Дан ответ
|
||
</Typography>
|
||
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
|
||
(Укажите один или несколько вариантов)
|
||
</Typography>
|
||
</Box>
|
||
<Select
|
||
multiple
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers}
|
||
onChange={(event: SelectChangeEvent) => {
|
||
|
||
const newParentQuestion = { ...parentQuestion }
|
||
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
|
||
}}
|
||
sx={{
|
||
width: "100%",
|
||
height: "48px",
|
||
borderRadius: "8px",
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: `1px solid ${theme.palette.brightPurple.main} !important`,
|
||
height: "48px",
|
||
borderRadius: "10px",
|
||
},
|
||
}}
|
||
>
|
||
{parentQuestion.content.variants.map((e: any) => {
|
||
return <MenuItem value={e.id}>
|
||
{e.answer}
|
||
</MenuItem>
|
||
})}
|
||
|
||
</Select>
|
||
|
||
<FormControl>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
value={parentQuestion.content.rule.main[ruleIndex].or}
|
||
onChange={(_, value) => {
|
||
const newParentQuestion = { ...parentQuestion }
|
||
parentQuestion.content.rule.main[ruleIndex].or = value
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
}}
|
||
>
|
||
{CONDITIONS.map((condition, totalIndex) => (
|
||
<FormControlLabel
|
||
key={totalIndex}
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value={Boolean(Number(totalIndex))}
|
||
control={
|
||
<Radio
|
||
checkedIcon={<RadioCheck />}
|
||
icon={<RadioIcon />}
|
||
/>
|
||
}
|
||
label={condition}
|
||
/>
|
||
))}
|
||
</RadioGroup>
|
||
</FormControl>
|
||
|
||
|
||
</Box >
|
||
)
|
||
}
|
||
const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
|
||
|
||
return <></>
|
||
}
|
||
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
|
||
const theme = useTheme();
|
||
const quizId = Number(useParams().quizId);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
margin: "20px",
|
||
borderRadius: "8px",
|
||
bgcolor: "#F2F3F7",
|
||
height: "280px",
|
||
overflow: "auto"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pb: "5px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Новое условие
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
const newParentQuestion = { ...parentQuestion }
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
pb: "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Дан ответ
|
||
</Typography>
|
||
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
|
||
(Укажите один или несколько вариантов)
|
||
</Typography>
|
||
</Box>
|
||
{/* <TextField
|
||
sx={{
|
||
marginTop: "20px",
|
||
width: "100%"
|
||
}}
|
||
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
|
||
onChange={(event: React.FormEvent<HTMLInputElement>) => {
|
||
|
||
const newParentQuestion = { ...parentQuestion }
|
||
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
|
||
}}
|
||
/> */}
|
||
|
||
|
||
|
||
|
||
</Box >
|
||
)
|
||
}
|
||
const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
|
||
const theme = useTheme();
|
||
const quizId = Number(useParams().quizId);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
margin: "20px",
|
||
borderRadius: "8px",
|
||
bgcolor: "#F2F3F7",
|
||
height: "280px",
|
||
overflow: "auto"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pb: "5px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Новое условие
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
const newParentQuestion = { ...parentQuestion }
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "inline",
|
||
alignItems: "center",
|
||
pb: "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Дан ответ
|
||
</Typography>
|
||
<Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
|
||
(Укажите текст, при совпадении с которым пользователь попадёт на этот вопрос)
|
||
</Typography>
|
||
</Box>
|
||
{/* <TextField
|
||
sx={{
|
||
marginTop: "20px",
|
||
width: "100%"
|
||
}}
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
|
||
onChange={(event: React.FormEvent<HTMLInputElement>) => {
|
||
|
||
const newParentQuestion = { ...parentQuestion }
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value]
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
|
||
}}
|
||
/> */}
|
||
|
||
|
||
|
||
|
||
</Box >
|
||
)
|
||
}
|
||
const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
|
||
const theme = useTheme();
|
||
const quizId = Number(useParams().quizId);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
margin: "20px",
|
||
borderRadius: "8px",
|
||
bgcolor: "#F2F3F7",
|
||
height: "280px",
|
||
overflow: "auto"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pb: "5px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Новое условие
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
const newParentQuestion = { ...parentQuestion }
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "inline",
|
||
alignItems: "center",
|
||
pb: "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Перевести на этот вопрос если пользователь загрузил файл
|
||
</Typography>
|
||
</Box>
|
||
<FormControlLabel control={<Checkbox
|
||
|
||
sx={{
|
||
margin: 0
|
||
}}
|
||
checked={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
|
||
onChange={(event: React.FormEvent<HTMLInputElement>) => {
|
||
|
||
const newParentQuestion = { ...parentQuestion }
|
||
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).checked]
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
|
||
}}
|
||
/>} label="да" />
|
||
|
||
|
||
|
||
|
||
</Box >
|
||
)
|
||
}
|
||
const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
|
||
const theme = useTheme();
|
||
const quizId = Number(useParams().quizId);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
margin: "20px",
|
||
borderRadius: "8px",
|
||
bgcolor: "#F2F3F7",
|
||
height: "280px",
|
||
overflow: "auto"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pb: "5px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Новое условие
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
const newParentQuestion = { ...parentQuestion }
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "inline",
|
||
alignItems: "center",
|
||
pb: "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
|
||
(Ожидаемое количество ячеек)
|
||
</Typography>
|
||
</Box>
|
||
{/* <TextField
|
||
sx={{
|
||
marginTop: "20px",
|
||
width: "100%"
|
||
}}
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
|
||
onChange={(event: React.FormEvent<HTMLInputElement>) => {
|
||
|
||
const newParentQuestion = { ...parentQuestion }
|
||
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
|
||
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
|
||
|
||
}}
|
||
/> */}
|
||
|
||
|
||
|
||
|
||
</Box >
|
||
)
|
||
}
|
||
|
||
// {
|
||
// content: {
|
||
// rule: {
|
||
// main: [
|
||
// {
|
||
// next: "id of next question", // 2 string
|
||
// or: true // 3 boolean
|
||
// rules: [
|
||
// {
|
||
// question: "question id", string
|
||
// answers: [] // ответы на вопросы. для вариантов выбора - конкретные айдишники, для полей ввода текста - текст по полному совпадению, для ввода файла ии ещё какой подобной дичи - просто факт того что файл ввели, т.е. boolean
|
||
// }
|
||
// ]
|
||
// }
|
||
// ],
|
||
// default: ID string
|
||
// }
|
||
// }
|
||
// }
|