извлечение из стора значения типа вопроса для сохранения результата
This commit is contained in:
Tamara
parent
4703f5ab83
commit
0eea50c6b6
@ -5,37 +5,37 @@ export default function CrossedEyeIcon() {
|
||||
<path
|
||||
d="M7.5 7.5625L22.5 24.0625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.5215 18.5871C16.8333 19.2175 15.9329 19.5657 14.9996 19.5621C14.2427 19.562 13.5036 19.3329 12.8794 18.9049C12.2551 18.4769 11.775 17.87 11.5022 17.164C11.2293 16.458 11.1765 15.686 11.3506 14.9494C11.5247 14.2128 11.9176 13.5462 12.4777 13.0371"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.9375 10.2441C6.1125 12.1754 4.5 15.8129 4.5 15.8129C4.5 15.8129 7.5 22.5629 15 22.5629C16.7574 22.5772 18.4929 22.1723 20.0625 21.3816"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M22.5594 19.6656C24.6031 17.8375 25.5031 15.8125 25.5031 15.8125C25.5031 15.8125 22.5031 9.06252 15.0031 9.06252C14.3529 9.06124 13.7038 9.11455 13.0625 9.2219"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.7031 12.1289C16.5006 12.28 17.2273 12.6864 17.7735 13.2868C18.3198 13.8871 18.6559 14.6489 18.7313 15.457"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -18,9 +18,9 @@ export default function HideIcon() {
|
||||
}}
|
||||
>
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24 16L19.5 20L15 16" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16" stroke="#4D4D4D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M24 16L19.5 20L15 16" stroke="#4D4D4D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="#4D4D4D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Box, IconButton, Paper} from "@mui/material";
|
||||
import {Box, Checkbox, FormControlLabel, IconButton, Paper, useTheme} from "@mui/material";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
@ -10,20 +10,25 @@ import React, {useState} from "react";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {questionStore} from "@root/questions";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CopyIcon from "@icons/questionsPage/CopyIcon";
|
||||
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
|
||||
import EyeIcon from "@icons/EyeIcon";
|
||||
import HideIcon from "@icons/questionsPage/hideIcon";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
SSHC: (data: string) => void;
|
||||
DeleteClick: () => void;
|
||||
totalIndex: number
|
||||
}
|
||||
|
||||
export default function QuestionsPageCard({ SSHC, switchState, totalIndex }: Props) {
|
||||
export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
|
||||
const theme = useTheme();
|
||||
const params = Number(useParams().quizId);
|
||||
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
const switchState = listQuestions[params][totalIndex].type
|
||||
return (
|
||||
<Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0", backgroundColor: isExpanded ? "white" : "#333647" }}>
|
||||
<Paper draggable="true" sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0", backgroundColor: isExpanded ? "white" : "#333647" }}>
|
||||
<Box
|
||||
sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
|
||||
>
|
||||
@ -39,18 +44,37 @@ export default function QuestionsPageCard({ SSHC, switchState, totalIndex }: Pro
|
||||
:<ExpandLessIcon fill="#7E2AEA"/>
|
||||
}
|
||||
</IconButton>
|
||||
<Box sx={{display: "flex"}}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
icon={<HideIcon/>}
|
||||
checkedIcon={<CrossedEyeIcon />}
|
||||
/>}
|
||||
label={""}
|
||||
sx={{
|
||||
color: theme.palette.grey2.main,
|
||||
ml: "-9px",
|
||||
mr: 0,
|
||||
userSelect: "none",
|
||||
}}
|
||||
|
||||
/>
|
||||
<IconButton><CopyIcon/></IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={DeleteClick}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<OneIcon />
|
||||
<PointsIcon />
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
|
||||
</Box>
|
||||
{isExpanded && (
|
||||
<Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
|
||||
{switchState.length === 0 ?
|
||||
<TypeQuestions switchState={switchState} SSHC={SSHC}/>
|
||||
<TypeQuestions totalIndex={totalIndex}/>
|
||||
:
|
||||
<SwitchQuestionsPage switchState={switchState} totalIndex={totalIndex}/>}
|
||||
<SwitchQuestionsPage totalIndex={totalIndex}/>}
|
||||
</Box>)
|
||||
}
|
||||
</Paper>
|
||||
|
||||
@ -23,11 +23,10 @@ export default function QuestionsPage() {
|
||||
let result = listQuizes[params].step - 1
|
||||
updateQuizesList(params, {step: result ? result : 1})
|
||||
};
|
||||
|
||||
const [switchState, setSwitchState] = React.useState('');
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data)
|
||||
}
|
||||
// const [switchState, setSwitchState] = React.useState('');
|
||||
// const SSHC = (data: string) => {
|
||||
// setSwitchState(data)
|
||||
// }
|
||||
|
||||
const theme = useTheme();
|
||||
return (
|
||||
@ -44,7 +43,7 @@ export default function QuestionsPage() {
|
||||
</Box>
|
||||
|
||||
{Object.values(listQuestions[params]).map((e, index) => (
|
||||
<QuestionsPageCard key={index} totalIndex={index} switchState={switchState} SSHC={SSHC} DeleteClick={() => removeQuestion(params,index)}/>
|
||||
<QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
|
||||
)
|
||||
)}
|
||||
|
||||
|
||||
@ -11,14 +11,17 @@ import RatingOptions from "./RatingOptions/RatingOptions";
|
||||
import Emoji from "./Emoji/Emoji";
|
||||
import DropDown from "./DropDown/DropDown";
|
||||
import UploadFile from "./UploadFile/UploadFile";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {questionStore} from "@root/questions";
|
||||
|
||||
interface Props {
|
||||
switchState: string,
|
||||
// DeleteClick: () => void;
|
||||
totalIndex: number,
|
||||
}
|
||||
|
||||
export default function SwitchQuestionsPage ({switchState = '', totalIndex }: Props) {
|
||||
export default function SwitchQuestionsPage ({totalIndex }: Props) {
|
||||
const params = Number(useParams().quizId);
|
||||
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
|
||||
const switchState = listQuestions[params][totalIndex].type
|
||||
switch (switchState) {
|
||||
case 'answer':
|
||||
return (<AnswerOptions totalIndex={totalIndex}/>);
|
||||
|
||||
@ -12,28 +12,32 @@ import Page from "../../assets/icons/questionsPage/page";
|
||||
import RatingIcon from "../../assets/icons/questionsPage/rating";
|
||||
import {Box} from "@mui/material";
|
||||
import React from "react";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {questionStore} from "@root/questions";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
SSHC: (data: string) => void;
|
||||
totalIndex: number
|
||||
}
|
||||
|
||||
export default function TypeQuestions({ SSHC, switchState }: Props) {
|
||||
export default function TypeQuestions({totalIndex }: Props) {
|
||||
const params = Number(useParams().quizId);
|
||||
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
|
||||
const switchState = listQuestions[params][totalIndex].type
|
||||
const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
|
||||
{
|
||||
icon: <Answer/>,
|
||||
title: 'Варианты ответов',
|
||||
value: 'answer',
|
||||
value: 'variant',
|
||||
},
|
||||
{
|
||||
icon: <OptionsPict/>,
|
||||
title: 'Варианты с картинками',
|
||||
value: 'answerpict',
|
||||
value: 'images',
|
||||
},
|
||||
{
|
||||
icon: <OptionsAndPict/>,
|
||||
title: 'Варианты и картинка',
|
||||
value: 'answerandpict',
|
||||
value: 'varimg',
|
||||
},
|
||||
{
|
||||
icon: <Emoji/>,
|
||||
@ -43,12 +47,12 @@ export default function TypeQuestions({ SSHC, switchState }: Props) {
|
||||
{
|
||||
icon: <Input/>,
|
||||
title: 'Своё поле для ввода',
|
||||
value: 'textfield',
|
||||
value: 'text',
|
||||
},
|
||||
{
|
||||
icon: <DropDown/>,
|
||||
title: 'Выпадающий список',
|
||||
value: 'dropdown',
|
||||
value: 'select',
|
||||
},
|
||||
{
|
||||
icon: <Date/>,
|
||||
@ -58,12 +62,12 @@ export default function TypeQuestions({ SSHC, switchState }: Props) {
|
||||
{
|
||||
icon: <Slider/>,
|
||||
title: 'Ползунок',
|
||||
value: 'slider',
|
||||
value: 'number',
|
||||
},
|
||||
{
|
||||
icon: <Download/>,
|
||||
title: 'Загрузка файла',
|
||||
value: 'uploader',
|
||||
value: 'file',
|
||||
},
|
||||
{
|
||||
icon: <Page/>,
|
||||
@ -83,8 +87,8 @@ export default function TypeQuestions({ SSHC, switchState }: Props) {
|
||||
<QuestionsMiniButton
|
||||
key={title}
|
||||
onClick={() => {
|
||||
SSHC(value);
|
||||
console.log(value)
|
||||
updateQuestionsList(params, totalIndex, {type: value})
|
||||
}}
|
||||
icon={icon}
|
||||
text={title}
|
||||
|
||||
@ -15,23 +15,6 @@ export const questionStore = create<QuestionStore>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
listQuestions: {
|
||||
// 1871018: [
|
||||
// {
|
||||
// "title": "",
|
||||
// "description": "",
|
||||
// "type": "",
|
||||
// "required": true,
|
||||
// "deleted": true,
|
||||
// "page": 0,
|
||||
// "content": "",
|
||||
// "version": 0,
|
||||
// "parent_ids": [
|
||||
// 0
|
||||
// ],
|
||||
// "created_at": "",
|
||||
// "updated_at": ""
|
||||
// },
|
||||
// ]
|
||||
},
|
||||
updateQuestionsList: (id: number, index: number, values: any) => {
|
||||
const array = get()["listQuestions"][id] || [];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user