61 lines
3.2 KiB
TypeScript
61 lines
3.2 KiB
TypeScript
import {Box, Typography} from "@mui/material";
|
||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||
import * as React from "react";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import {useParams} from "react-router-dom";
|
||
import {questionStore, updateQuestionsList} from "@root/questions";
|
||
|
||
interface Props {
|
||
totalIndex: number,
|
||
}
|
||
|
||
export default function ResponseSettings({totalIndex}: Props) {
|
||
const params = Number(useParams().quizId);
|
||
const {listQuestions} = questionStore()
|
||
const [checked, setChecked] = React.useState([true, false]);
|
||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setChecked([checked[0], event.target.checked, ]);
|
||
};
|
||
|
||
return (
|
||
<Box sx={{display: 'flex'}}>
|
||
<Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}>
|
||
<Typography>Настройки ответов</Typography>
|
||
<CustomCheckbox label={'Длинный текстовый ответ'}/>
|
||
<CustomCheckbox label={'Можно несколько'}
|
||
checked={listQuestions[totalIndex].content.multi}
|
||
handleChange={(e) => {
|
||
let clonContent = listQuestions[totalIndex].content
|
||
clonContent.multi = e.target.checked
|
||
updateQuestionsList( totalIndex, {content: clonContent})
|
||
}}
|
||
/>
|
||
<CustomCheckbox label={'Вариант "свой ответ"'}
|
||
checked={listQuestions[totalIndex].content.own}
|
||
handleChange={(e) => {
|
||
let clonContent = listQuestions[totalIndex].content
|
||
clonContent.own = e.target.checked
|
||
updateQuestionsList(totalIndex, {content: clonContent})
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}>
|
||
<Typography>Настройки вопросов</Typography>
|
||
<CustomCheckbox label={'Необязательный вопрос'} checked={!(listQuestions[totalIndex].required)}
|
||
handleChange={(e) => {
|
||
updateQuestionsList(totalIndex, {required: !e.target.checked})
|
||
console.log(listQuestions[totalIndex].required)}}/>
|
||
<Box sx={{display: "flex"}}>
|
||
<CustomCheckbox label={'Внутреннее название вопроса'} checked={checked[1]} handleChange={handleChange}/> <InfoIcon />
|
||
</Box>
|
||
{checked[1] ?
|
||
<CustomTextField placeholder={"Развёрнутое описание вопроса"} text={listQuestions[totalIndex].description}
|
||
onChange={e => updateQuestionsList(totalIndex, {description: e.target.value})}/>
|
||
:
|
||
<></>
|
||
}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}; |