feat: View Number component logic
This commit is contained in:
IlyaDoronin
parent
5d3f19d952
commit
caafb87ae0
@ -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
|
||||
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 &&
|
||||
<Box>
|
||||
<TextField
|
||||
placeholder="до"
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
width: "100%"
|
||||
}}
|
||||
|
||||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
|
||||
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
|
||||
sx={{ marginTop: "20px", width: "100%" }}
|
||||
placeholder="от"
|
||||
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[0]}
|
||||
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] =(parentQuestion as QuizQuestionNumber).content.chooseRange ? previousValue ? `${target.value}—${previousValue.split("—")[1] || 0}` : `${target.value}—0` : target.value;
|
||||
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 >
|
||||
)
|
||||
}
|
||||
|
||||
@ -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);
|
||||
myFunc(question);
|
||||
openedModal()
|
||||
// SSHC(value);
|
||||
// myFunc(question);
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor:
|
||||
|
||||
@ -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])
|
||||
? `${answer?.split(",")[1]},${answer?.split(",")[1]}`
|
||||
window.Number(answer?.split("—")[1])
|
||||
? `${answer?.split("—")[1]}—${answer?.split("—")[1]}`
|
||||
: window.Number(target.value) < min
|
||||
? `${min},${answer?.split(",")[1]}`
|
||||
: `${target.value},${answer?.split(",")[1]}`
|
||||
? `${min}—${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])
|
||||
? `${answer?.split(",")[0]},${answer?.split(",")[0]}`
|
||||
: `${answer?.split(",")[0]},${target.value}`
|
||||
window.Number(answer?.split("—")[0])
|
||||
? `${answer?.split("—")[0]}—${answer?.split("—")[0]}`
|
||||
: `${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(",").map((item) => window.Number(item))
|
||||
? answer?.split("—").length || 0 > 1
|
||||
? 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>
|
||||
|
||||
@ -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),
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user