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

Merge branch 'dev' into style-previw

Browse Source
This commit is contained in:
Nastya 2023-12-12 23:38:46 +03:00
commit a6bd21d228
29 changed files with 1128 additions and 1093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/Landing/HeaderLanding.tsx
View File

@ -1,72 +1,86 @@
import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import SectionStyled from './SectionStyled';
import React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import SectionStyled from "./SectionStyled";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import QuizLogo from "./images/icons/QuizLogo";
import { useMediaQuery, useTheme } from "@mui/material";
import { setIsContactFormOpen } from "../../stores/contactForm";
import { useUserStore } from "@root/user";
import { useNavigate } from "react-router-dom";
const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
const buttonMenu = ["Меню 1", "Меню 2", "Меню 3", "Меню 4", "Меню 5", "Меню 1", "Меню 2"];
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
const [select, setSelect] = React.useState(0)
return (
<SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
sxsect={{
minHeight: '80px',
borderBottom: '1px solid #E3E3E3',
position: "relative",
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
zIndex: 3
}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 0
}}>
<QuizLogo width={isMobile ? 100 : 150} />
{/*<Box*/}
{/* sx={{*/}
{/* maxWidth: '595px',*/}
{/* width: '100%',*/}
{/* display: 'flex',*/}
{/* justifyContent: 'space-between',*/}
{/* flexWrap: 'wrap',*/}
{/* marginRight: "138px",*/}
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const [select, setSelect] = React.useState(0);
const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
{/* }}*/}
{/*>*/}
{/* {buttonMenu.map( (element, index) => (*/}
{/* <NavMenuItem*/}
{/* text={element}*/}
{/* // component={Link}*/}
{/* // to={url}*/}
{/* key={index}*/}
{/* onClick={() => {*/}
{/* setSelect(index);*/}
{/* }}*/}
{/* isActive={select === index}*/}
{/* />*/}
{/* ))}*/}
{/*</Box>*/}
<Button variant="outlined"
onClick={() => setIsContactFormOpen(true)}
sx={{
color: 'black',
border: '1px solid black',
textTransform: 'none',
fontWeight: '400',
fontSize: '18px',
lineHeight: '24px',
borderRadius: '8px',
padding: '8px 17px',
}}
>Предрегистрация</Button>
</SectionStyled>
)
}
const onClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
return (
<SectionStyled
tag={"header"}
bg={"#F2F3F7"}
mwidth={"1160px"}
sxsect={{
minHeight: "80px",
borderBottom: "1px solid #E3E3E3",
position: "relative",
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
zIndex: 3,
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: 0,
}}
>
<QuizLogo width={isMobile ? 100 : 150} />
{/*<Box*/}
{/* sx={{*/}
{/* maxWidth: '595px',*/}
{/* width: '100%',*/}
{/* display: 'flex',*/}
{/* justifyContent: 'space-between',*/}
{/* flexWrap: 'wrap',*/}
{/* marginRight: "138px",*/}
{/* }}*/}
{/*>*/}
{/* {buttonMenu.map( (element, index) => (*/}
{/* <NavMenuItem*/}
{/* text={element}*/}
{/* // component={Link}*/}
{/* // to={url}*/}
{/* key={index}*/}
{/* onClick={() => {*/}
{/* setSelect(index);*/}
{/* }}*/}
{/* isActive={select === index}*/}
{/* />*/}
{/* ))}*/}
{/*</Box>*/}
<Button
variant="outlined"
onClick={onClick}
sx={{
color: "black",
border: "1px solid black",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
{userId ? "Войти" : " Регистрация / Войти"}
</Button>
</SectionStyled>
);
}

151
src/pages/Landing/Hero.tsx
View File

@ -1,75 +1,82 @@
import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import abstraction from '../../assets/Quiz-main.png'
import SectionStyled from './SectionStyled';
import { Link, redirect } from 'react-router-dom';
import {setIsContactFormOpen} from "@root/contactForm";
import React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import abstraction from "../../assets/Quiz-main.png";
import SectionStyled from "./SectionStyled";
import { Link, redirect, useNavigate } from "react-router-dom";
import { setIsContactFormOpen } from "@root/contactForm";
import { useUserStore } from "@root/user";
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return(
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{
height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
}}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '30px',
height: '100%',
justifyContent: 'space-between',
alignItems: "flex-start",
position: 'relative',
}}
>
<Typography variant='h2'>
Pena Quiz
</Typography>
<Box
sx={{
maxWidth: isTablet ? '715px' : '420px',
minHeight: '64px',
}}>
<Typography variant='body1'>
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
</Typography>
</Box>
{/*<Link */}
{/* to="/list"*/}
{/* style={{textDecoration: "none"}}>*/}
<Button variant="contained"
onClick={() => setIsContactFormOpen(true)}
>
Попробуйте бесплатно
</Button>
{/*</Link>*/}
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
<Box
component={"img"}
src={abstraction}
sx={{
position: "absolute",
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
maxWidth: isMobile ? "403px" : "810px",
width: isMobile ? "100%" : undefined,
left: isMobile ? "-20px" : (isTablet? "54px" : "401px"),
top: isMobile ? "-345px" : undefined
}}
/>
</Box>
</SectionStyled>
)
}
const tryItForFreeonClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
return (
<SectionStyled
tag={"section"}
bg={"#f2f3f7"}
mwidth={"1160px"}
sxsect={{
height: isMobile ? "702px" : isTablet ? "986px" : "660px",
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: isMobile ? "300px 16px 0 16px" : isTablet ? "494px 40px 0 40px" : 0,
marginBottom: isMobile ? "55px" : isTablet ? 0 : "55px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "30px",
height: "100%",
justifyContent: "space-between",
alignItems: "flex-start",
position: "relative",
}}
>
<Typography variant="h2">Pena Quiz</Typography>
<Box
sx={{
maxWidth: isTablet ? "715px" : "420px",
minHeight: "64px",
}}
>
<Typography variant="body1">
Помогаем посетителю оставить заявку. <br style={{ display: isTablet ? "flex" : "none" }} /> Готовые шаблоны
квизов с легкой установкой на любой сайт и социальные сети
</Typography>
</Box>
{/*<Link */}
{/* to="/list"*/}
{/* style={{textDecoration: "none"}}>*/}
<Button variant="contained" onClick={tryItForFreeonClick}>
Попробуйте бесплатно
</Button>
{/*</Link>*/}
<Box
component={"img"}
src={abstraction}
sx={{
position: "absolute",
bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
maxWidth: isMobile ? "403px" : "810px",
width: isMobile ? "100%" : undefined,
left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
top: isMobile ? "-345px" : undefined,
}}
/>
</Box>
</SectionStyled>
);
}

70
src/pages/Questions/BranchingMap/CsComponent.tsx
View File

@ -216,6 +216,7 @@ function CsComponent({
}
}
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
const deleteNodes = [] as string[]
const deleteEdges: any = []
@ -331,6 +332,7 @@ function CsComponent({
}
useEffect(() => {
if (startCreate) {
addNode({ parentNodeContentId: startCreate });
@ -348,7 +350,6 @@ function CsComponent({
const readyLO = (e) => {
console.log('REAdy')
if (e.cy.data('firstNode') === 'nonroot') {
e.cy.data('firstNode', 'root')
e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
@ -433,7 +434,6 @@ function CsComponent({
task.task.forEach(n => {
const width = n.data('subtreeWidth')
console.log('ORORORORO', n.data(), yoffset, width, oldPos, task.parent.data('subtreeWidth'))
n.data('oldPos', { x: 250 * n.data('layer'), y: yoffset + width / 2 })
yoffset += width
queue.push({ task: n.cy().edges(`[source="${n.id()}"]`).targets(), parent: n })
@ -462,7 +462,6 @@ function CsComponent({
}
useEffect(() => {
console.log('KEKEKE')
document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
const cy = cyRef.current;
const eles = cy?.add(storeToNodes(questions.filter((question: AnyTypedQuizQuestion) => (question.type !== "result" && question.type !== null))))
@ -510,7 +509,6 @@ function CsComponent({
if (!container) {
return;
}
console.log('POP')
container.style.overflow = "hidden";
@ -540,7 +538,6 @@ function CsComponent({
const bb = n.boundingBox()
return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
})
console.log('POPE')
nodesInView
.toArray()
@ -553,7 +550,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPER', item.id())
const itemId = item.id();
const itemElement = layoutsContainer.current?.querySelector(
`.popper-layout[data-id='${itemId}']`
@ -583,7 +579,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPER+', item.id())
const itemId = item.id();
const itemElement = plusesContainer.current?.querySelector(
`.popper-plus[data-id='${itemId}']`
@ -612,7 +607,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPERx', item.id())
const itemId = item.id();
const itemElement = crossesContainer.current?.querySelector(
`.popper-cross[data-id='${itemId}']`
@ -636,18 +630,17 @@ function CsComponent({
return crossElement;
},
});
const gearsPopper = node.popper({
let gearsPopper = null
console.log('POPE', node.data())
if (node.data().root !== true) {
gearsPopper = node.popper({
popper: {
placement: "left",
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPERg', item.id())
console.log('PEPO', item.id())
const itemId = item.id();
if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
return;
}
const itemElement = gearsContainer.current?.querySelector(
`.popper-gear[data-id='${itemId}']`
@ -668,12 +661,11 @@ function CsComponent({
return gearElement;
},
});
}
const update = async () => {
console.log('POPPERi=u', item.id())
await plusesPopper.update();
await crossesPopper.update();
await gearsPopper.update();
await gearsPopper?.update();
await layoutsPopper.update();
};
@ -696,6 +688,18 @@ function CsComponent({
{ name: "offset", options: { offset: [0, -130 * zoom] } },
],
});
plusesPopper.setOptions({
modifiers: [
{ name: "flip", options: { boundary: node } },
{ name: "offset", options: { offset: [0, 0 * zoom] } },
],
});
gearsPopper?.setOptions({
modifiers: [
{ name: "flip", options: { boundary: node } },
{ name: "offset", options: { offset: [0, 0] } },
],
});
layoutsContainer.current
?.querySelectorAll("#popper-layouts > .popper-layout")
@ -725,7 +729,7 @@ function CsComponent({
element.style.borderRadius = `${6 * zoom}px`;
});
gearsContainer.current
gearsContainer?.current
?.querySelectorAll("#popper-gears > .popper-gear")
.forEach((item) => {
const element = item as HTMLDivElement;
@ -735,13 +739,13 @@ function CsComponent({
};
//node?.on("position", update);
let pressed = false
let pressed = false
let hide = false
cy?.on('mousedown',() => {pressed = true})
cy?.on('mouseup',() => {
cy?.on('mousedown', () => { pressed = true })
cy?.on('mouseup', () => {
pressed = false
hide = false
const gc = gearsContainer.current
if (gc) gc.style.display = 'block'
@ -751,23 +755,23 @@ let pressed = false
if (pc) pc.style.display = 'block'
if (xc) xc.style.display = 'block'
if (lc) lc.style.display = 'block'
update()
update()
})
cy?.on('mousemove',() => {
cy?.on('mousemove', () => {
if (pressed && !hide) {
hide = true
const gc = gearsContainer.current
if (gc) gc.style.display = 'none'
const pc = plusesContainer.current
const xc = crossesContainer.current
const lc = layoutsContainer.current
if (pc) pc.style.display = 'none'
if (xc) xc.style.display = 'none'
if (lc) lc.style.display = 'block'
const pc = plusesContainer.current
const xc = crossesContainer.current
const lc = layoutsContainer.current
if (pc) pc.style.display = 'none'
if (xc) xc.style.display = 'none'
if (lc) lc.style.display = 'block'
}
});
});
cy?.on("zoom render", onZoom);
});
};
@ -785,7 +789,7 @@ let pressed = false
variant="text"
onClick={() => {
//код сюда
cyRef.current?.fit()
}}
>

14
src/pages/Questions/BranchingMap/FirstNodeField.tsx
View File

@ -1,6 +1,6 @@
import { Box } from "@mui/material"
import { useEffect, useRef, useState } from "react";
import { updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
import { deleteQuestion, updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
import { updateRootContentId } from "@root/quizes/actions"
import { useCurrentQuiz } from "@root/quizes/hooks"
import { useQuestionsStore } from "@root/questions/store"
@ -11,8 +11,9 @@ interface Props {
modalQuestionTargetContentId: string;
}
export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
const quiz = useCurrentQuiz();
const { dragQuestionContentId } = useQuestionsStore()
const { dragQuestionContentId, questions } = useQuestionsStore()
const Container = useRef<HTMLDivElement | null>(null);
const modalOpen = () => setOpenedModalQuestions(true)
@ -22,6 +23,11 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
if (dragQuestionContentId) {
updateRootContentId(quiz?.id, dragQuestionContentId)
updateQuestion(dragQuestionContentId, (question) => question.content.rule.parentId = "root")
//если были результаты - удалить
questions.forEach((q) => {
if (q.type === 'result') deleteQuestion(q.id)
})
}
} else {
enqueueSnackbar("Нет информации о взятом опроснике")
@ -44,6 +50,10 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
if (modalQuestionTargetContentId) {
updateRootContentId(quiz?.id, modalQuestionTargetContentId)
updateQuestion(modalQuestionTargetContentId, (question) => question.content.rule.parentId = "root")
//если были результаты - удалить
questions.forEach((q) => {
if (q.type === 'result') deleteQuestion(q.id)
})
}
} else {
enqueueSnackbar("Нет информации о взятом опроснике")

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

@ -11,7 +11,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal, deleteQuestionWithTimeout } from "@root/questions/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../assets/icons/questionsPage/branching";
@ -40,10 +40,10 @@ export default function ButtonsOptions({
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
const quiz = useCurrentQuiz();
const { openBranchingPanel } = useQuestionsStore.getState()
const { openBranchingPanel, questions } = useQuestionsStore.getState();
const openedModal = () => {
updateOpenedModalSettingsId(question.id)
updateOpenedModalSettingsId(question.id);
};
@ -84,8 +84,8 @@ export default function ButtonsOptions({
title: "Ветвление",
value: "branching",
myFunc: (question) => {
updateOpenBranchingPanel(true)
updateDesireToOpenABranchingModal(question.content.id)
updateOpenBranchingPanel(true);
updateDesireToOpenABranchingModal(question.content.id);
}
},
];
@ -161,7 +161,7 @@ export default function ButtonsOptions({
<MiniButtonSetting
key={title}
onClick={() => {
openedModal()
openedModal();
// SSHC(value);
// myFunc(question);
}}
@ -269,76 +269,67 @@ export default function ButtonsOptions({
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => { // TODO
// const removedId = question.id;
// if (question.deleteTimeoutId) {
// clearTimeout(question.deleteTimeoutId);
// }
// removeQuestion(quizId, totalIndex);
// const newTimeoutId = window.setTimeout(() => {
// removeQuestionForce(quizId, removedId);
// }, 5000);
// updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
// ...question,
// deleteTimeoutId: newTimeoutId,
// });
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "")
clearRuleForAll()
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
deleteQuestion(question.id);
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[]
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
getChildren(targetQuestion) //и ищем его потомков
}
onClick={() => {
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
})
});
deleteQuestion(question.id);
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[];
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
getChildren(targetQuestion); //и ищем его потомков
}
}
});
};
getChildren(question);
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = "";
question.content.rule.main = [];
question.content.rule.default = "";
});
});
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
const newRule = {};
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId;
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule;
});
deleteQuestion(question.id);
}
getChildren(question)
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
})
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId)
const newRule = {}
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id) //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
deleteQuestion(question.id);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule
})
deleteQuestion(question.id)
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
deleteQuestion(question.id)
}
deleteQuestionWithTimeout(question.id, deleteFn);
}}
data-cy="delete-question"
>

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

@ -10,7 +10,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, deleteQuestion, updateQuestion, clearRuleForAll, getQuestionByContentId } from "@root/questions/actions";
import { copyQuestion, deleteQuestion, updateQuestion, clearRuleForAll, getQuestionByContentId, deleteQuestionWithTimeout } from "@root/questions/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import { useEffect, useState } from "react";
@ -47,7 +47,7 @@ export default function ButtonsOptionsAndPict({
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
const { questions } = useQuestionsStore.getState()
const { questions } = useQuestionsStore.getState();
const quiz = useCurrentQuiz();
useEffect(() => {
@ -191,8 +191,8 @@ export default function ButtonsOptionsAndPict({
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
updateOpenBranchingPanel(true)
updateDesireToOpenABranchingModal(question.content.id)
updateOpenBranchingPanel(true);
updateDesireToOpenABranchingModal(question.content.id);
}}
sx={{
height: "30px",
@ -307,76 +307,67 @@ export default function ButtonsOptionsAndPict({
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => { // TODO
// const removedId = question.id;
// if (question.deleteTimeoutId) {
// clearTimeout(question.deleteTimeoutId);
// }
// removeQuestion(quizId, totalIndex);
// const newTimeoutId = window.setTimeout(() => {
// removeQuestionForce(quizId, removedId);
// }, 5000);
// updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
// ...question,
// deleteTimeoutId: newTimeoutId,
// });
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "")
clearRuleForAll()
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
deleteQuestion(question.id);
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[]
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
getChildren(targetQuestion) //и ищем его потомков
}
onClick={() => {
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
})
});
deleteQuestion(question.id);
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[];
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
getChildren(targetQuestion); //и ищем его потомков
}
}
});
};
getChildren(question);
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = "";
question.content.rule.main = [];
question.content.rule.default = "";
});
});
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
const newRule = {};
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId;
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule;
});
deleteQuestion(question.id);
}
getChildren(question)
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
})
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId)
const newRule = {}
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id) //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
deleteQuestion(question.id);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule
})
deleteQuestion(question.id)
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
deleteQuestion(question.id)
}
deleteQuestionWithTimeout(question.id, deleteFn);
}}
data-cy="delete-question"
>

29
src/pages/Questions/DraggableList/DraggableListItem.tsx
View File

@ -3,8 +3,8 @@ import { Box, ListItem, Typography, useTheme } from "@mui/material";
import { memo, useEffect } from "react";
import { Draggable } from "react-beautiful-dnd";
import QuestionsPageCard from "./QuestionPageCard";
import { updateEditSomeQuestion } from "@root/questions/actions"
import { useQuestionsStore } from "@root/questions/store"
import { cancelQuestionDeletion, updateEditSomeQuestion } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
type Props = {
@ -15,21 +15,21 @@ type Props = {
function DraggableListItem({ question, isDragging, index }: Props) {
const theme = useTheme();
const { editSomeQuestion } = useQuestionsStore()
const { editSomeQuestion } = useQuestionsStore();
useEffect(() => {
if (editSomeQuestion !== null) {
const setI = setInterval(() => {
let comp = document.getElementById(editSomeQuestion)
if(comp !== null) {
clearInterval(setI)
comp.scrollIntoView({behavior: 'instant'})
updateEditSomeQuestion()
}
}, 200)
let comp = document.getElementById(editSomeQuestion);
if (comp !== null) {
clearInterval(setI);
comp.scrollIntoView({ behavior: 'instant' });
updateEditSomeQuestion();
}
}, 200);
}
}, [editSomeQuestion])
}, [editSomeQuestion]);
return (
<Draggable draggableId={question.id.toString()} index={index}>
@ -60,11 +60,8 @@ function DraggableListItem({ question, isDragging, index }: Props) {
Вопрос удалён.
</Typography>
<Typography
onClick={() => { // TODO
// updateQuestionsList<QuizQuestionBase>(quizId, index, {
// ...questionData,
// deleted: false,
// });
onClick={() => {
cancelQuestionDeletion(question.id);
}}
sx={{
cursor: "pointer",

128
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -29,7 +29,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, createUntypedQuestion, deleteQuestion, clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, getQuestionByContentId } from "@root/questions/actions";
import { copyQuestion, createUntypedQuestion, deleteQuestion, clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, getQuestionByContentId, deleteQuestionWithTimeout } from "@root/questions/actions";
import { updateRootContentId } from "@root/quizes/actions";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@ -51,7 +51,7 @@ interface Props {
}
export default function QuestionsPageCard({ question, draggableProps, isDragging, index }: Props) {
const { questions } = useQuestionsStore()
const { questions } = useQuestionsStore();
const [plusVisible, setPlusVisible] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false);
const theme = useTheme();
@ -241,79 +241,67 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
padding: "0",
margin: "0 5px 0 10px",
}}
onClick={() => { // TODO
const removedId = question.id;
// if (question.deleteTimeoutId) {
// clearTimeout(question.deleteTimeoutId);
// }
// removeQuestion(quizId, totalIndex);
// const newTimeoutId = window.setTimeout(() => {
// removeQuestionForce(quizId, removedId);
// }, 5000);
// updateQuestionsList<AnyTypedQuizQuestion>(quizId, totalIndex, {
// ...question,
// deleteTimeoutId: newTimeoutId,
// });
console.log(question.type)
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "")
clearRuleForAll()
deleteQuestion(question.id);
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[]
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
getChildren(targetQuestion) //и ищем его потомков
}
onClick={() => {
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
deleteQuestion(question.id);
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
})
});
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[];
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
getChildren(targetQuestion); //и ищем его потомков
}
}
});
};
getChildren(question);
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = "";
question.content.rule.main = [];
question.content.rule.default = "";
});
});
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
const newRule = {};
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId;
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule;
});
deleteQuestion(question.id);
}
getChildren(question)
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
})
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId)
const newRule = {}
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id) //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule
})
deleteQuestion(question.id)
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
deleteQuestion(question.id)
} else {
console.log("удаляю безтипогово")
deleteQuestion(question.id)
}
deleteQuestionWithTimeout(question.id, deleteFn);
}}
data-cy="delete-question"
>
@ -387,7 +375,7 @@ console.log(question.type)
}}
>
<Box
onClick={() => createUntypedQuestion(question.quizId)}
onClick={() => createUntypedQuestion(question.quizId, question.id)}
sx={{
display: plusVisible && !isDragging ? "flex" : "none",
width: "100%",

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

@ -18,74 +18,74 @@ import type {
type ButtonTypeQuestion = {
icon: JSX.Element;
title: string;
value: QuestionType;
icon: JSX.Element;
title: string;
value: QuestionType;
};
const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [
{
icon: <Answer color="#9A9AAF" />,
title: "Варианты ответов",
value: "variant",
},
{
icon: <Input color="#9A9AAF" />,
title: "Своё поле для ввода",
value: "text",
},
{
icon: <DropDown color="#9A9AAF" />,
title: "Выпадающий список",
value: "select",
},
{
icon: <Date color="#9A9AAF" />,
title: "Дата",
value: "date",
},
{
icon: <Slider color="#9A9AAF" />,
title: "Ползунок",
value: "number",
},
{
icon: <Download color="#9A9AAF" />,
title: "Загрузка файла",
value: "file",
},
{
icon: <Answer color="#9A9AAF" />,
title: "Варианты ответов",
value: "variant",
},
{
icon: <Input color="#9A9AAF" />,
title: "Своё поле для ввода",
value: "text",
},
{
icon: <DropDown color="#9A9AAF" />,
title: "Выпадающий список",
value: "select",
},
{
icon: <Date color="#9A9AAF" />,
title: "Дата",
value: "date",
},
{
icon: <Slider color="#9A9AAF" />,
title: "Ползунок",
value: "number",
},
{
icon: <Download color="#9A9AAF" />,
title: "Загрузка файла",
value: "file",
},
];
interface Props {
question: UntypedQuizQuestion;
question: UntypedQuizQuestion;
}
export default function FormTypeQuestions({ question }: Props) {
return (
<Box>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: "20px",
margin: "20px",
}}
>
{(true /* TODO только первый вопрос */
? BUTTON_TYPE_QUESTIONS
: BUTTON_TYPE_SHORT_QUESTIONS
).map(({ icon, title, value: questionType }) => (
<QuestionsMiniButton
key={title}
onClick={() => {
createTypedQuestion(question.id, questionType);
}}
icon={icon}
text={title}
/>
))}
</Box>
</Box>
);
return (
<Box>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: "20px",
margin: "20px",
}}
>
{(("page" in question) && question.page === 0
? BUTTON_TYPE_QUESTIONS
: BUTTON_TYPE_SHORT_QUESTIONS
).map(({ icon, title, value: questionType }) => (
<QuestionsMiniButton
key={title}
onClick={() => {
createTypedQuestion(question.id, questionType);
}}
icon={icon}
text={title}
/>
))}
</Box>
</Box>
);
}

2
src/pages/ResultPage/DescriptionForm/ImageAndVideoButtons.tsx
View File

@ -9,7 +9,7 @@ export default function ImageAndVideoButtons() {
return (
<Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
<AddImage onClick={undefined/* TODO () => openCropModal("", "") */} />
<AddImage onClick={undefined} />
<Typography
sx={{
fontWeight: 400,

1
src/pages/ResultPage/ResultSettings.tsx
View File

@ -33,7 +33,6 @@ export const ResultSettings = () => {
isReadyToLeave = false;
}
});
console.log(`setting isReadyToLeaveRef to ${isReadyToLeave}`);
isReadyToLeaveRef.current = isReadyToLeave;
}, [results])

78
src/pages/ViewPublicationPage/questions/Date.tsx
View File

@ -1,3 +1,4 @@
import dayjs from "dayjs";
import { DatePicker } from "@mui/x-date-pickers";
import { Box, Typography } from "@mui/material";
@ -14,10 +15,9 @@ type DateProps = {
export const Date = ({ currentQuestion }: DateProps) => {
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.content.id
) ?? {};
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
const [day, month, year] = answer?.split(".") || [];
return (
@ -32,50 +32,54 @@ export const Date = ({ currentQuestion }: DateProps) => {
}}
>
<DatePicker
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
selected={
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
value={dayjs(
answer
? new window.Date(`${month}.${day}.${year}`)
: new window.Date()
}
onChange={(date) =>
)}
onChange={(date) => {
if (!date) {
return;
}
updateAnswer(
currentQuestion.content.id,
String(
date?.toLocaleDateString("ru-RU", {
new window.Date(date.toDate()).toLocaleDateString("ru-RU", {
year: "numeric",
month: "2-digit",
day: "2-digit",
})
)
)
}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
borderRadius: "10px",
maxWidth: "250px",
pr: "22px",
"& input": {
py: "11px",
pl: "20px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
);
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
borderRadius: "10px",
maxWidth: "250px",
pr: "22px",
"& input": {
py: "11px",
pl: "20px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
</Box>
</Box>

115
src/pages/ViewPublicationPage/questions/File.tsx
View File

@ -14,13 +14,18 @@ type FileProps = {
export const File = ({ currentQuestion }: FileProps) => {
const { answers } = useQuizViewStore();
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
const theme = useTheme();
const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
const file = target.files?.[0];
if (file) {
updateAnswer(currentQuestion.content.id, `${file.name}|${URL.createObjectURL(file)}`);
updateAnswer(
currentQuestion.content.id,
`${file.name}|${URL.createObjectURL(file)}`
);
}
};
@ -36,75 +41,43 @@ export const File = ({ currentQuestion }: FileProps) => {
maxWidth: answer?.split("|")[0] ? "640px" : "550px"
}}
>
{answer?.split("|")[0] && (
<Box sx={{display: "flex", alignItems: "center", gap: "15px"}}>
<Typography>Вы загрузили:</Typography>
<Box sx={{padding: "5px 5px 5px 16px", backgroundColor: theme.palette.brightPurple.main,
borderRadius: "8px",
color: "#FFFFFF",
display: "flex",
alignItems: "center",
gap: "15px"
}}>
<Typography>
{answer?.split("|")[0]}
</Typography>
<IconButton
sx={{p: 0}}
onClick={() => {updateAnswer(currentQuestion.content.id, "");}}
>
<X/>
</IconButton>
</Box>
</Box>
)}
{!answer?.split("|")[0] && (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={uploadFile}
hidden
accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
multiple
type="file"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
sx={{
width: "100%",
height: "120px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "33px 44px 33px 55px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "8px",
}}
>
<UploadIcon />
<Box>
<Typography
sx={{
color: theme.palette.grey2.main,
fontWeight: 500
}}
>Добавить видео</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
lineHeight: "19px",
}}
>
Принимает .mp4 и .mov формат — максимум 100мб
</Typography>
</Box>
</Box>
</ButtonBase>
)}
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={uploadFile}
hidden
accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
multiple
type="file"
/>
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
</ButtonBase>
{answer && currentQuestion.content.type === "picture" && (
<img
src={answer.split("|")[1]}
alt=""
style={{
marginTop: "15px",
maxWidth: "300px",
maxHeight: "300px",
}}
/>
)}
{answer && currentQuestion.content.type === "video" && (
<video
src={answer.split("|")[1]}
style={{
marginTop: "15px",
maxWidth: "300px",
maxHeight: "300px",
objectFit: "cover",
}}
/>
)}
{answer?.split("|")[0] && (
<Typography sx={{ marginTop: "15px" }}>
{answer?.split("|")[0]}
</Typography>
)}
</Box>
</Box>
);

25
src/pages/ViewPublicationPage/questions/Images.tsx
View File

@ -60,9 +60,22 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
<Box
key={index}
sx={{
cursor: "pointer",
borderRadius: "5px",
border: `1px solid ${theme.palette.grey2.main}`,
}}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box sx={{ width: "100%", height: "300px" }}>
@ -88,18 +101,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
color: theme.palette.grey2.main,
marginTop: "10px",
}}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
value={index}
control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />

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

@ -7,7 +7,6 @@ import CustomTextField from "@ui_kit/CustomTextField";
import { useQuizViewStore, updateAnswer } from "@root/quizView";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
import {CustomSlider} from "@ui_kit/CustomSlider";
type NumberProps = {
currentQuestion: QuizQuestionNumber;
@ -124,7 +123,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
}}
/>
)}
{currentQuestion.content.chooseRange && (
<Box
sx={{
@ -177,7 +176,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
/>
</Box>
)}
</Box>
</Box>
);

2
src/pages/ViewPublicationPage/questions/Rating.tsx
View File

@ -44,12 +44,14 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
<StarIconMini
color={theme.palette.brightPurple.main}
width={50}
sx={{ transform: "scale(1.4)" }}
/>
}
emptyIcon={
<StarIconMini
color={theme.palette.grey2.main}
width={50}
sx={{ transform: "scale(1.4)" }}
/>
}
/>

40
src/pages/ViewPublicationPage/questions/Variant.tsx
View File

@ -2,8 +2,10 @@ import {
Box,
Typography,
RadioGroup,
FormGroup,
FormControlLabel,
Radio,
Checkbox,
useTheme,
} from "@mui/material";
@ -27,11 +29,13 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
({ questionId }) => questionId === currentQuestion.content.id
) ?? {};
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
return (
<Box>
<Typography variant="h5">{currentQuestion.title}</Typography>
<Box sx={{ display: "flex" }}>
<RadioGroup
<Group
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id
@ -70,25 +74,45 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
value={index}
labelPlacement="start"
control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
currentQuestion.content.multi ? (
<Checkbox
checked={!!answer?.includes(variant.id)}
checkedIcon={<RadioCheck />}
icon={<RadioIcon />}
/>
) : (
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
)
}
label={variant.answer}
onClick={(event) => {
event.preventDefault();
const variantId = currentQuestion.content.variants[index].id;
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (currentQuestion.content.multi) {
const currentAnswer =
typeof answer !== "string" ? answer || [] : [];
if (answer === currentQuestion.content.variants[index].id) {
updateAnswer(
currentQuestion.content.id,
currentAnswer?.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId]
);
return;
}
updateAnswer(currentQuestion.content.id, variantId);
if (answer === variantId) {
deleteAnswer(currentQuestion.content.id);
}
}}
/>
))}
</Box>
</RadioGroup>
</Group>
{currentQuestion.content.back && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img

2
src/pages/startPage/FaviconDropZone.tsx
View File

@ -21,7 +21,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
const [isDropReady, setIsDropReady] = useState<boolean>(false);
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
if (!quiz) return null; // TODO throw and catch with error boundary
if (!quiz) return null;
async function handleImageUpload(file: File) {
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");

67
src/pages/startPage/StartPageSettings.tsx
View File

@ -63,12 +63,12 @@ export default function StartPageSettings() {
const [formState, setFormState] = useState<"design" | "content">("design");
const [mobileVersion, setMobileVersion] = useState(false);
if (!quiz) return null; // TODO throw and catch with error boundary
if (!quiz) return null;
const MobileVersionHC = (bool: boolean) => {
setMobileVersion(bool);
};
const designType = quiz?.config?.startpageType;
const favIconDropZoneElement = (
@ -475,36 +475,37 @@ export default function StartPageSettings() {
>
Расположение элементов
</Typography>
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "left";
})}
isActive={quiz.config.startpage.position === "left"}
Icon={AlignLeftIcon}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "center";
})}
isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "centered" ? "flex" : "none" }}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "right";
})}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
</Box>
{designType !== "centered" &&
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "left";
})}
isActive={quiz.config.startpage.position === "left"}
Icon={AlignLeftIcon}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "center";
})}
isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "standard" ? "none" : "flex" }}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "right";
})}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
</Box>
}
{(isTablet || !isSmallMonitor) && (
<>
<Box

2
src/pages/startPage/dropZone.tsx
View File

@ -44,7 +44,7 @@ export const DropZone = ({ text, sx, deleteIconSx, imageUrl, originalImageUrl, o
setCropModalImageBlob,
} = useCropModalState();
if (!quiz) return null; // TODO throw and catch with error boundary
if (!quiz) return null;
async function handleImageUpload(file: File) {
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");

2
src/pages/startPage/stepOne.tsx
View File

@ -10,7 +10,7 @@ export default function StepOne() {
const quiz = useCurrentQuiz();
const config = quiz?.config;
if (!config) return null; // TODO throw and catch with error boundary
if (!config) return null;
return (
<Box

2
src/pages/startPage/steptwo.tsx
View File

@ -20,7 +20,7 @@ export default function Steptwo() {
const config = quiz?.config;
if (!config) return null; // TODO throw and catch with error boundary
if (!config) return null;
return (
<Box sx={{ mt: "60px" }}>

52
src/stores/questions/actions.ts
View File

@ -26,8 +26,8 @@ export const setQuestions = (questions: RawQuestion[] | null) => setProducedStat
questions,
});
export const createUntypedQuestion = (quizId: number) => setProducedState(state => {
state.questions.push({
export const createUntypedQuestion = (quizId: number, insertAfterQuestionId?: string) => setProducedState(state => {
const newUntypedQuestion = {
id: nanoid(),
quizId,
type: null,
@ -35,7 +35,16 @@ export const createUntypedQuestion = (quizId: number) => setProducedState(state
description: "",
deleted: false,
expanded: true,
});
};
if (insertAfterQuestionId) {
const index = state.questions.findIndex(q => q.id === insertAfterQuestionId);
if (index === -1) return;
state.questions.splice(index + 1, 0, newUntypedQuestion);
return;
}
state.questions.push(newUntypedQuestion);
}, {
type: "createUntypedQuestion",
quizId,
@ -131,6 +140,37 @@ export const collapseAllQuestions = () => setProducedState(state => {
state.questions.forEach(question => question.expanded = false);
}, "collapseAllQuestions");
const DELETE_TIMEOUT = 5000;
export const deleteQuestionWithTimeout = (questionId: string, deleteFn: (questionId: string) => void) => setProducedState(state => {
const question = state.questions.find(q => q.id === questionId);
if (!question) return;
if (question.type === null || question.type === "result") {
deleteFn(questionId);
return;
}
question.deleted = true;
clearTimeout(question.deleteTimeoutId);
question.deleteTimeoutId = window.setTimeout(() => {
deleteFn(questionId);
}, DELETE_TIMEOUT);
}, {
type: "deleteQuestionWithTimeout",
questionId,
});
export const cancelQuestionDeletion = (questionId: string) => setProducedState(state => {
const question = state.questions.find(q => q.id === questionId);
if (!question || question.type === null || question.type === "result") return;
question.deleted = false;
clearTimeout(question.deleteTimeoutId);
}, {
type: "cancelQuestionDeletion",
questionId,
});
const REQUEST_DEBOUNCE = 200;
const requestQueue = new RequestQueue();
@ -335,6 +375,8 @@ export const createTypedQuestion = async (
type: "createTypedQuestion",
question,
});
updateQuestionOrders();
} catch (error) {
devlog("Error creating question", error);
enqueueSnackbar("Не удалось создать вопрос");
@ -355,7 +397,7 @@ export const deleteQuestion = async (questionId: string) => requestQueue.enqueue
try {
await questionApi.delete(question.backendId);
removeQuestion(questionId);
updateQuestionOrders();
@ -521,7 +563,7 @@ export const createBackResult = async (
rawQuestionToQuestion(createdQuestion)
);
}, {
type: "createTypedQuestion",
type: "createBackResult",
question,
});
} catch (error) {

4
src/stores/quizView.ts
View File

@ -3,7 +3,7 @@ import { devtools } from "zustand/middleware";
type Answer = {
questionId: string;
answer: string;
answer: string | string[];
// Поле отвечающее за первое изменение ответа, нужно для галочки "Необязательный вопрос"
changed: boolean;
};
@ -25,7 +25,7 @@ export const useQuizViewStore = create<QuizViewStore>()(
export const updateAnswer = (
questionId: string,
answer: string,
answer: string | string[],
changed = true
) => {
const answers = [...useQuizViewStore.getState().answers];

250
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -1,6 +1,8 @@
import {
Box,
Button,
ButtonBase,
Link,
Paper,
Typography,
useMediaQuery,
@ -8,51 +10,53 @@ import {
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice";
export default function QuizPreviewLayout() {
const theme = useTheme();
const quiz = useCurrentQuiz();
const isTablet = useMediaQuery(theme.breakpoints.down(630));
const { isMobileDevice } = useUADevice();
if (!quiz) return null;
const isMediaFileExist =
(quiz.config.startpage.background.type === "image" &&
quiz.config.startpage.background.desktop) ||
(quiz.config.startpage.background.type === "video" &&
quiz.config.startpage.background.video);
const handleCopyNumber = () => {
navigator.clipboard.writeText(quiz.config.info.phonenumber);
};
const background = quiz.config.startpage.background.type === "image"
? quiz.config.startpage.background.desktop
? (
<img
src={quiz.config.startpage.background.desktop}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
)
: null
: quiz.config.startpage.background.type === "video"
? quiz.config.startpage.background.video
? (
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
)
: null
: null;
return (
<Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
<Box
sx={{
display: "flex",
flexDirection:
quiz.config.startpage.position === "left"
? "row"
: "row-reverse",
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: isMediaFileExist && !isTablet ? "40%" : "100%",
padding: "16px",
<QuizPreviewLayoutByType
quizHeaderBlock={<>
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
}}
>
alignItems: "center",
gap: "20px",
}}>
{quiz.config.startpage.logo && (
<img
src={quiz.config.startpage.logo}
@ -68,15 +72,17 @@ export default function QuizPreviewLayout() {
{quiz.config.info.orgname}
</Typography>
</Box>
<Box
sx={{
flexGrow: 1,
display: "flex",
gap: "10px",
flexDirection: "column",
justifyContent: "center",
}}
>
</>}
quizMainBlock={<>
<Box sx={{
display: "flex",
gap: "10px",
flexDirection: "column",
justifyContent: "center",
alignItems: (quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center")
? "center"
: "start",
}}>
<Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
<Typography sx={{ fontSize: "12px" }}>
{quiz.config.startpage.description}
@ -89,42 +95,146 @@ export default function QuizPreviewLayout() {
padding: "10px 15px",
}}
>
{quiz.config.startpage.button ? quiz.config.startpage.button : "Пройти тест"}
{quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box>
<Typography
sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
>
{quiz.config.info.phonenumber}
</Typography>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography sx={{ fontSize: "12px" }}>
{quiz.config.info.law}
</Typography>
</Box>
</Box>
{!isTablet && isMediaFileExist && (
<Box sx={{ width: "60%" }}>
{quiz.config.startpage.background.type === "image" &&
quiz.config.startpage.background.desktop && (
<img
src={quiz.config.startpage.background.desktop}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
)}
{quiz.config.startpage.background.type === "video" &&
quiz.config.startpage.background.video && (
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
)}
</Box>
)}
</Box>
</>}
backgroundBlock={background}
startpageType={quiz.config.startpageType}
alignType={quiz.config.startpage.position}
/>
</Paper>
);
}
function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(630));
switch (startpageType) {
case null:
case "standard": {
return (
<Box sx={{
display: "flex",
flexDirection: alignType === "left" ? "row" : "row-reverse",
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}>
<Box sx={{
width: !isTablet ? "40%" : "100%",
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: !isTablet ? "flex-start" : "center",
}}>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box sx={{
width: "60%",
}}>
{backgroundBlock}
</Box>
</Box>
);
}
case "expanded": {
return (
<Box sx={{
position: "relative",
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}>
<Box sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 2,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box sx={{
position: "absolute",
left: 0,
top: 0,
height: "100%",
width: "100%",
zIndex: 1,
}}>
{backgroundBlock}
</Box>
</Box>
);
}
case "centered": {
return (
<Box sx={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}>
{quizHeaderBlock}
{backgroundBlock &&
<Box>
{backgroundBlock}
</Box>
}
{quizMainBlock}
</Box>
);
}
default: notReachable(startpageType);
}
}
const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
left: "start",
center: "center",
right: "end",
};

1
src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
View File

@ -17,6 +17,7 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) {
<Box sx={{
width: "100%",
height: "100%",
pointerEvents: "none",
"& iframe": {
width: "100%",
height: "100%",

1
src/ui_kit/StartPagePreview/index.tsx
View File

@ -107,6 +107,7 @@ export const StartPagePreview = () => {
topLeft: {
top: "-1px",
left: "-1px",
zIndex: 100,
},
}}
style={{

13
src/utils/hooks/useUADevice.ts Normal file
View File

@ -0,0 +1,13 @@
import { useEffect, useState } from "react";
export function useUADevice(): { isMobileDevice: boolean; } {
const [isMobileDevice, setIsMobileDevice] = useState<boolean>(false);
useEffect(() => {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
setIsMobileDevice(isMobile);
}, [navigator.userAgent]);
return { isMobileDevice };
}

646
yarn.lock
View File

File diff suppressed because it is too large Load Diff