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

fix: info icons tooltip

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-04 16:40:22 +03:00
parent e3e01a17f5
commit 3ac8720904
3 changed files with 229 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
@ -38,6 +44,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
sx={{ sx={{
position: "relative", position: "relative",
display: "flex", display: "flex",
gap: "20px",
width: "100%", width: "100%",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isMobile ? "column" : null, flexDirection: isMobile ? "column" : null,
@ -56,7 +63,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}} }}
> >
<Typography <Typography
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }} sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
}}
> >
Настройки ответов Настройки ответов
</Typography> </Typography>
@ -72,7 +84,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}) })
} }
/> />
<Box sx={{ display: isMobile ? "none" : "block", mt: isMobile ? "11px" : "6px" }}> <Box
sx={{
display: isMobile ? "none" : "block",
mt: isMobile ? "11px" : "6px",
}}
>
<Typography <Typography
sx={{ sx={{
height: isMobile ? "18px" : "auto", height: isMobile ? "18px" : "auto",
@ -104,7 +121,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}} }}
> >
<Typography <Typography
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }} sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
}}
> >
Настройки вопросов Настройки вопросов
</Typography> </Typography>
@ -117,7 +139,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}); });
}} }}
/> />
<Box sx={{ position: "relative", display: "flex", alignItems: "center" }}> <Box
sx={{ position: "relative", display: "flex", alignItems: "center" }}
>
<CustomCheckbox <CustomCheckbox
label={"Внутреннее название вопроса"} label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck} checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
@ -134,13 +158,14 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}); });
}} }}
/> />
<InfoIcon <Tooltip
sx={{ title="Будет отображаться как заголовок вопроса в приходящих заявках."
position: isMobile ? "absolute" : null, placement="top"
display: "block", >
right: isMobile ? "30px" : null, <Box>
}} <InfoIcon />
/> </Box>
</Tooltip>
</Box> </Box>
<Box <Box
sx={{ sx={{

7
src/pages/Questions/UploadFile/UploadFile.tsx
View File

@ -7,6 +7,7 @@ import {
Select, Select,
SelectChangeEvent, SelectChangeEvent,
Typography, Typography,
Tooltip,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
@ -166,7 +167,11 @@ export default function UploadFile({ totalIndex }: Props) {
> >
Пользователь может загрузить любой собственный файл Пользователь может загрузить любой собственный файл
</Typography> </Typography>
<InfoIcon /> <Tooltip title="Можно загрузить файл в желаемом формате." placement="top">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box> </Box>
</Box> </Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} /> <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />

303
src/pages/Questions/branchingQuestions.tsx
View File

@ -11,10 +11,15 @@ import {
Modal, Modal,
Radio, Radio,
RadioGroup, RadioGroup,
Tooltip,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { questionStore, resetSomeField, updateQuestionsList } from "@root/questions"; import {
questionStore,
resetSomeField,
updateQuestionsList,
} from "@root/questions";
import { Select } from "./Select"; import { Select } from "./Select";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
@ -29,15 +34,22 @@ type BranchingQuestionsProps = {
const ACTIONS = ["Показать", "Скрыть"]; const ACTIONS = ["Показать", "Скрыть"];
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"]; const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"]; const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"]; const CONDITIONS = [
"Все условия обязательны",
"Обязательно хотя бы одно условие",
];
export default function BranchingQuestions({ totalIndex }: BranchingQuestionsProps) { export default function BranchingQuestions({
totalIndex,
}: BranchingQuestionsProps) {
const theme = useTheme(); const theme = useTheme();
const [titleInputWidth, setTitleInputWidth] = useState<number>(0); const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { openedModalSettings, listQuestions } = questionStore(); const { openedModalSettings, listQuestions } = questionStore();
const titleRef = useRef<HTMLDivElement>(null); const titleRef = useRef<HTMLDivElement>(null);
const [title, setTitle] = useState<string>(listQuestions[quizId][totalIndex].title) const [title, setTitle] = useState<string>(
listQuestions[quizId][totalIndex].title
);
useEffect(() => { useEffect(() => {
setTitleInputWidth(titleRef.current?.offsetWidth || 0); setTitleInputWidth(titleRef.current?.offsetWidth || 0);
@ -74,9 +86,10 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
sx={{ sx={{
boxSizing: "border-box", boxSizing: "border-box",
background: "#F2F3F7", background: "#F2F3F7",
padding: "25px",
height: "70px", height: "70px",
padding: "0 25px",
display: "flex", display: "flex",
alignItems: "center",
}} }}
> >
<Box sx={{ color: "#9A9AAF" }}> <Box sx={{ color: "#9A9AAF" }}>
@ -113,7 +126,14 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
</Box> </Box>
<Typography component="span">)</Typography> <Typography component="span">)</Typography>
</Box> </Box>
<InfoIcon width={24} height={24} /> <Tooltip
title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -132,7 +152,9 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
> >
<Select <Select
items={ACTIONS} items={ACTIONS}
activeItemIndex={listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1} activeItemIndex={
listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1
}
sx={{ maxWidth: "140px" }} sx={{ maxWidth: "140px" }}
onChange={(action) => { onChange={(action) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
@ -142,126 +164,157 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
}); });
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography> <Typography sx={{ color: theme.palette.grey2.main }}>
если в ответе на вопрос
</Typography>
</Box> </Box>
{listQuestions[quizId][totalIndex].content.rule.reqs.map((request, index) => ( {listQuestions[quizId][totalIndex].content.rule.reqs.map(
<Box (request, index) => (
key={index}
sx={{
padding: "20px",
borderRadius: "8px",
height: "100%",
bgcolor: "#F2F3F7",
}}
>
<Box <Box
key={index}
sx={{ sx={{
display: "flex", padding: "20px",
justifyContent: "space-between", borderRadius: "8px",
alignItems: "center", height: "100%",
pb: "5px", bgcolor: "#F2F3F7",
}} }}
> >
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Условие 1</Typography> <Box
<IconButton sx={{
sx={{ borderRadius: "6px", padding: "2px" }} display: "flex",
onClick={() => { justifyContent: "space-between",
const clonContent = listQuestions[quizId][totalIndex].content; alignItems: "center",
pb: "5px",
clonContent.rule.reqs.splice(index, 1);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}} }}
> >
<DeleteIcon style={{ color: "#4D4D4D" }} /> <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
</IconButton> Условие 1
</Box> </Typography>
<Select <IconButton
empty sx={{ borderRadius: "6px", padding: "2px" }}
activeItemIndex={request.id ? Number(request.id) : -1} onClick={() => {
items={STIPULATIONS} const clonContent =
onChange={(stipulation) => { listQuestions[quizId][totalIndex].content;
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.rule.reqs[index] = {
id: String(STIPULATIONS.findIndex((item) => item.includes(stipulation))),
vars: request.vars,
};
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
sx={{ marginBottom: "15px" }}
/>
{request.id && (
<>
<Box
sx={{
display: "flex",
alignItems: "center",
pb: "10px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
(Укажите один или несколько вариантов)
</Typography>
</Box>
<Select
empty
activeItemIndex={-1}
items={ANSWERS}
onChange={(answer) => {
const clonContent = listQuestions[quizId][totalIndex].content;
const answerItemIndex = ANSWERS.findIndex((answerItem) => answerItem === answer);
if (!clonContent.rule.reqs[index].vars.includes(answerItemIndex)) {
listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.push(answerItemIndex);
}
clonContent.rule.reqs.splice(index, 1);
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
}); });
}} }}
sx={{
marginBottom: "10px",
".MuiSelect-select.MuiInputBase-input": {
color: "transparent",
},
}}
/>
<Box
sx={{
display: "flex",
gap: "10px",
}}
> >
{listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.map((item, varIndex) => ( <DeleteIcon style={{ color: "#4D4D4D" }} />
<Chip </IconButton>
key={varIndex} </Box>
label={ANSWERS[item]} <Select
variant="outlined" empty
onDelete={() => { activeItemIndex={request.id ? Number(request.id) : -1}
const clonContent = listQuestions[quizId][totalIndex].content; items={STIPULATIONS}
const removedItemIndex = clonContent.rule.reqs[index].vars.findIndex( onChange={(stipulation) => {
(varItem) => varItem === item const clonContent =
); listQuestions[quizId][totalIndex].content;
clonContent.rule.reqs[index].vars.splice(removedItemIndex, 1); clonContent.rule.reqs[index] = {
id: String(
STIPULATIONS.findIndex((item) =>
item.includes(stipulation)
)
),
vars: request.vars,
};
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
}); });
}} }}
/> sx={{ marginBottom: "15px" }}
))} />
</Box> {request.id && (
</> <>
)} <Box
</Box> sx={{
))} display: "flex",
alignItems: "center",
pb: "10px",
}}
>
<Typography
sx={{ color: "#4D4D4D", fontWeight: "500" }}
>
Дан ответ
</Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
(Укажите один или несколько вариантов)
</Typography>
</Box>
<Select
empty
activeItemIndex={-1}
items={ANSWERS}
onChange={(answer) => {
const clonContent =
listQuestions[quizId][totalIndex].content;
const answerItemIndex = ANSWERS.findIndex(
(answerItem) => answerItem === answer
);
if (
!clonContent.rule.reqs[index].vars.includes(
answerItemIndex
)
) {
listQuestions[quizId][totalIndex].content.rule.reqs[
index
].vars.push(answerItemIndex);
}
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
sx={{
marginBottom: "10px",
".MuiSelect-select.MuiInputBase-input": {
color: "transparent",
},
}}
/>
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
{listQuestions[quizId][totalIndex].content.rule.reqs[
index
].vars.map((item, varIndex) => (
<Chip
key={varIndex}
label={ANSWERS[item]}
variant="outlined"
onDelete={() => {
const clonContent =
listQuestions[quizId][totalIndex].content;
const removedItemIndex = clonContent.rule.reqs[
index
].vars.findIndex((varItem) => varItem === item);
clonContent.rule.reqs[index].vars.splice(
removedItemIndex,
1
);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
/>
))}
</Box>
</>
)}
</Box>
)
)}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -288,9 +341,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
<FormControl> <FormControl>
<RadioGroup <RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group" aria-labelledby="demo-controlled-radio-buttons-group"
value={listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0} value={
listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0
}
onChange={(_, value) => { onChange={(_, value) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent =
listQuestions[quizId][totalIndex].content;
clonContent.rule.or = Boolean(Number(value)); clonContent.rule.or = Boolean(Number(value));
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
@ -302,7 +358,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
key={index} key={index}
sx={{ color: theme.palette.grey2.main }} sx={{ color: theme.palette.grey2.main }}
value={index} value={index}
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />} control={
<Radio
checkedIcon={<RadioCheck />}
icon={<RadioIcon />}
/>
}
label={condition} label={condition}
/> />
))} ))}
@ -310,10 +371,18 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}> <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<Button variant="outlined" onClick={handleClose} sx={{ width: "100%", maxWidth: "130px" }}> <Button
variant="outlined"
onClick={handleClose}
sx={{ width: "100%", maxWidth: "130px" }}
>
Отмена Отмена
</Button> </Button>
<Button variant="contained" sx={{ width: "100%", maxWidth: "130px" }} onClick={handleClose}> <Button
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={handleClose}
>
Готово Готово
</Button> </Button>
</Box> </Box>