feat: OptionsPicture store logic

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -1,7 +1,10 @@
-import {Box, Button, Typography, useTheme} from "@mui/material";
+import { useEffect } from "react";
+import { Box, Button, Typography, useTheme } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
-import { useState } from "react";
 import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
 import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
 import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
@@ -14,18 +17,38 @@ interface Props {
   onClick: () => void;
 }
 
+type SettingOpytionsPictProps = {
+  totalIndex: number;
+};
+
+const PROPORTIONS = [
+  { value: "1:1", icon: ProportionsIcon11 },
+  { value: "2:1", icon: ProportionsIcon21 },
+  { value: "1:2", icon: ProportionsIcon12 },
+];
+
 export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
   const theme = useTheme();
   return (
     <Button
       onClick={onClick}
       variant="outlined"
-      startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
+      startIcon={
+        <Icon
+          color={
+            isActive
+              ? theme.palette.navbarbg.main
+              : theme.palette.brightPurple.main
+          }
+        />
+      }
       sx={{
         backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
         borderRadius: 0,
         border: "none",
-        color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+        color: isActive
+          ? theme.palette.brightPurple.main
+          : theme.palette.grey2.main,
         p: "7px",
         width: "auto",
         minWidth: 0,
@@ -35,19 +58,31 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
         },
         "&:hover": {
           border: "none",
-          borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+          borderColor: isActive
+            ? theme.palette.brightPurple.main
+            : theme.palette.grey2.main,
         },
       }}
     />
   );
 }
 
-type Proportions = "oneOne" | "twoOne" | "oneTwo";
-type AlignType = "left" | "right";
+export default function SettingOpytionsPict({
+  totalIndex,
+}: SettingOpytionsPictProps) {
+  const { listQuestions } = questionStore();
 
-export default function SettingOpytionsPict() {
-  const [proportions, setProportions] = useState<Proportions>("oneOne");
-  const [alignType, setAlignType] = useState<AlignType>("left");
+  useEffect(() => {
+    if (!listQuestions[totalIndex].content.xy) {
+      updateProportions("1:1");
+    }
+  }, []);
+
+  const updateProportions = (proportions: string) => {
+    const clonContent = listQuestions[totalIndex].content;
+    clonContent.xy = proportions;
+    updateQuestionsList(totalIndex, { content: clonContent });
+  };
 
   return (
     <>
@@ -61,25 +96,43 @@ export default function SettingOpytionsPict() {
               marginBottom: "20px",
             }}
           >
-            <SelectIconButton
-              onClick={() => setProportions("oneOne")}
-              isActive={proportions === "oneOne"}
-              Icon={ProportionsIcon11}
-            />
-            <SelectIconButton
-              onClick={() => setProportions("twoOne")}
-              isActive={proportions === "twoOne"}
-              Icon={ProportionsIcon21}
-            />
-            <SelectIconButton
-              onClick={() => setProportions("oneTwo")}
-              isActive={proportions === "oneTwo"}
-              Icon={ProportionsIcon12}
-            />
+            {PROPORTIONS.map(({ value, icon }, index) => (
+              <SelectIconButton
+                key={index}
+                onClick={() => updateProportions(value)}
+                isActive={listQuestions[totalIndex].content.xy === value}
+                Icon={icon}
+              />
+            ))}
           </Box>
-          <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
-          <CustomCheckbox label={"Можно несколько"} />
-          <CustomCheckbox label={"Большие картинки"} />
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки ответов
+          </Typography>
+
+          <CustomCheckbox
+            label={"Можно несколько"}
+            checked={listQuestions[totalIndex].content.multi}
+            handleChange={() =>
+              updateQuestionsList(totalIndex, {
+                content: {
+                  ...listQuestions[totalIndex].content,
+                  multi: !listQuestions[totalIndex].content.multi,
+                },
+              })
+            }
+          />
+          <CustomCheckbox
+            label={"Большие картинки"}
+            checked={listQuestions[totalIndex].content.large}
+            handleChange={() =>
+              updateQuestionsList(totalIndex, {
+                content: {
+                  ...listQuestions[totalIndex].content,
+                  large: !listQuestions[totalIndex].content.large,
+                },
+              })
+            }
+          />
           <CustomCheckbox label={'Вариант "свой ответ"'} />
         </Box>
         <Box sx={{ padding: "20px" }}>
@@ -91,14 +144,34 @@ export default function SettingOpytionsPict() {
               marginBottom: "20px",
             }}
           >
-            <SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
             <SelectIconButton
-              onClick={() => setAlignType("right")}
-              isActive={alignType === "right"}
+              onClick={() =>
+                updateQuestionsList(totalIndex, {
+                  content: {
+                    ...listQuestions[totalIndex].content,
+                    format: "carousel",
+                  },
+                })
+              }
+              isActive={listQuestions[totalIndex].content.format === "carousel"}
+              Icon={FormatIcon2}
+            />
+            <SelectIconButton
+              onClick={() =>
+                updateQuestionsList(totalIndex, {
+                  content: {
+                    ...listQuestions[totalIndex].content,
+                    format: "masonry",
+                  },
+                })
+              }
+              isActive={listQuestions[totalIndex].content.format === "masonry"}
               Icon={FormatIcon1}
             />
           </Box>
-          <Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки вопросов
+          </Typography>
           <CustomCheckbox label={"Необязательный вопрос"} />
           <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
         </Box>

src/pages/Questions/OptionsPicture/switchOptionsPict.tsx

@@ -14,13 +14,13 @@ export default function SwitchAnswerOptionsPict({
 }: Props) {
   switch (switchState) {
     case "setting":
-      return <SettingOpytionsPict />;
+      return <SettingOpytionsPict totalIndex={totalIndex} />;
       break;
     case "help":
       return <HelpQuestions totalIndex={totalIndex} />;
       break;
     case "branching":
-      return <BranchingQuestions totalIndex={totalIndex}/>;
+      return <BranchingQuestions totalIndex={totalIndex} />;
       break;
     default:
       return <></>;

src/stores/questions.ts

@@ -47,6 +47,8 @@ export interface Question {
     default: string;
     single: boolean;
     number: boolean;
+    xy: string;
+    format: "carousel" | "masonry";
   };
   version: number;
   parent_ids: number[];
@@ -116,6 +118,8 @@ export const createQuestion = (id: number) => {
       images: [],
       number: false,
       single: false,
+      xy: "",
+      format: "carousel",
       variants: [
         {
           answer: "",