feat: own field store logic

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -1,19 +1,28 @@
+import { useState } from "react";
 import { Box, Typography, useTheme } from "@mui/material";
+
+import CustomTextField from "@ui_kit/CustomTextField";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchTextField from "./switchTextField";
-import React from "react";
+
-import CustomTextField from "@ui_kit/CustomTextField";
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
+import type { ChangeEvent } from "react";
+
 interface Props {
   totalIndex: number;
 }
 export default function OwnTextField({ totalIndex }: Props) {
+  const [switchState, setSwitchState] = useState("setting");
+  const { listQuestions } = questionStore();
   const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
+
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
+
   return (
     <>
       <Box
@@ -26,7 +35,15 @@ export default function OwnTextField({ totalIndex }: Props) {
           gap: "20px",
         }}
       >
-        <CustomTextField placeholder={"Пример ответа"} text={""} />
+        <CustomTextField
+          placeholder={"Пример ответа"}
+          text={listQuestions[totalIndex].content.placeholder}
+          onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
+            const clonContent = listQuestions[totalIndex].content;
+            clonContent.placeholder = target.value;
+            updateQuestionsList(totalIndex, { content: clonContent });
+          }}
+        />
         <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
           <Typography
             sx={{

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -1,38 +1,76 @@
-import {Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, useTheme} from "@mui/material";
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
-import * as React from "react";
 
+import type { QuestionType } from "@root/questions";
 
-export default function SettingEmoji() {
+type SettingTextFieldProps = {
-    const [value, setValue] = React.useState('1');
+  totalIndex: number;
-    const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
+};
-        setValue((event.target as HTMLInputElement).value);
+
-    };
+type Answer = {
-    const theme = useTheme()
+  name: string;
-    return (
+  value: QuestionType;
-        <Box sx={{display: 'flex'}}>
+};
-            <Box sx={{padding: '20px'}}>
+
-                <Typography>Настройки ответов</Typography>
+const ANSWER_TYPES: Answer[] = [
-                <FormControl>
+  { name: "Односточное", value: "single" },
-                    <RadioGroup
+  { name: "Многострочное", value: "multi" },
-                        aria-labelledby="demo-controlled-radio-buttons-group"
+  { name: "Только числа", value: "number" },
-                        name="controlled-radio-buttons-group"
+];
-                        value={value}
+
-                        onChange={handleChangeRadio}
+export default function SettingTextField({
-                    >
+  totalIndex,
-                        <FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio />} label="Односточное" />
+}: SettingTextFieldProps) {
-                        <FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio />} label="Многострочное" />
+  const { listQuestions } = questionStore();
-                        <FormControlLabel sx={{color: theme.palette.grey2.main}} value="3" control={<Radio />} label="Только числа" />
+  const theme = useTheme();
-                    </RadioGroup>
+
-                </FormControl>
+  return (
-            </Box>
+    <Box sx={{ display: "flex" }}>
-            <Box sx={{padding: '20px'}}>
+      <Box sx={{ padding: "20px" }}>
-                <Typography>Настройки вопросов</Typography>
+        <Typography>Настройки ответов</Typography>
-                <CustomCheckbox label={'Автозаполнение адреса'}/>
+        <FormControl>
-                <CustomCheckbox label={'Необязательный вопрос'}/>
+          <RadioGroup
-                <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
+            aria-labelledby="demo-controlled-radio-buttons-group"
-            </Box>
+            name="controlled-radio-buttons-group"
-        </Box>
+            value={ANSWER_TYPES.findIndex(
-    );
+              ({ value }) => value === listQuestions[totalIndex].content.type
-};
+            )}
+            onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
+              const clonContent = listQuestions[totalIndex].content;
+              clonContent.type = ANSWER_TYPES[Number(target.value)].value;
+              updateQuestionsList(totalIndex, { content: clonContent });
+            }}
+          >
+            {ANSWER_TYPES.map(({ name }, index) => (
+              <FormControlLabel
+                key={index}
+                sx={{ color: theme.palette.grey2.main }}
+                value={index}
+                control={<Radio />}
+                label={name}
+              />
+            ))}
+          </RadioGroup>
+        </FormControl>
+      </Box>
+      <Box sx={{ padding: "20px" }}>
+        <Typography>Настройки вопросов</Typography>
+        <CustomCheckbox label={"Автозаполнение адреса"} />
+        <CustomCheckbox label={"Необязательный вопрос"} />
+        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+      </Box>
+    </Box>
+  );
+}

src/pages/Questions/OwnTextField/switchTextField.tsx

@@ -14,7 +14,7 @@ export default function SwitchTextField({
 }: Props) {
   switch (switchState) {
     case "setting":
-      return <SettingTextField />;
+      return <SettingTextField totalIndex={totalIndex} />;
       break;
     case "help":
       return <HelpQuestions totalIndex={totalIndex} />;

src/stores/questions.ts

@@ -7,6 +7,8 @@ export type Variants = {
   hints: string;
 };
 
+export type QuestionType = "single" | "multi" | "number";
+
 type Hint = {
   text: string;
   video: string;
@@ -40,6 +42,8 @@ export interface Question {
     own: boolean;
     innerName: string;
     back: string;
+    placeholder: string;
+    type: QuestionType;
   };
   version: number;
   parent_ids: number[];
@@ -102,6 +106,8 @@ export const createQuestion = (id: number) => {
       own: false,
       innerName: "",
       back: "",
+      placeholder: "",
+      type: "single",
       variants: [
         {
           answer: "",