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

отображение модалки ветвления

Browse Source
This commit is contained in:
Nastya 2023-12-03 05:16:53 +03:00
parent 4623dfd2ee
commit 542159e5b1
6 changed files with 88 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootInfo } from "@root/quizes/actions"
import { AnyQuizQuestion } from "@model/questionTypes/shared"
import { useQuestionsStore } from "@root/questions/store";
import { cleardragQuestionContentId, getQuestionById, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions";
import { cleardragQuestionContentId, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions";
import { storeToNodes } from "./helper";
@ -565,10 +565,8 @@ export const CsComponent = ({
gearElement.style.zIndex = "1"
gearsContainer.current?.appendChild(gearElement);
gearElement.addEventListener("mouseup", (e) => {
console.log("шестерня")
// setOpenedModalSettings(
// findQuestionById(quizId, node.id().split(" ").pop() || "").index
// );
console.log(item.id())
updateOpenedModalSettingsId(item.id())
});
return gearElement;

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

@ -1,4 +1,4 @@
import { useState, useRef, useEffect } from "react";
import { useState, useRef, useEffect, useLayoutEffect } from "react";
import {
Box,
Button,
@ -22,7 +22,7 @@ import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { TypeSwitch, BlockRule } from "./Settings";
import { getQuestionById, updateOpenedModalSettingsId, updateQuestion } from "@root/questions/actions";
import { getQuestionById, getQuestionByContentId, updateOpenedModalSettingsId, updateQuestion } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { enqueueSnackbar } from "notistack";
@ -30,17 +30,38 @@ import { enqueueSnackbar } from "notistack";
export default function BranchingQuestions() {
const theme = useTheme();
const { openedModalSettingsId } = useQuestionsStore();
const [targetQuestion, setTargetQuestion] = useState<AnyQuizQuestion | null>(getQuestionById(openedModalSettingsId))
const [parentQuestion, setParentQuestion] = useState<AnyQuizQuestion | null>(getQuestionById(openedModalSettingsId))
const [targetQuestion, setTargetQuestion] = useState<AnyQuizQuestion | null>(getQuestionById(openedModalSettingsId) || getQuestionByContentId(openedModalSettingsId))
console.log(targetQuestion)
const [parentQuestion, setParentQuestion] = useState<AnyQuizQuestion | 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 (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)
}
handleClose()
}
@ -100,14 +121,14 @@ export default function BranchingQuestions() {
{
parentQuestion.content.rule.main.length ?
parentQuestion.content.rule.main.map((e: any, i: number) => {
if (e.next === targetQuestion.id) {
return <TypeSwitch key={i} targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={i} />
if (e.next === targetQuestion.content.id) {
return <TypeSwitch key={i} setParentQuestion={setParentQuestion} targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={i} />
} else {
<></>
}
})
:
<TypeSwitch targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={0} />
<TypeSwitch targetQuestion={targetQuestion} setParentQuestion={setParentQuestion} parentQuestion={parentQuestion} ruleIndex={0} />
}
</Box>
@ -128,8 +149,8 @@ export default function BranchingQuestions() {
cursor: "pointer"
}}
onClick={() => {
const mutate = parentQuestion
mutate.content.rule.main.push(createBranchingRuleMain(targetQuestion.id, parentQuestion.id))
const mutate = JSON.parse(JSON.stringify(parentQuestion))
mutate.content.rule.main.push(createBranchingRuleMain(targetQuestion.content.id, parentQuestion.content.id))
setParentQuestion(mutate)
}}
>
@ -145,7 +166,7 @@ export default function BranchingQuestions() {
checked={parentQuestion.content.rule.default === targetQuestion.id}
onClick={() => {
const mutate = parentQuestion
let mutate = JSON.parse(JSON.stringify(parentQuestion))
mutate.content.rule.default = targetQuestion.id
setParentQuestion(mutate)
}}
@ -165,7 +186,7 @@ export default function BranchingQuestions() {
<Button
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={handleClose}
onClick={saveData}
>
Готово
</Button>

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

@ -20,11 +20,13 @@ interface Props {
parentQuestion: AnyQuizQuestion;
targetQuestion: AnyQuizQuestion;
ruleIndex: number;
setParentQuestion: (q:AnyQuizQuestion) => void;
}
//Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex }: Props) => {
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
console.log("index " + ruleIndex)
switch (parentQuestion.type) {
// case 'nonselected':
@ -38,19 +40,19 @@ export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex }: Props)
case "select":
return (parentQuestion.content.variants === undefined ? <BlockRule text={"У родителя нет вариантов"} /> :
<SelectorType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
<SelectorType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
//Реализован
)
break;
case "date":
// return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
// return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
return <></>
break;
case "number":
return <NumberInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
return <NumberInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
//Реализован
break;
@ -60,17 +62,17 @@ export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex }: Props)
break;
case "text":
return <TextInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
return <TextInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
//Реализован
break;
case "file":
return <FileInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
return <FileInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
//Реализован
break;
case "rating":
return <RatingInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
return <RatingInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
//Реализован
break;
@ -91,9 +93,10 @@ export const BlockRule = ({ text }: { text: string }) => {
>{text}</Typography>
)
}
const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
console.log(parentQuestion)
return (
<Box
@ -120,9 +123,9 @@ const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQue
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
const newParentQuestion = { ...parentQuestion }
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
setParentQuestion(newParentQuestion)
}}
>
<DeleteIcon color={"#4D4D4D"} />
@ -145,13 +148,15 @@ const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQue
</Box>
<Select
multiple
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers}
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers || []}
onChange={(event: SelectChangeEvent) => {
const newParentQuestion = { ...parentQuestion }
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
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%",
@ -177,9 +182,9 @@ const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQue
aria-labelledby="demo-controlled-radio-buttons-group"
value={parentQuestion.content.rule.main[ruleIndex].or}
onChange={(_, value) => {
const newParentQuestion = { ...parentQuestion }
parentQuestion.content.rule.main[ruleIndex].or = value
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].or = value
setParentQuestion(newParentQuestion)
}}
>
{CONDITIONS.map((condition, totalIndex) => (
@ -203,11 +208,11 @@ const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQue
</Box >
)
}
const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
return <></>
}
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
@ -236,9 +241,9 @@ const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { paren
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
const newParentQuestion = { ...parentQuestion }
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
setParentQuestion(newParentQuestion)
}}
>
<DeleteIcon color={"#4D4D4D"} />
@ -268,9 +273,9 @@ const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { paren
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
const newParentQuestion = { ...parentQuestion }
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
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, "")]
setParentQuestion(newParentQuestion)
}}
/> */}
@ -281,7 +286,7 @@ const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { paren
</Box >
)
}
const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
@ -310,9 +315,9 @@ const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQ
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
const newParentQuestion = { ...parentQuestion }
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
setParentQuestion(newParentQuestion)
}}
>
<DeleteIcon color={"#4D4D4D"} />
@ -341,9 +346,9 @@ const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQ
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
const newParentQuestion = { ...parentQuestion }
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value]
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
setParentQuestion(newParentQuestion)
}}
/> */}
@ -354,7 +359,7 @@ const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQ
</Box >
)
}
const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
@ -383,9 +388,9 @@ const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQ
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
const newParentQuestion = { ...parentQuestion }
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
setParentQuestion(newParentQuestion)
}}
>
<DeleteIcon color={"#4D4D4D"} />
@ -411,9 +416,9 @@ const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQ
checked={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
const newParentQuestion = { ...parentQuestion }
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).checked]
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).checked]
setParentQuestion(newParentQuestion)
}}
/>} label="да" />
@ -424,7 +429,7 @@ const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQ
</Box >
)
}
const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
@ -453,9 +458,9 @@ const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { paren
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
const newParentQuestion = { ...parentQuestion }
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
newParentQuestion.content.rule.main.splice(ruleIndex, 1)
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
setParentQuestion(newParentQuestion)
}}
>
<DeleteIcon color={"#4D4D4D"} />
@ -481,9 +486,9 @@ const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { paren
value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
const newParentQuestion = { ...parentQuestion }
parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
//updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
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, "")]
setParentQuestion(newParentQuestion)
}}
/> */}

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

@ -19,6 +19,7 @@ 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";
interface Props {
@ -38,9 +39,7 @@ export default function ButtonsOptions({
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
const openedModal = () => {
updateQuestion(question.id, question => {
question.openedModalSettings = true;
});
updateOpenedModalSettingsId(question.id)
};
const buttonSetting: {

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

@ -22,6 +22,7 @@ import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
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";
interface Props {
@ -183,10 +184,7 @@ export default function ButtonsOptionsAndPict({
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
SSHC("branching");
updateQuestion(question.id, question => {
question.openedModalSettings = true;
});
updateOpenedModalSettingsId(question.id)
}}
sx={{
height: "30px",

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

@ -101,7 +101,7 @@ export default function QuestionsPage() {
</Box>
</Box>
{createPortal(<QuizPreview />, document.body)}
{/* {openedModalSettingsId !== null && <BranchingQuestions/>} */}
{openedModalSettingsId !== null && <BranchingQuestions/>}
</>
);
}