diff --git a/src/assets/icons/questionsPage/answer.tsx b/src/assets/icons/questionsPage/answer.tsx index bce1ef92..d4e433ba 100755 --- a/src/assets/icons/questionsPage/answer.tsx +++ b/src/assets/icons/questionsPage/answer.tsx @@ -1,29 +1,31 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function Answer() { +export default function Answer({color, sx}: Props) { return ( - - - - - - + + + + + + diff --git a/src/assets/icons/questionsPage/date.tsx b/src/assets/icons/questionsPage/date.tsx index 6121ed50..33f51b64 100755 --- a/src/assets/icons/questionsPage/date.tsx +++ b/src/assets/icons/questionsPage/date.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function Date() { +export default function Date({color, sx}: Props) { return ( - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/src/assets/icons/questionsPage/download.tsx b/src/assets/icons/questionsPage/download.tsx index 342c31dc..3af8f806 100755 --- a/src/assets/icons/questionsPage/download.tsx +++ b/src/assets/icons/questionsPage/download.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function Download() { +export default function Download({color, sx}: Props) { return ( - - - - + + + + diff --git a/src/assets/icons/questionsPage/drop_down.tsx b/src/assets/icons/questionsPage/drop_down.tsx index a973a810..ff4b0eeb 100755 --- a/src/assets/icons/questionsPage/drop_down.tsx +++ b/src/assets/icons/questionsPage/drop_down.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function DropDown() { +export default function DropDown({color, sx}: Props) { return ( - - - - - - - - + + + + + + + + ); diff --git a/src/assets/icons/questionsPage/emoji.tsx b/src/assets/icons/questionsPage/emoji.tsx index 60fba818..497d464f 100755 --- a/src/assets/icons/questionsPage/emoji.tsx +++ b/src/assets/icons/questionsPage/emoji.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function Emoji() { +export default function Emoji({color, sx}: Props) { return ( - - - - + + + + ); diff --git a/src/assets/icons/questionsPage/input.tsx b/src/assets/icons/questionsPage/input.tsx index f93d388d..1188c5ce 100755 --- a/src/assets/icons/questionsPage/input.tsx +++ b/src/assets/icons/questionsPage/input.tsx @@ -1,11 +1,11 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } - -export default function Input() { +interface Props { + color: string; + sx?: SxProps +} +export default function Input({color, sx}: Props) { return ( - - - + + + ); diff --git a/src/assets/icons/questionsPage/options_and_pict.tsx b/src/assets/icons/questionsPage/options_and_pict.tsx index 37a47cc4..acdde9d5 100755 --- a/src/assets/icons/questionsPage/options_and_pict.tsx +++ b/src/assets/icons/questionsPage/options_and_pict.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function optionsAndPict() { +export default function optionsAndPict({color, sx}: Props) { return ( - - - - - - - - + + + + + + + + ); diff --git a/src/assets/icons/questionsPage/options_pict.tsx b/src/assets/icons/questionsPage/options_pict.tsx index 2f7c89fc..6e118138 100755 --- a/src/assets/icons/questionsPage/options_pict.tsx +++ b/src/assets/icons/questionsPage/options_pict.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function optionsPict() { +export default function optionsPict({color, sx}: Props) { return ( - - - - + + + + ); diff --git a/src/assets/icons/questionsPage/page.tsx b/src/assets/icons/questionsPage/page.tsx index ac08c3f4..09a9b03b 100755 --- a/src/assets/icons/questionsPage/page.tsx +++ b/src/assets/icons/questionsPage/page.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function Page() { +export default function Page({color, sx}: Props) { return ( - - - - - - - + + + + + + + ); diff --git a/src/assets/icons/questionsPage/rating.tsx b/src/assets/icons/questionsPage/rating.tsx index 696f92c0..43c6d5fd 100755 --- a/src/assets/icons/questionsPage/rating.tsx +++ b/src/assets/icons/questionsPage/rating.tsx @@ -1,11 +1,11 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } - -export default function Rating() { +interface Props { + color: string; + sx?: SxProps +} +export default function Rating({color, sx}: Props) { return ( - + ); diff --git a/src/assets/icons/questionsPage/slider.tsx b/src/assets/icons/questionsPage/slider.tsx index cb942198..4dbaa9b6 100755 --- a/src/assets/icons/questionsPage/slider.tsx +++ b/src/assets/icons/questionsPage/slider.tsx @@ -1,11 +1,12 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; + sx?: SxProps +} -export default function Slider() { +export default function Slider({color, sx}: Props) { return ( - - + + ); diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx index 13d20e0f..b3653b87 100644 --- a/src/pages/ContactFormPage/ContactFormPage.tsx +++ b/src/pages/ContactFormPage/ContactFormPage.tsx @@ -12,17 +12,20 @@ import SwitchContactForm from "./switchContactForm"; import DrawerNewField from "./DrawerParent"; import WindowNewField from "./NewField/WindowNewField"; import WindowMessengers from "./Massengers/WindowMessengers"; +import {quizStore} from "@root/quizes"; +import {useParams} from "react-router-dom"; export default function ContactFormPage() { - + const {listQuizes, updateQuizesList} = quizStore(); + const params = Number(useParams().quizId); + const handleNext = () => { + updateQuizesList(params, {step: listQuizes[params].step + 1}) + } const [activeStep, setActiveStep] = React.useState(4); - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; const handleBack = () => { setActiveStep((prevActiveStep) => prevActiveStep - 1); @@ -116,7 +119,7 @@ export default function ContactFormPage() { - diff --git a/src/pages/Questions/QuestionPageCard.tsx b/src/pages/Questions/QuestionPageCard.tsx index 6e501cc7..240c55fa 100644 --- a/src/pages/Questions/QuestionPageCard.tsx +++ b/src/pages/Questions/QuestionPageCard.tsx @@ -1,4 +1,14 @@ -import {Box, Checkbox, FormControlLabel, IconButton, Paper, useTheme} from "@mui/material"; +import { + Box, + Checkbox, + FormControl, + FormControlLabel, + IconButton, + InputAdornment, + Paper, + TextField, + useTheme +} from "@mui/material"; import CustomTextField from "@ui_kit/CustomTextField"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; @@ -13,6 +23,17 @@ import {questionStore} from "@root/questions"; import CopyIcon from "@icons/questionsPage/CopyIcon"; import CrossedEyeIcon from "@icons/CrossedEyeIcon"; import HideIcon from "@icons/questionsPage/hideIcon"; +import Answer from "@icons/questionsPage/answer"; +import OptionsPict from "@icons/questionsPage/options_pict"; +import OptionsAndPict from "@icons/questionsPage/options_and_pict"; +import Emoji from "@icons/questionsPage/emoji"; +import Input from "@icons/questionsPage/input"; +import DropDown from "@icons/questionsPage/drop_down"; +import Date from "@icons/questionsPage/date"; +import Slider from "@icons/questionsPage/slider"; +import Download from "@icons/questionsPage/download"; +import Page from "@icons/questionsPage/page"; +import RatingIcon from "@icons/questionsPage/rating"; interface Props { DeleteClick: () => void; @@ -33,6 +54,45 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) { const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() const [isExpanded, setIsExpanded] = useState(false); const switchState = listQuestions[params][totalIndex].type + const IconAndrom = () => { + switch (switchState) { + case 'variant': + return (); + break; + case 'images': + return (); + break + case 'varimg': + return (); + break; + case 'emoji': + return (); + break; + case 'text': + return (); + break; + case 'select': + return (); + break; + case 'date': + return (); + break; + case 'number': + return (); + break; + case 'file': + return (); + break; + case 'page': + return (); + break; + case 'rating': + return (); + break; + default: + return (<>) + } + } return ( - {updateQuestionsList(params, totalIndex, {title: e.target.value}) - console.log(listQuestions[params][totalIndex].title) - } - }/> + + { + updateQuestionsList(params, totalIndex, {title: e.target.value}) + console.log(listQuestions[params][totalIndex].title) + }} + InputProps={{ + startAdornment: ( + + {IconAndrom()} + + ), + }} + sx={{ + "& .MuiInputBase-root": { + color: isExpanded ? "#9A9AAF" : "white", + backgroundColor: isExpanded ? theme.palette.background.default : "transparent", + height: "48px", + borderRadius: "10px", + + }, + }} + inputProps={{ + + sx: { + borderRadius: "10px", + fontSize: "18px", + lineHeight: "21px", + py: 0, + paddingLeft: switchState.length === 0 ? 0 : "18px" + } + }} + /> + + + setIsExpanded((prev) => !prev)}> {" "} {isExpanded ? diff --git a/src/pages/Questions/TypeQuestions.tsx b/src/pages/Questions/TypeQuestions.tsx index b0c443de..06880321 100755 --- a/src/pages/Questions/TypeQuestions.tsx +++ b/src/pages/Questions/TypeQuestions.tsx @@ -10,7 +10,7 @@ import Slider from "../../assets/icons/questionsPage/slider"; import Download from "../../assets/icons/questionsPage/download"; import Page from "../../assets/icons/questionsPage/page"; import RatingIcon from "../../assets/icons/questionsPage/rating"; -import {Box} from "@mui/material"; +import {Box, useTheme} from "@mui/material"; import React from "react"; import {useParams} from "react-router-dom"; import {questionStore} from "@root/questions"; @@ -20,62 +20,63 @@ interface Props { } export default function TypeQuestions({totalIndex }: Props) { + const theme = useTheme() 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: , + icon: , title: 'Варианты ответов', value: 'variant', }, { - icon: , + icon: , title: 'Варианты с картинками', value: 'images', }, { - icon: , + icon: , title: 'Варианты и картинка', value: 'varimg', }, { - icon: , + icon: , title: 'Эмоджи', value: 'emoji', }, { - icon: , + icon: , title: 'Своё поле для ввода', value: 'text', }, { - icon: , + icon: , title: 'Выпадающий список', value: 'select', }, { - icon: , + icon: , title: 'Дата', value: 'date', }, { - icon: , + icon: , title: 'Ползунок', value: 'number', }, { - icon: , + icon: , title: 'Загрузка файла', value: 'file', }, { - icon: , + icon: , title: 'Страница', value: 'page', }, { - icon: , + icon: , title: 'Рейтинг', value: 'rating', }, diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index 96e7e79d..868a816e 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -3,6 +3,11 @@ import React from "react"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import SwitchAnswerOptions from "./switchAnswerOptions"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; +import QuestionsPageCard from "../QuestionPageCard"; +import {useParams} from "react-router-dom"; +import {questionStore} from "@root/questions"; +import {answerStore} from "@root/answer"; +import CustomTextField from "@ui_kit/CustomTextField"; interface Props { @@ -11,6 +16,9 @@ interface Props { export default function AnswerOptions({totalIndex}: Props) { + const params = Number(useParams().quizId); + const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() + const {listAnswer, updateAnswerList, createAnswer, removeAnswer} = answerStore() const theme = useTheme(); const [switchState, setSwitchState] = React.useState('setting'); const SSHC = (data: string) => { @@ -36,9 +44,9 @@ export default function AnswerOptions({totalIndex}: Props) { component="button" variant="body2" sx={{color: theme.palette.brightPurple.main}} - // onClick={() => { - // console.info("I'm a button."); - // }} + onClick={() => { + createAnswer(params, totalIndex) + }} > Добавьте ответ @@ -52,6 +60,18 @@ export default function AnswerOptions({totalIndex}: Props) { >или нажмите Enter + {/*{listAnswer.length === 0 ?*/} + {/*<>*/} + {/* :*/} + {/* */} + {/* {Object.values(listAnswer[params][totalIndex]).map((e, index) => (*/} + {/* */} + {/* )*/} + {/* )}*/} + {/* */} + + {/*}*/} + diff --git a/src/pages/Result/Result.tsx b/src/pages/Result/Result.tsx index 5d461b2c..88e38081 100644 --- a/src/pages/Result/Result.tsx +++ b/src/pages/Result/Result.tsx @@ -1,12 +1,18 @@ -import { Link } from "react-router-dom"; +import {Link, useParams} from "react-router-dom"; import {Box, Button, useTheme} from "@mui/material"; import CreationFullCard from "./CreationFullCard"; import Info from "../../assets/icons/Info"; import image from "../../assets/Rectangle 110.png"; +import {quizStore} from "@root/quizes"; export const Result = () => { + const {listQuizes, updateQuizesList} = quizStore(); + const params = Number(useParams().quizId); + const handleNext = () => { + updateQuizesList(params, {step: listQuizes[params].step + 1}) + } const theme = useTheme(); return ( @@ -16,17 +22,16 @@ export const Result = () => { image={image} /> - - diff --git a/src/stores/answer.ts b/src/stores/answer.ts new file mode 100644 index 00000000..06fef0e9 --- /dev/null +++ b/src/stores/answer.ts @@ -0,0 +1,68 @@ +import {create} from "zustand"; +import {persist} from "zustand/middleware"; + +interface AnswerStore { + listAnswer: any; + updateAnswerList: (id: number, index: number, values: unknown) => void; + removeAnswer: any; + createAnswer: (id: number, indexQ: number) => void; +} + +export const answerStore = create()( + + persist( + (set, get) => ({ + listAnswer: { + 2537998: [ + [{ + variants: + [ + "" + ], + own: true, + multi: true + }] + ] + }, + updateAnswerList: (id: number, index: number, values: any) => { + const array = get()["listAnswer"][id] || []; + array[index] = { + ...array[index], + ...values + }; + const state = get()["listAnswer"] || {}; + state[id] = array + set({listAnswer: state}); + }, + + createAnswer:(id: number, indexQ: number) => { + const array = get()["listAnswer"][id][indexQ] || []; + array.push( + { + variants: + [ + "" + ], + own: true, + multi: true + } + ) + const state = get()["listAnswer"] || {}; + state[id][indexQ] = array + set({listAnswer: state}); + }, + + removeAnswer: (id:number, index: number) => { + const array = get()["listAnswer"][id] || []; + array.splice(index, 1) + const state = get()["listAnswer"] || {}; + state[id] = array + set({listAnswer: state}); + }, + }), + + { + name: "answer", + } + ) +); \ No newline at end of file diff --git a/src/stores/questions.ts b/src/stores/questions.ts index aa35d683..98404e3d 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -1,7 +1,5 @@ import {create} from "zustand"; import {persist} from "zustand/middleware"; -import {quizStore} from "@root/quizes"; -import {useParams} from "react-router-dom"; interface QuestionStore { listQuestions: any; diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx index f8edb205..c861f9f6 100755 --- a/src/ui_kit/switchStepPages.tsx +++ b/src/ui_kit/switchStepPages.tsx @@ -4,6 +4,9 @@ import Steptwo from "../pages/startPage/steptwo"; import StartPageSettings from "../pages/startPage/StartPageSettings"; import QuestionsPage from "../pages/Questions/QuestionsPage"; import ContactFormPage from "../pages/ContactFormPage/ContactFormPage"; +import InstallQuiz from "../pages/InstallQuiz/InstallQuiz"; +import {Result} from "../pages/Result/Result"; +import {Setting} from "../pages/Result/Setting"; interface Props { activeStep: number, @@ -26,10 +29,16 @@ export default function SwitchStepPages({activeStep = 1, handleNext }: Props) { return (); break; case 5: - return (); + return (); break; case 6: - return (); + return (); + break; + case 7: + return (); + break; + case 8: + return (); break; default: return (<>)