сворачиваемость плашек анкеты
This commit is contained in:
Tamara
parent
ddc73f47a2
commit
0c04498dde
@ -11,8 +11,23 @@ import OptionsPict from "@icons/questionsPage/options_pict";
|
||||
import Page from "@icons/questionsPage/page";
|
||||
import RatingIcon from "@icons/questionsPage/rating";
|
||||
import Slider from "@icons/questionsPage/slider";
|
||||
import { Box, FormControlLabel, IconButton, InputAdornment, Paper, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
|
||||
import {
|
||||
Box, Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
Paper, TextField,
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import {
|
||||
copyQuestion,
|
||||
deleteQuestion, deleteQuestionWithTimeout,
|
||||
toggleExpandQuestion,
|
||||
updateQuestion,
|
||||
updateUntypedQuestion
|
||||
} from "@root/questions/actions";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import { useRef, useState } from "react";
|
||||
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
|
||||
@ -51,150 +66,247 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
});
|
||||
}, 200);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
backgroundColor: "white",
|
||||
border: "none",
|
||||
boxShadow: "none",
|
||||
paddingBottom: "20px",
|
||||
borderRadius: "0",
|
||||
borderTopLeftRadius: "12px",
|
||||
borderTopRightRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
p: 0,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
gap: "18px",
|
||||
flexDirection: isMobile ? "column-reverse" : null,
|
||||
}}
|
||||
>
|
||||
<CustomTextField
|
||||
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
|
||||
text={question.title}
|
||||
onChange={({ target }) => setTitle(target.value)}
|
||||
sx={{ width: "100%" }}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<Box>
|
||||
<InputAdornment
|
||||
ref={anchorRef}
|
||||
position="start"
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => setOpen((isOpened) => !isOpened)}
|
||||
>
|
||||
{IconAndrom(question.type)}
|
||||
</InputAdornment>
|
||||
<ChooseAnswerModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
anchorRef={anchorRef}
|
||||
question={question}
|
||||
questionType={question.type}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: isMobile ? "100%" : "auto",
|
||||
position: "relative",
|
||||
}}
|
||||
console.log(question)
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
backgroundColor: question.expanded ? "white" : "#EEE4FC",
|
||||
border: question.expanded ? "none" : "1px solid #9A9AAF",
|
||||
boxShadow: "none",
|
||||
paddingBottom: "20px",
|
||||
borderRadius: "0",
|
||||
borderTopLeftRadius: "12px",
|
||||
borderTopRightRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
flexDirection: isMobile ? "row-reverse" : null,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{ padding: "0", margin: "5px" }}
|
||||
disableRipple
|
||||
data-cy="expand-question"
|
||||
onClick={() => toggleExpandQuestion(question.id)}
|
||||
>
|
||||
{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>
|
||||
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
marginLeft: "3px",
|
||||
borderRadius: "50%",
|
||||
fontSize: "16px",
|
||||
color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
|
||||
background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
p: 0,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{questionIndex + 1}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
gap: "18px",
|
||||
flexDirection: isMobile ? "column-reverse" : null,
|
||||
}}
|
||||
>
|
||||
<FormControl
|
||||
variant="standard"
|
||||
sx={{
|
||||
p: 0,
|
||||
maxWidth: isTablet ? "549px" : "640px",
|
||||
width: "100%",
|
||||
marginRight: isMobile ? "0px" : "16.1px",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
|
||||
value={question.title}
|
||||
onChange={({target}) => setTitle(target.value)}
|
||||
sx={{
|
||||
width: "100%",
|
||||
margin: isMobile ? "10px 0" : 0,
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#000000",
|
||||
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={{
|
||||
startAdornment: (
|
||||
<Box>
|
||||
<InputAdornment
|
||||
ref={anchorRef}
|
||||
position="start"
|
||||
sx={{cursor: "pointer"}}
|
||||
onClick={() => setOpen((isOpened) => !isOpened)}
|
||||
>
|
||||
{IconAndrom(question.type)}
|
||||
</InputAdornment>
|
||||
<ChooseAnswerModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
anchorRef={anchorRef}
|
||||
question={question}
|
||||
questionType={question.type}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: isMobile ? "100%" : "auto",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
flexDirection: isMobile ? "row-reverse" : null,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{padding: "0", margin: "5px"}}
|
||||
disableRipple
|
||||
data-cy="expand-question"
|
||||
onClick={() => toggleExpandQuestion(question.id)}
|
||||
>
|
||||
{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(question.id, question.quizId)}
|
||||
>
|
||||
<CopyIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
borderRadius: "6px",
|
||||
padding: "0",
|
||||
margin: "0 5px 0 10px",
|
||||
}}
|
||||
onClick={() => {
|
||||
deleteQuestionWithTimeout(question.id, deleteQuestion(question.id));
|
||||
|
||||
}}
|
||||
>
|
||||
<DeleteIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
marginLeft: "3px",
|
||||
borderRadius: "50%",
|
||||
fontSize: "16px",
|
||||
color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
|
||||
background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
{questionIndex + 1}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<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 && (
|
||||
<>
|
||||
{question.type === null ? (
|
||||
<FormTypeQuestions question={question}/>
|
||||
) : (
|
||||
<SwitchQuestionsPage question={question}/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<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.type === null ? (
|
||||
<FormTypeQuestions question={question} />
|
||||
) : (
|
||||
<SwitchQuestionsPage question={question} />
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const IconAndrom = (questionType: QuestionType | null) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user