fix: question store interaction

2023-09-07 17:14:48 +03:00 · 2023-09-07 17:14:48 +03:00 · 2575d776a4
commit 2575d776a4
parent 365287d446
11 changed files with 223 additions and 59 deletions
--- 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 (
-        <Box sx={{
-            height: "24px",
-            width: "24px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        }}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                <path d="M11.25 11.25H12V16.5H12.75" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                <path d="M11.8125 9C12.4338 9 12.9375 8.49632 12.9375 7.875C12.9375 7.25368 12.4338 6.75 11.8125 6.75C11.1912 6.75 10.6875 7.25368 10.6875 7.875C10.6875 8.49632 11.1912 9 11.8125 9Z" fill={theme.palette.brightPurple.main} />
-            </svg>
-        </Box>
-    );
-}
+export default function InfoIcon({ sx }: InfoIconProps) {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: "24px",
+        width: "24px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sx,
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke={theme.palette.brightPurple.main}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M11.25 11.25H12V16.5H12.75"
+          stroke={theme.palette.brightPurple.main}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M11.8125 9C12.4338 9 12.9375 8.49632 12.9375 7.875C12.9375 7.25368 12.4338 6.75 11.8125 6.75C11.1912 6.75 10.6875 7.25368 10.6875 7.875C10.6875 8.49632 11.1912 9 11.8125 9Z"
+          fill={theme.palette.brightPurple.main}
+        />
+      </svg>
+    </Box>
+  );
+}
--- 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: {
--- 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: {
--- 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: {
--- 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 });
            }}
--- 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(
-        <>
-            <Box sx={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
-                <Box sx={{padding: '20px', width: '100%'}}>
-                    <Typography sx={{marginBottom: '15px'}}>Настройки ответов</Typography>
-                    <CustomCheckbox label={'Вариант "свой ответ"'}/>
+import { questionStore, updateQuestionsList } from "@root/questions";

-                    <Typography sx={{marginBottom: '15px'}}>Текст-заглушка на картинке</Typography>
-                    <CustomTextField placeholder={'Пример текста'} text={''}/>
-                </Box>
-                <Box sx={{padding: '20px'}}>
-                    <Typography sx={{marginBottom: '15px'}}>Настройки вопросов</Typography>
-                    <CustomCheckbox label={'Необязательный вопрос'}/>
-                    <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
-                </Box>
-            </Box>
-        </>
-    )
-}
+type SettingOptionsAndPictProps = {
+  totalIndex: number;
+};
+
+export default function SettingOptionsAndPict({
+  totalIndex,
+}: SettingOptionsAndPictProps) {
+  const quizId = Number(useParams().quizId);
+  const { listQuestions } = questionStore();
+
+  return (
+    <>
+      <Box
+        sx={{ display: "flex", width: "100%", justifyContent: "space-between" }}
+      >
+        <Box sx={{ padding: "20px", width: "100%" }}>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки ответов
+          </Typography>
+          <CustomCheckbox
+            label={'Вариант "свой ответ"'}
+            checked={listQuestions[quizId][totalIndex].content.own}
+            handleChange={({ target }) => {
+              updateQuestionsList(quizId, totalIndex, {
+                content: {
+                  ...listQuestions[quizId][totalIndex].content,
+                  own: target.checked,
+                },
+              });
+            }}
+          />
+          <Typography sx={{ marginBottom: "15px" }}>
+            Текст-заглушка на картинке
+          </Typography>
+          <CustomTextField
+            placeholder={"Пример текста"}
+            text={listQuestions[quizId][totalIndex].content.replText}
+            onChange={({ target }) => {
+              updateQuestionsList(quizId, totalIndex, {
+                content: {
+                  ...listQuestions[quizId][totalIndex].content,
+                  replText: target.value,
+                },
+              });
+            }}
+          />
+        </Box>
+        <Box sx={{ padding: "20px", width: "100%" }}>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки вопросов
+          </Typography>
+          <CustomCheckbox
+            label={"Необязательный вопрос"}
+            checked={listQuestions[quizId][totalIndex].content.required}
+            handleChange={({ target }) => {
+              updateQuestionsList(quizId, totalIndex, {
+                content: {
+                  ...listQuestions[quizId][totalIndex].content,
+                  required: target.checked,
+                },
+              });
+            }}
+          />
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <CustomCheckbox
+              sx={{ width: "100%" }}
+              label={"Внутреннее название вопроса"}
+              checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+              handleChange={({ target }) => {
+                updateQuestionsList(quizId, totalIndex, {
+                  content: {
+                    ...listQuestions[quizId][totalIndex].content,
+                    innerNameCheck: target.checked,
+                    innerName: "",
+                  },
+                });
+              }}
+            />{" "}
+            <InfoIcon />
+          </Box>
+          {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+            <CustomTextField
+              placeholder={"Развёрнутое описание вопроса"}
+              text={listQuestions[quizId][totalIndex].content.innerName}
+              onChange={({ target }) => {
+                let clonContent = listQuestions[quizId][totalIndex].content;
+                clonContent.innerName = target.value;
+                updateQuestionsList(quizId, totalIndex, {
+                  content: clonContent,
+                });
+              }}
+            />
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+}
--- 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 <SettingOptionsAndPict />;
+      return <SettingOptionsAndPict totalIndex={totalIndex} />;
      break;
    case "help":
      return <HelpQuestions totalIndex={totalIndex} />;
--- 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({
          </Typography>

          <CustomCheckbox
+            sx={{ display: "block" }}
            label={"Можно несколько"}
            checked={listQuestions[quizId][totalIndex].content.multi}
-            handleChange={() =>
+            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({
          <CustomCheckbox
            label={"Большие картинки"}
            checked={listQuestions[quizId][totalIndex].content.largeCheck}
-            handleChange={() =>
+            handleChange={({ target }) =>
              updateQuestionsList(quizId, totalIndex, {
                content: {
                  ...listQuestions[quizId][totalIndex].content,
-                  largeCheck:
-                    !listQuestions[quizId][totalIndex].content.largeCheck,
+                  largeCheck: target.checked,
+                },
+              })
+            }
+          />
+          <CustomCheckbox
+            label={'Вариант "свой ответ"'}
+            checked={listQuestions[quizId][totalIndex].content.own}
+            handleChange={({ target }) =>
+              updateQuestionsList(quizId, totalIndex, {
+                content: {
+                  ...listQuestions[quizId][totalIndex].content,
+                  own: target.checked,
                },
              })
            }
          />
-          <CustomCheckbox label={'Вариант "свой ответ"'} />
        </Box>
        <Box sx={{ padding: "20px" }}>
          <Typography sx={{ marginBottom: "15px" }}>Форма</Typography>
@ -181,8 +193,48 @@ export default function SettingOpytionsPict({
          <Typography sx={{ marginBottom: "15px" }}>
            Настройки вопросов
          </Typography>
-          <CustomCheckbox label={"Необязательный вопрос"} />
-          <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          <CustomCheckbox
+            label={"Необязательный вопрос"}
+            checked={listQuestions[quizId][totalIndex].content.required}
+            handleChange={({ target }) =>
+              updateQuestionsList(quizId, totalIndex, {
+                content: {
+                  ...listQuestions[quizId][totalIndex].content,
+                  required: target.checked,
+                },
+              })
+            }
+          />
+          <Box sx={{ display: "flex" }}>
+            <CustomCheckbox
+              sx={{ width: "100%" }}
+              label={"Внутреннее название вопроса"}
+              checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+              handleChange={({ target }) =>
+                updateQuestionsList(quizId, totalIndex, {
+                  content: {
+                    ...listQuestions[quizId][totalIndex].content,
+                    innerNameCheck: target.checked,
+                    innerName: "",
+                  },
+                })
+              }
+            />
+            <InfoIcon />
+          </Box>
+          {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+            <CustomTextField
+              placeholder={"Внутреннее описание вопроса"}
+              text={listQuestions[quizId][totalIndex].content.innerName}
+              onChange={({ target }) => {
+                let clonContent = listQuestions[quizId][totalIndex].content;
+                clonContent.innerName = target.value;
+                updateQuestionsList(quizId, totalIndex, {
+                  content: clonContent,
+                });
+              }}
+            />
+          )}
        </Box>
      </Box>
    </>
--- 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: {
--- 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: "",
        },
      ],
--- 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<HTMLInputElement>) => 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,
            }}

        />