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

Merge branch 'dev' into backend-integration

Browse Source
This commit is contained in:
Nastya 2023-12-04 23:41:44 +03:00
commit f07d7ab3e2
27 changed files with 20249 additions and 842 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19001
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/api/question.ts
View File

@ -30,7 +30,6 @@ async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
}
function editQuestion(body: EditQuestionRequest, signal?: AbortSignal) {
console.log("`${baseUrl}/question/edit` start")
return makeRequest<EditQuestionRequest, EditQuestionResponse>({
url: `${baseUrl}/question/edit`,
body,

2
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -1,7 +1,7 @@
import { MessageIcon } from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import TextareaAutosize from "@mui/base/TextareaAutosize";
import {TextareaAutosize} from "@mui/base/TextareaAutosize";
import {
Box,
FormControl,

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

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import Cytoscape from "cytoscape";
import CytoscapeComponent from "react-cytoscapejs";
import popper from "cytoscape-popper";
@ -122,16 +122,19 @@ export const CsComponent = ({
const crossesContainer = useRef<HTMLDivElement | null>(null);
const gearsContainer = useRef<HTMLDivElement | null>(null);
useLayoutEffect(() => {
updateOpenedModalSettingsId()
}, [])
useEffect(() => {
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
console.log("был выбран вопрос " + modalQuestionTargetContentId)
addNode({ parentNodeContentId:modalQuestionParentContentId, targetNodeContentId:modalQuestionTargetContentId })
addNode({ parentNodeContentId: modalQuestionParentContentId, targetNodeContentId: modalQuestionTargetContentId })
}
setModalQuestionParentContentId("")
setModalQuestionTargetContentId("")
}, [modalQuestionTargetContentId])
const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
console.log("dragQuestionContentId " + dragQuestionContentId)
const cy = cyRef?.current
const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
//если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
@ -139,7 +142,7 @@ export const CsComponent = ({
if (Object.keys(targetQuestion).length !== 0 && Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
cy?.data('changed',true)
cy?.data('changed', true)
cy?.add([
{
data: {
@ -161,8 +164,6 @@ export const CsComponent = ({
}
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyTypedQuizQuestion, parentNodeChildren: number }) => {
console.log("записываю на бек ид родителя")
console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
//предупреждаем добавленный вопрос о том, кто его родитель
updateQuestion(targetQuestion.content.id, question => {
question.content.rule.parentId = parentNodeContentId
@ -170,8 +171,8 @@ export const CsComponent = ({
})
//Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления
if (parentNodeChildren > 1) {
updateOpenedModalSettingsId(parentNodeContentId)
if (parentNodeChildren >= 1) {
updateOpenedModalSettingsId(targetQuestion.content.id)
} else {
//Если ребёнок первый - добавляем его родителю как дефолтный
updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id)
@ -179,9 +180,8 @@ export const CsComponent = ({
}
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
const deleteNodes = [] as string[]
const deleteEdges:any = []
console.log("remove")
const deleteNodes = [] as string[]
const deleteEdges: any = []
const cy = cyRef?.current
const findChildrenToDelete = (node) => {
@ -205,60 +205,51 @@ export const CsComponent = ({
const targetQuestion = getQuestionByContentId(targetNodeContentId)
if (targetQuestion.content.rule.parentId === "root" && quiz) {
console.log("click ROOT")
updateRootContentId(quiz?.id, "")
updateQuestion(targetNodeContentId, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
updateRootContentId(quiz?.id, false)
} else {
console.log("click not ROOT")
const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
if (targetNodeContentId && parentQuestionContentId) {
clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
}
console.log(deleteNodes, deleteEdges)
//После всех манипуляций удаляем грани из CS и ноды из бекенда
deleteNodes.forEach((nodeId) => {//Ноды
cy?.remove(cy?.$("#" + nodeId))
removeButtons(nodeId)
updateQuestion(nodeId, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
})
deleteEdges.forEach((edge:any) => {//Грани
cy?.remove(edge)
})
removeButtons(targetNodeContentId)
cy?.data('changed',true)
cy?.layout(lyopts).run()
}
//После всех манипуляций удаляем грани из CS и ноды из бекенда
deleteNodes.forEach((nodeId) => {//Ноды
cy?.remove(cy?.$("#" + nodeId))
removeButtons(nodeId)
updateQuestion(nodeId, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
})
deleteEdges.forEach((edge: any) => {//Грани
cy?.remove(edge)
})
removeButtons(targetNodeContentId)
cy?.data('changed', true)
cy?.layout(lyopts).run()
}
const clearDataAfterRemoveNode = ({ targetQuestionContentId, parentQuestionContentId }: { targetQuestionContentId: string, parentQuestionContentId: string }) => {
console.log({ targetQuestionContentId, parentQuestionContentId })
updateQuestion(targetQuestionContentId, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
updateQuestion(parentQuestionContentId, question => {
console.log("parent default " + question.content.rule.default)
console.log("target ID " + targetQuestionContentId)
console.log(question.content.rule.default === targetQuestionContentId)
//Заменяем id удаляемого вопроса либо на id одного из оставшихся, либо на пустую строку
if (question.content.rule.default === targetQuestionContentId) question.content.rule.default = ""
})
@ -282,22 +273,20 @@ export const CsComponent = ({
const readyLO = (e) => {
console.log(e.cy.data('firstNode'),"SKEEER",e.cy.data('changed'))
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()
} else {
e.cy.data('firstNode', 'root')
e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
e.cy.data('changed', false)
e.cy.removeData('firstNode')
}
} else {
e.cy.data('changed', false)
e.cy.removeData('firstNode')
}
//удаляем иконки
e.cy.nodes().forEach((ele: any) => {
const data = ele.data()
console.log(data)
data.id && removeButtons(data.id);
})
initialPopperIcons(e)
@ -307,11 +296,9 @@ console.log(e.cy.data('firstNode'),"SKEEER",e.cy.data('changed'))
name: 'preset',
positions: (e) => {
console.log('BBBBBBBBBBBBBBB', e.cy().data('changed'))
if (!e.cy().data('changed')) {
return e.data('oldPos')
} else {e.removeData('oldPos')}
console.log('POSITIIIIIIIONS')
} else { e.removeData('oldPos') }
const id = e.id()
const incomming = e.cy().edges(`[target="${id}"]`)
const layer = 0
@ -319,7 +306,7 @@ console.log(e.cy.data('firstNode'),"SKEEER",e.cy.data('changed'))
if (incomming.length === 0) {
if (e.cy().data('firstNode') === undefined)
e.cy().data('firstNode','root')
e.cy().data('firstNode', 'root')
e.data('root', true)
const children = e.cy().edges(`[source="${id}"]`).targets()
e.data('layer', layer)
@ -331,14 +318,14 @@ console.log(e.cy.data('firstNode'),"SKEEER",e.cy.data('changed'))
while (queue.length) {
const task = queue.pop()
task.task.data('layer', task.layer)
console.log('SAMSHIIIIT',task.layer,task.task.data().layer)
task.task.removeData('subtreeWidth')
const children = e.cy().edges(`[source="${task.task.id()}"]`).targets()
task.task.data('children', children.length)
if (children.length !== 0) {
children.forEach(n => queue.push({ task: n, layer: task.layer + 1 }))
}
}
queue.push({ parent: e, children: children.targets() })
queue.push({ parent: e, children: children })
while (queue.length) {
const task = queue.pop()
if (task.children.length === 0) {
@ -359,23 +346,20 @@ console.log(e.cy.data('firstNode'),"SKEEER",e.cy.data('changed'))
task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
}
const pos = { x: 0, y: 0 }
console.log(e.data())
e.data('oldPos', pos)
return pos
} else {
console.log(e.cy().data('firstNode'))
if (e.cy().data('firstNode') !== 'root') {
e.cy().data('firstNode','nonroot')
return {x:0,y:0}
if (e.cy().data('firstNode') !== 'root') {
e.cy().data('firstNode', 'nonroot')
return { x: 0, y: 0 }
}
if (e.cy().data('firstNode') === undefined)
e.cy().data('firstNode','nonroot')
e.cy().data('firstNode', 'nonroot')
const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
const wing = (parent.data('children') === 1) ? 0 : parent.data('subtreeWidth') / 2 + 50
const lastOffset = parent.data('lastChild')
const step = wing * 2 / (parent.data('children') - 1)
//e.removeData('subtreeWidth')
console.log('AAAAAAAAAAa', e.data(), lastOffset, step, parent.position().y, wing)
if (lastOffset !== undefined) {
parent.data('lastChild', lastOffset + step)
const pos = { x: 250 * e.data('layer'), y: (lastOffset + step) }
@ -386,7 +370,7 @@ if (e.cy().data('firstNode') !== 'root') {
const pos = { x: 250 * e.data('layer'), y: (parent.position().y - wing) }
e.data('oldPos', pos)
return pos
}
}
}
}, // map of (node id) => (position obj); or function(node){ return somPos; }
zoom: undefined, // the zoom level to set (prob want fit = false if set)
@ -502,7 +486,7 @@ if (e.cy().data('firstNode') !== 'root') {
layoutElement.classList.add("popper-layout");
layoutElement.setAttribute("data-id", item.id());
layoutElement.addEventListener("mouseup", () => {
//Узнаём грани, идущие от этой ноды
//Узнаём грани, идущие от этой ноды
setModalQuestionParentContentId(item.id())
setOpenedModalQuestions(true)
});
@ -533,7 +517,7 @@ if (e.cy().data('firstNode') !== 'root') {
plusElement.addEventListener("mouseup", () => {
setStartCreate(node.id());
});
plusesContainer.current?.appendChild(plusElement);
return plusElement;
@ -594,7 +578,6 @@ if (e.cy().data('firstNode') !== 'root') {
gearElement.style.zIndex = "1"
gearsContainer.current?.appendChild(gearElement);
gearElement.addEventListener("mouseup", (e) => {
console.log(item.id())
updateOpenedModalSettingsId(item.id())
});
@ -672,23 +655,27 @@ if (e.cy().data('firstNode') !== 'root') {
return (
<>
<CytoscapeComponent
wheelSensitivity={0.1}
elements={[]}
// elements={createGraphElements(tree, quiz)}
style={{ height: "480px", background: "#F2F3F7" }}
stylesheet={stylesheet}
layout={(lyopts)}
cy={(cy) => {
cyRef.current = cy;
}}
/>
<button onClick={() => {
console.log("ELEMENTS____________________________")
cyRef.current?.elements().forEach((ele:any) => {
console.log(ele.data())
})
}}>elements</button>
<CytoscapeComponent
wheelSensitivity={0.1}
elements={[]}
// elements={createGraphElements(tree, quiz)}
style={{ height: "480px", background: "#F2F3F7" }}
stylesheet={stylesheet}
layout={(lyopts)}
cy={(cy) => {
cyRef.current = cy;
}}
/>
{/* <button onClick={() => {
console.log("NODES____________________________")
cyRef.current?.elements().forEach((ele: any) => {
console.log(ele.data())
})
}}>nodes</button>
<button onClick={() => {
console.log("ELEMENTS____________________________")
console.log(questions)
}}>elements</button> */}
</>
);
};

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

@ -2,8 +2,8 @@ import { Box } from "@mui/material"
import { useEffect, useRef, useState } from "react";
import { updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
import { updateRootContentId } from "@root/quizes/actions"
import { useCurrentQuiz } from "@root/quizes/hooks"
import { useQuestionsStore } from "@root/questions/store"
import { useCurrentQuiz } from "@root/quizes/hooks";
import { enqueueSnackbar } from "notistack";
interface Props {
@ -11,17 +11,14 @@ interface Props {
modalQuestionTargetContentId: string;
}
export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
const { dragQuestionContentId } = useQuestionsStore()
const Container = useRef<HTMLDivElement | null>(null);
const quiz = useCurrentQuiz();
console.log(dragQuestionContentId)
const { dragQuestionContentId, questions } = useQuestionsStore()
const Container = useRef<HTMLDivElement | null>(null);
const modalOpen = () => setOpenedModalQuestions(true)
const newRootNode = () => {
if (quiz) {
console.log(dragQuestionContentId)
if (dragQuestionContentId) {
updateRootContentId(quiz?.id, dragQuestionContentId)
updateQuestion(dragQuestionContentId, (question) => question.content.rule.parentId = "root")
@ -29,6 +26,7 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
} else {
enqueueSnackbar("Нет информации о взятом опроснике")
}
}
useEffect(() => {
@ -53,6 +51,7 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
}, [modalQuestionTargetContentId])
return (
<Box
ref={Container}

3
src/pages/Questions/BranchingMap/helper.ts
View File

@ -15,11 +15,9 @@ interface Edges {
}
export const storeToNodes = (questions: AnyTypedQuizQuestion[]) => {
console.log(questions)
const nodes: Nodes[] = []
const edges: Edges[] = []
questions.forEach((question) => {
console.log(question)
if (question.content.rule.parentId) {
nodes.push({data: {
id: question.content.id,
@ -38,6 +36,5 @@ export const storeToNodes = (questions: AnyTypedQuizQuestion[]) => {
}})
}
})
console.log([...nodes, ...edges])
return [...nodes, ...edges];
}

2
src/pages/Questions/BranchingMap/index.tsx
View File

@ -14,6 +14,8 @@ export const BranchingMap = () => {
const [modalQuestionTargetContentId, setModalQuestionTargetContentId] = useState<string>("")
const [openedModalQuestions, setOpenedModalQuestions] = useState<boolean>(false)
return (
<Box
id="cytoscape-container"

40
src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx
View File

@ -32,34 +32,32 @@ export default function BranchingQuestions() {
const { openedModalSettingsId } = useQuestionsStore();
const [targetQuestion, setTargetQuestion] = useState<AnyTypedQuizQuestion | null>(getQuestionById(openedModalSettingsId) || getQuestionByContentId(openedModalSettingsId))
console.log(targetQuestion)
const [parentQuestion, setParentQuestion] = useState<AnyTypedQuizQuestion | null>(getQuestionByContentId(targetQuestion?.content.rule.parentId))
console.log(parentQuestion)
useLayoutEffect(() => {
if (parentQuestion.content.rule.main.length === 0) updateQuestion(parentQuestion.id, question => question.content.rule.main.push({
next: targetQuestion.content.id,
or: true,
rules: [{
question: parentQuestion.content.id,
answers: []
if (parentQuestion === null) return
if (parentQuestion.content.rule.main.length === 0) {
let mutate = JSON.parse(JSON.stringify(parentQuestion))
mutate.content.rule.main = [{
next: targetQuestion.content.id,
or: true,
rules: [{
question: parentQuestion.content.id,
answers: []
}]
}]
}))
setParentQuestion(mutate)
}
})
if (targetQuestion === null || parentQuestion === null) {
console.log(openedModalSettingsId)
enqueueSnackbar("Невозможно найти данные ветвления для этого вопроса")
return <></>
}
const saveData = () => {
console.log(parentQuestion)
if (parentQuestion !== null) {
updateQuestion(parentQuestion.content.id, question => question.content = parentQuestion.content)
updateQuestion(parentQuestion.content.id, question => question.content = parentQuestion.content)
}
handleClose()
@ -148,11 +146,11 @@ export default function BranchingQuestions() {
marginBottom: "10px",
cursor: "pointer"
}}
onClick={() => {
const mutate = JSON.parse(JSON.stringify(parentQuestion))
mutate.content.rule.main.push(createBranchingRuleMain(targetQuestion.content.id, parentQuestion.content.id))
setParentQuestion(mutate)
}}
onClick={() => {
const mutate = JSON.parse(JSON.stringify(parentQuestion))
mutate.content.rule.main.push(createBranchingRuleMain(targetQuestion.content.id, parentQuestion.content.id))
setParentQuestion(mutate)
}}
>
Добавить условие
</Link>
@ -163,7 +161,7 @@ export default function BranchingQuestions() {
sx={{
margin: 0
}}
checked={parentQuestion.content.rule.default === targetQuestion.id}
checked={parentQuestion.content.rule.default === targetQuestion.content.id}
onClick={() => {
let mutate = JSON.parse(JSON.stringify(parentQuestion))

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

@ -1,4 +1,4 @@
import { Box, MenuItem, FormControl, Checkbox, FormControlLabel, Radio, RadioGroup, Typography, useTheme, Select, Chip, IconButton, TextField } from "@mui/material"
import { Box, MenuItem, FormControl, Checkbox, FormControlLabel, Radio, RadioGroup, Typography, useTheme, Select, useMediaQuery, IconButton, TextField } from "@mui/material"
import RadioCheck from "@ui_kit/RadioCheck"
import RadioIcon from "@ui_kit/RadioIcon"
import { QuizQuestionBase } from "model/questionTypes/shared"
@ -8,7 +8,10 @@ import { useQuestionsStore } from "@root/questions/store";
import { updateQuestion, getQuestionById } from "@root/questions/actions";
import { AnyTypedQuizQuestion } from "../../../model/questionTypes/shared"
import { SelectChangeEvent } from '@mui/material/Select';
import CalendarIcon from "@icons/CalendarIcon";
import { DatePicker } from "@mui/x-date-pickers";
import * as dayjs from 'dayjs'
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
@ -26,7 +29,6 @@ interface Props {
//Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
console.log("index " + ruleIndex)
switch (parentQuestion.type) {
// case 'nonselected':
@ -45,11 +47,10 @@ export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParen
)
break;
case "date":
// return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
return <></>
case "date":
return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
break;
break;
case "number":
return <NumberInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
@ -57,7 +58,6 @@ export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParen
break;
case "page":
case "date":
return <BlockRule text={"У такого родителя может быть только один потомок"} />
break;
@ -96,7 +96,6 @@ export const BlockRule = ({ text }: { text: string }) => {
const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
console.log(parentQuestion)
return (
<Box
@ -148,15 +147,12 @@ const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQues
</Box>
<Select
multiple
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers || []}
value={parentQuestion.content?.rule?.main[ruleIndex]?.rules[0]?.answers || []}
onChange={(event: SelectChangeEvent) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value
setParentQuestion(newParentQuestion)
console.log(parentQuestion.content.rule.main[ruleIndex])
console.log(parentQuestion.content.rule.main[ruleIndex].rules[0])
console.log(parentQuestion.content.rule.main[ruleIndex].rules[0].answers)
}}
sx={{
width: "100%",
@ -209,8 +205,257 @@ const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQues
)
}
const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("md"));
return <></>
const time = dayjs(new Date)
const [firstDate, setFirstDate] = useState(time)
const [secondDate, setSecondDate] = useState(time)
const [firstTime, setFirstTime] = useState(time)
const [secondTime, setSecondTime] = useState(time)
useEffect(() => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = time
if (newParentQuestion.content.dateRange) parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = time
setParentQuestion(newParentQuestion)
}, [firstDate, secondDate, firstTime, secondTime])
// {/* //dateRange выбор диапазона дат */}
// {/* time выбор времени */}
return <Box
sx={{
padding: "20px",
margin: "20px",
borderRadius: "8px",
bgcolor: "#F2F3F7",
height: "280px",
overflow: "auto"
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
pb: "5px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
Новое условие
</Typography>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
setParentQuestion(newParentQuestion)
}}
>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
pb: "10px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
Дан ответ
</Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
(Укажите один или несколько вариантов)
</Typography>
</Box>
<Box
sx={{
backgroundColor: "#E8EAEE",
margin: "10px"
}}
>
{
parentQuestion.content.dateRange &&
<Typography sx={{ color: "#4D4D4D", p: "10px" }}>
(Начало периода)
</Typography>
}
<DatePicker
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(e) => console.log(e)}
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
p: "10px",
"& .MuiInputBase-root": {
minWidth: "325px",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "31px",
"& input": {
py: "11px",
pl: upLg ? "20px" : "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
{parentQuestion.content.time &&
<TimePicker
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
sx={{
p: "10px",
"& .MuiInputBase-root": {
minWidth: "325px",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "22px",
"& input": {
py: "11px",
pl: upLg ? "20px" : "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
}
</Box>
{parentQuestion.content.dateRange &&
<Box
sx={{
backgroundColor: "#E8EAEE",
margin: "10px"
}}
>
{
parentQuestion.content.dateRange &&
<Typography sx={{ color: "#4D4D4D", p: "10px" }}>
(Конец периода)
</Typography>
}
<DatePicker
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
onChange={() => { }}
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
p: "10px",
"& .MuiInputBase-root": {
minWidth: "325px",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "31px",
"& input": {
py: "11px",
pl: upLg ? "20px" : "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
{parentQuestion.content.time &&
<TimePicker
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
sx={{
p: "10px",
"& .MuiInputBase-root": {
minWidth: "325px",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "22px",
"& input": {
py: "11px",
pl: upLg ? "20px" : "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
}
</Box>
}
{/* <TextField
sx={{
marginTop: "20px",
width: "100%"
}}
placeholder="от"
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
if (newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] === undefined) newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = 0
setParentQuestion(newParentQuestion)
}}
/>
{parentQuestion.content.chooseRange &&
<TextField
placeholder="до"
sx={{
marginTop: "20px",
width: "100%"
}}
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
if (newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] === undefined) newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = 0
setParentQuestion(newParentQuestion)
}}
/>
} */}
</Box >
}
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
@ -264,21 +509,43 @@ const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParent
(Укажите один или несколько вариантов)
</Typography>
</Box>
{/* <TextField
<TextField
sx={{
marginTop: "20px",
width: "100%"
}}
placeholder="от"
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
if (newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] === undefined) newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = 0
setParentQuestion(newParentQuestion)
}}
/> */}
/>
{parentQuestion.content.chooseRange &&
<TextField
placeholder="до"
sx={{
marginTop: "20px",
width: "100%"
}}
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
if (newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] === undefined) newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = 0
setParentQuestion(newParentQuestion)
}}
/>
}
@ -338,7 +605,7 @@ const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQu
(Укажите текст, при совпадении с которым пользователь попадёт на этот вопрос)
</Typography>
</Box>
{/* <TextField
<TextField
sx={{
marginTop: "20px",
width: "100%"
@ -351,7 +618,7 @@ const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQu
setParentQuestion(newParentQuestion)
}}
/> */}
/>
@ -475,10 +742,10 @@ const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParent
}}
>
<Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
(Ожидаемое количество ячеек)
Ожидаемое количество ячеек(не более доступного количества)
</Typography>
</Box>
{/* <TextField
<TextField
sx={{
marginTop: "20px",
width: "100%"
@ -487,11 +754,13 @@ const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParent
onChange={(event: React.FormEvent<HTMLInputElement>) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
let valueNumber = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""))
valueNumber = valueNumber > parentQuestion.content.steps ? parentQuestion.content.steps : valueNumber
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [valueNumber]
setParentQuestion(newParentQuestion)
}}
/> */}
/>
@ -499,23 +768,3 @@ const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParent
</Box >
)
}
// {
// content: {
// rule: {
// main: [
// {
// next: "id of next question", // 2 string
// or: true // 3 boolean
// rules: [
// {
// question: "question id", string
// answers: [] // ответы на вопросы. для вариантов выбора - конкретные айдишники, для полей ввода текста - текст по полному совпадению, для ввода файла ии ещё какой подобной дичи - просто факт того что файл ввели, т.е. boolean
// }
// ]
// }
// ],
// default: ID string
// }
// }
// }

1
src/pages/Questions/BranchingPanel/QuestionsList.tsx
View File

@ -23,7 +23,6 @@ type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
export const QuestionsList = () => {
const { questions } = useQuestionsStore()
console.log(questions)
return (
<Box sx={{ padding: "15px" }}>

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

@ -1,15 +1,13 @@
import { Box, Typography, Switch, useTheme } from "@mui/material";
import { QuestionsList } from "./QuestionsList";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
type BranchingPanelProps = {
active: boolean;
setActive: (active: boolean) => void;
};
export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
export const BranchingPanel = () => {
const theme = useTheme();
const {openBranchingPanel} = useQuestionsStore.getState()
return (
<Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
<Box
@ -24,8 +22,10 @@ export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
}}
>
<Switch
value={active}
onChange={(_, value) => setTimeout(() => setActive(value), 10)}
value={openBranchingPanel}
onChange={(_, value) => {
updateOpenBranchingPanel(!value)
}}
sx={{
width: 50,
height: 30,
@ -79,7 +79,7 @@ export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
</Typography>
</Box>
</Box>
{ active && <QuestionsList /> }
{ openBranchingPanel === true && <QuestionsList /> }
</Box>
);
};

26
src/pages/Questions/BranchingQuestionsModal/index.tsx
View File

@ -1,24 +1,30 @@
import { useParams } from "react-router-dom";
import { Box, Modal, Button, Typography } from "@mui/material";
import { useQuestionsStore } from "@root/questions/store";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
interface Props {
openedModalQuestions: boolean;
setModalQuestionTargetContentId: (contentId:string) => void;
setOpenedModalQuestions: (open:boolean) => void;
setModalQuestionTargetContentId: (contentId: string) => void;
setOpenedModalQuestions: (open: boolean) => void;
setModalQuestionParentContentId: (open: string) => void;
}
export const BranchingQuestionsModal = ({ openedModalQuestions, setOpenedModalQuestions, setModalQuestionTargetContentId}:Props) => {
const quizId = Number(useParams().quizId);
export const BranchingQuestionsModal = ({
openedModalQuestions,
setOpenedModalQuestions,
setModalQuestionTargetContentId,
setModalQuestionParentContentId
}: Props) => {
const { questions } = useQuestionsStore();
const handleClose = () => {
setOpenedModalQuestions(false);
};
const typedQuestions: AnyTypedQuizQuestion[] = questions.filter(
(question) => question.type && !question.content.rule.parentId
) as AnyTypedQuizQuestion[];
return (
<Modal open={openedModalQuestions} onClose={handleClose}>
<Box
@ -37,11 +43,11 @@ export const BranchingQuestionsModal = ({ openedModalQuestions, setOpenedModalQu
}}
>
<Box sx={{ margin: "0 auto", maxWidth: "350px" }}>
{questions.filter((q:AnyQuestion) => (q.type && !q.content.rule.parentId)).map((question: AnyTypedQuizQuestion, index:number) => (
{typedQuestions.map((question) => (
<Button
key={question.content.id}
onClick={() => {
setModalQuestionTargetContentId(question.content.id)
setModalQuestionTargetContentId(question.content.id);
handleClose();
}}
sx={{

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

@ -11,7 +11,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, deleteQuestion, updateQuestion } from "@root/questions/actions";
import {copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateQuestion} from "@root/questions/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../assets/icons/questionsPage/branching";
@ -20,6 +20,9 @@ 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";
interface Props {
@ -37,11 +40,28 @@ export default function ButtonsOptions({
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
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 buttonSetting: {
icon: JSX.Element;
title: string;
@ -78,7 +98,7 @@ export default function ButtonsOptions({
),
title: "Ветвление",
value: "branching",
myFunc: openedModal,
myFunc: () => handleClickBranching(question.id, openBranchingPanel),
},
];
@ -277,7 +297,7 @@ export default function ButtonsOptions({
// deleteTimeoutId: newTimeoutId,
// });
deleteQuestion(question.id);
deleteQuestion(question.id, quiz.id);
}}
data-cy="delete-question"
>

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

@ -23,6 +23,10 @@ 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 { enqueueSnackbar } from "notistack";
import { useCurrentQuiz } from "@root/quizes/hooks";
interface Props {
@ -42,6 +46,8 @@ 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 quiz = useCurrentQuiz();
useEffect(() => {
if (question.deleteTimeoutId) {
@ -49,6 +55,22 @@ 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={{
@ -184,7 +206,7 @@ export default function ButtonsOptionsAndPict({
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
updateOpenedModalSettingsId(question.id)
handleClickBranching(question.id, openBranchingPanel)
}}
sx={{
height: "30px",
@ -316,7 +338,7 @@ export default function ButtonsOptionsAndPict({
// deleteTimeoutId: newTimeoutId,
// });
deleteQuestion(question.id);
deleteQuestion(question.id, quiz?.id);
}}
data-cy="delete-question"
>

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

@ -39,7 +39,7 @@ import SwitchQuestionsPage from "../SwitchQuestionsPage";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import TypeQuestions from "../TypeQuestions";
import { QuestionType } from "@model/question/question";
import { useCurrentQuiz } from "@root/quizes/hooks"
interface Props {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
@ -55,6 +55,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const anchorRef = useRef(null);
const quiz = useCurrentQuiz();
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
@ -237,7 +238,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
margin: "0 5px 0 10px",
}}
onClick={() => { // TODO
// const removedId = question.id;
const removedId = question.id;
// if (question.deleteTimeoutId) {
// clearTimeout(question.deleteTimeoutId);
// }
@ -253,7 +254,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
// deleteTimeoutId: newTimeoutId,
// });
deleteQuestion(question.id);
deleteQuestion(question.id, quiz.id);
}}
data-cy="delete-question"
>

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

@ -5,22 +5,19 @@ import {
import { DraggableList } from "./DraggableList";
import { BranchingPanel } from "./BranchingPanel";
import { BranchingMap } from "./BranchingMap";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
interface Props {
settingBranching: boolean;
setSettingBranching: (active: boolean) => void
}
export const QuestionSwitchWindowTool = ({settingBranching, setSettingBranching}:Props) => {
export const QuestionSwitchWindowTool = () => {
const {openBranchingPanel} = useQuestionsStore.getState()
return (
<Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
<Box sx={{ flexBasis: "796px" }}>
{settingBranching ? <BranchingMap /> : <DraggableList />}
{openBranchingPanel? <BranchingMap /> : <DraggableList />}
</Box>
<BranchingPanel
active={settingBranching}
setActive={setSettingBranching}
/>
</Box>
)

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

@ -1,4 +1,4 @@
import { useState, useEffect } from "react"
import { useState, useEffect, useLayoutEffect } from "react"
import {
Box,
Button,
@ -17,6 +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";
export default function QuestionsPage() {
@ -24,10 +25,14 @@ export default function QuestionsPage() {
const { openedModalSettingsId } = useQuestionsStore();
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const quiz = useCurrentQuiz();
const {openBranchingPanel} = useQuestionsStore.getState()
useLayoutEffect(() => {
updateOpenBranchingPanel(true)
},[])
const [settingBranching, setSettingBranching] = useState<boolean>(false);
if (!quiz) return null;
return (
<>
<Box
@ -42,7 +47,7 @@ export default function QuestionsPage() {
<Typography variant={"h5"}>Заголовок квиза</Typography>
<Button
sx={{
display: settingBranching ? "none" : "flex",
display: openBranchingPanel ? "none" : "flex",
fontSize: "16px",
lineHeight: "19px",
padding: 0,
@ -55,7 +60,7 @@ export default function QuestionsPage() {
Свернуть всё
</Button>
</Box>
<QuestionSwitchWindowTool settingBranching={settingBranching} setSettingBranching={setSettingBranching} />
<QuestionSwitchWindowTool/>
<Box
sx={{
display: "flex",

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

@ -1,9 +1,12 @@
import { useState, useEffect } from "react";
import { Box, Typography, Button, useTheme } from "@mui/material";
import { useQuizViewStore, getAnswersByQuestionId } from "@root/quizView";
import { useQuizViewStore } from "@root/quizView";
import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
import type {
AnyTypedQuizQuestion,
QuizQuestionBase,
} from "../../model/questionTypes/shared";
import { getQuestionByContentId } from "@root/questions/actions";
import { enqueueSnackbar } from "notistack";
@ -12,10 +15,7 @@ type FooterProps = {
question: QuizQuestionBase;
};
export const Footer = ({
setCurrentQuestion,
question,
}: FooterProps) => {
export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
new Set()
);
@ -24,60 +24,59 @@ export const Footer = ({
const followPreviousStep = () => {
if (question?.content.rule.parentId !== "root") {
const parent = getQuestionByContentId(question?.content.rule.parentId)
const parent = getQuestionByContentId(question?.content.rule.parentId);
if (parent) {
setCurrentQuestion(parent)
setCurrentQuestion(parent);
} else {
enqueueSnackbar("не могу получить предыдущий вопрос")
enqueueSnackbar("не могу получить предыдущий вопрос");
}
} else {
enqueueSnackbar("вы находитесь на первом вопросе")
enqueueSnackbar("вы находитесь на первом вопросе");
}
};
const followNextStep = () => {
const answers = getAnswersByQuestionId(question.content.id) || []
console.log(answers)
if (answers) {
if (answers.length) {
let readyBeNextQuestion = "";
let readyBeNextQuestion = ""
question.content.rule.main.forEach(({ next, rules }) => {
console.log({ next, rules })
console.log("[storeAnswers] ", rules[0].answers)
console.log("[answers.answer] ", [answers.answer])
let longerArray = Math.max(
rules[0].answers.length,
[answers.at(-1)?.answer].length
);
let longerArray = Math.max(rules[0].answers.length, [answers.answer].length)
for (var i = 0; i < longerArray; i++) // Цикл по всем эле­мен­там бОльшего массива
if (rules[0].answers[i] !== [answers.answer][i]) readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
})
if (readyBeNextQuestion) {
console.log("мы нашли совпадение в " + readyBeNextQuestion)
const nextQuestion = getQuestionByContentId(readyBeNextQuestion)
console.log("next question ", nextQuestion)
if (nextQuestion) {
console.log("я устанавливаю следующий вопрос " + question.title)
setCurrentQuestion(nextQuestion)
return
} else {
enqueueSnackbar("не могу получить последующий вопрос")
}
} else {
const nextQuestion = getQuestionByContentId(question.content.rule.default)
console.log("я устанавливаю дефолтный вопрос")
if (nextQuestion) {
setCurrentQuestion(nextQuestion)
} else {
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)")
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("не могу получить последующий вопрос");
}
} else {
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion) {
setCurrentQuestion(nextQuestion);
} else {
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
}
}
}
};
return (

1
src/pages/ViewPublicationPage/Question.tsx
View File

@ -44,7 +44,6 @@ export const Question = ({
}: QuestionProps) => {
const quiz = useCurrentQuiz();
const [currentQuestion, setCurrentQuestion] = useState(getQuestionByContentId(quiz?.config.haveRoot || ""))
console.log("root " + quiz?.config.haveRoot)
if (!currentQuestion) return <>не смог отобразить вопрос</>
const QuestionComponent =

2
src/pages/ViewPublicationPage/index.tsx
View File

@ -11,8 +11,6 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
export const ViewPage = () => {
const quiz = useCurrentQuiz();
const { questions } = useQuestions();
console.log(questions)
const [visualStartPage, setVisualStartPage] = useState<boolean>(!quiz?.config.noStartPage);

1
src/stores/questions.ts
View File

@ -126,7 +126,6 @@ export const updateQuestion = <T extends AnyTypedQuizQuestion>(
questionIndex: number,
recipe: (question: T) => void,
) => setProducedState(state => {
console.log("начинаю отправку fire квиза " )
const question = state.listQuestions[quizId][questionIndex] as T;
recipe(question);

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

@ -10,6 +10,8 @@ import { nanoid } from "nanoid";
import { enqueueSnackbar } from "notistack";
import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
import { RequestQueue } from "../../utils/requestQueue";
import { updateRootContentId } from "@root/quizes/actions"
import { useCurrentQuiz } from "@root/quizes/hooks"
import { QuestionsStore, useQuestionsStore } from "./store";
@ -138,10 +140,8 @@ export const updateQuestion = (
// requestTimeoutId = setTimeout(() => {
requestQueue.enqueue(async () => {
const q = useQuestionsStore.getState().questions.find(q => q.id === questionId) || useQuestionsStore.getState().questions.find(q => q.type !== null && q.content.id === questionId);
console.log("мы пытаемся найти вопрос ");
if (!q) return;
if (q.type === null) throw new Error("Cannot send update request for untyped question");
console.log(q.title);
const response = await questionApi.edit(questionToEditQuestionRequest(q));
@ -261,8 +261,13 @@ export const changeQuestionType = (
type: QuestionType,
) => {
updateQuestion(questionId, question => {
const oldId = question.content.id
const oldRule = question.content.rule
oldRule.main = []
question.type = type;
question.content = defaultQuestionByType[type].content;
question.content.id = oldId
question.content.rule = oldRule
});
};
@ -302,7 +307,8 @@ export const createTypedQuestion = async (
}
});
export const deleteQuestion = async (questionId: string) => requestQueue.enqueue(async () => {
export const deleteQuestion = async (questionId: string, quizId: string) => requestQueue.enqueue(async () => {
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!question) return;
@ -313,6 +319,10 @@ export const deleteQuestion = async (questionId: string) => requestQueue.enqueue
try {
await questionApi.delete(question.backendId);
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quizId, "")
clearRoleForAll()
}
removeQuestion(questionId);
} catch (error) {
@ -325,9 +335,11 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!question) return;
const frontId = nanoid();
if (question.type === null) {
const copiedQuestion = structuredClone(question);
copiedQuestion.id = nanoid();
copiedQuestion.id = frontId
copiedQuestion.content.id = frontId
setProducedState(state => {
state.questions.push(copiedQuestion);
@ -345,7 +357,9 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
const copiedQuestion = structuredClone(question);
copiedQuestion.backendId = newQuestionId;
copiedQuestion.id = nanoid();
copiedQuestion.id = frontId
copiedQuestion.content.id = frontId
copiedQuestion.content.rule = { main: [], parentId: "", default: "" }
setProducedState(state => {
state.questions.push(copiedQuestion);
@ -377,19 +391,30 @@ export const getQuestionById = (questionId: string | null) => {
return useQuestionsStore.getState().questions.find(q => q.id === questionId) || null;
};
export const getQuestionByContentId = (questionContentId: string | null) => {
console.log("questionContentId " + questionContentId);
if (questionContentId === null) return null;
return useQuestionsStore.getState().questions.find(q => {
if (q.type === null) return false;
console.log(q.content.id);
console.log(q.content.id === questionContentId);
return (q.content.id === questionContentId);
}) || null;
};
export const updateOpenedModalSettingsId = (id?: string) => useQuestionsStore.setState({ openedModalSettingsId: id ? id : null });
export const updateDragQuestionContentId = (contentId?: string) => {
console.log("contentId " + contentId);
useQuestionsStore.setState({ dragQuestionContentId: contentId ? contentId : null });
};
}
export const clearRoleForAll = () => {
const { questions } = useQuestionsStore.getState()
questions.forEach(question => {
if (question.type !== null && (question.content.rule.main.length > 0 || question.content.rule.default.length > 0 || question.content.rule.parentId.length > 0)) {
updateQuestion(question.content.id, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
}
});
}
export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value});

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

@ -7,12 +7,14 @@ export type QuestionsStore = {
questions: (AnyTypedQuizQuestion | UntypedQuizQuestion)[];
openedModalSettingsId: string | null;
dragQuestionContentId: string | null;
openBranchingPanel: boolean;
};
const initialState: QuestionsStore = {
questions: [],
openedModalSettingsId: null as null,
dragQuestionContentId: null,
openBranchingPanel: false,
};
export const useQuestionsStore = create<QuestionsStore>()(

6
src/stores/quizView.ts
View File

@ -33,9 +33,3 @@ export const updateAnswer = (questionId: string, answer: string) => {
useQuizViewStore.setState({ answers });
};
export const getAnswersByQuestionId = (questionId: string) => {
if (questionId === null) return null;
const answers = [...useQuizViewStore.getState().answers];
return answers.find(a => a.questionId === questionId) || null;
}

4
src/stores/quizes/actions.ts
View File

@ -10,6 +10,7 @@ import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
import { RequestQueue } from "../../utils/requestQueue";
import { QuizStore, useQuizStore } from "./store";
import { createUntypedQuestion } from "@root/questions/actions";
import { useCurrentQuiz } from "./hooks"
export const setEditQuizId = (quizId: number | null) => setProducedState(state => {
@ -178,10 +179,11 @@ export const deleteQuiz = async (quizId: string) => requestQueue.enqueue(async (
export const updateRootContentId = (quizId: string, id:string) => updateQuiz(
quizId,
quiz => {
quiz.config.haveRoot = id;
quiz.config.haveRoot = id
},
);
// TODO copy quiz
export const uploadQuizImage = async (

2
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
View File

@ -42,8 +42,6 @@ export default function Rating({ question }: Props) {
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [selectedRating, setSelectedRating] = useState<number>(0);
console.log(question);
const RatingIconComponent =
ratingIconComponentByType[question.content.form as RatingIconType];

1249
yarn.lock
View File

File diff suppressed because it is too large Load Diff