717 lines
22 KiB
TypeScript
717 lines
22 KiB
TypeScript
import CalendarIcon from "@icons/CalendarIcon";
|
||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||
import {
|
||
Box,
|
||
Checkbox,
|
||
FormControl,
|
||
FormControlLabel,
|
||
IconButton,
|
||
MenuItem,
|
||
Radio,
|
||
RadioGroup,
|
||
Select,
|
||
TextField,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { SelectChangeEvent } from "@mui/material/Select";
|
||
import { DatePicker } from "@mui/x-date-pickers";
|
||
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
|
||
import RadioCheck from "@ui_kit/RadioCheck";
|
||
import RadioIcon from "@ui_kit/RadioIcon";
|
||
import moment from "moment";
|
||
import { useEffect, useState } from "react";
|
||
import { useParams } from "react-router-dom";
|
||
import type { AnyTypedQuizQuestion, QuizQuestionNumber } from "@frontend/squzanswerer";
|
||
|
||
const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"];
|
||
interface Props {
|
||
parentQuestion: AnyTypedQuizQuestion;
|
||
targetQuestion: AnyTypedQuizQuestion;
|
||
ruleIndex: number;
|
||
setParentQuestion: (q: AnyTypedQuizQuestion) => void;
|
||
}
|
||
|
||
// Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
|
||
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
|
||
switch (parentQuestion.type) {
|
||
case "variant":
|
||
case "images":
|
||
case "varimg":
|
||
case "emoji":
|
||
case "select":
|
||
return parentQuestion.content.variants === undefined ? (
|
||
<BlockRule text={"У родителя нет вариантов"} />
|
||
) : (
|
||
<SelectorType
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={ruleIndex}
|
||
setParentQuestion={setParentQuestion}
|
||
/>
|
||
);
|
||
break;
|
||
|
||
case "date":
|
||
return (
|
||
<DateInputsType
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={ruleIndex}
|
||
setParentQuestion={setParentQuestion}
|
||
/>
|
||
);
|
||
|
||
break;
|
||
|
||
case "number":
|
||
return (
|
||
<NumberInputsType
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={ruleIndex}
|
||
setParentQuestion={setParentQuestion}
|
||
/>
|
||
);
|
||
break;
|
||
|
||
case "page":
|
||
return <BlockRule text={"У такого родителя может быть только один потомок"} />;
|
||
break;
|
||
|
||
case "text":
|
||
return (
|
||
<TextInputsType
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={ruleIndex}
|
||
setParentQuestion={setParentQuestion}
|
||
/>
|
||
);
|
||
break;
|
||
|
||
case "file":
|
||
return (
|
||
<FileInputsType
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={ruleIndex}
|
||
setParentQuestion={setParentQuestion}
|
||
/>
|
||
);
|
||
break;
|
||
|
||
case "rating":
|
||
return (
|
||
<RatingInputsType
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={ruleIndex}
|
||
setParentQuestion={setParentQuestion}
|
||
/>
|
||
);
|
||
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, setParentQuestion }: Props) => {
|
||
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={() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
<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) => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value;
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
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) => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main[ruleIndex].or = value;
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
{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, setParentQuestion }: Props) => {
|
||
const theme = useTheme();
|
||
const upLg = useMediaQuery(theme.breakpoints.up("md"));
|
||
|
||
const time = moment(new Date());
|
||
|
||
const [firstDate, setFirstDate] = useState(time);
|
||
const [secondDate, setSecondDate] = useState(time);
|
||
const [firstTime, setFirstTime] = useState(time);
|
||
const [secondTime, setSecondTime] = useState(time);
|
||
|
||
useEffect(() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = time;
|
||
if (newParentQuestion.content.dateRange) parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = time;
|
||
|
||
setParentQuestion(newParentQuestion);
|
||
}, [firstDate, secondDate, firstTime, secondTime]);
|
||
|
||
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={() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
<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>
|
||
|
||
<Box
|
||
sx={{
|
||
backgroundColor: "#E8EAEE",
|
||
margin: "10px",
|
||
}}
|
||
>
|
||
{parentQuestion.content.dateRange && (
|
||
<Typography sx={{ color: "#4D4D4D", p: "10px" }}>(Начало периода)</Typography>
|
||
)}
|
||
<DatePicker
|
||
defaultValue={moment(
|
||
new Date(parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]).toLocaleDateString()
|
||
)}
|
||
onChange={(dateString) => {
|
||
const date = dateString?.toDate().toLocaleDateString("ru-RU", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
});
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [date];
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
slots={{
|
||
openPickerIcon: () => <CalendarIcon />,
|
||
}}
|
||
slotProps={{
|
||
openPickerButton: {
|
||
sx: {
|
||
p: 0,
|
||
},
|
||
"data-cy": "open-datepicker",
|
||
},
|
||
}}
|
||
sx={{
|
||
p: "10px",
|
||
"& .MuiInputBase-root": {
|
||
minWidth: "325px",
|
||
backgroundColor: "#F2F3F7",
|
||
borderRadius: "10px",
|
||
pr: "31px",
|
||
"& input": {
|
||
py: "11px",
|
||
pl: upLg ? "20px" : "13px",
|
||
lineHeight: "19px",
|
||
},
|
||
"& fieldset": {
|
||
borderColor: "#9A9AAF",
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
{parentQuestion.content.time && (
|
||
<TimePicker
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
|
||
sx={{
|
||
p: "10px",
|
||
"& .MuiInputBase-root": {
|
||
minWidth: "325px",
|
||
backgroundColor: "#F2F3F7",
|
||
borderRadius: "10px",
|
||
pr: "22px",
|
||
"& input": {
|
||
py: "11px",
|
||
pl: upLg ? "20px" : "13px",
|
||
lineHeight: "19px",
|
||
},
|
||
"& fieldset": {
|
||
borderColor: "#9A9AAF",
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
|
||
{parentQuestion.content.dateRange && (
|
||
<Box
|
||
sx={{
|
||
backgroundColor: "#E8EAEE",
|
||
margin: "10px",
|
||
}}
|
||
>
|
||
{parentQuestion.content.dateRange && (
|
||
<Typography sx={{ color: "#4D4D4D", p: "10px" }}>(Конец периода)</Typography>
|
||
)}
|
||
<DatePicker
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
|
||
onChange={() => {}}
|
||
slots={{
|
||
openPickerIcon: () => <CalendarIcon />,
|
||
}}
|
||
slotProps={{
|
||
openPickerButton: {
|
||
sx: {
|
||
p: 0,
|
||
},
|
||
"data-cy": "open-datepicker",
|
||
},
|
||
}}
|
||
sx={{
|
||
p: "10px",
|
||
"& .MuiInputBase-root": {
|
||
minWidth: "325px",
|
||
backgroundColor: "#F2F3F7",
|
||
borderRadius: "10px",
|
||
pr: "31px",
|
||
"& input": {
|
||
py: "11px",
|
||
pl: upLg ? "20px" : "13px",
|
||
lineHeight: "19px",
|
||
},
|
||
"& fieldset": {
|
||
borderColor: "#9A9AAF",
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
{parentQuestion.content.time && (
|
||
<TimePicker
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
|
||
sx={{
|
||
p: "10px",
|
||
"& .MuiInputBase-root": {
|
||
minWidth: "325px",
|
||
backgroundColor: "#F2F3F7",
|
||
borderRadius: "10px",
|
||
pr: "22px",
|
||
"& input": {
|
||
py: "11px",
|
||
pl: upLg ? "20px" : "13px",
|
||
lineHeight: "19px",
|
||
},
|
||
"& fieldset": {
|
||
borderColor: "#9A9AAF",
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
);
|
||
};
|
||
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
|
||
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={() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
<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>
|
||
<Box>
|
||
<TextField
|
||
sx={{ marginTop: "20px", width: "100%" }}
|
||
placeholder="от"
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[0]}
|
||
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
|
||
const newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
const previousValue = newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0];
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = (parentQuestion as QuizQuestionNumber)
|
||
.content.chooseRange
|
||
? previousValue
|
||
? `${target.value}—${previousValue.split("—")[1] || 0}`
|
||
: `${target.value}—0`
|
||
: target.value;
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
/>
|
||
{(parentQuestion as QuizQuestionNumber).content.chooseRange && (
|
||
<TextField
|
||
placeholder="до"
|
||
sx={{ marginTop: "20px", width: "100%" }}
|
||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[1]}
|
||
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
|
||
const newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
const previousValue = newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0];
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = previousValue
|
||
? `${previousValue.split("—")[0] || 0}—${target.value}`
|
||
: `0—${target.value}`;
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
|
||
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={() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
<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>) => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value];
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|
||
const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
|
||
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={() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
<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>) => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [
|
||
(event.target as HTMLInputElement).checked,
|
||
];
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
/>
|
||
}
|
||
label="да"
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|
||
const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
|
||
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={() => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
>
|
||
<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>) => {
|
||
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
|
||
let valueNumber = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""));
|
||
valueNumber = valueNumber > parentQuestion.content.steps ? parentQuestion.content.steps : valueNumber;
|
||
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [valueNumber];
|
||
setParentQuestion(newParentQuestion);
|
||
}}
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|