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