feat: View Number component logic

src/pages/Questions/BranchingModal/Settings.tsx

@@ -6,7 +6,6 @@ import { useState, useRef, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useQuestionsStore } from "@root/questions/store";
 import { updateQuestion, getQuestionById } from "@root/questions/actions";
-import { AnyTypedQuizQuestion } from "../../../model/questionTypes/shared"
 import { SelectChangeEvent } from '@mui/material/Select';
 import CalendarIcon from "@icons/CalendarIcon";
 import { DatePicker } from "@mui/x-date-pickers";
@@ -15,6 +14,9 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import InfoIcon from "@icons/Info";
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 
+import type { AnyTypedQuizQuestion } from "../../../model/questionTypes/shared"
+import type { QuizQuestionNumber } from "../../../model/questionTypes/number"
+
 const CONDITIONS = [
     "Все условия обязательны",
     "Обязательно хотя бы одно условие",
@@ -514,47 +516,34 @@ const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParent
                     (Укажите один или несколько вариантов)
                 </Typography>
             </Box>
-            <TextField
+            <Box>
-                sx={{
-                    marginTop: "20px",
-                    width: "100%"
-                }}
-
-                placeholder="от"
-                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
-                onChange={(event: React.FormEvent<HTMLInputElement>) => {
-
-                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
-                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
-                    if (newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] === undefined) newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = 0
-                    setParentQuestion(newParentQuestion)
-
-                }}
-            />
-            {parentQuestion.content.chooseRange &&
                 <TextField
-                    placeholder="до"
+                    sx={{ marginTop: "20px", width: "100%" }}
-                    sx={{
+                    placeholder="от"
-                        marginTop: "20px",
+                    value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[0]}
-                        width: "100%"
+                    onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
-                    }}
+                        const newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
-
+                        const previousValue = newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0];
-                    value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
+                        newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] =(parentQuestion as QuizQuestionNumber).content.chooseRange ? previousValue ? `${target.value}—${previousValue.split("—")[1] || 0}` : `${target.value}—0` : target.value;
-                    onChange={(event: React.FormEvent<HTMLInputElement>) => {
-
-                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
-                        newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
-                        if (newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] === undefined) newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = 0
                         setParentQuestion(newParentQuestion)
-
                     }}
                 />
+                {(parentQuestion as QuizQuestionNumber).content.chooseRange &&
+                    <TextField
+                        placeholder="до"
+                        sx={{ marginTop: "20px", width: "100%" }}
+                        value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[1]}
+                        onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
+                            const newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
+                            const previousValue = newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0];
+                            newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = previousValue ? `${previousValue.split("—")[0] || 0}—${target.value}` : `0—${target.value}`
+                            setParentQuestion(newParentQuestion)
 
-            }
+                        }}
-
+                    />
-
-
 
+                }
+            </Box>
         </Box >
     )
 }

src/pages/Questions/ButtonsOptions.tsx

@@ -22,7 +22,7 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { enqueueSnackbar } from "notistack";
 import { useQuestionsStore } from "@root/questions/store";
-
+import { updateOpenedModalSettingsId } from "@root/questions/actions";
 
 interface Props {
     switchState: string;
@@ -175,8 +175,9 @@ export default function ButtonsOptions({
                                 <MiniButtonSetting
                                     key={title}
                                     onClick={() => {
-                                        SSHC(value);
+                                        openedModal()
-                                        myFunc(question);
+                                        // SSHC(value);
+                                        // myFunc(question);
                                     }}
                                     sx={{
                                         backgroundColor:

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -27,7 +27,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
       updateAnswer(
         currentQuestion.content.id,
         currentQuestion.content.chooseRange
-          ? `${currentQuestion.content.start},${max}`
+          ? `${currentQuestion.content.start}—${max}`
           : String(currentQuestion.content.start),
         false
       );
@@ -50,7 +50,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             placeholder="0"
             value={
               currentQuestion.content.chooseRange
-                ? answer?.split(",")[0]
+                ? answer?.split("—")[0]
                 : answer
             }
             onChange={({ target }) => {
@@ -81,18 +81,18 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               placeholder="0"
               value={
                 currentQuestion.content.chooseRange
-                  ? answer?.split(",")[0]
+                  ? answer?.split("—")[0]
                   : answer
               }
               onChange={({ target }) => {
                 updateAnswer(
                   currentQuestion.content.id,
                   window.Number(target.value) >
-                    window.Number(answer?.split(",")[1])
+                    window.Number(answer?.split("—")[1])
-                    ? `${answer?.split(",")[1]},${answer?.split(",")[1]}`
+                    ? `${answer?.split("—")[1]}—${answer?.split("—")[1]}`
                     : window.Number(target.value) < min
-                    ? `${min},${answer?.split(",")[1]}`
+                    ? `${min}—${answer?.split("—")[1]}`
-                    : `${target.value},${answer?.split(",")[1]}`
+                    : `${target.value}—${answer?.split("—")[1]}`
                 );
               }}
               sx={{
@@ -102,16 +102,16 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             />
             <CustomTextField
               placeholder="0"
-              value={answer?.split(",")[1]}
+              value={answer?.split("—")[1]}
               onChange={({ target }) => {
                 updateAnswer(
                   currentQuestion.content.id,
                   window.Number(target.value) > max
-                    ? `${answer?.split(",")[0]},${max}`
+                    ? `${answer?.split("—")[0]}—${max}`
                     : window.Number(target.value) <
-                      window.Number(answer?.split(",")[0])
+                      window.Number(answer?.split("—")[0])
-                    ? `${answer?.split(",")[0]},${answer?.split(",")[0]}`
+                    ? `${answer?.split("—")[0]}—${answer?.split("—")[0]}`
-                    : `${answer?.split(",")[0]},${target.value}`
+                    : `${answer?.split("—")[0]}—${target.value}`
                 );
               }}
               sx={{
@@ -124,8 +124,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         <Slider
           value={
             currentQuestion.content.chooseRange
-              ? answer?.split(",").length || 0 > 1
+              ? answer?.split("—").length || 0 > 1
-                ? answer?.split(",").map((item) => window.Number(item))
+                ? answer?.split("—").map((item) => window.Number(item))
                 : [min, min + 1]
               : window.Number(answer || 1)
           }
@@ -138,7 +138,10 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             marginTop: "25px",
           }}
           onChange={(_, value) => {
-            updateAnswer(currentQuestion.content.id, String(value));
+            updateAnswer(
+              currentQuestion.content.id,
+              String(value).replace(",", "—")
+            );
           }}
         />
       </Box>

src/stores/questions/actions.ts

@@ -288,7 +288,7 @@ export const createTypedQuestion = async (
             title: question.title,
             description: question.description,
             page: 0,
-            required: true,
+            required: false,
             content: JSON.stringify(defaultQuestionByType[type].content),
         });