feat: updates

2023-10-11 17:32:26 +03:00 · 2023-10-11 17:32:26 +03:00 · 76553d1610
commit 76553d1610
parent 1bb899dcd7
5 changed files with 147 additions and 296 deletions
--- a/src/assets/icons/questionsPage/addAnswer.tsx
+++ b/src/assets/icons/questionsPage/addAnswer.tsx
@ -0,0 +1,34 @@
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  color: string;
+  sx?: SxProps<Theme>;
+}
+export default function AddAnswer({ color, sx }: Props) {
+  return (
+    <Box
+      sx={{
+        height: "38px",
+        width: "45px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sx,
+      }}
+    >
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="32" height="32" rx="8" fill={color} />
+        <path
+          d="M15.518 20.612C15.398 20.612 15.296 20.576 15.212 20.504C15.14 20.42 15.104 20.318 15.104 20.198V16.454H11.414C11.294 16.454 11.192 16.418 11.108 16.346C11.036 16.262 11 16.16 11 16.04V15.464C11 15.344 11.036 15.248 11.108 15.176C11.192 15.092 11.294 15.05 11.414 15.05H15.104V11.414C15.104 11.294 15.14 11.198 15.212 11.126C15.296 11.042 15.398 11 15.518 11H16.148C16.268 11 16.364 11.042 16.436 11.126C16.52 11.198 16.562 11.294 16.562 11.414V15.05H20.27C20.39 15.05 20.486 15.092 20.558 15.176C20.642 15.248 20.684 15.344 20.684 15.464V16.04C20.684 16.16 20.642 16.262 20.558 16.346C20.486 16.418 20.39 16.454 20.27 16.454H16.562V20.198C16.562 20.318 16.52 20.42 16.436 20.504C16.364 20.576 16.268 20.612 16.148 20.612H15.518Z"
+          fill="#7E2AEA"
+        />
+      </svg>
+    </Box>
+  );
+}
--- a/src/assets/icons/questionsPage/answerGroup.tsx
+++ b/src/assets/icons/questionsPage/answerGroup.tsx
@ -0,0 +1,43 @@
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  color: string;
+  sx?: SxProps<Theme>;
+}
+export default function AnswerGroup({ color, sx }: Props) {
+  return (
+    <Box
+      sx={{
+        height: "38px",
+        width: "45px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sx,
+      }}
+    >
+      <svg viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M1 20V2C1 1.44772 1.44772 1 2 1H22C22.5523 1 23 1.44772 23 2V20C23 20.5523 22.5523 21 22 21H2C1.44772 21 1 20.5523 1 20Z"
+          stroke={color}
+          stroke-width="1.5"
+        />
+        <path
+          d="M3 6V4.5C3 3.94772 3.44772 3.5 4 3.5H10C10.5523 3.5 11 3.94772 11 4.5V6C11 6.55228 10.5523 7 10 7H4C3.44772 7 3 6.55228 3 6Z"
+          stroke={color}
+          stroke-width="1.5"
+        />
+        <path
+          d="M13 6V4.5C13 3.94772 13.4477 3.5 14 3.5H20C20.5523 3.5 21 3.94772 21 4.5V6C21 6.55228 20.5523 7 20 7H14C13.4477 7 13 6.55228 13 6Z"
+          stroke={color}
+          stroke-width="1.5"
+        />
+        <path
+          d="M3 12.5V11C3 10.4477 3.44772 10 4 10H20C20.5523 10 21 10.4477 21 11V12.5C21 13.0523 20.5523 13.5 20 13.5H4C3.44772 13.5 3 13.0523 3 12.5Z"
+          stroke={color}
+          stroke-width="1.5"
+        />
+      </svg>
+    </Box>
+  );
+}
--- 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 (
+        <AnswerGroup
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
+          sx={{ height: "22px", width: "20px" }}
+        />
+      );
  }
 };
 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",
        }}
      >
        <Box
          sx={{
            display: "flex",
-            alignItems: "center",
-            padding: isMobile ? "10px" : "20px 10px 20px 20px",
-            flexDirection: isMobile ? "column" : null,
+            flexDirection: "column",
+            padding: 0,
+            borderRadius: "12px",
          }}
        >
-          <FormControl
-            variant="standard"
-            sx={{
-              p: 0,
-              maxWidth: isTablet ? "549px" : "640px",
-              width: "100%",
-              marginRight: isMobile ? "0px" : "16.1px",
-            }}
-          >
-            <TextField
-              defaultValue={question.title}
-              placeholder={"Заголовок группы вопросов"}
-              onChange={({ target }) => debounced(target.value)}
-              InputProps={{
-                startAdornment: (
-                  <Box>
-                    <InputAdornment
-                      ref={anchorRef}
-                      position="start"
-                      sx={{ cursor: "pointer" }}
-                      onClick={() => setOpen((isOpened) => !isOpened)}
-                    >
-                      {IconAndrom(question.expanded, question.type)}
-                    </InputAdornment>
-                    <ChooseAnswerModal
-                      open={open}
-                      onClose={() => setOpen(false)}
-                      anchorRef={anchorRef}
-                      totalIndex={totalIndex}
-                      switchState={question.type}
-                    />
-                  </Box>
-                ),
-              }}
-              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",
-                },
-              }}
-            />
-          </FormControl>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              width: isMobile ? "100%" : "auto",
-              position: "relative",
-            }}
-          >
-            <IconButton
-              sx={{ padding: "0", margin: "5px" }}
-              disableRipple
-              onClick={() =>
-                updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
-                  expanded: !question.expanded,
-                })
-              }
-            >
-              {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(quizId, totalIndex)}
-                >
-                  <CopyIcon
-                    style={{ color: theme.palette.brightPurple.main }}
-                  />
-                </IconButton>
-                <IconButton
-                  sx={{
-                    cursor: "pointer",
-                    borderRadius: "6px",
-                    padding: "0",
-                    margin: "0 5px 0 10px",
-                  }}
-                  onClick={() => {
-                    const removedId = question.id;
-                    if (question.deleteTimeoutId) {
-                      clearTimeout(question.deleteTimeoutId);
-                    }
-
-                    removeQuestion(quizId, totalIndex);
-
-                    const newTimeoutId = window.setTimeout(() => {
-                      removeQuestionForce(quizId, removedId);
-                    }, 5000);
-
-                    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
-                      ...question,
-                      deleteTimeoutId: newTimeoutId,
-                    });
-                  }}
-                >
-                  <DeleteIcon
-                    style={{ color: theme.palette.brightPurple.main }}
-                  />
-                </IconButton>
-              </Box>
-            )}
-
-            <OneIcon
-              style={{
-                fontSize: "30px",
-                marginLeft: "3px",
-                color: !question.expanded ? "#FFF" : "",
-                fill: question.expanded
-                  ? "#EEE4FC"
-                  : theme.palette.brightPurple.main,
-              }}
-            />
-            <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>
+          {question.type.length === 0 ? (
+            <FormTypeQuestions totalIndex={totalIndex} />
+          ) : (
+            <SwitchQuestionsPage totalIndex={totalIndex} />
+          )}
        </Box>
-        {question.expanded && (
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              padding: 0,
-              borderRadius: "12px",
-            }}
-          >
-            {question.type.length === 0 ? (
-              <FormTypeQuestions totalIndex={totalIndex} />
-            ) : (
-              <SwitchQuestionsPage totalIndex={totalIndex} />
-            )}
-          </Box>
-        )}
      </Paper>
-      <Box
-        onMouseEnter={() => setPlusVisible(true)}
-        onMouseLeave={() => setPlusVisible(false)}
-        sx={{
-          maxWidth: "825px",
-          display: "flex",
-          alignItems: "center",
-          height: "40px",
-          cursor: "pointer",
-        }}
-      >
-        <Box
-          onClick={() => createQuestion(quizId, "", totalIndex + 1)}
-          sx={{
-            display: plusVisible && !isDragging ? "flex" : "none",
-            width: "100%",
-            alignItems: "center",
-            columnGap: "10px",
-          }}
-        >
-          <Box
-            sx={{
-              boxSizing: "border-box",
-              width: "100%",
-              height: "1px",
-              backgroundPosition: "bottom",
-              backgroundRepeat: "repeat-x",
-              backgroundSize: "20px 1px",
-              backgroundImage:
-                "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
-            }}
-          />
-          <PlusIcon />
-        </Box>
-      </Box>
    </>
  );
 }
--- 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() {
      <Box
        sx={{
          display: "flex",
-          justifyContent: "space-between",
+          justifyContent: "flex-end",
+          gap: "8px",
          maxWidth: "796px",
        }}
      >
-        <IconButton
-          onClick={() => {
-            createQuestion(quizId);
-          }}
+        <Button
+          variant="outlined"
+          sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
        >
-          <AddPlus />
-        </IconButton>
-        <Box sx={{ display: "flex", gap: "8px" }}>
-          <Button
-            variant="outlined"
-            sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
-          >
-            <ArrowLeft />
-          </Button>
-          <Button
-            variant="contained"
-            sx={{
-              height: "44px",
-              padding: "10px 20px",
-              borderRadius: "8px",
-              background: theme.palette.brightPurple.main,
-              fontSize: "18px",
-            }}
-            onClick={handleNext}
-          >
-            Следующий шаг
-          </Button>
-        </Box>
+          <ArrowLeft />
+        </Button>
+        <Button
+          variant="contained"
+          sx={{
+            height: "44px",
+            padding: "10px 20px",
+            borderRadius: "8px",
+            background: theme.palette.brightPurple.main,
+            fontSize: "18px",
+          }}
+          onClick={handleNext}
+        >
+          Следующий шаг
+        </Button>
      </Box>
    </>
  );
--- 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 (
-    <Box
-      sx={{
-        paddingTop: "8px",
-      }}
-    >
+    <Box sx={{ paddingTop: "20px" }}>
      <Box
        sx={{
          display: "flex",
@ -115,16 +115,17 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
          margin: "0 20px 20px",
        }}
      >
+        <CustomTextField placeholder="Заголовок 1 вопроса" text={""} />
        {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
          <QuestionsMiniButton
            key={title}
            onClick={() => {
-              const question = { ...listQuestions[quizId][totalIndex] };
+              const clonedQuestion = { ...question };

-              removeQuestionForce(quizId, question.id);
+              removeQuestionForce(quizId, clonedQuestion.id);
              createQuestion(quizId, value, totalIndex);
              updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
-                expanded: question.expanded,
+                expanded: clonedQuestion.expanded,
                type: value,
              });
            }}
@ -132,6 +133,27 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
            text={title}
          />
        ))}
+        <Box
+          sx={{
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: "15px",
+            padding: "4px",
+            width: "100%",
+            border: "1px solid transparent",
+            borderRadius: "8px",
+            "&:hover": {
+              border: "1px solid #9A9AAF",
+            },
+          }}
+          onClick={() => console.log("add")}
+        >
+          <AddAnswer color="#EEE4FC" />
+          <Typography sx={{ color: "#9A9AAF" }}>
+            Добавить еще один вопрос
+          </Typography>
+        </Box>
      </Box>
      <ButtonsOptions
        switchState={switchState}