SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'number-errors' into delete-modal

Browse Source
This commit is contained in:
Nastya 2023-12-20 16:24:23 +03:00
commit 0940ff45cc
4 changed files with 114 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/pages/Questions/SliderOptions/SliderOptions.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import CustomNumberField from "@ui_kit/CustomNumberField";
@ -16,6 +16,38 @@ export default function SliderOptions({ question }: Props) {
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [switchState, setSwitchState] = useState("setting");
const [stepError, setStepError] = useState("");
const [startError, setStartError] = useState<boolean>(false);
const [minError, setMinError] = useState<boolean>(false);
const [maxError, setMaxError] = useState<boolean>(false);
useEffect(() => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]);
const start = Number(question.content.start);
if (start < min || start > max) {
setStartError(true);
}
if (start >= min && start <= max) {
setStartError(false);
}
}, [question.content.range, question.content.start]);
useEffect(() => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]);
const step = Number(question.content.step);
const range = max - min;
if (range % step) {
setStepError(
`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`
);
} else {
setStepError("");
}
}, [question]);
const SSHC = (data: string) => {
setSwitchState(data);
@ -44,42 +76,43 @@ export default function SliderOptions({ question }: Props) {
marginRight: isMobile ? "10px" : "0px",
}}
>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
<Typography
sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}
>
Выбор значения из диапазона
</Typography>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
<Box
sx={{
width: "100%",
display: "flex",
alignItems: "center",
gap: isMobile ? "9px" : "20px",
}}
>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"0"}
min={0}
max={99999999999}
value={question.content.range.split("—")[0]}
emptyError={minError}
onChange={({ target }) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
});
}}
onBlur={({ target }) => {
const start = question.content.start;
const min = Number(target.value);
const max = Number(question.content.range.split("—")[1]);
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${target.value}—${
question.content.range.split("—")[1]
}`;
});
if (min >= max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
});
}
if (start < min) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.start = min;
});
setMinError(true);
} else {
setMinError(false);
setMaxError(false);
}
}}
/>
@ -90,35 +123,30 @@ export default function SliderOptions({ question }: Props) {
min={0}
max={100000000000}
value={question.content.range.split("—")[1]}
emptyError={maxError}
onChange={({ target }) => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(target.value);
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
question.content.range = `${
question.content.range.split("—")[0]
}—${target.value}`;
});
if (max <= min) {
setMaxError(true);
} else {
setMaxError(false);
setMinError(false);
}
}}
onBlur={({ target }) => {
const start = question.content.start;
const step = question.content.step;
const min = Number(question.content.range.split("—")[0]);
const max = Number(target.value);
const range = max - min;
if (max <= min) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
});
}
if (start > max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.start = max;
});
}
if (step > max) {
updateQuestion(question.id, (question) => {
@ -126,12 +154,6 @@ export default function SliderOptions({ question }: Props) {
question.content.step = min;
});
if (range % step) {
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
}
}}
/>
@ -147,15 +169,21 @@ export default function SliderOptions({ question }: Props) {
}}
>
<Box sx={{ width: "100%" }}>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
<Typography
sx={{
fontWeight: "500",
fontSize: "18px",
color: "#4D4D4D",
mb: isMobile ? "10px" : "14px",
}}
>
Начальное значение
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"50"}
min={Number(question.content.range.split("—")[0])}
max={Number(question.content.range.split("—")[1])}
value={String(question.content.start)}
emptyError={startError}
onChange={({ target }) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
@ -178,8 +206,8 @@ export default function SliderOptions({ question }: Props) {
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
min={0}
max={100}
min={Number(question.content.range.split("—")[0])}
max={Number(question.content.range.split("—")[1])}
placeholder={"1"}
error={stepError}
value={String(question.content.step)}
@ -191,9 +219,7 @@ export default function SliderOptions({ question }: Props) {
});
}}
onBlur={({ target }) => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]);
const range = max - min;
const step = Number(target.value);
if (step > max) {
@ -203,18 +229,16 @@ export default function SliderOptions({ question }: Props) {
question.content.step = max;
});
}
if (range % step) {
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
}}
/>
</Box>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
question={question}
/>
<SwitchSlider switchState={switchState} question={question} />
</>
);

34
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -18,21 +18,29 @@ export const Number = ({ currentQuestion }: NumberProps) => {
const [maxRange, setMaxRange] = useState<string>("100000000000");
const theme = useTheme();
const { answers } = useQuizViewStore();
const updateMinRangeDebounced = useDebouncedCallback((value, crowded = false) => {
if (crowded) {
setMinRange(maxRange);
}
const updateMinRangeDebounced = useDebouncedCallback(
(value, crowded = false) => {
if (crowded) {
setMinRange(maxRange);
}
updateAnswer(currentQuestion.content.id, value);
}, 1000);
const updateMaxRangeDebounced = useDebouncedCallback((value, crowded = false) => {
if (crowded) {
setMaxRange(minRange);
}
updateAnswer(currentQuestion.content.id, value);
},
1000
);
const updateMaxRangeDebounced = useDebouncedCallback(
(value, crowded = false) => {
if (crowded) {
setMaxRange(minRange);
}
updateAnswer(currentQuestion.content.id, value);
}, 1000);
const answer = answers.find(({ questionId }) => questionId === currentQuestion.content.id)?.answer as string;
updateAnswer(currentQuestion.content.id, value);
},
1000
);
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
const min = window.Number(currentQuestion.content.range.split("—")[0]);
const max = window.Number(currentQuestion.content.range.split("—")[1]);

3
src/ui_kit/CustomNumberField.tsx
View File

@ -9,6 +9,7 @@ interface CustomNumberFieldProps {
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
error?: string;
emptyError?: boolean;
value: string;
sx?: SxProps<Theme>;
min?: number;
@ -20,6 +21,7 @@ export default function CustomNumberField({
value,
sx,
error,
emptyError,
onChange,
onKeyDown,
onBlur,
@ -57,6 +59,7 @@ export default function CustomNumberField({
placeholder={placeholder}
sx={sx}
error={error}
emptyError={emptyError}
onChange={onInputChange}
onKeyDown={onKeyDown}
onBlur={onInputBlur}

4
src/ui_kit/CustomTextField.tsx
View File

@ -7,6 +7,7 @@ interface CustomTextFieldProps {
placeholder: string;
value?: string;
error?: string;
emptyError?: boolean;
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@ -25,6 +26,7 @@ export default function CustomTextField({
text,
sx,
error,
emptyError,
InputProps,
maxLength = 200,
}: CustomTextFieldProps) {
@ -62,7 +64,7 @@ export default function CustomTextField({
value={inputValue}
placeholder={placeholder}
onChange={handleInputChange}
error={!!error}
error={!!error || emptyError}
label={error}
onFocus={handleInputFocus}
onBlur={handleInputBlur}