Merge branch 'delete-modal' of penahub.gitlab.yandexcloud.net:frontend/squiz into delete-modal
This commit is contained in:
IlyaDoronin
commit
2826a7b6f2
@ -11,8 +11,23 @@ import OptionsPict from "@icons/questionsPage/options_pict";
|
||||
import Page from "@icons/questionsPage/page";
|
||||
import RatingIcon from "@icons/questionsPage/rating";
|
||||
import Slider from "@icons/questionsPage/slider";
|
||||
import { Box, FormControlLabel, IconButton, InputAdornment, Paper, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
|
||||
import {
|
||||
Box, Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
Paper, TextField,
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import {
|
||||
copyQuestion,
|
||||
deleteQuestion, deleteQuestionWithTimeout,
|
||||
toggleExpandQuestion,
|
||||
updateQuestion,
|
||||
updateUntypedQuestion
|
||||
} from "@root/questions/actions";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import { useRef, useState } from "react";
|
||||
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
|
||||
@ -51,6 +66,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
});
|
||||
}, 200);
|
||||
|
||||
console.log(question)
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
@ -58,8 +74,8 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
overflow: "hidden",
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
backgroundColor: "white",
|
||||
border: "none",
|
||||
backgroundColor: question.expanded ? "white" : "#EEE4FC",
|
||||
border: question.expanded ? "none" : "1px solid #9A9AAF",
|
||||
boxShadow: "none",
|
||||
paddingBottom: "20px",
|
||||
borderRadius: "0",
|
||||
@ -83,18 +99,46 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
flexDirection: isMobile ? "column-reverse" : null,
|
||||
}}
|
||||
>
|
||||
<CustomTextField
|
||||
<FormControl
|
||||
variant="standard"
|
||||
sx={{
|
||||
p: 0,
|
||||
maxWidth: isTablet ? "549px" : "640px",
|
||||
width: "100%",
|
||||
marginRight: isMobile ? "0px" : "16.1px",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
|
||||
text={question.title}
|
||||
onChange={({ target }) => setTitle(target.value)}
|
||||
sx={{ width: "100%" }}
|
||||
value={question.title}
|
||||
onChange={({target}) => setTitle(target.value)}
|
||||
sx={{
|
||||
width: "100%",
|
||||
margin: isMobile ? "10px 0" : 0,
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#000000",
|
||||
backgroundColor: question.expanded
|
||||
? theme.palette.background.default
|
||||
: "transparent",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
".MuiOutlinedInput-notchedOutline": {
|
||||
borderWidth: "1px !important",
|
||||
border: !question.expanded ? "none" : null,
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder": {
|
||||
color: "#4D4D4D",
|
||||
opacity: 0.8,
|
||||
},
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<Box>
|
||||
<InputAdornment
|
||||
ref={anchorRef}
|
||||
position="start"
|
||||
sx={{ cursor: "pointer" }}
|
||||
sx={{cursor: "pointer"}}
|
||||
onClick={() => setOpen((isOpened) => !isOpened)}
|
||||
>
|
||||
{IconAndrom(question.type)}
|
||||
@ -110,6 +154,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -128,7 +173,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{ padding: "0", margin: "5px" }}
|
||||
sx={{padding: "0", margin: "5px"}}
|
||||
disableRipple
|
||||
data-cy="expand-question"
|
||||
onClick={() => toggleExpandQuestion(question.id)}
|
||||
@ -154,6 +199,70 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
)}
|
||||
</IconButton>
|
||||
|
||||
{question.expanded ? (
|
||||
<></>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: "30px",
|
||||
borderRight: "solid 1px #4D4D4D",
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
icon={
|
||||
<HideIcon
|
||||
style={{
|
||||
boxSizing: "border-box",
|
||||
color: "#7E2AEA",
|
||||
background: "#FFF",
|
||||
borderRadius: "6px",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
padding: "3px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
checkedIcon={<CrossedEyeIcon />}
|
||||
/>
|
||||
}
|
||||
label={""}
|
||||
sx={{
|
||||
color: theme.palette.grey2.main,
|
||||
ml: "-9px",
|
||||
mr: 0,
|
||||
userSelect: "none",
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{ padding: "0" }}
|
||||
onClick={() => copyQuestion(question.id, question.quizId)}
|
||||
>
|
||||
<CopyIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
borderRadius: "6px",
|
||||
padding: "0",
|
||||
margin: "0 5px 0 10px",
|
||||
}}
|
||||
onClick={() => {
|
||||
deleteQuestionWithTimeout(question.id, deleteQuestion(question.id));
|
||||
|
||||
}}
|
||||
>
|
||||
<DeleteIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
@ -181,15 +290,18 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
|
||||
}}
|
||||
{...draggableProps}
|
||||
>
|
||||
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
|
||||
<PointsIcon style={{color: "#4D4D4D", fontSize: "30px"}}/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{question.expanded && (
|
||||
<>
|
||||
{question.type === null ? (
|
||||
<FormTypeQuestions question={question} />
|
||||
<FormTypeQuestions question={question}/>
|
||||
) : (
|
||||
<SwitchQuestionsPage question={question} />
|
||||
<SwitchQuestionsPage question={question}/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
@ -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} />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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) => {
|
||||
const updateMinRangeDebounced = useDebouncedCallback(
|
||||
(value, crowded = false) => {
|
||||
if (crowded) {
|
||||
setMinRange(maxRange);
|
||||
}
|
||||
|
||||
updateAnswer(currentQuestion.content.id, value);
|
||||
}, 1000);
|
||||
const updateMaxRangeDebounced = useDebouncedCallback((value, crowded = false) => {
|
||||
},
|
||||
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;
|
||||
},
|
||||
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]);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user