diff --git a/src/pages/Questions/QuestionPageCard.tsx b/src/pages/Questions/QuestionPageCard.tsx new file mode 100644 index 00000000..3188813a --- /dev/null +++ b/src/pages/Questions/QuestionPageCard.tsx @@ -0,0 +1,39 @@ +import {Box, IconButton, Paper} from "@mui/material"; +import CustomTextField from "@ui_kit/CustomTextField"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import OneIcon from "@icons/questionsPage/OneIcon"; +import PointsIcon from "@icons/questionsPage/PointsIcon"; +import TypeQuestions from "./TypeQuestions"; +import SwitchQuestionsPage from "./SwitchQuestionsPage"; +import React from "react"; + +interface Props { + switchState: string; + SSHC: (data: string) => void; +} + +export default function QuestionsPageCard({ SSHC, switchState }: Props) { + return ( + + + + + {" "} + {" "} + + + + + + + {switchState.length === 0 ? + + : + } + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 4f5c8207..a79ccd0e 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -1,36 +1,28 @@ import React from "react"; import Stepper from "@ui_kit/Stepper"; import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import CustomTextField from "@ui_kit/CustomTextField"; -import OneIcon from "../../assets/icons/questionsPage/OneIcon"; -import PointsIcon from "../../assets/icons/questionsPage/PointsIcon"; import AddPlus from "../../assets/icons/questionsPage/addPlus"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; -import TypeQuestions from "./TypeQuestions"; -import AnswerOptions from "./answerOptions/AnswerOptions"; -import OptionsPicture from "./OptionsPicture/OptionsPicture"; -import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture"; -import Emoji from "./Emoji/Emoji"; -import OwnTextField from "./OwnTextField/OwnTextField"; -import DropDown from "./DropDown/DropDown"; -import DataOptions from "./DataOptions/DataOptions"; -import SliderOptions from "./SliderOptions/SliderOptions"; -import UploadFile from "./UploadFile/UploadFile"; -import PageOptions from "./PageOptions/PageOptions"; -import RatingOptions from "./RatingOptions/RatingOptions"; -import SwitchQuestionsPage from "./SwitchQuestionsPage"; +import {quizStore} from "@root/quizes"; +import {useParams} from "react-router-dom"; +import QuestionsPageCard from "./QuestionPageCard"; +import {questionStore} from "@root/questions"; +import QuizCard from "../createQuize/QuizCard"; export default function QuestionsPage() { - const [activeStep, setActiveStep] = React.useState(1); + const {listQuizes, updateQuizesList} = quizStore(); + const params = Number(useParams().quizId); + const {listQuestions, updateQuestionsList, removeQuestion, createBlankQuestions} = questionStore() + const activeStep = listQuizes[params].step - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; + const handleNext = () => { + updateQuizesList(params, {step: listQuizes[params].step + 1}) + } - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; + const handleBack = () => { + let result = listQuizes[params].step - 1 + updateQuizesList(params, {step: result ? result : 1}) + }; const [switchState, setSwitchState] = React.useState(''); const SSHC = (data: string) => { @@ -51,32 +43,19 @@ export default function QuestionsPage() { }}>Свернуть всё - - - - - {" "} - {" "} - - - - + {Object.values(listQuestions).map((e, i) => ( + + ) + )} + - - {switchState.length === 0 ? - - : - } - - - {/**/} - {/* */} - {/**/} - + {createBlankQuestions() + console.log(listQuestions) + }} + > diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index f9159949..c997b6c7 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -24,7 +24,7 @@ export default function StartPage() { const handleBack = () => { let result = listQuizes[params].step - 1 - updateQuizesList(params, {step: result ? result : 0}) + updateQuizesList(params, {step: result ? result : 1}) }; return ( diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index e326d41b..3bfd5976 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -4,7 +4,6 @@ import { ButtonBase, Checkbox, FormControl, FormControlLabel, - Link, MenuItem, Select, Typography, @@ -34,6 +33,10 @@ import Extra from "./extra"; import AlignCenterIcon from "@icons/AlignCenterIcon"; import DropFav from "./dropfavicon"; +interface HandleNext { + handleNext: () => void; +} + const designTypes = [ ["standard", (color: string) => , "Standard"], ["expanded", (color: string) => , "Expanded"], @@ -44,7 +47,7 @@ const designTypes = [ type BackgroundType = "image" | "video"; type AlignType = "left" | "right" | "center"; -export default function StartPageSettings() { +export default function StartPageSettings({ handleNext }: HandleNext) { const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); const params = Number(useParams().quizId); const navigate = useNavigate() @@ -439,6 +442,7 @@ export default function StartPageSettings() { SPageClone.startpage.background.mobile = "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png" SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ" updateQuizesList(params, {config: SPageClone }) + handleNext() navigate(`/questions/${params}`) }} >Настроить вопросы diff --git a/src/pages/startPage/switchStepPages.tsx b/src/pages/startPage/switchStepPages.tsx index 66229c61..63b142d3 100755 --- a/src/pages/startPage/switchStepPages.tsx +++ b/src/pages/startPage/switchStepPages.tsx @@ -11,14 +11,14 @@ interface Props { export default function SwitchStepPages({activeStep = 1, handleNext }: Props) { switch (activeStep) { - case 0: + case 1: return (); break; - case 1: + case 2: return (); break - case 2: - return (); + case 3: + return (); break; default: return (<>) diff --git a/src/stores/questions.ts b/src/stores/questions.ts new file mode 100644 index 00000000..3fdfd8d9 --- /dev/null +++ b/src/stores/questions.ts @@ -0,0 +1,72 @@ +import {create} from "zustand"; +import {persist} from "zustand/middleware"; +import {quizStore} from "@root/quizes"; +import {useParams} from "react-router-dom"; + +interface QuestionStore { + listQuestions: { [key: number]: any}; + updateQuestionsList: (id: number, values: unknown) => void; + removeQuestion: (id: number) => void; + createBlankQuestions: () => void; +} + +export const questionStore = create()( + + persist( + (set, get) => ({ + listQuestions: { + }, + + updateQuestionsList: (id: number, values: any) => { + const state = get()["listQuestions"] || {}; + state[id] = { + ...state[id], + ...values + }; + set({listQuestions: state}); + }, + removeQuestion: (id) => { + const state = get()["listQuestions"] || {}; + + const newState = Object.entries(state).reduce((accumulator, [key, value], index, array) => { + if (key !== id.toString()) { + accumulator[key] = value; + } + return accumulator; + }, {}); + set({listQuestions: newState}); + }, + createBlankQuestions: () => { + const newListQuestions = get()["listQuestions"] || {}; + const id = getRandom(1000000, 10000000) + newListQuestions[id] = { + "id": id, + //"quiz_id": listQuizes.id, // id опроса, к которому вопрос принадлежит + "title": "", // заголовок вопроса + "description": "", // развёрнутое описание вопроса + "type": "", // button, text, select, checkbox, file, none + "required": true, + "deleted": true, + "page": 0, + "content": "", + "version": 0, + "parent_ids": [ + 0 + ], + "created_at": "", + "updated_at": "" + }; + set({listQuestions: newListQuestions}); + return id; + } + }), + { + name: "question", + } + ) +); +function getRandom(min: number, max: number) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; +} \ No newline at end of file diff --git a/src/ui_kit/Header/Header.tsx b/src/ui_kit/Header/Header.tsx index 83721b14..aeb33706 100755 --- a/src/ui_kit/Header/Header.tsx +++ b/src/ui_kit/Header/Header.tsx @@ -4,11 +4,25 @@ import EyeIcon from "@icons/EyeIcon"; import CustomAvatar from "./Avatar"; import NavMenuItem from "./NavMenuItem"; import PenaLogo from "../PenaLogo"; +import {quizStore} from "@root/quizes"; +import {useParams} from "react-router-dom"; export default function Header() { + const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); + const params = Number(useParams().quizId); + const activeStep = listQuizes[params].step const theme = useTheme(); + const handleNext = () => { + updateQuizesList(params, {step: listQuizes[params].step + 1}) + } + + const handleBack = () => { + let result = listQuizes[params].step - 1 + updateQuizesList(params, {step: result ? result : 0}) + }; + return ( - + handleBack()} + > Шаг {activeStep + 1} из {steps} + lineHeight: '14.22px'}}> Шаг {activeStep} из {steps-1} {desc}