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-04 23:13:08 +03:00
parent 12bb0e7bfe
commit 6e1b7c080c
5 changed files with 285 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
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 { AnyQuizQuestion } 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";
@ -20,7 +23,7 @@ interface Props {
parentQuestion: AnyQuizQuestion;
targetQuestion: AnyQuizQuestion;
ruleIndex: number;
setParentQuestion: (q:AnyQuizQuestion) => void;
setParentQuestion: (q: AnyQuizQuestion) => void;
}
@ -45,11 +48,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 +59,6 @@ export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParen
break;
case "page":
case "date":
return <BlockRule text={"У такого родителя может быть только один потомок"} />
break;
@ -209,8 +210,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();
@ -281,24 +531,24 @@ const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParent
}}
/>
{parentQuestion.content.chooseRange &&
<TextField
placeholder="до"
sx={{
marginTop: "20px",
width: "100%"
}}
{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>) => {
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)
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)
}}
/>
}}
/>
}
@ -522,24 +772,4 @@ 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
// }
// }
// }
}

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

@ -24,7 +24,7 @@ export const BranchingPanel = () => {
<Switch
value={openBranchingPanel}
onChange={(_, value) => {
setTimeout(() => updateOpenBranchingPanel(!value), 10)
updateOpenBranchingPanel(!value)
console.log(openBranchingPanel)
}}
sx={{

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

@ -48,6 +48,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
};
const handleClickBranching = (_, value) => {
console.log(value)
const parentId = question.content.rule.parentId
if (parentId.length === 0 ){
return enqueueSnackbar("Вопрос не учавствует в ветвлении")
@ -56,7 +57,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
return enqueueSnackbar("У корня нет условий ветвления")
}
if (parentId.length !== 0) {
setTimeout(() => updateOpenBranchingPanel(!value), 10)
updateOpenBranchingPanel(!value)
openedModal()
}

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

@ -56,6 +56,7 @@ export default function ButtonsOptionsAndPict({
}, [question]);
const handleClickBranching = (_, value) => {
const parentId = question.content.rule.parentId
if (parentId.length === 0 ) {
return enqueueSnackbar("Вопрос не учавствует в ветвлении")
@ -64,7 +65,7 @@ export default function ButtonsOptionsAndPict({
return enqueueSnackbar("У корня нет условий ветвления")
}
if (parentId.length !== 0) {
setTimeout(() => updateOpenBranchingPanel(!value), 10)
updateOpenBranchingPanel(!value)
updateOpenedModalSettingsId(question.id)
}

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

@ -262,9 +262,11 @@ export const changeQuestionType = (
) => {
updateQuestion(questionId, question => {
const oldId = question.content.id
const oldMain = question.content.rule.main
question.type = type;
question.content = defaultQuestionByType[type].content;
question.content.id = oldId
question.content.rule.main = oldMain
});
};
@ -355,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);