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

fix: ButtonsOptions

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-13 12:09:28 +03:00
parent 79b6442377
commit 76186f6a7b
4 changed files with 179 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Questions/ButtonsOptions.tsx
View File

@ -193,7 +193,11 @@ export default function ButtonsOptions({
) )
) : ( ) : (
<> <>
{value !== "setting" && quize.config.type === "quize" && ( {(value !== "setting" ||
quize.config.type === "quize" ||
(value === "setting" &&
quize.config.type === "form" &&
question.type)) && (
<MiniButtonSetting <MiniButtonSetting
key={title} key={title}
onClick={() => { onClick={() => {

304
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -16,6 +16,7 @@ import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon"; import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { quizStore } from "@root/quizes";
import { import {
questionStore, questionStore,
copyQuestion, copyQuestion,
@ -44,12 +45,14 @@ export default function ButtonsOptionsAndPict({
}: Props) { }: Props) {
const [buttonHover, setButtonHover] = useState<string>(""); const [buttonHover, setButtonHover] = useState<string>("");
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuizes } = quizStore();
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const [openedReallyChangingModal, setOpenedReallyChangingModal] = const [openedReallyChangingModal, setOpenedReallyChangingModal] =
useState<boolean>(false); useState<boolean>(false);
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
const quize = listQuizes[quizId];
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
useEffect(() => { useEffect(() => {
@ -146,151 +149,160 @@ export default function ButtonsOptionsAndPict({
/> />
{isIconMobile ? null : "Подсказка"} {isIconMobile ? null : "Подсказка"}
</MiniButtonSetting> </MiniButtonSetting>
<Tooltip {quize.config.type === "quize" && (
arrow <>
placement="right" <Tooltip
componentsProps={{ arrow
tooltip: { placement="right"
sx: { componentsProps={{
background: "#fff", tooltip: {
borderRadius: "6px", sx: {
color: "#9A9AAF", background: "#fff",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", borderRadius: "6px",
"& .MuiTooltip-arrow": { color: "#9A9AAF",
color: "#FFF", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
"& .MuiTooltip-arrow": {
color: "#FFF",
},
},
}, },
}, }}
}, title={
}} <Box>
title={ <Typography
<Box> sx={{
<Typography color: "#4D4D4D",
sx={{ fontWeight: "bold",
color: "#4D4D4D", fontSize: "14px",
fontWeight: "bold", marginBottom: "10px",
fontSize: "14px", }}
marginBottom: "10px", >
}} Будет показан при условии
> </Typography>
Будет показан при условии <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
</Typography> Название
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}> </Typography>
Название <Typography
</Typography> sx={{
<Typography fontWeight: "bold",
sx={{ fontSize: "12px",
fontWeight: "bold", marginBottom: "10px",
fontSize: "12px", }}
marginBottom: "10px", >
}} Условие 1, Условие 2
> </Typography>
Условие 1, Условие 2 <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
</Typography> Все условия обязательны
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}> </Typography>
Все условия обязательны </Box>
</Typography>
</Box>
}
>
<MiniButtonSetting
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
SSHC("branching");
openedModal();
}}
sx={{
height: "30px",
maxWidth: "103px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor:
switchState === "branching"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
"&:hover": {
color:
switchState === "branching" ? theme.palette.grey3.main : null,
},
}}
>
<Branching
color={
buttonHover === "branching"
? theme.palette.grey3.main
: switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main
} }
/> >
{isIconMobile ? null : "Ветвление"} <MiniButtonSetting
</MiniButtonSetting> onMouseEnter={() => setButtonHover("branching")}
</Tooltip> onMouseLeave={() => setButtonHover("")}
<MiniButtonSetting onClick={() => {
onMouseEnter={() => setButtonHover("image")} SSHC("branching");
onMouseLeave={() => setButtonHover("")} openedModal();
onClick={() => { }}
SSHC("image"); sx={{
}} height: "30px",
sx={{ maxWidth: "103px",
height: "30px", minWidth: isIconMobile ? "30px" : "64px",
maxWidth: "123px", backgroundColor:
minWidth: isIconMobile ? "30px" : "64px", switchState === "branching"
backgroundColor: ? theme.palette.brightPurple.main
switchState === "image" : "transparent",
? theme.palette.brightPurple.main color:
: "transparent", switchState === "branching"
color: ? "#ffffff"
switchState === "image" ? "#ffffff" : theme.palette.grey3.main, : theme.palette.grey3.main,
"&:hover": { "&:hover": {
color: switchState === "image" ? theme.palette.grey3.main : null, color:
}, switchState === "branching"
}} ? theme.palette.grey3.main
> : null,
<ImgIcon },
color={ }}
buttonHover === "image" >
? theme.palette.grey3.main <Branching
: switchState === "image" color={
? "#ffffff" buttonHover === "branching"
: theme.palette.grey3.main ? theme.palette.grey3.main
} : switchState === "branching"
/> ? "#ffffff"
{isIconMobile ? null : "Изображение"} : theme.palette.grey3.main
</MiniButtonSetting> }
<MiniButtonSetting />
onClick={() => setOpenedReallyChangingModal(true)} {isIconMobile ? null : "Ветвление"}
sx={{ </MiniButtonSetting>
minWidth: "30px", </Tooltip>
height: "30px", <MiniButtonSetting
backgroundColor: "#FEDFD0", onMouseEnter={() => setButtonHover("image")}
}} onMouseLeave={() => setButtonHover("")}
> onClick={() => {
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} /> SSHC("image");
</MiniButtonSetting> }}
<MiniButtonSetting sx={{
onClick={() => setOpenedReallyChangingModal(true)} height: "30px",
sx={{ maxWidth: "123px",
minWidth: "30px", minWidth: isIconMobile ? "30px" : "64px",
height: "30px", backgroundColor:
backgroundColor: "#FEDFD0", switchState === "image"
}} ? theme.palette.brightPurple.main
> : "transparent",
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} /> color:
</MiniButtonSetting> switchState === "image"
<MiniButtonSetting ? "#ffffff"
onClick={() => setOpenedReallyChangingModal(true)} : theme.palette.grey3.main,
sx={{ "&:hover": {
minWidth: "30px", color:
height: "30px", switchState === "image" ? theme.palette.grey3.main : null,
backgroundColor: "#FEDFD0", },
}} }}
> >
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} /> <ImgIcon
</MiniButtonSetting> color={
buttonHover === "image"
? theme.palette.grey3.main
: switchState === "image"
? "#ffffff"
: theme.palette.grey3.main
}
/>
{isIconMobile ? null : "Изображение"}
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}
sx={{
minWidth: "30px",
height: "30px",
backgroundColor: "#FEDFD0",
}}
>
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}
sx={{
minWidth: "30px",
height: "30px",
backgroundColor: "#FEDFD0",
}}
>
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}
sx={{
minWidth: "30px",
height: "30px",
backgroundColor: "#FEDFD0",
}}
>
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
</>
)}
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -306,12 +318,6 @@ export default function ButtonsOptionsAndPict({
> >
<CopyIcon style={{ color: "#4D4D4D" }} /> <CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: " 0px 2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton <IconButton
sx={{ borderRadius: "6px", padding: "2px" }} sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => { onClick={() => {

19
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -201,6 +201,25 @@ export default function QuestionsPageCard({
onChange={({ target }) => debounced(target.value)} onChange={({ target }) => debounced(target.value)}
sx={{ margin: "20px", width: "auto" }} sx={{ margin: "20px", width: "auto" }}
InputProps={{ InputProps={{
startAdornment: (
<Box>
<InputAdornment
ref={anchorRef}
position="start"
sx={{ cursor: "pointer" }}
onClick={() => setOpen((isOpened) => !isOpened)}
>
{IconAndrom(question.expanded, question.type)}
</InputAdornment>
<ChooseAnswerModal
open={open}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
totalIndex={totalIndex}
switchState={question.type}
/>
</Box>
),
endAdornment: ( endAdornment: (
<> <>
<InputAdornment {...draggableProps} position="start"> <InputAdornment {...draggableProps} position="start">

6
src/pages/Questions/Form/FormTypeQuestions.tsx
View File

@ -1,10 +1,8 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useDebouncedCallback } from "use-debounce";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton"; import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import CustomTextField from "@ui_kit/CustomTextField";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions"; import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
@ -105,10 +103,6 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
const debounced = useDebouncedCallback((title) => {
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
}, 1000);
console.log("listQuestions[quizId]", listQuestions[quizId]);
return ( return (
<Box> <Box>