diff --git a/src/assets/icons/questionsPage/addAnswer.tsx b/src/assets/icons/questionsPage/addAnswer.tsx new file mode 100644 index 00000000..3bb950df --- /dev/null +++ b/src/assets/icons/questionsPage/addAnswer.tsx @@ -0,0 +1,34 @@ +import { Box, SxProps, Theme } from "@mui/material"; + +interface Props { + color: string; + sx?: SxProps; +} +export default function AddAnswer({ color, sx }: Props) { + return ( + + + + + + + ); +} diff --git a/src/assets/icons/questionsPage/answerGroup.tsx b/src/assets/icons/questionsPage/answerGroup.tsx new file mode 100644 index 00000000..4b17fcb9 --- /dev/null +++ b/src/assets/icons/questionsPage/answerGroup.tsx @@ -0,0 +1,43 @@ +import { Box, SxProps, Theme } from "@mui/material"; + +interface Props { + color: string; + sx?: SxProps; +} +export default function AnswerGroup({ color, sx }: Props) { + return ( + + + + + + + + + ); +} diff --git a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx index e6b6445f..759f9eb6 100644 --- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx @@ -45,6 +45,7 @@ import Slider from "@icons/questionsPage/slider"; import Download from "@icons/questionsPage/download"; import Page from "@icons/questionsPage/page"; import RatingIcon from "@icons/questionsPage/rating"; +import AnswerGroup from "@icons/questionsPage/answerGroup"; import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon"; import { ReactComponent as PlusIcon } from "../../../../assets/icons/plus.svg"; @@ -137,7 +138,12 @@ const IconAndrom = (isExpanded: boolean, switchState: string) => { /> ); default: - return <>; + return ( + + ); } }; export default function QuestionsPageCard({ @@ -176,269 +182,24 @@ export default function QuestionsPageCard({ backgroundColor: question.expanded ? "white" : "#EEE4FC", border: question.expanded ? "none" : "1px solid #9A9AAF", boxShadow: "0px 10px 30px #e7e7e7", + marginBottom: "40px", }} > - - debounced(target.value)} - InputProps={{ - startAdornment: ( - - setOpen((isOpened) => !isOpened)} - > - {IconAndrom(question.expanded, question.type)} - - setOpen(false)} - anchorRef={anchorRef} - totalIndex={totalIndex} - switchState={question.type} - /> - - ), - }} - sx={{ - margin: isMobile ? "10px 0" : 0, - "& .MuiInputBase-root": { - color: question.expanded ? "#9A9AAF" : "#4D4D4D", - 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={{ - sx: { - fontSize: "18px", - lineHeight: "21px", - py: 0, - paddingLeft: question.type.length === 0 ? 0 : "18px", - }, - }} - /> - - - - updateQuestionsList(quizId, totalIndex, { - expanded: !question.expanded, - }) - } - > - {question.expanded ? ( - - ) : ( - - )} - - {question.expanded ? ( - <> - ) : ( - - - } - checkedIcon={} - /> - } - label={""} - sx={{ - color: theme.palette.grey2.main, - ml: "-9px", - mr: 0, - userSelect: "none", - }} - /> - copyQuestion(quizId, totalIndex)} - > - - - { - const removedId = question.id; - if (question.deleteTimeoutId) { - clearTimeout(question.deleteTimeoutId); - } - - removeQuestion(quizId, totalIndex); - - const newTimeoutId = window.setTimeout(() => { - removeQuestionForce(quizId, removedId); - }, 5000); - - updateQuestionsList(quizId, totalIndex, { - ...question, - deleteTimeoutId: newTimeoutId, - }); - }} - > - - - - )} - - - - - - + {question.type.length === 0 ? ( + + ) : ( + + )} - {question.expanded && ( - - {question.type.length === 0 ? ( - - ) : ( - - )} - - )} - setPlusVisible(true)} - onMouseLeave={() => setPlusVisible(false)} - sx={{ - maxWidth: "825px", - display: "flex", - alignItems: "center", - height: "40px", - cursor: "pointer", - }} - > - createQuestion(quizId, "", totalIndex + 1)} - sx={{ - display: plusVisible && !isDragging ? "flex" : "none", - width: "100%", - alignItems: "center", - columnGap: "10px", - }} - > - - - - ); } diff --git a/src/pages/Questions/Form/FormQuestionsPage.tsx b/src/pages/Questions/Form/FormQuestionsPage.tsx index 8f2730cc..923b8b2a 100644 --- a/src/pages/Questions/Form/FormQuestionsPage.tsx +++ b/src/pages/Questions/Form/FormQuestionsPage.tsx @@ -2,7 +2,6 @@ import { Box, Button, IconButton, Typography, useTheme } from "@mui/material"; import { useParams } from "react-router-dom"; import { FormDraggableList } from "./FormDraggableList"; -import ButtonsOptions from "../ButtonsOptions"; import { questionStore, @@ -65,38 +64,30 @@ export default function FormQuestionsPage() { - { - createQuestion(quizId); - }} + - - + + + ); diff --git a/src/pages/Questions/Form/FormTypeQuestions.tsx b/src/pages/Questions/Form/FormTypeQuestions.tsx index f79ee6a3..91e1cd55 100644 --- a/src/pages/Questions/Form/FormTypeQuestions.tsx +++ b/src/pages/Questions/Form/FormTypeQuestions.tsx @@ -1,5 +1,11 @@ import { useState } from "react"; +import { useParams } from "react-router-dom"; +import { Box, Typography } from "@mui/material"; + import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton"; +import CustomTextField from "@ui_kit/CustomTextField"; +import ButtonsOptions from "../ButtonsOptions"; + import Answer from "../../../assets/icons/questionsPage/answer"; import OptionsPict from "../../../assets/icons/questionsPage/options_pict"; import OptionsAndPict from "../../../assets/icons/questionsPage/options_and_pict"; @@ -11,10 +17,7 @@ import Slider from "../../../assets/icons/questionsPage/slider"; import Download from "../../../assets/icons/questionsPage/download"; import Page from "../../../assets/icons/questionsPage/page"; import RatingIcon from "../../../assets/icons/questionsPage/rating"; -import { Box } from "@mui/material"; -import React from "react"; -import { useParams } from "react-router-dom"; -import ButtonsOptions from "../ButtonsOptions"; +import AddAnswer from "../../../assets/icons/questionsPage/addAnswer"; import { questionStore, @@ -100,13 +103,10 @@ export default function FormTypeQuestions({ totalIndex }: Props) { const [switchState, setSwitchState] = useState("setting"); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; return ( - + + {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => ( { - const question = { ...listQuestions[quizId][totalIndex] }; + const clonedQuestion = { ...question }; - removeQuestionForce(quizId, question.id); + removeQuestionForce(quizId, clonedQuestion.id); createQuestion(quizId, value, totalIndex); updateQuestionsList(quizId, totalIndex, { - expanded: question.expanded, + expanded: clonedQuestion.expanded, type: value, }); }} @@ -132,6 +133,27 @@ export default function FormTypeQuestions({ totalIndex }: Props) { text={title} /> ))} + console.log("add")} + > + + + Добавить еще один вопрос + +