179 lines
9.2 KiB
TypeScript
Executable File
179 lines
9.2 KiB
TypeScript
Executable File
import {Box, Typography, Link, useTheme, TextField, FormControl, InputAdornment, IconButton} from "@mui/material";
|
||
import React, {useState} from "react";
|
||
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
|
||
import SwitchAnswerOptions from "./switchAnswerOptions";
|
||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||
import QuestionsPageCard from "../QuestionPageCard";
|
||
import {useParams} from "react-router-dom";
|
||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||
import MessageIcon from "@icons/messagIcon";
|
||
import Popover from '@mui/material/Popover';
|
||
import TextareaAutosize from '@mui/base/TextareaAutosize';
|
||
|
||
interface Props {
|
||
totalIndex: number,
|
||
}
|
||
|
||
|
||
export default function AnswerOptions({totalIndex}: Props) {
|
||
const params = Number(useParams().quizId);
|
||
|
||
const {listQuestions} = questionStore()
|
||
const Answer = listQuestions[totalIndex].content.variants
|
||
console.log(Answer)
|
||
const theme = useTheme();
|
||
const [switchState, setSwitchState] = React.useState('setting');
|
||
const SSHC = (data: string) => {
|
||
setSwitchState(data)
|
||
}
|
||
// const [openBranch, setOpenBranch] = useState(false);
|
||
// const handleOpenBranch = () => setOpenBranch(true);
|
||
// const handleCloseBranch = () => setOpenBranch(false);
|
||
|
||
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
|
||
|
||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||
setAnchorEl(event.currentTarget);
|
||
};
|
||
|
||
const handleClose = () => {
|
||
setAnchorEl(null);
|
||
};
|
||
|
||
const open = Boolean(anchorEl);
|
||
const id = open ? 'simple-popover' : undefined;
|
||
return (
|
||
<>
|
||
<Box sx={{ padding: "0 20px 20px 20px"}}>
|
||
{Answer.length === 0 ?
|
||
<Typography
|
||
sx={{
|
||
padding: '0 0 33px 80px',
|
||
fontWeight: 400,
|
||
fontSize: '18px',
|
||
lineHeight: '21.33px',
|
||
color: theme.palette.grey2.main
|
||
}}
|
||
>
|
||
Добавьте ответ
|
||
</Typography>
|
||
:
|
||
<Box>
|
||
{Answer.map((answer:string, index:number) => (
|
||
<FormControl
|
||
fullWidth
|
||
variant="standard"
|
||
sx={{ p: "0 0 20px 0" }}
|
||
>
|
||
<TextField
|
||
value={Answer[index].answer}
|
||
fullWidth
|
||
placeholder={"Добавьте ответ"}
|
||
onChange={(e) => {
|
||
const answerNew = Answer
|
||
answerNew[index].answer = e.target.value
|
||
let clonContent = listQuestions[totalIndex].content
|
||
clonContent.variants = answerNew
|
||
updateQuestionsList(totalIndex, {content: clonContent})}}
|
||
InputProps={{
|
||
startAdornment: (
|
||
<InputAdornment position="start">
|
||
<PointsIcon />
|
||
</InputAdornment>
|
||
),
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton aria-describedby={id} onClick={handleClick}>
|
||
<MessageIcon/>
|
||
</IconButton>
|
||
<Popover
|
||
id={id}
|
||
open={open}
|
||
anchorEl={anchorEl}
|
||
onClose={handleClose}
|
||
anchorOrigin={{
|
||
vertical: 'bottom',
|
||
horizontal: 'left',
|
||
}}
|
||
>
|
||
<TextareaAutosize style={{margin: "10px"}} placeholder="Подсказка для этого ответа" value={Answer[index].hints}
|
||
onChange={(e) => {
|
||
const answerNew = Answer
|
||
answerNew[index].hints = e.target.value
|
||
let clonContent = listQuestions[totalIndex].content
|
||
clonContent.variants = answerNew
|
||
updateQuestionsList(totalIndex, {content: clonContent})}}
|
||
/>
|
||
</Popover>
|
||
<IconButton
|
||
onClick={() => {
|
||
const answerNew = Answer
|
||
answerNew.splice(index, 1)
|
||
let clonContent = listQuestions[totalIndex].content
|
||
clonContent.variants = answerNew
|
||
updateQuestionsList(totalIndex, {content: clonContent})
|
||
}}
|
||
>
|
||
<DeleteIcon color={theme.palette.grey2.main}/>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
)
|
||
}}
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
height: "48px",
|
||
borderRadius: "10px",
|
||
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
borderRadius: "10px",
|
||
fontSize: "18px",
|
||
lineHeight: "21px",
|
||
py: 0,
|
||
|
||
}
|
||
}}
|
||
/>
|
||
</FormControl>
|
||
)
|
||
)}
|
||
</Box>
|
||
}
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: "10px"}}>
|
||
<Link
|
||
component="button"
|
||
variant="body2"
|
||
sx={{color: theme.palette.brightPurple.main}}
|
||
onClick={() => {
|
||
const answerNew = Answer
|
||
answerNew.push({answer: "",})
|
||
let clonContent = listQuestions[totalIndex].content
|
||
clonContent.variants = answerNew
|
||
updateQuestionsList(totalIndex, {content: clonContent})
|
||
}}
|
||
>
|
||
Добавьте ответ
|
||
</Link>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 400,
|
||
fontSize: '18px',
|
||
lineHeight: '21.33px',
|
||
color: theme.palette.grey2.main
|
||
}}
|
||
>или нажмите Enter</Typography>
|
||
<EnterIcon/>
|
||
</Box>
|
||
|
||
|
||
</Box>
|
||
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
|
||
<SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex}/>
|
||
</>
|
||
)
|
||
} |