diff --git a/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx b/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx new file mode 100644 index 00000000..90e10705 --- /dev/null +++ b/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx @@ -0,0 +1,127 @@ +import { useState } from "react"; +import { useParams } from "react-router-dom"; +import { + Box, + Typography, + Popper, + Grow, + Paper, + MenuList, + MenuItem, + ClickAwayListener, + Modal, + Button, +} from "@mui/material"; + +import { + questionStore, + updateQuestionsList, + DEFAULT_QUESTION, +} from "@root/questions"; +import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions"; + +import type { RefObject } from "react"; + +type ChooseAnswerModalProps = { + open: boolean; + onClose: () => void; + anchorRef: RefObject; + totalIndex: number; +}; + +export const ChooseAnswerModal = ({ + open, + onClose, + anchorRef, + totalIndex, +}: ChooseAnswerModalProps) => { + const [openModal, setOpenModal] = useState(false); + const [selectedValue, setSelectedValue] = useState(""); + const quizId = Number(useParams().quizId); + const { listQuestions } = questionStore(); + + return ( + <> + + {({ TransitionProps }) => ( + + + + + {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => ( + { + onClose(); + setOpenModal(true); + setSelectedValue(value); + }} + sx={{ display: "flex", gap: "10px" }} + > + {icon} + {title} + + ))} + + + + + )} + + setOpenModal(false)}> + + + Все настройки, кроме заголовка вопроса будут сброшены + + + + + + + + + ); +}; diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index b052b6e3..dc4e2995 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useRef } from "react"; import { useParams } from "react-router-dom"; import { Box, @@ -13,6 +13,8 @@ import { useTheme, } from "@mui/material"; import { useDebouncedCallback } from "use-debounce"; + +import { ChooseAnswerModal } from "./ChooseAnswerModal"; import TypeQuestions from "../TypeQuestions"; import SwitchQuestionsPage from "../SwitchQuestionsPage"; @@ -142,6 +144,7 @@ export default function QuestionsPageCard({ isDragging, }: Props) { const [plusVisible, setPlusVisible] = useState(false); + const [open, setOpen] = useState(false); const quizId = Number(useParams().quizId); const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); @@ -149,6 +152,7 @@ export default function QuestionsPageCard({ const { listQuestions } = questionStore(); const { type: switchState, expanded: isExpanded } = listQuestions[quizId][totalIndex]; + const anchorRef = useRef(null); const debounced = useDebouncedCallback((title) => { updateQuestionsList(quizId, totalIndex, { title }); }, 1000); @@ -188,9 +192,22 @@ export default function QuestionsPageCard({ onChange={({ target }) => debounced(target.value)} InputProps={{ startAdornment: ( - - {IconAndrom(isExpanded, switchState)} - + + setOpen((isOpened) => !isOpened)} + > + {IconAndrom(isExpanded, switchState)} + + setOpen(false)} + anchorRef={anchorRef} + totalIndex={totalIndex} + /> + ), }} sx={{ diff --git a/src/pages/Questions/TypeQuestions.tsx b/src/pages/Questions/TypeQuestions.tsx index 6d5b7c9e..74c28e4a 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, useTheme } from "@mui/material"; +import { Box } from "@mui/material"; import React from "react"; import { useParams } from "react-router-dom"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -19,72 +19,75 @@ interface Props { totalIndex: number; } +type ButtonTypeQuestion = { + icon: JSX.Element; + title: string; + value: string; +}; + +export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [ + { + icon: , + title: "Варианты ответов", + value: "variant", + }, + { + icon: , + title: "Варианты с картинками", + value: "images", + }, + { + icon: , + title: "Варианты и картинка", + value: "varimg", + }, + { + icon: , + title: "Эмоджи", + value: "emoji", + }, + { + icon: , + title: "Своё поле для ввода", + value: "text", + }, + { + icon: , + title: "Выпадающий список", + value: "select", + }, + { + icon: , + title: "Дата", + value: "date", + }, + { + icon: , + title: "Ползунок", + value: "number", + }, + { + icon: , + title: "Загрузка файла", + value: "file", + }, + { + icon: , + title: "Страница", + value: "page", + }, + { + icon: , + title: "Рейтинг", + value: "rating", + }, +]; + export default function TypeQuestions({ totalIndex }: Props) { - const theme = useTheme(); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const switchState = listQuestions[quizId][totalIndex].type; - const buttonTypeQuestions: { - icon: JSX.Element; - title: string; - value: string; - }[] = [ - { - icon: , - title: "Варианты ответов", - value: "variant", - }, - { - icon: , - title: "Варианты с картинками", - value: "images", - }, - { - icon: , - title: "Варианты и картинка", - value: "varimg", - }, - { - icon: , - title: "Эмоджи", - value: "emoji", - }, - { - icon: , - title: "Своё поле для ввода", - value: "text", - }, - { - icon: , - title: "Выпадающий список", - value: "select", - }, - { - icon: , - title: "Дата", - value: "date", - }, - { - icon: , - title: "Ползунок", - value: "number", - }, - { - icon: , - title: "Загрузка файла", - value: "file", - }, - { - icon: , - title: "Страница", - value: "page", - }, - { - icon: , - title: "Рейтинг", - value: "rating", - }, - ]; + return ( - {buttonTypeQuestions.map(({ icon, title, value }) => ( + {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => ( { diff --git a/src/stores/questions.ts b/src/stores/questions.ts index c310ef09..89cda2f5 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -78,6 +78,73 @@ interface QuestionStore { openedModalSettings: string; } +export const DEFAULT_QUESTION: Omit = { + title: "", + description: "", + type: "", + required: true, + deleted: true, + page: 0, + content: { + largeCheck: false, + large: "", + multi: false, + own: false, + innerNameCheck: false, + innerName: "", + back: "", + placeholder: "", + type: "all", + autofill: true, + default: "", + images: [], + number: false, + single: false, + xy: "", + format: "carousel", + text: "", + picture: "", + video: "", + dateRange: false, + time: false, + form: "star", + steps: 5, + range: "0—100", + start: 50, + step: 1, + chooseRange: false, + required: false, + replText: "", + ratingExpanded: false, + ratingDescription: "", + variants: [ + { + answer: "", + hints: "", + }, + ], + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, + version: 0, + parent_ids: [0], + created_at: "", + updated_at: "", + expanded: false, +}; + export const questionStore = create()( persist( () => ({ @@ -135,73 +202,7 @@ export const createQuestion = (quizId: number, placeIndex = -1) => { newData[quizId].splice( placeIndex < 0 ? newData[quizId].length : placeIndex, 0, - { - id, - title: "", - description: "", - type: "", - required: true, - deleted: true, - page: 0, - content: { - largeCheck: false, - large: "", - multi: false, - own: false, - innerNameCheck: false, - innerName: "", - back: "", - placeholder: "", - type: "all", - autofill: true, - default: "", - images: [], - number: false, - single: false, - xy: "", - format: "carousel", - text: "", - picture: "", - video: "", - dateRange: false, - time: false, - form: "star", - steps: 5, - range: "0—100", - start: 50, - step: 1, - chooseRange: false, - required: false, - replText: "", - ratingExpanded: false, - ratingDescription: "", - variants: [ - { - answer: "", - hints: "", - }, - ], - hint: { - text: "", - video: "", - }, - rule: { - or: true, - show: true, - reqs: [ - { - id: "", - vars: [], - }, - ], - }, - }, - version: 0, - parent_ids: [0], - created_at: "", - updated_at: "", - expanded: false, - } + { ...DEFAULT_QUESTION, id } ); questionStore.setState({ listQuestions: newData });