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

Merge branch 'dev' into result-page

Browse Source
This commit is contained in:
Nastya 2023-12-07 00:19:21 +03:00
commit 7cfb84534f
18 changed files with 417 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -1,4 +1,4 @@
FROM node:19.1-alpine as build
FROM node:20.10-alpine3.18 as build
RUN apk update && rm -rf /var/cache/apk/*
WORKDIR /usr/app

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

@ -19,7 +19,7 @@ import type {
AbstractEventObject,
ElementDefinition,
} from "cytoscape";
import { QuestionsList } from "../BranchingPanel/QuestionsList";
import { QuestionsList } from "../SwitchBranchingPanel/QuestionsList";
import { enqueueSnackbar } from "notistack";
type PopperItem = {
@ -65,6 +65,14 @@ const stylesheet: Stylesheet[] = [
"text-max-width": "80",
},
},
{
selector: "[?eroticeyeblink]",
style: {
"border-width": "4px",
"border-style": "solid",
"border-color": "#7e2aea",
},
},
{
selector: ".multiline-auto",
style: {
@ -112,7 +120,7 @@ export const CsComponent = ({
}: Props) => {
const quiz = useCurrentQuiz();
const { dragQuestionContentId, questions } = useQuestionsStore()
const { dragQuestionContentId, questions, desireToOpenABranchingModal } = useQuestionsStore()
const [startCreate, setStartCreate] = useState("");
const [startRemove, setStartRemove] = useState("");
@ -122,9 +130,19 @@ export const CsComponent = ({
const crossesContainer = useRef<HTMLDivElement | null>(null);
const gearsContainer = useRef<HTMLDivElement | null>(null);
useLayoutEffect(() => {
updateOpenedModalSettingsId()
}, [])
useLayoutEffect(() => {
const cy = cyRef?.current
if (desireToOpenABranchingModal) {
setTimeout(() => {
cy?.getElementById(desireToOpenABranchingModal)?.data("eroticeyeblink", true)
}, 250)
} else {
cy?.elements().data("eroticeyeblink", false)
}
}, [desireToOpenABranchingModal])
useLayoutEffect(() => {
updateOpenedModalSettingsId()
}, [])
useEffect(() => {
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
addNode({ parentNodeContentId: modalQuestionParentContentId, targetNodeContentId: modalQuestionTargetContentId })
@ -390,6 +408,7 @@ export const CsComponent = ({
const cy = cyRef.current;
const eles = cy?.add(storeToNodes(questions))
cy.data('changed', true)
// cy.data('changed', true)
const elecs = eles.layout(lyopts).run()
cy?.on('add', () => cy.data('changed', true))
cy?.fit()
@ -665,6 +684,7 @@ export const CsComponent = ({
cy={(cy) => {
cyRef.current = cy;
}}
// autolock
/>
{/* <button onClick={() => {
console.log("NODES____________________________")

7
src/pages/Questions/BranchingModal/Settings.tsx
View File

@ -290,7 +290,12 @@ const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQu
}
<DatePicker
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(e) => console.log(e)}
onChange={(dateString) => {
const date = dateString?.$d?.toLocaleDateString("ru-RU", { year: "numeric", month: "2-digit", day: "2-digit" });
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [date]
// setParentQuestion(newParentQuestion)
}}
slots={{
openPickerIcon: () => <CalendarIcon />,
}}

14
src/pages/Questions/BranchingPanel/index.tsx
View File

@ -1,13 +1,16 @@
import { Box, Typography, Switch, useTheme } from "@mui/material";
import {Box, Typography, Switch, useTheme, Button, useMediaQuery, SxProps, Theme} from "@mui/material";
import { QuestionsList } from "./QuestionsList";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
import {useRef} from "react";
export const BranchingPanel = () => {
export const BranchingPanel = (sx?: SxProps<Theme>) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const {openBranchingPanel} = useQuestionsStore.getState()
const ref = useRef()
return (
<Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
<Box
@ -19,12 +22,13 @@ export const BranchingPanel = () => {
background: "#fff",
borderRadius: "12px",
boxShadow: "0px 10px 30px #e7e7e7",
...sx
}}
>
<Switch
value={openBranchingPanel}
onChange={(_, value) => {
updateOpenBranchingPanel(!value)
updateOpenBranchingPanel(value)
}}
sx={{
width: 50,
@ -71,7 +75,7 @@ export const BranchingPanel = () => {
}}
/>
<Box>
<Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
<Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
Логика ветвления
</Typography>
<Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
@ -79,7 +83,7 @@ export const BranchingPanel = () => {
</Typography>
</Box>
</Box>
{ openBranchingPanel === true && <QuestionsList /> }
{ openBranchingPanel && <QuestionsList /> }
</Box>
);
};

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

@ -11,7 +11,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import {copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateQuestion} from "@root/questions/actions";
import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../assets/icons/questionsPage/branching";
@ -19,10 +19,9 @@ import Clue from "../../assets/icons/questionsPage/clue";
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { updateOpenedModalSettingsId } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import {enqueueSnackbar} from "notistack";
import {useQuestionsStore} from "@root/questions/store";
import { enqueueSnackbar } from "notistack";
import { useQuestionsStore } from "@root/questions/store";
interface Props {
@ -42,25 +41,7 @@ export default function ButtonsOptions({
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
const quiz = useCurrentQuiz();
const {openBranchingPanel} = useQuestionsStore.getState()
const openedModal = () => {
updateOpenedModalSettingsId(question.id)
};
const handleClickBranching = (_, value) => {
const parentId = question.content.rule.parentId
if (parentId.length === 0 ){
return enqueueSnackbar("Вопрос не учавствует в ветвлении")
}
if (parentId === "root") {
return enqueueSnackbar("У корня нет условий ветвления")
}
if (parentId.length !== 0) {
updateOpenBranchingPanel(!value)
openedModal()
}
}
const { openBranchingPanel } = useQuestionsStore.getState()
const buttonSetting: {
icon: JSX.Element;
@ -98,7 +79,10 @@ const {openBranchingPanel} = useQuestionsStore.getState()
),
title: "Ветвление",
value: "branching",
myFunc: () => handleClickBranching(question.id, openBranchingPanel),
myFunc: (question) => {
updateOpenBranchingPanel(true)
updateDesireToOpenABranchingModal(question.content.id)
}
},
];
@ -174,7 +158,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
key={title}
onClick={() => {
SSHC(value);
myFunc();
myFunc(question);
}}
sx={{
backgroundColor:

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

@ -23,8 +23,8 @@ import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import { QuizQuestionVariant } from "@model/questionTypes/variant";
import { updateOpenedModalSettingsId } from "@root/questions/actions";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { enqueueSnackbar } from "notistack";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -46,7 +46,7 @@ export default function ButtonsOptionsAndPict({
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
const {openBranchingPanel} = useQuestionsStore.getState()
const { openBranchingPanel } = useQuestionsStore.getState()
const quiz = useCurrentQuiz();
useEffect(() => {
@ -55,22 +55,6 @@ export default function ButtonsOptionsAndPict({
}
}, [question]);
const handleClickBranching = (_, value) => {
const parentId = question.content.rule.parentId
if (parentId.length === 0 ) {
return enqueueSnackbar("Вопрос не учавствует в ветвлении")
}
if (parentId === "root") {
return enqueueSnackbar("У корня нет условий ветвления")
}
if (parentId.length !== 0) {
updateOpenBranchingPanel(!value)
updateOpenedModalSettingsId(question.id)
}
}
return (
<Box
sx={{
@ -206,7 +190,8 @@ export default function ButtonsOptionsAndPict({
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
handleClickBranching(question.id, openBranchingPanel)
updateOpenBranchingPanel(true)
updateDesireToOpenABranchingModal(question.content.id)
}}
sx={{
height: "30px",

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

@ -1,8 +1,10 @@
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ListItem, Typography, useTheme } from "@mui/material";
import { memo } from "react";
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"
type Props = {
@ -13,6 +15,23 @@ type Props = {
function DraggableListItem({ question, isDragging, index }: Props) {
const theme = useTheme();
const { editSomeQuestion } = useQuestionsStore()
useEffect(() => {
if (editSomeQuestion !== null) {
const setI = setInterval(() => {
let comp = document.getElementById(editSomeQuestion)
console.log(comp)
if(comp !== null) {
clearInterval(setI)
comp.scrollIntoView({behavior: 'instant'})
updateEditSomeQuestion()
}
}, 200)
}
console.log(editSomeQuestion)
}, [editSomeQuestion])
return (
<Draggable draggableId={question.id.toString()} index={index}>

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

@ -68,6 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
return (
<>
<Paper
id={question.content.id}
data-cy="quiz-question-card"
sx={{
maxWidth: "796px",

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

@ -3,21 +3,20 @@ import {
Box,
} from "@mui/material";
import { DraggableList } from "./DraggableList";
import { BranchingPanel } from "./BranchingPanel";
import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
import { BranchingMap } from "./BranchingMap";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
export const QuestionSwitchWindowTool = () => {
const {openBranchingPanel} = useQuestionsStore.getState()
console.log(openBranchingPanel)
return (
<Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
<Box sx={{ flexBasis: "796px" }}>
{openBranchingPanel? <BranchingMap /> : <DraggableList />}
</Box>
<BranchingPanel
<SwitchBranchingPanel
/>
</Box>
)

14
src/pages/Questions/QuestionsPage.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useLayoutEffect } from "react"
import { useState, useEffect, useLayoutEffect, useRef } from "react"
import {
Box,
Button,
@ -17,7 +17,7 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
import { useQuestionsStore } from "@root/questions/store";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/questions/actions";
export default function QuestionsPage() {
@ -27,15 +27,19 @@ export default function QuestionsPage() {
const quiz = useCurrentQuiz();
const {openBranchingPanel} = useQuestionsStore.getState()
useLayoutEffect(() => {
updateOpenBranchingPanel(true)
updateOpenBranchingPanel(false)
updateEditSomeQuestion()
},[])
const ref = useRef()
if (!quiz) return null;
return (
<>
<Box
ref={ref}
id="QuestionsPage"
sx={{
maxWidth: "796px",
width: "100%",
@ -81,6 +85,8 @@ export default function QuestionsPage() {
>
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
<Button
variant="outlined"
@ -109,4 +115,4 @@ export default function QuestionsPage() {
{openedModalSettingsId !== null && <BranchingQuestions/>}
</>
);
}
}

33
src/pages/Questions/BranchingPanel/QuestionsList.tsx → src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
View File

@ -1,13 +1,15 @@
import { useParams } from "react-router-dom";
import { Box, Button, Typography } from "@mui/material";
import { Box, Button, IconButton, Typography } from "@mui/material";
import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
import { useQuestionsStore } from "@root/questions/store";
import { updateDragQuestionContentId } from "@root/questions/actions";
import { useEffect } from "react";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
import {updateOpenBranchingPanel, updateEditSomeQuestion} from "@root/questions/actions"
const getItemStyle = (isDragging:any, draggableStyle:any) => ({
const getItemStyle = (isDragging: any, draggableStyle: any) => ({
// some basic styles to make the items look a bit nicer
userSelect: "none",
padding: 5 * 2,
@ -22,7 +24,7 @@ const getItemStyle = (isDragging:any, draggableStyle:any) => ({
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
export const QuestionsList = () => {
const { questions } = useQuestionsStore()
const { questions, desireToOpenABranchingModal } = useQuestionsStore()
return (
<Box sx={{ padding: "15px" }}>
@ -51,11 +53,11 @@ export const QuestionsList = () => {
}}
>
{/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
{questions.filter((q:AnyQuestion) => q.type).map(({ title, id, content }, index) => (
<Button
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
if (!content.rule.parentId) updateDragQuestionContentId(content.id)
}}
{questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => (
<Button
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
if (!content.rule.parentId) updateDragQuestionContentId(content.id)
}}
key={index}
sx={{
width: "100%",
@ -66,6 +68,7 @@ export const QuestionsList = () => {
padding: "12px",
background: "#FFFFFF",
borderRadius: "8px",
border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none",
marginBottom: "20px",
boxShadow: "0px 10px 30px #e7e7e7",
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
@ -73,13 +76,21 @@ export const QuestionsList = () => {
"&:last-child": { marginBottom: 0 },
}}
>
<Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
<Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
{title || "нет заголовка"}
</Typography>
<IconButton
onClick={() => {
updateOpenBranchingPanel(false)
updateEditSomeQuestion(content.id)
}}
>
<Pencil />
</IconButton>
{content.rule.parentId && <CheckedIcon />}
</Button>
))}
</Box>
</Box>

91
src/pages/Questions/SwitchBranchingPanel/index.tsx Normal file
View File

@ -0,0 +1,91 @@
import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material";
import { QuestionsList } from "./QuestionsList";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
import {useRef} from "react";
export const SwitchBranchingPanel = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const {openBranchingPanel} = useQuestionsStore.getState()
console.log(openBranchingPanel)
const ref = useRef()
return (
<Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
padding: "18px",
background: "#fff",
borderRadius: "12px",
boxShadow: "0px 10px 30px #e7e7e7",
}}
>
<Switch
value={openBranchingPanel}
onChange={(_, value) => {
console.log("меняю на " + value)
updateOpenBranchingPanel(value)
}}
sx={{
width: 50,
height: 30,
padding: 0,
"& .MuiSwitch-switchBase": {
padding: 0,
margin: "2px",
transitionDuration: "300ms",
"&.Mui-checked": {
transform: "translateX(20px)",
color: theme.palette.brightPurple.main,
"& + .MuiSwitch-track": {
backgroundColor: "#E8DCF9",
opacity: 1,
border: 0,
},
"&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
},
"&.Mui-disabled .MuiSwitch-thumb": {
color:
theme.palette.mode === "light"
? theme.palette.grey[100]
: theme.palette.grey[600],
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
},
},
"& .MuiSwitch-thumb": {
boxSizing: "border-box",
width: 25,
height: 25,
},
"& .MuiSwitch-track": {
borderRadius: 13,
backgroundColor:
theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
opacity: 1,
transition: theme.transitions.create(["background-color"], {
duration: 500,
}),
},
}}
/>
<Box>
<Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
Логика ветвления
</Typography>
<Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
Настройте связи между вопросами
</Typography>
</Box>
</Box>
{ openBranchingPanel && <QuestionsList /> }
</Box>
);
};

112
src/pages/ViewPublicationPage/Footer.tsx
View File

@ -19,13 +19,69 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
new Set()
);
const [disablePreviousButton, setDisablePreviousButton] =
useState<boolean>(false);
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
const { answers } = useQuizViewStore();
const theme = useTheme();
useEffect(() => {
// Логика для аргумента disabled у кнопки "Назад"
if (question?.content.rule.parentId === "root") {
setDisablePreviousButton(true);
} else {
setDisablePreviousButton(false);
}
// Логика для аргумента disabled у кнопки "Далее"
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
setDisableNextButton(false);
} else {
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion?.type) {
setDisableNextButton(false);
} else {
setDisableNextButton(true);
}
}
}, [question]);
const getNextQuestionId = () => {
if (answers.length) {
const answer = answers.find(
({ questionId }) => questionId === question.content.id
);
let readyBeNextQuestion = "";
question.content.rule.main.forEach(({ next, rules }) => {
let longerArray = Math.max(
rules[0].answers.length,
[answer?.answer].length
);
for (
var i = 0;
i < longerArray;
i++ // Цикл по всем эле­мен­там бОльшего массива
) {
if (rules[0].answers[i] === answer?.answer) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
}
});
return readyBeNextQuestion;
}
};
const followPreviousStep = () => {
if (question?.content.rule.parentId !== "root") {
const parent = getQuestionByContentId(question?.content.rule.parentId);
if (parent) {
if (parent?.type) {
setCurrentQuestion(parent);
} else {
enqueueSnackbar("не могу получить предыдущий вопрос");
@ -36,45 +92,25 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
};
const followNextStep = () => {
if (answers.length) {
let readyBeNextQuestion = "";
const nextQuestionId = getNextQuestionId();
question.content.rule.main.forEach(({ next, rules }) => {
if (nextQuestionId) {
const nextQuestion = getQuestionByContentId(nextQuestionId);
let longerArray = Math.max(
rules[0].answers.length,
[answers.at(-1)?.answer].length
);
for (
var i = 0;
i < longerArray;
i++ // Цикл по всем эле­мен­там бОльшего массива
) {
if (rules[0].answers[i] === answers.at(-1)?.answer) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
}
});
if (readyBeNextQuestion) {
const nextQuestion = getQuestionByContentId(readyBeNextQuestion);
if (nextQuestion) {
setCurrentQuestion(nextQuestion);
return;
} else {
enqueueSnackbar("не могу получить последующий вопрос");
}
if (nextQuestion?.type) {
setCurrentQuestion(nextQuestion);
return;
} else {
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion) {
setCurrentQuestion(nextQuestion);
} else {
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
}
enqueueSnackbar("не могу получить последующий вопрос");
}
} else {
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion?.type) {
setCurrentQuestion(nextQuestion);
} else {
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
}
}
};
@ -128,6 +164,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
</Typography> */}
</Box>
<Button
disabled={disablePreviousButton}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={followPreviousStep}
@ -135,6 +172,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
← Назад
</Button>
<Button
disabled={disableNextButton}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={followNextStep}

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

@ -13,7 +13,10 @@ 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
) ?? {};
return (
<Box>
@ -28,7 +31,18 @@ export const Date = ({ currentQuestion }: DateProps) => {
>
<DatePicker
selected={answer ? new window.Date(answer) : new window.Date()}
onChange={(date) => updateAnswer(currentQuestion.content.id, String(date))}
onChange={(date) =>
updateAnswer(
currentQuestion.content.id,
String(
date?.toLocaleDateString("ru-RU", {
year: "numeric",
month: "2-digit",
day: "2-digit",
})
)
)
}
/>
</Box>
</Box>

83
src/pages/startPage/StartPage.tsx
View File

@ -9,8 +9,8 @@ import {
Button,
Container,
FormControl,
IconButton,
TextField,
IconButton, Switch,
TextField, Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
@ -29,7 +29,9 @@ import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import { cleanQuestions } from "@root/questions/actions";
import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
import {BranchingPanel} from "../Questions/BranchingPanel";
import {useQuestionsStore} from "@root/questions/store";
export default function StartPage() {
@ -50,7 +52,7 @@ export default function StartPage() {
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
const {openBranchingPanel} = useQuestionsStore.getState()
const quizConfig = quiz?.config;
useEffect(() => {
@ -228,9 +230,9 @@ export default function StartPage() {
<Box
sx={{
position: "absolute",
left: isMobile ? 0 : "230px",
left: 0,
bottom: 0,
width: isMobile ? "100%" : "calc(100% - 230px)",
width: "100%",
padding: "20px 40px",
display: "flex",
justifyContent: "flex-end",
@ -238,6 +240,75 @@ export default function StartPage() {
background: "#FFF",
}}
>
<Box
sx={{
display: openBranchingPanel ? "none" : "display",
alignItems: "center",
gap: "15px",
padding: "18px",
background: "#fff",
borderRadius: "12px",
boxShadow: "0px 10px 30px #e7e7e7",
}}
>
<Switch
value={openBranchingPanel}
onChange={(_, value) => {
updateOpenBranchingPanel(value)
}}
sx={{
width: 50,
height: 30,
padding: 0,
"& .MuiSwitch-switchBase": {
padding: 0,
margin: "2px",
transitionDuration: "300ms",
"&.Mui-checked": {
transform: "translateX(20px)",
color: theme.palette.brightPurple.main,
"& + .MuiSwitch-track": {
backgroundColor: "#E8DCF9",
opacity: 1,
border: 0,
},
"&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
},
"&.Mui-disabled .MuiSwitch-thumb": {
color:
theme.palette.mode === "light"
? theme.palette.grey[100]
: theme.palette.grey[600],
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
},
},
"& .MuiSwitch-thumb": {
boxSizing: "border-box",
width: 25,
height: 25,
},
"& .MuiSwitch-track": {
borderRadius: 13,
backgroundColor:
theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
opacity: 1,
transition: theme.transitions.create(["background-color"], {
duration: 500,
}),
},
}}
/>
<Box>
<Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
Логика ветвления
</Typography>
<Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
Настройте связи между вопросами
</Typography>
</Box>
</Box>
<Button
variant="contained"
sx={{

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

@ -308,8 +308,8 @@ export const createTypedQuestion = async (
});
export const deleteQuestion = async (questionId: string, quizId: string) => requestQueue.enqueue(async () => {
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
const { questions } = useQuestionsStore.getState()
const question = questions.find(q => q.id === questionId);
if (!question) return;
if (question.type === null) {
@ -322,6 +322,27 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quizId, "")
clearRoleForAll()
} 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 (!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 = ""
})
})
}
removeQuestion(questionId);
@ -394,7 +415,7 @@ export const getQuestionByContentId = (questionContentId: string | null) => {
if (questionContentId === null) return null;
return useQuestionsStore.getState().questions.find(q => {
if (q.type === null) return false;
return (q.content.id === questionContentId);
}) || null;
};
@ -417,4 +438,20 @@ export const clearRoleForAll = () => {
});
}
export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value});
export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({ openBranchingPanel: value });
let UDTOABM: ReturnType<typeof setTimeout>;
export const updateDesireToOpenABranchingModal = (contentId: string) => {
useQuestionsStore.setState({ desireToOpenABranchingModal: contentId })
clearTimeout(UDTOABM)
UDTOABM = setTimeout(() => {
useQuestionsStore.setState({ desireToOpenABranchingModal: null })
}, 7000)
}
export const clearDesireToOpenABranchingModal = () => {
useQuestionsStore.setState({ desireToOpenABranchingModal: null })
}
export const updateEditSomeQuestion = (contentId?: string) => {
useQuestionsStore.setState({ editSomeQuestion: contentId === undefined ? null : contentId })
}

5
src/stores/questions/store.ts
View File

@ -8,6 +8,8 @@ export type QuestionsStore = {
openedModalSettingsId: string | null;
dragQuestionContentId: string | null;
openBranchingPanel: boolean;
desireToOpenABranchingModal: string | null;
editSomeQuestion: string | null;
};
const initialState: QuestionsStore = {
@ -15,6 +17,9 @@ const initialState: QuestionsStore = {
openedModalSettingsId: null as null,
dragQuestionContentId: null,
openBranchingPanel: false,
desireToOpenABranchingModal: null as null,
editSomeQuestion: null as null,
};
export const useQuestionsStore = create<QuestionsStore>()(

1
src/ui_kit/Sidebar.tsx
View File

@ -46,6 +46,7 @@ export default function Sidebar() {
overflow: "hidden",
whiteSpace: "nowrap",
boxSizing: "border-box",
zIndex: 1
}}
>
<Box