diff --git a/src/assets/icons/InfoIcon.tsx b/src/assets/icons/InfoIcon.tsx index 43276c69..7aae8f1a 100755 --- a/src/assets/icons/InfoIcon.tsx +++ b/src/assets/icons/InfoIcon.tsx @@ -1,22 +1,51 @@ import { Box, useTheme } from "@mui/material"; +import type { SxProps } from "@mui/material"; -export default function InfoIcon() { - const theme = useTheme(); +type InfoIconProps = { + sx?: SxProps; +}; - return ( - - - - - - - - ); -} \ No newline at end of file +export default function InfoIcon({ sx }: InfoIconProps) { + const theme = useTheme(); + + return ( + + + + + + + + ); +} diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index 102fd6d8..a7debc03 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -67,7 +67,7 @@ export const AnswerItem = ({ const addNewAnswer = () => { const answerNew = variants.slice(); - answerNew.push({ answer: "", answerLong: "", hints: "" }); + answerNew.push({ answer: "", hints: "" }); updateQuestionsList(quizId, totalIndex, { content: { diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index bdeee27a..1fcc9027 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -26,7 +26,7 @@ export default function DropDown({ totalIndex }: Props) { const addNewAnswer = () => { const answerNew = variants.slice(); - answerNew.push({ answer: "", answerLong: "", hints: "" }); + answerNew.push({ answer: "", hints: "" }); updateQuestionsList(quizId, totalIndex, { content: { diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index 4c45b9ff..e05cb362 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -41,7 +41,7 @@ export default function Emoji({ totalIndex }: Props) { onClick={() => { const answerNew = listQuestions[quizId][totalIndex].content.variants.slice(); - answerNew.push({ answer: "", answerLong: "", hints: "" }); + answerNew.push({ answer: "", hints: "" }); updateQuestionsList(quizId, totalIndex, { content: { diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index a9970362..7404b7f8 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -79,11 +79,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) { sx={{ color: theme.palette.brightPurple.main }} onClick={() => { const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.variants.push({ - answer: "", - answerLong: "", - hints: "", - }); + clonContent.variants.push({ answer: "", hints: "" }); updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} diff --git a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx index ebcf56f1..19d569df 100644 --- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx @@ -1,25 +1,106 @@ -import {Box, Typography} from "@mui/material"; +import { useParams } from "react-router-dom"; +import { Box, Typography } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; import InfoIcon from "../../../assets/icons/InfoIcon"; -export default function SettingOptionsAndPict() { - return( - <> - - - Настройки ответов - +import { questionStore, updateQuestionsList } from "@root/questions"; - Текст-заглушка на картинке - - - - Настройки вопросов - - - - - - ) -} \ No newline at end of file +type SettingOptionsAndPictProps = { + totalIndex: number; +}; + +export default function SettingOptionsAndPict({ + totalIndex, +}: SettingOptionsAndPictProps) { + const quizId = Number(useParams().quizId); + const { listQuestions } = questionStore(); + + return ( + <> + + + + Настройки ответов + + { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + own: target.checked, + }, + }); + }} + /> + + Текст-заглушка на картинке + + { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + replText: target.value, + }, + }); + }} + /> + + + + Настройки вопросов + + { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + required: target.checked, + }, + }); + }} + /> + + { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + innerNameCheck: target.checked, + innerName: "", + }, + }); + }} + />{" "} + + + {listQuestions[quizId][totalIndex].content.innerNameCheck && ( + { + let clonContent = listQuestions[quizId][totalIndex].content; + clonContent.innerName = target.value; + updateQuestionsList(quizId, totalIndex, { + content: clonContent, + }); + }} + /> + )} + + + + ); +} diff --git a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx index 17516892..8235fda2 100644 --- a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx @@ -15,7 +15,7 @@ export default function SwitchOptionsAndPict({ }: Props) { switch (switchState) { case "setting": - return ; + return ; break; case "help": return ; diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 66ab2d2c..b0f35e86 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -2,6 +2,7 @@ import { useEffect } from "react"; import { useParams } from "react-router-dom"; import { Box, Button, Typography, useTheme } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import CustomTextField from "@ui_kit/CustomTextField"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -114,13 +115,14 @@ export default function SettingOpytionsPict({ + handleChange={({ target }) => updateQuestionsList(quizId, totalIndex, { content: { ...listQuestions[quizId][totalIndex].content, - multi: !listQuestions[quizId][totalIndex].content.multi, + multi: target.checked, }, }) } @@ -128,17 +130,27 @@ export default function SettingOpytionsPict({ + handleChange={({ target }) => updateQuestionsList(quizId, totalIndex, { content: { ...listQuestions[quizId][totalIndex].content, - largeCheck: - !listQuestions[quizId][totalIndex].content.largeCheck, + largeCheck: target.checked, + }, + }) + } + /> + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + own: target.checked, }, }) } /> - Форма @@ -181,8 +193,48 @@ export default function SettingOpytionsPict({ Настройки вопросов - - + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + required: target.checked, + }, + }) + } + /> + + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + innerNameCheck: target.checked, + innerName: "", + }, + }) + } + /> + + + {listQuestions[quizId][totalIndex].content.innerNameCheck && ( + { + let clonContent = listQuestions[quizId][totalIndex].content; + clonContent.innerName = target.value; + updateQuestionsList(quizId, totalIndex, { + content: clonContent, + }); + }} + /> + )} diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index 3de866fd..993f6196 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -26,7 +26,7 @@ export default function AnswerOptions({ totalIndex }: Props) { const addNewAnswer = () => { const answerNew = variants.slice(); // Create a shallow copy of the array - answerNew.push({ answer: "", answerLong: "", hints: "" }); + answerNew.push({ answer: "", hints: "" }); updateQuestionsList(quizId, totalIndex, { content: { diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 68cf685c..c3bd8eb3 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -3,7 +3,6 @@ import { persist } from "zustand/middleware"; export type Variants = { answer: string; - answerLong: string; hints: string; }; @@ -63,6 +62,8 @@ export interface Question { start: number; step: number; chooseRange: boolean; + required: boolean; + replText: string; }; version: number; parent_ids: number[]; @@ -167,10 +168,11 @@ export const createQuestion = (quizId: number) => { start: 50, step: 1, chooseRange: false, + required: false, + replText: "", variants: [ { answer: "", - answerLong: "", hints: "", }, ], diff --git a/src/ui_kit/CustomCheckbox.tsx b/src/ui_kit/CustomCheckbox.tsx index 813dac83..8c3bb8eb 100755 --- a/src/ui_kit/CustomCheckbox.tsx +++ b/src/ui_kit/CustomCheckbox.tsx @@ -1,14 +1,17 @@ import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material"; import React from "react"; +import type { SxProps } from "@mui/material"; + interface Props { label: string; handleChange?: (event: React.ChangeEvent) => void; checked?: boolean; + sx?: SxProps; } -export default function CustomCheckbox({ label, handleChange, checked}: Props) { +export default function CustomCheckbox({ label, handleChange, checked, sx}: Props) { const theme = useTheme(); return ( @@ -25,6 +28,7 @@ export default function CustomCheckbox({ label, handleChange, checked}: Props) { color: theme.palette.grey2.main, ml: "-9px", userSelect: "none", + ...sx, }} />