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

feat: questions store new fields

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-24 12:09:43 +03:00
parent e788d031a5
commit 569661cd5e
2 changed files with 83 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -1,61 +1,84 @@
import {Box, Typography} from "@mui/material"; import { Box, Typography } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import * as React from "react"; import * as React from "react";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import {useParams} from "react-router-dom"; import { useParams } from "react-router-dom";
import {questionStore, updateQuestionsList} from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
interface Props { interface Props {
totalIndex: number, totalIndex: number;
} }
export default function ResponseSettings({totalIndex}: Props) { export default function ResponseSettings({ totalIndex }: Props) {
const params = Number(useParams().quizId); const params = Number(useParams().quizId);
const {listQuestions} = questionStore() const { listQuestions } = questionStore();
const [checked, setChecked] = React.useState([true, false]); const [checked, setChecked] = React.useState([true, false]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked([checked[0], event.target.checked, ]); setChecked([checked[0], event.target.checked]);
}; };
return ( return (
<Box sx={{display: 'flex'}}> <Box sx={{ display: "flex" }}>
<Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}> <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
<Typography>Настройки ответов</Typography> <Typography>Настройки ответов</Typography>
<CustomCheckbox label={'Длинный текстовый ответ'}/> <CustomCheckbox
<CustomCheckbox label={'Можно несколько'} label={"Длинный текстовый ответ"}
checked={listQuestions[totalIndex].content.multi} checked={listQuestions[totalIndex].content.large}
handleChange={(e) => { handleChange={(e) => {
let clonContent = listQuestions[totalIndex].content let clonContent = listQuestions[totalIndex].content;
clonContent.multi = e.target.checked clonContent.large = e.target.checked;
updateQuestionsList( totalIndex, {content: clonContent}) updateQuestionsList(totalIndex, { content: clonContent });
}} }}
/> />
<CustomCheckbox label={'Вариант "свой ответ"'} <CustomCheckbox
checked={listQuestions[totalIndex].content.own} label={"Можно несколько"}
handleChange={(e) => { checked={listQuestions[totalIndex].content.multi}
let clonContent = listQuestions[totalIndex].content handleChange={(e) => {
clonContent.own = e.target.checked let clonContent = listQuestions[totalIndex].content;
updateQuestionsList(totalIndex, {content: clonContent}) clonContent.multi = e.target.checked;
}} updateQuestionsList(totalIndex, { content: clonContent });
/> }}
</Box> />
<Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}> <CustomCheckbox
<Typography>Настройки вопросов</Typography> label={'Вариант "свой ответ"'}
<CustomCheckbox label={'Необязательный вопрос'} checked={!(listQuestions[totalIndex].required)} checked={listQuestions[totalIndex].content.own}
handleChange={(e) => { handleChange={(e) => {
updateQuestionsList(totalIndex, {required: !e.target.checked}) let clonContent = listQuestions[totalIndex].content;
console.log(listQuestions[totalIndex].required)}}/> clonContent.own = e.target.checked;
<Box sx={{display: "flex"}}> updateQuestionsList(totalIndex, { content: clonContent });
<CustomCheckbox label={'Внутреннее название вопроса'} checked={checked[1]} handleChange={handleChange}/> <InfoIcon /> }}
</Box> />
{checked[1] ? </Box>
<CustomTextField placeholder={"Развёрнутое описание вопроса"} text={listQuestions[totalIndex].description} <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
onChange={e => updateQuestionsList(totalIndex, {description: e.target.value})}/> <Typography>Настройки вопросов</Typography>
: <CustomCheckbox
<></> label={"Необязательный вопрос"}
} checked={!listQuestions[totalIndex].required}
</Box> handleChange={(e) => {
updateQuestionsList(totalIndex, { required: !e.target.checked });
}}
/>
<Box sx={{ display: "flex" }}>
<CustomCheckbox
label={"Внутреннее название вопроса"}
checked={checked[1]}
handleChange={handleChange}
/>{" "}
<InfoIcon />
</Box> </Box>
); {checked[1] && (
}; <CustomTextField
placeholder={"Развёрнутое описание вопроса"}
text={listQuestions[totalIndex].description}
onChange={(e) => {
let clonContent = listQuestions[totalIndex].content;
clonContent.innerName = e.target.value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
)}
</Box>
</Box>
);
}

12
src/stores/questions.ts
View File

@ -17,13 +17,16 @@ export interface Question {
page: number; page: number;
content: { content: {
variants: Variants[]; variants: Variants[];
own: boolean; large: boolean;
multi: boolean; multi: boolean;
own: boolean;
innerName: string;
}; };
version: number; version: number;
parent_ids: number[]; parent_ids: number[];
created_at: string; created_at: string;
updated_at: string; updated_at: string;
expanded: boolean;
} }
interface QuestionStore { interface QuestionStore {
@ -74,13 +77,16 @@ export const createQuestion = (id: number) => {
hints: "", hints: "",
}, },
], ],
own: true, large: false,
multi: true, multi: false,
own: false,
innerName: "",
}, },
version: 0, version: 0,
parent_ids: [0], parent_ids: [0],
created_at: "", created_at: "",
updated_at: "", updated_at: "",
expanded: false,
}); });
questionStore.setState({ listQuestions: newData }); questionStore.setState({ listQuestions: newData });
}; };