Merge branch 'dev' into style-previw
This commit is contained in:
commit
a6bd21d228
@ -1,34 +1,45 @@
|
||||
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)
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const [select, setSelect] = React.useState(0);
|
||||
const userId = useUserStore((state) => state.userId);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
|
||||
|
||||
return (
|
||||
<SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
|
||||
<SectionStyled
|
||||
tag={"header"}
|
||||
bg={"#F2F3F7"}
|
||||
mwidth={"1160px"}
|
||||
sxsect={{
|
||||
minHeight: '80px',
|
||||
borderBottom: '1px solid #E3E3E3',
|
||||
minHeight: "80px",
|
||||
borderBottom: "1px solid #E3E3E3",
|
||||
position: "relative",
|
||||
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
|
||||
zIndex: 3
|
||||
zIndex: 3,
|
||||
}}
|
||||
sxcont={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 0
|
||||
}}>
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<QuizLogo width={isMobile ? 100 : 150} />
|
||||
{/*<Box*/}
|
||||
{/* sx={{*/}
|
||||
@ -54,19 +65,22 @@ export default function Component() {
|
||||
{/* />*/}
|
||||
{/* ))}*/}
|
||||
{/*</Box>*/}
|
||||
<Button variant="outlined"
|
||||
onClick={() => setIsContactFormOpen(true)}
|
||||
<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',
|
||||
color: "black",
|
||||
border: "1px solid black",
|
||||
textTransform: "none",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 17px",
|
||||
}}
|
||||
>Предрегистрация</Button>
|
||||
>
|
||||
{userId ? "Войти" : " Регистрация / Войти"}
|
||||
</Button>
|
||||
</SectionStyled>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -1,59 +1,66 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
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 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))
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const userId = useUserStore((state) => state.userId);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const tryItForFreeonClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
|
||||
|
||||
return (
|
||||
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
||||
<SectionStyled
|
||||
tag={"section"}
|
||||
bg={"#f2f3f7"}
|
||||
mwidth={"1160px"}
|
||||
sxsect={{
|
||||
height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
|
||||
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',
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<Typography variant='h2'>
|
||||
Pena Quiz
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: isTablet ? '715px' : '420px',
|
||||
minHeight: '64px',
|
||||
}}>
|
||||
<Typography variant='body1'>
|
||||
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
|
||||
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 variant="contained" onClick={tryItForFreeonClick}>
|
||||
Попробуйте бесплатно
|
||||
|
||||
</Button>
|
||||
{/*</Link>*/}
|
||||
|
||||
@ -62,14 +69,14 @@ export default function Component() {
|
||||
src={abstraction}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
|
||||
bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
|
||||
maxWidth: isMobile ? "403px" : "810px",
|
||||
width: isMobile ? "100%" : undefined,
|
||||
left: isMobile ? "-20px" : (isTablet? "54px" : "401px"),
|
||||
top: isMobile ? "-345px" : undefined
|
||||
left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
|
||||
top: isMobile ? "-345px" : undefined,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</SectionStyled>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
@ -785,7 +789,7 @@ let pressed = false
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
|
||||
//код сюда
|
||||
cyRef.current?.fit()
|
||||
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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("Нет информации о взятом опроснике")
|
||||
|
||||
@ -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,27 +269,12 @@ 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,
|
||||
// });
|
||||
|
||||
onClick={() => {
|
||||
const deleteFn = () => {
|
||||
if (question.type !== null) {
|
||||
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
|
||||
updateRootContentId(quiz.id, "")
|
||||
clearRuleForAll()
|
||||
updateRootContentId(quiz.id, "");
|
||||
clearRuleForAll();
|
||||
questions.forEach(q => {
|
||||
if (q.type === "result") {
|
||||
deleteQuestion(q.id);
|
||||
@ -297,7 +282,7 @@ export default function ButtonsOptions({
|
||||
});
|
||||
deleteQuestion(question.id);
|
||||
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
|
||||
const clearQuestions = [] as string[]
|
||||
const clearQuestions = [] as string[];
|
||||
|
||||
//записываем потомков , а их результаты удаляем
|
||||
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
|
||||
@ -306,39 +291,45 @@ export default function ButtonsOptions({
|
||||
if (targetQuestion.type === "result") {
|
||||
deleteQuestion(targetQuestion.id);
|
||||
} else {
|
||||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
|
||||
getChildren(targetQuestion) //и ищем его потомков
|
||||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
|
||||
getChildren(targetQuestion); //и ищем его потомков
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
getChildren(question)
|
||||
});
|
||||
};
|
||||
getChildren(question);
|
||||
//чистим потомков от инфы ветвления
|
||||
clearQuestions.forEach((id) => {
|
||||
updateQuestion(id, question => {
|
||||
question.content.rule.parentId = ""
|
||||
question.content.rule.main = []
|
||||
question.content.rule.default = ""
|
||||
})
|
||||
})
|
||||
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
|
||||
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)
|
||||
PQ.content.rule = newRule;
|
||||
});
|
||||
deleteQuestion(question.id);
|
||||
}
|
||||
|
||||
deleteQuestion(question.id)
|
||||
deleteQuestion(question.id);
|
||||
|
||||
} else {
|
||||
console.log("удаляю безтипогово");
|
||||
deleteQuestion(question.id);
|
||||
}
|
||||
};
|
||||
|
||||
deleteQuestionWithTimeout(question.id, deleteFn);
|
||||
}}
|
||||
data-cy="delete-question"
|
||||
>
|
||||
|
||||
@ -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,27 +307,12 @@ 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,
|
||||
// });
|
||||
|
||||
onClick={() => {
|
||||
const deleteFn = () => {
|
||||
if (question.type !== null) {
|
||||
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
|
||||
updateRootContentId(quiz.id, "")
|
||||
clearRuleForAll()
|
||||
updateRootContentId(quiz.id, "");
|
||||
clearRuleForAll();
|
||||
questions.forEach(q => {
|
||||
if (q.type === "result") {
|
||||
deleteQuestion(q.id);
|
||||
@ -335,7 +320,7 @@ export default function ButtonsOptionsAndPict({
|
||||
});
|
||||
deleteQuestion(question.id);
|
||||
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
|
||||
const clearQuestions = [] as string[]
|
||||
const clearQuestions = [] as string[];
|
||||
|
||||
//записываем потомков , а их результаты удаляем
|
||||
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
|
||||
@ -344,39 +329,45 @@ export default function ButtonsOptionsAndPict({
|
||||
if (targetQuestion.type === "result") {
|
||||
deleteQuestion(targetQuestion.id);
|
||||
} else {
|
||||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
|
||||
getChildren(targetQuestion) //и ищем его потомков
|
||||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
|
||||
getChildren(targetQuestion); //и ищем его потомков
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
getChildren(question)
|
||||
});
|
||||
};
|
||||
getChildren(question);
|
||||
//чистим потомков от инфы ветвления
|
||||
clearQuestions.forEach((id) => {
|
||||
updateQuestion(id, question => {
|
||||
question.content.rule.parentId = ""
|
||||
question.content.rule.main = []
|
||||
question.content.rule.default = ""
|
||||
})
|
||||
})
|
||||
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
|
||||
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)
|
||||
PQ.content.rule = newRule;
|
||||
});
|
||||
deleteQuestion(question.id);
|
||||
}
|
||||
|
||||
deleteQuestion(question.id)
|
||||
deleteQuestion(question.id);
|
||||
|
||||
} else {
|
||||
console.log("удаляю безтипогово");
|
||||
deleteQuestion(question.id);
|
||||
}
|
||||
};
|
||||
|
||||
deleteQuestionWithTimeout(question.id, deleteFn);
|
||||
}}
|
||||
data-cy="delete-question"
|
||||
>
|
||||
|
||||
@ -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)
|
||||
let comp = document.getElementById(editSomeQuestion);
|
||||
if (comp !== null) {
|
||||
clearInterval(setI)
|
||||
comp.scrollIntoView({behavior: 'instant'})
|
||||
updateEditSomeQuestion()
|
||||
clearInterval(setI);
|
||||
comp.scrollIntoView({ behavior: 'instant' });
|
||||
updateEditSomeQuestion();
|
||||
}
|
||||
}, 200)
|
||||
}, 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",
|
||||
|
||||
@ -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,27 +241,12 @@ 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)
|
||||
onClick={() => {
|
||||
const deleteFn = () => {
|
||||
if (question.type !== null) {
|
||||
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
|
||||
updateRootContentId(quiz.id, "")
|
||||
clearRuleForAll()
|
||||
updateRootContentId(quiz.id, "");
|
||||
clearRuleForAll();
|
||||
deleteQuestion(question.id);
|
||||
questions.forEach(q => {
|
||||
if (q.type === "result") {
|
||||
@ -269,7 +254,7 @@ console.log(question.type)
|
||||
}
|
||||
});
|
||||
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
|
||||
const clearQuestions = [] as string[]
|
||||
const clearQuestions = [] as string[];
|
||||
|
||||
//записываем потомков , а их результаты удаляем
|
||||
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
|
||||
@ -278,42 +263,45 @@ console.log(question.type)
|
||||
if (targetQuestion.type === "result") {
|
||||
deleteQuestion(targetQuestion.id);
|
||||
} else {
|
||||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
|
||||
getChildren(targetQuestion) //и ищем его потомков
|
||||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
|
||||
getChildren(targetQuestion); //и ищем его потомков
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
getChildren(question)
|
||||
});
|
||||
};
|
||||
getChildren(question);
|
||||
//чистим потомков от инфы ветвления
|
||||
clearQuestions.forEach((id) => {
|
||||
updateQuestion(id, question => {
|
||||
question.content.rule.parentId = ""
|
||||
question.content.rule.main = []
|
||||
question.content.rule.default = ""
|
||||
})
|
||||
})
|
||||
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
|
||||
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)
|
||||
PQ.content.rule = newRule;
|
||||
});
|
||||
deleteQuestion(question.id);
|
||||
}
|
||||
|
||||
|
||||
deleteQuestion(question.id)
|
||||
deleteQuestion(question.id);
|
||||
} else {
|
||||
console.log("удаляю безтипогово")
|
||||
deleteQuestion(question.id)
|
||||
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%",
|
||||
|
||||
@ -72,7 +72,7 @@ export default function FormTypeQuestions({ question }: Props) {
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{(true /* TODO только первый вопрос */
|
||||
{(("page" in question) && question.page === 0
|
||||
? BUTTON_TYPE_QUESTIONS
|
||||
: BUTTON_TYPE_SHORT_QUESTIONS
|
||||
).map(({ icon, title, value: questionType }) => (
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -33,7 +33,6 @@ export const ResultSettings = () => {
|
||||
isReadyToLeave = false;
|
||||
}
|
||||
});
|
||||
console.log(`setting isReadyToLeaveRef to ${isReadyToLeave}`);
|
||||
isReadyToLeaveRef.current = isReadyToLeave;
|
||||
}, [results])
|
||||
|
||||
|
||||
@ -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(
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.content.id
|
||||
) ?? {};
|
||||
)?.answer as string;
|
||||
const [day, month, year] = answer?.split(".") || [];
|
||||
|
||||
return (
|
||||
@ -35,23 +35,27 @@ export const Date = ({ currentQuestion }: DateProps) => {
|
||||
slots={{
|
||||
openPickerIcon: () => <CalendarIcon />,
|
||||
}}
|
||||
selected={
|
||||
value={dayjs(
|
||||
answer
|
||||
? new window.Date(`${month}.${day}.${year}`)
|
||||
: new window.Date()
|
||||
)}
|
||||
onChange={(date) => {
|
||||
if (!date) {
|
||||
return;
|
||||
}
|
||||
onChange={(date) =>
|
||||
|
||||
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: {
|
||||
|
||||
@ -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,31 +41,6 @@ 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}
|
||||
@ -69,41 +49,34 @@ export const File = ({ currentQuestion }: FileProps) => {
|
||||
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>
|
||||
<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>
|
||||
|
||||
@ -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 />} />
|
||||
|
||||
@ -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;
|
||||
@ -177,7 +176,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -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)" }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -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={
|
||||
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;
|
||||
|
||||
if (currentQuestion.content.multi) {
|
||||
const currentAnswer =
|
||||
typeof answer !== "string" ? answer || [] : [];
|
||||
|
||||
updateAnswer(
|
||||
currentQuestion.content.id,
|
||||
currentQuestion.content.variants[index].id
|
||||
currentAnswer?.includes(variantId)
|
||||
? currentAnswer?.filter((item) => item !== variantId)
|
||||
: [...currentAnswer, variantId]
|
||||
);
|
||||
|
||||
if (answer === currentQuestion.content.variants[index].id) {
|
||||
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
|
||||
|
||||
@ -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("Размер картинки слишком велик");
|
||||
|
||||
@ -63,7 +63,7 @@ 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);
|
||||
@ -475,6 +475,7 @@ export default function StartPageSettings() {
|
||||
>
|
||||
Расположение элементов
|
||||
</Typography>
|
||||
{designType !== "centered" &&
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -494,7 +495,7 @@ export default function StartPageSettings() {
|
||||
})}
|
||||
isActive={quiz.config.startpage.position === "center"}
|
||||
Icon={AlignCenterIcon}
|
||||
sx={{ display: designType === "centered" ? "flex" : "none" }}
|
||||
sx={{ display: designType === "standard" ? "none" : "flex" }}
|
||||
/>
|
||||
<SelectableIconButton
|
||||
onClick={() => updateQuiz(quiz.id, quiz => {
|
||||
@ -504,7 +505,7 @@ export default function StartPageSettings() {
|
||||
Icon={AlignRightIcon}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
}
|
||||
{(isTablet || !isSmallMonitor) && (
|
||||
<>
|
||||
<Box
|
||||
|
||||
@ -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("Размер картинки слишком велик");
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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" }}>
|
||||
|
||||
@ -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("Не удалось создать вопрос");
|
||||
@ -521,7 +563,7 @@ export const createBackResult = async (
|
||||
rawQuestionToQuestion(createdQuestion)
|
||||
);
|
||||
}, {
|
||||
type: "createTypedQuestion",
|
||||
type: "createBackResult",
|
||||
question,
|
||||
});
|
||||
} catch (error) {
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
<QuizPreviewLayoutByType
|
||||
quizHeaderBlock={<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
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,
|
||||
</>}
|
||||
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.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",
|
||||
}}
|
||||
</>}
|
||||
backgroundBlock={background}
|
||||
startpageType={quiz.config.startpageType}
|
||||
alignType={quiz.config.startpage.position}
|
||||
/>
|
||||
)}
|
||||
{quiz.config.startpage.background.type === "video" &&
|
||||
quiz.config.startpage.background.video && (
|
||||
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</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",
|
||||
};
|
||||
|
||||
@ -17,6 +17,7 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) {
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none",
|
||||
"& iframe": {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
|
||||
@ -107,6 +107,7 @@ export const StartPagePreview = () => {
|
||||
topLeft: {
|
||||
top: "-1px",
|
||||
left: "-1px",
|
||||
zIndex: 100,
|
||||
},
|
||||
}}
|
||||
style={{
|
||||
|
||||
13
src/utils/hooks/useUADevice.ts
Normal file
13
src/utils/hooks/useUADevice.ts
Normal 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 };
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user