fix: css styles and store interaction

2023-09-08 16:42:52 +03:00 · 2023-09-08 16:42:52 +03:00 · f8ca505608
commit f8ca505608
parent 2d944f8c47
12 changed files with 353 additions and 33 deletions
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@ -109,7 +109,7 @@ export const AnswerItem = ({
            key={index}
            fullWidth
            variant="standard"
-            sx={{ p: "0 0 20px 0" }}
+            sx={{ padding: "0 0 20px 0" }}
          >
            <TextField
              value={variant.answer}
@ -171,7 +171,7 @@ export const AnswerItem = ({
              }}
              sx={{
                "& .MuiInputBase-root": {
-                  padding: "13.5px",
+                  padding: icon ? "5px 13.5px" : "13.5px",
                  borderRadius: "10px",
                  background: "#ffffff",
                },
--- a/src/pages/Questions/DataOptions/settingData.tsx
+++ b/src/pages/Questions/DataOptions/settingData.tsx
@ -1,6 +1,7 @@
 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";
 import { questionStore, updateQuestionsList } from "@root/questions";

@ -17,7 +18,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки календаря</Typography>
        <CustomCheckbox
-          label={"Выбор диапозона дат"}
+          label={"Выбор диапазона дат"}
          checked={listQuestions[quizId][totalIndex].content.dateRange}
          handleChange={({ target }) => {
            const clonContent = listQuestions[quizId][totalIndex].content;
@ -35,10 +36,45 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
          }}
        />
      </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "20px", minWidth: "350px", marginRight: "30px" }}>
        <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        <CustomCheckbox
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <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/DropDown/settingDropDown.tsx
+++ b/src/pages/Questions/DropDown/settingDropDown.tsx
@ -38,12 +38,51 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
            }}
          />
        </Box>
-        <Box sx={{ padding: "20px" }}>
+        <Box sx={{ padding: "20px", width: "100%" }}>
          <Typography sx={{ marginBottom: "15px" }}>
            Настройки вопросов
          </Typography>
-          <CustomCheckbox label={"Необязательный вопрос"} />
-          <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          <CustomCheckbox
+            label={"Необязательный вопрос"}
+            checked={!listQuestions[quizId][totalIndex].required}
+            handleChange={(e) => {
+              updateQuestionsList(quizId, totalIndex, {
+                required: !e.target.checked,
+              });
+            }}
+          />
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <CustomCheckbox
+              label={"Внутреннее название вопроса"}
+              checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+              handleChange={(e) => {
+                let clonContent = listQuestions[quizId][totalIndex].content;
+                clonContent.innerNameCheck = e.target.checked;
+
+                if (!e.target.checked) {
+                  clonContent.innerName = "";
+                }
+
+                updateQuestionsList(quizId, totalIndex, {
+                  content: clonContent,
+                });
+              }}
+            />{" "}
+            <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/Emoji/settingEmoji.tsx
+++ b/src/pages/Questions/Emoji/settingEmoji.tsx
@ -1,6 +1,7 @@
 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";
 import { questionStore, updateQuestionsList } from "@root/questions";

@ -13,7 +14,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
  const { listQuestions } = questionStore();

  return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки ответов</Typography>
        <CustomCheckbox
@ -35,10 +36,45 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
          }}
        />
      </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "20px", minWidth: "350px", marginRight: "30px" }}>
        <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        <CustomCheckbox
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <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/OptionsPicture/settingOpytionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
@ -89,7 +89,13 @@ export default function SettingOpytionsPict({

  return (
    <>
-      <Box sx={{ display: "flex" }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          marginRight: "30px",
+        }}
+      >
        <Box sx={{ padding: "20px" }}>
          <Typography sx={{ marginBottom: "15px" }}>Пропорции</Typography>
          <Box
@ -152,7 +158,7 @@ export default function SettingOpytionsPict({
            }
          />
        </Box>
-        <Box sx={{ padding: "20px" }}>
+        <Box sx={{ padding: "20px", minWidth: "350px" }}>
          <Typography sx={{ marginBottom: "15px" }}>Форма</Typography>
          <Box
            sx={{
@ -205,7 +211,7 @@ export default function SettingOpytionsPict({
              })
            }
          />
-          <Box sx={{ display: "flex" }}>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
            <CustomCheckbox
              sx={{ width: "100%" }}
              label={"Внутреннее название вопроса"}
--- a/src/pages/Questions/OwnTextField/settingTextField.tsx
+++ b/src/pages/Questions/OwnTextField/settingTextField.tsx
@ -9,6 +9,7 @@ import {
  useTheme,
 } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";

 import { questionStore, updateQuestionsList } from "@root/questions";

@ -37,7 +38,13 @@ export default function SettingTextField({
  const theme = useTheme();

  return (
-    <Box sx={{ display: "flex" }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginRight: "50px",
+      }}
+    >
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки ответов</Typography>
        <FormControl>
@ -71,11 +78,54 @@ export default function SettingTextField({
          </RadioGroup>
        </FormControl>
      </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
        <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Автозаполнение адреса"} />
-        <CustomCheckbox label={"Необязательный вопрос"} />
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        <CustomCheckbox
+          label={"Автозаполнение адреса"}
+          checked={listQuestions[quizId][totalIndex].content.autofill}
+          handleChange={({ target }) => {
+            const clonContent = listQuestions[quizId][totalIndex].content;
+            clonContent.autofill = target.checked;
+            updateQuestionsList(quizId, totalIndex, { content: clonContent });
+          }}
+        />
+        <CustomCheckbox
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <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/PageOptions/SettingPageOptions.tsx
+++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx
@ -1,15 +1,54 @@
+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 { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";

-export default function SettingPageOptions() {
+type SettingPageOptionsProps = {
+  totalIndex: number;
+};
+
+export default function SettingPageOptions({
+  totalIndex,
+}: SettingPageOptionsProps) {
+  const quizId = Number(useParams().quizId);
+  const { listQuestions } = questionStore();
+
  return (
    <Box sx={{ display: "flex", flexDirection: "column", padding: "20px" }}>
      <Typography>Настройки вопроса</Typography>
      <Box sx={{ display: "flex", alignItems: "center" }}>
-        <CustomCheckbox label={"Внутреннее название вопроса"} />
+        <CustomCheckbox
+          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>
  );
 }
--- a/src/pages/Questions/PageOptions/switchPageOptions.tsx
+++ b/src/pages/Questions/PageOptions/switchPageOptions.tsx
@ -13,13 +13,13 @@ export default function SwitchPageOptions({
 }: Props) {
  switch (switchState) {
    case "setting":
-      return <SettingPageOptions />;
+      return <SettingPageOptions totalIndex={totalIndex} />;
      break;
    case "help":
      return <HelpQuestions totalIndex={totalIndex} />;
      break;
    case "branching":
-      return <BranchingQuestions totalIndex={totalIndex}/>;
+      return <BranchingQuestions totalIndex={totalIndex} />;
      break;
    default:
      return <></>;
--- a/src/pages/Questions/RatingOptions/settingRating.tsx
+++ b/src/pages/Questions/RatingOptions/settingRating.tsx
@ -2,6 +2,7 @@ import { useParams } from "react-router-dom";
 import { Box, ButtonBase, Slider, Typography, useTheme } from "@mui/material";

 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 import { questionStore, updateQuestionsList } from "@root/questions";

 import InfoIcon from "../../../assets/icons/InfoIcon";
@ -109,8 +110,43 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
      </Box>
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        <CustomCheckbox
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <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/SliderOptions/settingSlider.tsx
+++ b/src/pages/Questions/SliderOptions/settingSlider.tsx
@ -1,6 +1,7 @@
 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";
 import { questionStore, updateQuestionsList } from "@root/questions";

@ -28,8 +29,43 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
      </Box>
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        <CustomCheckbox
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <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/UploadFile/settingUpload.tsx
+++ b/src/pages/Questions/UploadFile/settingUpload.tsx
@ -1,6 +1,7 @@
 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 { questionStore, updateQuestionsList } from "@root/questions";

@ -26,8 +27,43 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
          updateQuestionsList(quizId, totalIndex, { content: clonContent });
        }}
      />
-      <CustomCheckbox label={"Необязательный вопрос"} />
-      <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+      <CustomCheckbox
+        label={"Необязательный вопрос"}
+        checked={!listQuestions[quizId][totalIndex].required}
+        handleChange={(e) => {
+          updateQuestionsList(quizId, totalIndex, {
+            required: !e.target.checked,
+          });
+        }}
+      />
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <CustomCheckbox
+          label={"Внутреннее название вопроса"}
+          checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+          handleChange={(e) => {
+            let clonContent = listQuestions[quizId][totalIndex].content;
+            clonContent.innerNameCheck = e.target.checked;
+
+            if (!e.target.checked) {
+              clonContent.innerName = "";
+            }
+
+            updateQuestionsList(quizId, totalIndex, { content: clonContent });
+          }}
+        />{" "}
+        <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>
  );
 }
--- a/src/pages/Questions/answerOptions/responseSettings.tsx
+++ b/src/pages/Questions/answerOptions/responseSettings.tsx
@ -14,7 +14,13 @@ export default function ResponseSettings({ totalIndex }: Props) {
  const { listQuestions } = questionStore();

  return (
-    <Box sx={{ display: "flex" }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginRight: "30px",
+      }}
+    >
      <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
        <Typography>Настройки ответов</Typography>
        <CustomCheckbox
@ -61,7 +67,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
            });
          }}
        />
-        <Box sx={{ display: "flex" }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
          <CustomCheckbox
            label={"Внутреннее название вопроса"}
            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}