fix: drag & drop

2023-10-12 18:51:39 +03:00 · 2023-10-12 18:51:39 +03:00 · 79b6442377
commit 79b6442377
parent dd7f2621ac
8 changed files with 60 additions and 33 deletions
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -23,6 +23,7 @@ import {
  updateQuestionsList,
  removeQuestion,
 } from "@root/questions";
+import { quizStore } from "@root/quizes";
 import { DoubleTick } from "@icons/questionsPage/DoubleTick";
 import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
 import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
@ -36,23 +37,19 @@ interface Props {
  SSHC: (data: string) => void;
  totalIndex: number;
  sx?: SxProps;
-  disableSettings?: boolean;
-  disableBranching?: boolean;
-  disableMiniButtons?: boolean;
 }

 export default function ButtonsOptions({
  SSHC,
  switchState,
  totalIndex,
-  disableSettings = false,
-  disableBranching = false,
-  disableMiniButtons = false,
 }: Props) {
  const quizId = Number(useParams().quizId);
  const { openedModalSettings, listQuestions } = questionStore();
+  const { listQuizes } = quizStore();
  const [openedReallyChangingModal, setOpenedReallyChangingModal] =
    useState<boolean>(false);
+  const quize = listQuizes[quizId];
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;

  useEffect(() => {
@ -132,7 +129,7 @@ export default function ButtonsOptions({
        {buttonSetting.map(({ icon, title, value, myFunc }) => (
          <Box key={value}>
            {value === "branching" ? (
-              !disableBranching && (
+              quize.config.type === "quize" && (
                <Tooltip
                  arrow
                  placement="right"
@ -196,8 +193,7 @@ export default function ButtonsOptions({
              )
            ) : (
              <>
-                {(value !== "setting" ||
-                  (value === "setting" && !disableSettings)) && (
+                {value !== "setting" && quize.config.type === "quize" && (
                  <MiniButtonSetting
                    key={title}
                    onClick={() => {
@ -229,7 +225,7 @@ export default function ButtonsOptions({
            )}
          </Box>
        ))}
-        {!disableMiniButtons && (
+        {quize.config.type === "quize" && (
          <>
            <MiniButtonSetting
              onClick={() => setOpenedReallyChangingModal(true)}
--- a/src/pages/Questions/ButtonsOptionsAndPict.css
+++ b/src/pages/Questions/ButtonsOptionsAndPict.css
@ -1,10 +0,0 @@
-.MuiTooltip-popper > .MuiTooltip-tooltip {
-    background: #fff;
-    border-radius: 6px;
-    color: #9A9AAF;
-    box-shadow: 0px 8px 24px rgba(210, 208, 225, 0.4);
-}
-
-.MuiTooltip-popper > .MuiTooltip-tooltip .MuiTooltip-arrow::before {
-    background: #fff;
-}
--- a/src/pages/Questions/ButtonsOptionsAndPict.tsx
+++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx
@ -29,8 +29,6 @@ import { DoubleTick } from "@icons/questionsPage/DoubleTick";
 import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
 import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";

-import "./ButtonsOptionsAndPict.css";
-
 import type { QuizQuestionBase } from "../../model/questionTypes/shared";

 interface Props {
@ -151,6 +149,19 @@ export default function ButtonsOptionsAndPict({
        <Tooltip
          arrow
          placement="right"
+          componentsProps={{
+            tooltip: {
+              sx: {
+                background: "#fff",
+                borderRadius: "6px",
+                color: "#9A9AAF",
+                boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+                "& .MuiTooltip-arrow": {
+                  color: "#FFF",
+                },
+              },
+            },
+          }}
          title={
            <Box>
              <Typography
--- a/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
+++ b/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
@ -38,7 +38,7 @@ export default memo(
                  maxWidth: "800px",
                  display: "flex",
                  justifyContent: "center",
-                  marginBottom: "40px",
+                  marginTop: "30px",
                  gap: "5px",
                }}
              >
--- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
@ -14,6 +14,7 @@ import {
 } from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";

+import CustomTextField from "@ui_kit/CustomTextField";
 import { ChooseAnswerModal } from "./ChooseAnswerModal";
 import FormTypeQuestions from "../FormTypeQuestions";
 import SwitchQuestionsPage from "../../SwitchQuestionsPage";
@ -181,6 +182,10 @@ export default function QuestionsPageCard({
          backgroundColor: "white",
          border: "none",
          boxShadow: "none",
+          marginBottom: "20px",
+          borderRadius: "0",
+          borderTopLeftRadius: "12px",
+          borderTopRightRadius: "12px",
        }}
      >
        <Box
@ -188,9 +193,25 @@ export default function QuestionsPageCard({
            display: "flex",
            flexDirection: "column",
            padding: 0,
-            borderRadius: "12px",
          }}
        >
+          <CustomTextField
+            placeholder={`Заголовок ${totalIndex + 1} вопроса`}
+            text={question.title}
+            onChange={({ target }) => debounced(target.value)}
+            sx={{ margin: "20px", width: "auto" }}
+            InputProps={{
+              endAdornment: (
+                <>
+                  <InputAdornment {...draggableProps} position="start">
+                    <PointsIcon
+                      style={{ color: "#9A9AAF", fontSize: "30px" }}
+                    />
+                  </InputAdornment>
+                </>
+              ),
+            }}
+          />
          {question.type.length === 0 ? (
            <FormTypeQuestions totalIndex={totalIndex} />
          ) : (
--- a/src/pages/Questions/Form/FormQuestionsPage.tsx
+++ b/src/pages/Questions/Form/FormQuestionsPage.tsx
@ -70,7 +70,9 @@ export default function FormQuestionsPage() {
          boxShadow: "0px 10px 30px #e7e7e7",
          borderRadius: "12px",
          marginBottom: "40px",
-          border: "1px solid transparent",
+          borderTop: "1px solid transparent",
+          borderBottom: "1px solid transparent",
+          background: "#FFFFFF",
        }}
      >
        <FormDraggableList />
--- a/src/pages/Questions/Form/FormTypeQuestions.tsx
+++ b/src/pages/Questions/Form/FormTypeQuestions.tsx
@ -1,10 +1,12 @@
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { Box, Typography } from "@mui/material";
+import { useDebouncedCallback } from "use-debounce";
+import { Box } from "@mui/material";

 import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
 import CustomTextField from "@ui_kit/CustomTextField";
 import ButtonsOptions from "../ButtonsOptions";
+import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";

 import Answer from "../../../assets/icons/questionsPage/answer";
 import OptionsPict from "../../../assets/icons/questionsPage/options_pict";
@ -99,22 +101,25 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
 ];

 export default function FormTypeQuestions({ totalIndex }: Props) {
-  const [switchState, setSwitchState] = useState("setting");
+  const [switchState, setSwitchState] = useState("");
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
+  const debounced = useDebouncedCallback((title) => {
+    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
+  }, 1000);
+  console.log("listQuestions[quizId]", listQuestions[quizId]);

  return (
-    <Box sx={{ paddingTop: "20px" }}>
+    <Box>
      <Box
        sx={{
          display: "flex",
          flexWrap: "wrap",
          gap: "20px",
-          margin: "0 20px 20px",
+          margin: "20px",
        }}
      >
-        <CustomTextField placeholder="Заголовок 1 вопроса" text={""} />
        {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
          <QuestionsMiniButton
            key={title}
@ -137,10 +142,8 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
        switchState={switchState}
        SSHC={setSwitchState}
        totalIndex={totalIndex}
-        disableSettings
-        disableBranching
-        disableMiniButtons
      />
+      <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
    </Box>
  );
 }
--- a/src/ui_kit/CustomTextField.tsx
+++ b/src/ui_kit/CustomTextField.tsx
@ -7,6 +7,7 @@ import {
 } from "@mui/material";

 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
+import type { InputProps } from "@mui/material";

 interface CustomTextFieldProps {
  placeholder: string;
@ -17,6 +18,7 @@ interface CustomTextFieldProps {
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
  text?: string;
  sx?: SxProps<Theme>;
+  InputProps?: Partial<InputProps>;
 }

 export default function CustomTextField({
@ -28,6 +30,7 @@ export default function CustomTextField({
  onChange,
  onKeyDown,
  onBlur,
+  InputProps,
 }: CustomTextFieldProps) {
  const theme = useTheme();

@ -55,6 +58,7 @@ export default function CustomTextField({
          },
          ...sx,
        }}
+        InputProps={InputProps}
        inputProps={{
          sx: {
            borderRadius: "10px",