fix: OptionsAndPicture

2023-10-01 15:10:12 +03:00 · 2023-10-01 15:10:12 +03:00 · 9e0d281568
commit 9e0d281568
parent 5b3da138ba
9 changed files with 229 additions and 148 deletions
--- a/src/assets/icons/questionsPage/image.tsx
+++ b/src/assets/icons/questionsPage/image.tsx
@ -0,0 +1,53 @@
+import { Box, SxProps } from "@mui/material";
+import { FC } from "react";
+
+interface Iprops {
+  onClick?: () => void;
+  sx?: SxProps;
+}
+
+const Image: FC<Iprops> = ({ onClick, sx }) => {
+  return (
+    <Box
+      onClick={onClick}
+      sx={{
+        height: "38px",
+        width: "45px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        ...sx,
+      }}
+    >
+      <svg
+        width="27"
+        height="22"
+        viewBox="0 0 27 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24.9583 1H2.04167C1.46637 1 1 1.44772 1 2V20C1 20.5523 1.46637 21 2.04167 21H24.9583C25.5336 21 26 20.5523 26 20V2C26 1.44772 25.5336 1 24.9583 1Z"
+          stroke="#7E2AEA"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M1 15.9035L7.54948 9.31272C7.64641 9.21368 7.76194 9.13502 7.88936 9.08133C8.01677 9.02765 8.15353 9 8.29167 9C8.4298 9 8.56656 9.02765 8.69398 9.08133C8.82139 9.13502 8.93693 9.21368 9.03385 9.31272L14.8411 15.1567C14.9381 15.2557 15.0536 15.3343 15.181 15.388C15.3084 15.4417 15.4452 15.4694 15.5833 15.4694C15.7215 15.4694 15.8582 15.4417 15.9856 15.388C16.1131 15.3343 16.2286 15.2557 16.3255 15.1567L19.0078 12.4574C19.1047 12.3584 19.2203 12.2797 19.3477 12.2261C19.4751 12.1724 19.6119 12.1447 19.75 12.1447C19.8881 12.1447 20.0249 12.1724 20.1523 12.2261C20.2797 12.2797 20.3953 12.3584 20.4922 12.4574L26 18"
+          stroke="#7E2AEA"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M16.5 9C17.3284 9 18 8.32843 18 7.5C18 6.67157 17.3284 6 16.5 6C15.6716 6 15 6.67157 15 7.5C15 8.32843 15.6716 9 16.5 9Z"
+          fill="#7E2AEA"
+        />
+      </svg>
+    </Box>
+  );
+};
+
+export default Image;
--- a/src/assets/icons/questionsPage/plus.tsx
+++ b/src/assets/icons/questionsPage/plus.tsx
@ -13,8 +13,8 @@ export default function Plus() {
    >
      <svg
        width="20"
-        height="30"
-        viewBox="0 0 15 40"
+        height="40"
+        viewBox="0 0 20 40"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@ -70,7 +70,7 @@ export const AnswerItem = ({

  const addNewAnswer = () => {
    const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "" });
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });

    updateQuestionsList(quizId, totalIndex, {
      content: {
@ -177,7 +177,6 @@ export const AnswerItem = ({
                ),
              }}
              sx={{
-                padding: isTablet ? "10px 0px" : 0,
                "& .MuiInputBase-root": {
                  minHeight: "48px",
                  borderRadius: "10px",
--- a/src/pages/Questions/DropDown/DropDown.tsx
+++ b/src/pages/Questions/DropDown/DropDown.tsx
@ -27,7 +27,7 @@ export default function DropDown({ totalIndex }: Props) {

  const addNewAnswer = () => {
    const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "" });
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });

    updateQuestionsList(quizId, totalIndex, {
      content: {
--- a/src/pages/Questions/Emoji/Emoji.tsx
+++ b/src/pages/Questions/Emoji/Emoji.tsx
@ -18,8 +18,8 @@ import { EmojiIcons } from "@icons/EmojiIocns";

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

-import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
-import PlusImage from "../../../assets/icons/questionsPage/plus";
+import AddEmoji from "@icons/questionsPage/addEmoji";
+import PlusImage from "@icons/questionsPage/plus";

 interface Props {
  totalIndex: number;
@ -199,7 +199,7 @@ export default function Emoji({ totalIndex }: Props) {
            onClick={() => {
              const answerNew =
                listQuestions[quizId][totalIndex].content.variants.slice();
-              answerNew.push({ answer: "", hints: "", emoji: "" });
+              answerNew.push({ answer: "", hints: "", emoji: "", image: "" });

              updateQuestionsList(quizId, totalIndex, {
                content: {
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@ -197,7 +197,12 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
            sx={{ color: theme.palette.brightPurple.main }}
            onClick={() => {
              const clonContent = listQuestions[quizId][totalIndex].content;
-              clonContent.variants.push({ answer: "", hints: "", emoji: "" });
+              clonContent.variants.push({
+                answer: "",
+                hints: "",
+                emoji: "",
+                image: "",
+              });

              updateQuestionsList(quizId, totalIndex, { content: clonContent });
            }}
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@ -7,33 +7,29 @@ import {
  Button,
  useTheme,
  useMediaQuery,
-  InputAdornment,
-  IconButton,
-  TextareaAutosize,
-  Popover,
-  TextField,
 } from "@mui/material";

 import ButtonsOptions from "../ButtonsOptions";
+import { AnswerDraggableList } from "../AnswerDraggableList";
+import { CropModal } from "@ui_kit/Modal/CropModal";
+import { UploadImageModal } from "../UploadImage/UploadImageModal";
 import { questionStore, updateQuestionsList } from "@root/questions";

 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
+import Image from "../../../assets/icons/questionsPage/image";
 import SwitchAnswerOptionsPict from "./switchOptionsPict";
-
-import type { ChangeEvent } from "react";
-import PointsIcon from "@icons/questionsPage/PointsIcon";
-import MessageIcon from "@icons/messagIcon";
-import DeleteIcon from "@icons/questionsPage/deleteIcon";
-import { ImageAddIcons } from "@icons/ImageAddIcons";
+import PlusImage from "@icons/questionsPage/plus";

 interface Props {
  totalIndex: number;
 }

 export default function OptionsPicture({ totalIndex }: Props) {
+  const [open, setOpen] = useState(false);
+  const [opened, setOpened] = useState<boolean>(false);
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const quizId = Number(useParams().quizId);
  const [switchState, setSwitchState] = useState("setting");
@ -43,148 +39,176 @@ export default function OptionsPicture({ totalIndex }: Props) {
    setSwitchState(data);
  };

-  const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (target.files?.length) {
-      const clonContent = listQuestions[quizId][totalIndex].content;
-
-      clonContent.images.push(URL.createObjectURL(target.files[0]));
+  const uploadImage = (files: FileList | null) => {
+    if (files?.length) {
+      const [file] = Array.from(files);

+      const clonContent = { ...listQuestions[quizId][totalIndex].content };
+      clonContent.variants[currentIndex].image = URL.createObjectURL(file);
      updateQuestionsList(quizId, totalIndex, { content: clonContent });
+
+      setOpen(false);
+      setOpened(true);
    }
  };

+  const addNewAnswer = () => {
+    const answerNew =
+      listQuestions[quizId][totalIndex].content.variants.slice();
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
+
+    updateQuestionsList(quizId, totalIndex, {
+      content: {
+        ...listQuestions[quizId][totalIndex].content,
+        variants: answerNew,
+      },
+    });
+  };

  return (
    <>
      <Box sx={{ padding: "20px" }}>
-        <Box
-          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
-        >
-          <input type="file" hidden onChange={addImage} />
-          <Box sx={{ display: isTablet ? "none" : "block" }}>
-            <Button component="label" sx={{ padding: "0px" }}>
-              <AddImage />
-            </Button>
-            <Typography
-              sx={{
-                padding: "0 0 0 20px",
-                fontWeight: 400,
-                fontSize: "18px",
-                lineHeight: "21.33px",
-                color: theme.palette.grey2.main,
-              }}
-            >
-              Добавьте ответ
-            </Typography>
-          </Box>
-
-          <Box
-            sx={{
-              width: "100%",
-              border: "1px solid #9A9AAF",
-              borderRadius: "8px",
-              display: isTablet ? "block" : "none",
-            }}
-          >
-            <TextField
-              fullWidth
-              focused={false}
-              placeholder={"Добавьте ответ"}
-              multiline={listQuestions[quizId][totalIndex].content.largeCheck}
-              InputProps={{
-                startAdornment: (
-                  <>
-                    <InputAdornment position="start">
-                      <PointsIcon />
-                    </InputAdornment>
-                    {!isMobile && (
-                      <AddImage sx={{ h: "100%", margin: "0px 20px" }} />
-                    )}
-                  </>
-                ),
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton aria-describedby="my-popover-id">
-                      <MessageIcon />
-                    </IconButton>
-                    <Popover
-                      id="my-popover-id"
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                      open={false}
-                    >
-                      <TextareaAutosize
-                        style={{ margin: "10px" }}
-                        placeholder="Подсказка для этого ответа"
-                      />
-                    </Popover>
-                    <IconButton>
-                      <DeleteIcon color={theme.palette.grey2.main} />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                "& .MuiInputBase-root": {
-                  padding: "13.5px",
-                  borderRadius: "10px",
-                  background: "#ffffff",
-                },
-                "& .MuiOutlinedInput-notchedOutline": {
-                  border: "none",
-                },
-              }}
-              inputProps={{
-                sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
-              }}
-            />
-
-            {isMobile && (
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  m: "8px",
-                  position: "relative",
-                }}
-              >
+        <AnswerDraggableList
+          variants={listQuestions[quizId][totalIndex].content.variants}
+          totalIndex={totalIndex}
+          additionalContent={(variant, index) => (
+            <>
+              {!isMobile && (
                <Box
-                  sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                />
-                <ImageAddIcons
-                  style={{
-                    position: "absolute",
-                    color: "#7E2AEA",
-                    fontSize: "20px",
-                    left: "45%",
-                    right: "55%",
-                  }}
-                />
-                <Box
-                  sx={{
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    width: "20px",
-                    background: "#EEE4FC",
-                    height: "40px",
-                    color: "white",
-                    backgroundColor: "#7E2AEA",
+                  sx={{ cursor: "pointer" }}
+                  onClick={() => {
+                    setCurrentIndex(index);
+                    setOpen(true);
                  }}
                >
-                  +
+                  {variant.image ? (
+                    <Box
+                      sx={{
+                        overflow: "hidden",
+                        width: "60px",
+                        display: "flex",
+                        alignItems: "center",
+                        background: "#EEE4FC",
+                        borderRadius: "3px",
+                        margin: "0 10px",
+                        height: "40px",
+                      }}
+                    >
+                      <Box sx={{ display: "flex", width: "40px" }}>
+                        <img
+                          src={variant.image}
+                          alt=""
+                          style={{ width: "100%" }}
+                        />
+                      </Box>
+                      <PlusImage />
+                    </Box>
+                  ) : (
+                    <Button component="label" sx={{ padding: "0px" }}>
+                      <AddImage
+                        sx={{ height: "40px", width: "60px", margin: "0 10px" }}
+                      />
+                    </Button>
+                  )}
                </Box>
-              </Box>
-            )}
-          </Box>
-        </Box>
+              )}
+            </>
+          )}
+          additionalMobile={(variant, index) => (
+            <>
+              {isMobile && (
+                <Box
+                  onClick={() => {
+                    setCurrentIndex(index);
+                    setOpen(true);
+                  }}
+                  sx={{
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    m: "8px",
+                    position: "relative",
+                    borderRadius: "3px",
+                  }}
+                >
+                  <Box
+                    sx={{
+                      width: "100%",
+                      background: "#EEE4FC",
+                      height: "40px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {variant.image ? (
+                      <Box
+                        sx={{
+                          overflow: "hidden",
+                          width: "40px",
+                          display: "flex",
+                          alignItems: "center",
+                          background: "#EEE4FC",
+                          height: "30px",
+                          borderRadius: "3px",
+                        }}
+                      >
+                        <img
+                          src={variant.image}
+                          alt=""
+                          style={{ width: "100%" }}
+                        />
+                      </Box>
+                    ) : (
+                      <Button component="label" sx={{ padding: "0px" }}>
+                        <Image
+                          sx={{
+                            height: "40px",
+                            width: "60px",
+                            margin: "0 10px",
+                          }}
+                        />
+                      </Button>
+                    )}
+                  </Box>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      width: "20px",
+                      background: "#EEE4FC",
+                      height: "40px",
+                      color: "white",
+                      backgroundColor: "#7E2AEA",
+                    }}
+                  >
+                    +
+                  </Box>
+                </Box>
+              )}
+            </>
+          )}
+        />
+        <UploadImageModal
+          open={open}
+          onClose={() => setOpen(false)}
+          imgHC={uploadImage}
+        />
+        <CropModal
+          opened={opened}
+          onClose={() => setOpened(false)}
+          picture={
+            listQuestions[quizId][totalIndex].content.variants[currentIndex]
+              .image
+          }
+        />
        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
          <Link
            component="button"
            variant="body2"
            sx={{ color: theme.palette.brightPurple.main }}
-            // onClick={() => {
-            //     console.info("I'm a button.");
-            // }}
+            onClick={addNewAnswer}
          >
            Добавьте ответ
          </Link>
--- a/src/pages/Questions/answerOptions/AnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx
@ -25,7 +25,7 @@ export default function AnswerOptions({ totalIndex }: Props) {

  const addNewAnswer = () => {
    const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "" });
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });

    updateQuestionsList(quizId, totalIndex, {
      content: {
--- a/src/stores/questions.ts
+++ b/src/stores/questions.ts
@ -5,6 +5,7 @@ export type Variants = {
  answer: string;
  hints: string;
  emoji: string;
+  image: string;
 };

 type Hint = {
@ -36,7 +37,6 @@ export interface Question {
    variants: Variants[];
    hint: Hint;
    rule: Rule;
-    images: string[];
    largeCheck: boolean;
    large: string;
    multi: boolean;
@ -100,7 +100,6 @@ export const DEFAULT_QUESTION: Omit<Question, "id"> = {
    type: "all",
    autofill: true,
    default: "",
-    images: [],
    number: false,
    single: false,
    xy: "",
@ -125,6 +124,7 @@ export const DEFAULT_QUESTION: Omit<Question, "id"> = {
        answer: "",
        hints: "",
        emoji: "",
+        image: "",
      },
    ],
    hint: {