From 494d750534ee0bdbc29e8469c648cfa1c9cc771a Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 20 Dec 2023 23:25:58 +0300 Subject: [PATCH 01/31] - create MediaSelectionAndDisplay --- .../Questions/PageOptions/PageOptions.tsx | 214 +-------- src/pages/ResultPage/cards/ResultCard.tsx | 418 +++++------------- src/ui_kit/MediaSelectionAndDisplay.tsx | 149 +++++++ 3 files changed, 276 insertions(+), 505 deletions(-) create mode 100644 src/ui_kit/MediaSelectionAndDisplay.tsx diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index b7878072..a9ccf035 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -1,18 +1,13 @@ -import { VideofileIcon } from "@icons/questionsPage/VideofileIcon"; -import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { updateQuestion, uploadQuestionImage } from "@root/questions/actions"; -import { useCurrentQuiz } from "@root/quizes/hooks"; -import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton"; +import { Box, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; import CustomTextField from "@ui_kit/CustomTextField"; -import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal"; + import { useState } from "react"; import { useDebouncedCallback } from "use-debounce"; import type { QuizQuestionPage } from "../../../model/questionTypes/page"; import ButtonsOptions from "../ButtonsOptions"; -import { UploadImageModal } from "../UploadImage/UploadImageModal"; -import { UploadVideoModal } from "../UploadVideoModal"; import SwitchPageOptions from "./switchPageOptions"; -import { useDisclosure } from "../../../utils/useDisclosure"; +import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay"; type Props = { disableInput?: boolean; @@ -20,16 +15,11 @@ type Props = { }; export default function PageOptions({ disableInput, question }: Props) { - const [openVideoModal, setOpenVideoModal] = useState(false); const [switchState, setSwitchState] = useState("setting"); const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(980)); const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990)); const isMobile = useMediaQuery(theme.breakpoints.down(780)); - const quizQid = useCurrentQuiz()?.qid; - const { isCropModalOpen, openCropModal, closeCropModal, imageBlob, originalImageUrl, setCropModalImageBlob } = - useCropModalState(); - const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure(); const setText = useDebouncedCallback((value) => { updateQuestion(question.id, (question) => { @@ -43,27 +33,6 @@ export default function PageOptions({ disableInput, question }: Props) { setSwitchState(data); }; - async function handleImageUpload(file: File) { - const url = await uploadQuestionImage(question.id, quizQid, file, (question, url) => { - if (question.type !== "page") return; - - question.content.picture = url; - question.content.originalPicture = url; - }); - closeImageUploadModal(); - openCropModal(file, url); - } - - function handleCropModalSaveClick(imageBlob: Blob) { - uploadQuestionImage(question.id, quizQid, imageBlob, (question, url) => { - if (question.type !== "page") return; - - question.content.picture = url; - }); - } - - console.log(question.content.useImage); - return ( <> @@ -84,179 +52,7 @@ export default function PageOptions({ disableInput, question }: Props) { /> - - - { - if (question.content.picture) { - return openCropModal(question.content.picture, question.content.originalPicture); - } - - openImageUploadModal(); - }} - onPlusClick={() => { - openImageUploadModal(); - }} - /> - - - updateQuestion(question.id, (question) => ((question as QuizQuestionPage).content.useImage = true)) - } - > - Изображение - - - - - или - - {isMobile ? ( - - - - - - + - - - ) : ( - - - - - setOpenVideoModal(true)} - style={{ - display: "flex", - alignItems: "center", - justifyContent: "center", - background: "#7E2AEA", - height: "100%", - width: "25px", - color: "white", - fontSize: "15px", - }} - > - + - - - )} - - - updateQuestion(question.id, (question) => ((question as QuizQuestionPage).content.useImage = false)) - } - > - Видео - - - setOpenVideoModal(false)} - video={question.content.video} - onUpload={(url) => { - updateQuestion(question.id, (question) => { - if (question.type !== "page") return; - - question.content.video = url; - }); - }} - /> - + diff --git a/src/pages/ResultPage/cards/ResultCard.tsx b/src/pages/ResultPage/cards/ResultCard.tsx index 5c92de35..404b92a5 100644 --- a/src/pages/ResultPage/cards/ResultCard.tsx +++ b/src/pages/ResultPage/cards/ResultCard.tsx @@ -1,14 +1,8 @@ import * as React from "react"; -import { getQuestionByContentId, updateQuestion, uploadQuestionImage } from "@root/questions/actions" -import { useCurrentQuiz } from "@root/quizes/hooks" - +import { getQuestionByContentId, updateQuestion } from "@root/questions/actions"; import CustomTextField from "@ui_kit/CustomTextField"; -import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal"; -import { UploadImageModal } from "../../Questions/UploadImage/UploadImageModal"; -import { useDisclosure } from "../../../utils/useDisclosure"; -import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton"; import { Box, @@ -20,7 +14,7 @@ import { useMediaQuery, useTheme, FormControl, - Popover + Popover, } from "@mui/material"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; @@ -30,7 +24,7 @@ import Trash from "@icons/trash"; import Info from "@icons/Info"; import SettingIcon from "@icons/questionsPage/settingIcon"; import { QuizQuestionResult } from "@model/questionTypes/result"; -import { MutableRefObject } from "react"; +import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay"; interface Props { resultContract: boolean; @@ -38,7 +32,7 @@ interface Props { } export const checkEmptyData = ({ resultData }: { resultData: QuizQuestionResult }) => { - let check = true + let check = true; if ( resultData.title.length > 0 || resultData.description.length > 0 || @@ -47,14 +41,15 @@ export const checkEmptyData = ({ resultData }: { resultData: QuizQuestionResult resultData.content.innerName.length > 0 || resultData.content.text.length > 0 || resultData.content.video.length > 0 || - resultData.content.hint.text.length > 0 - ) check = false - return check -} + resultData.content.hint.text.length > 0 + ) + check = false; + return check; +}; const InfoView = ({ resultData }: { resultData: QuizQuestionResult }) => { - const checkEmpty = checkEmptyData({ resultData }) - const question = getQuestionByContentId(resultData.content.rule.parentId) + const checkEmpty = checkEmptyData({ resultData }); + const question = getQuestionByContentId(resultData.content.rule.parentId); const [anchorEl, setAnchorEl] = React.useState(null); const handleClick = (event: React.MouseEvent) => { @@ -66,20 +61,18 @@ const InfoView = ({ resultData }: { resultData: QuizQuestionResult }) => { }; const open = Boolean(anchorEl); - const id = open ? 'simple-popover' : undefined; + const id = open ? "simple-popover" : undefined; return ( <> { anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ - vertical: 'bottom', - horizontal: 'left', + vertical: "bottom", + horizontal: "left", }} > - {resultData?.content.rule.parentId === "line" ? "Единый результат в конце прохождения опросника без ветвления" - : - `Заголовок вопроса, после которого появится результат: "${question?.title || "нет заголовка"}"` - } - + {resultData?.content.rule.parentId === "line" + ? "Единый результат в конце прохождения опросника без ветвления" + : `Заголовок вопроса, после которого появится результат: "${question?.title || "нет заголовка"}"`} - {checkEmpty && - - Вы не заполнили этот результат никакими данными - - } - + {checkEmpty && Вы не заполнили этот результат никакими данными} - ) -} + ); +}; export const ResultCard = ({ resultContract, resultData }: Props) => { - - const quizQid = useCurrentQuiz()?.qid; const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isTablet = useMediaQuery(theme.breakpoints.down(800)); - const [expand, setExpand] = React.useState(true) - const [resultCardSettings, setResultCardSettings] = React.useState(false) - const [buttonPlus, setButtonPlus] = React.useState(true) + const [expand, setExpand] = React.useState(true); + const [resultCardSettings, setResultCardSettings] = React.useState(false); + const [buttonPlus, setButtonPlus] = React.useState(true); React.useEffect(() => { - setExpand(true) - }, [resultContract]) - - - const { - isCropModalOpen, - openCropModal, - closeCropModal, - imageBlob, - originalImageUrl, - setCropModalImageBlob, - } = useCropModalState(); - const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure(); - - - - async function handleImageUpload(file: File) { - const url = await uploadQuestionImage(resultData.id, quizQid, file, (question, url) => { - - question.content.back = url; - question.content.originalBack = url; - }); - closeImageUploadModal(); - openCropModal(file, url); - } - - function handleCropModalSaveClick(imageBlob: Blob) { - uploadQuestionImage(resultData.id, quizQid, imageBlob, (question, url) => { - question.content.back = url; - }); - } - - - + setExpand(true); + }, [resultContract]); return ( { backgroundColor: expand ? "white" : "#EEE4FC", border: expand ? "none" : "1px solid #9A9AAF", boxShadow: "0px 10px 30px #e7e7e7", - m: "20px 0" + m: "20px 0", }} > { flexDirection: isMobile ? "column" : null, justifyContent: "space-between", minHeight: "40px", - }} > { updateQuestion(resultData.id, question => question.title = target.value)} + onChange={({ target }: { target: HTMLInputElement }) => + updateQuestion(resultData.id, (question) => (question.title = target.value)) + } sx={{ margin: isMobile ? "10px 0" : 0, "& .MuiInputBase-root": { color: "#000000", - backgroundColor: expand - ? theme.palette.background.default - : "transparent", + backgroundColor: expand ? theme.palette.background.default : "transparent", height: "48px", borderRadius: "10px", ".MuiOutlinedInput-notchedOutline": { @@ -291,7 +242,10 @@ export const ResultCard = ({ resultContract, resultData }: Props) => { updateQuestion(resultData.id, question => question.title = target.value)} /> + onChange={({ target }: { target: HTMLInputElement }) => + updateQuestion(resultData.id, (question) => (question.title = target.value)) + } + /> { - - updateQuestion(resultData.id, (question) => question.description = target.value)} + onChange={({ target }: { target: HTMLInputElement }) => + updateQuestion(resultData.id, (question) => (question.description = target.value)) + } placeholder={"Заголовок пожирнее"} sx={{ borderRadius: "8px", @@ -323,9 +277,10 @@ export const ResultCard = ({ resultContract, resultData }: Props) => { updateQuestion(resultData.id, (question) => question.content.text = target.value)} + onChange={({ target }: { target: HTMLInputElement }) => + updateQuestion(resultData.id, (question) => (question.content.text = target.value)) + } fullWidth placeholder="Описание" multiline @@ -349,198 +304,77 @@ export const ResultCard = ({ resultContract, resultData }: Props) => { }} /> + - - - { + setButtonPlus(false); + }} sx={{ - display: "flex", + display: "inline flex", + height: "48px", + padding: "10px 20px", + justifyContent: "center", + alignItems: "center", + gap: "8px", + flexShrink: 0, + borderRadius: "8px", + border: "1px solid #9A9AAF", + background: " #F2F3F7", + color: "#9A9AAF", + mb: "30px", }} > - - - - + Кнопка + + + ) : ( - - + + Призыв к действию + + { + setButtonPlus(true); + updateQuestion(resultData.id, (q) => (q.content.hint.text = "")); + }} + > + + + + + + updateQuestion(resultData.id, (question) => (question.content.hint.text = target.value)) + } + fullWidth + placeholder="Например: узнать подробнее" + sx={{ + "& .MuiInputBase-root": { + backgroundColor: "#F2F3F7", + width: "409px", + height: "48px", + borderRadius: "8px", + }, + }} + inputProps={{ + sx: { + height: "85px", + borderRadius: "10px", + fontSize: "18px", + lineHeight: "21px", + py: 0, + }, + }} /> - - { - resultData.content.useImage && - - { - if (resultData.content.back) { - return openCropModal( - resultData.content.back, - resultData.content.originalBack - ); - } - - openImageUploadModal(); - }} - onPlusClick={() => { - openImageUploadModal(); - }} - /> - - } - { - !resultData.content.useImage && - - updateQuestion(resultData.id, q => { - q.content.video = e.target.value; - })} - /> - - } - - - - - { - buttonPlus ? - - : - - - - Призыв к действию - - { - setButtonPlus(true) - updateQuestion(resultData.id, (q) => q.content.hint.text = "") - }} - > - - - - - updateQuestion(resultData.id, (question) => question.content.hint.text = target.value)} - fullWidth - placeholder="Например: узнать подробнее" - sx={{ - "& .MuiInputBase-root": { - backgroundColor: "#F2F3F7", - width: "409px", - height: "48px", - borderRadius: "8px", - }, - }} - inputProps={{ - sx: { - height: "85px", - borderRadius: "10px", - fontSize: "18px", - lineHeight: "21px", - py: 0, - }, - }} - /> - - } - - - - - - - + )} { > { - setResultCardSettings(!resultCardSettings) + setResultCardSettings(!resultCardSettings); }} sx={{ - backgroundColor: - resultCardSettings - ? theme.palette.brightPurple.main - : "transparent", - color: - resultCardSettings ? "#ffffff" : theme.palette.grey3.main, + backgroundColor: resultCardSettings ? theme.palette.brightPurple.main : "transparent", + color: resultCardSettings ? "#ffffff" : theme.palette.grey3.main, "&:hover": { backgroundColor: resultCardSettings ? "#581CA7" : "#7E2AEA", - color: "white" - } + color: "white", + }, }} > - + {!isTablet && "Настройки"} - { - resultCardSettings && + {resultCardSettings && ( updateQuestion(resultData.id, (question) => question.content.innerName = target.value)} + onChange={({ target }: { target: HTMLInputElement }) => + updateQuestion(resultData.id, (question) => (question.content.innerName = target.value)) + } /> - } + )} - ) - } - - ) -} + )} + + ); +}; diff --git a/src/ui_kit/MediaSelectionAndDisplay.tsx b/src/ui_kit/MediaSelectionAndDisplay.tsx new file mode 100644 index 00000000..88a47ac4 --- /dev/null +++ b/src/ui_kit/MediaSelectionAndDisplay.tsx @@ -0,0 +1,149 @@ +import { FC } from "react"; +import { Box, Button } from "@mui/material"; +import CustomTextField from "./CustomTextField"; +import { updateQuestion, uploadQuestionImage } from "@root/questions/actions"; +import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal"; + +import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton"; +import { UploadImageModal } from "../pages/Questions/UploadImage/UploadImageModal"; +import { useDisclosure } from "../utils/useDisclosure"; +import { useCurrentQuiz } from "../stores/quizes/hooks"; +import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; + +interface Iprops { + resultData: AnyTypedQuizQuestion; +} + +export const MediaSelectionAndDisplay: FC = ({ resultData }) => { + const quizQid = useCurrentQuiz()?.qid; + const { isCropModalOpen, openCropModal, closeCropModal, imageBlob, originalImageUrl, setCropModalImageBlob } = + useCropModalState(); + const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure(); + + async function handleImageUpload(file: File) { + const url = await uploadQuestionImage(resultData.id, quizQid, file, (question, url) => { + question.content.back = url; + question.content.originalBack = url; + }); + closeImageUploadModal(); + openCropModal(file, url); + } + + function handleCropModalSaveClick(imageBlob: Blob) { + uploadQuestionImage(resultData.id, quizQid, imageBlob, (question, url) => { + question.content.back = url; + }); + } + + return ( + + + + + + + + + + + + {resultData.content.useImage && ( + + { + if (resultData.content.back) { + return openCropModal(resultData.content.back, resultData.content.originalBack); + } + + openImageUploadModal(); + }} + onPlusClick={() => { + openImageUploadModal(); + }} + /> + + )} + {!resultData.content.useImage && ( + + + updateQuestion(resultData.id, (q) => { + q.content.video = e.target.value; + }) + } + /> + + )} + + ); +}; From 9bdf5bf6786e796a50436b54f7a42422c1929d5d Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 21 Dec 2023 00:56:14 +0300 Subject: [PATCH 02/31] modal fix --- .../StartPageViewPublication.tsx | 2 + src/pages/ViewPublicationPage/index.tsx | 14 +- src/pages/startPage/EditPage.tsx | 90 ++-- .../StartPagePreview/QuizPreviewLayout.tsx | 443 +++++++++--------- 4 files changed, 280 insertions(+), 269 deletions(-) diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index 3b129a02..b29cf4a2 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -17,6 +17,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { if (!quiz) return null; + console.log(quiz); + const handleCopyNumber = () => { navigator.clipboard.writeText(quiz.config.info.phonenumber); }; diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index a84851a3..c65ebf9e 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -17,7 +17,7 @@ import { enqueueSnackbar } from "notistack"; import { useQuestionsStore } from "@root/questions/store"; import { setQuestions } from "@root/questions/actions"; import { questionApi } from "@api/question"; -import { ApologyPage } from "./ApologyPage" +import { ApologyPage } from "./ApologyPage"; export const ViewPage = () => { const quiz = useCurrentQuiz(); @@ -48,15 +48,15 @@ export const ViewPage = () => { } }, [quiz?.config.startpage.favIcon]); - const filteredQuestions = ( - questions.filter(({ type }) => type) as AnyTypedQuizQuestion[] - ).sort((previousItem, item) => previousItem.page - item.page); + const filteredQuestions = (questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]).sort( + (previousItem, item) => previousItem.page - item.page + ); - - console.log(questions) + console.log(questions); if (visualStartPage === undefined) return <>; - if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return + if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) + return ; return ( {!visualStartPage ? ( diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 11f091bb..a949922c 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -71,7 +71,7 @@ export default function EditPage() { const isMobile = useMediaQuery(theme.breakpoints.down(660)); const [mobileSidebar, setMobileSidebar] = useState(false); const quizConfig = quiz?.config; - const disableTest = quiz === undefined ? true : (quiz.config.type === null) + const disableTest = quiz === undefined ? true : quiz.config.type === null; useEffect(() => { if (editQuizId === null) navigate("/list"); @@ -81,49 +81,44 @@ export default function EditPage() { () => () => { resetEditConfig(); cleanQuestions(); - updateModalInfoWhyCantCreate(false) + updateModalInfoWhyCantCreate(false); }, [] ); - - const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => { - - const problems: any = {} + const problems: any = {}; questions.forEach((question) => { //Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен - if (question.type === null - || question.type === "result" - || question.content.rule.parentId.length === 0) return + if (question.type === null || question.type === "result" || question.content.rule.parentId.length === 0) return; //если есть дети, но нет дефолта - логическая ошибка. Так нельзя if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) { problems[question.content.id] = { name: question.title, - problems: ["Не выбран дефолтный вопрос"] - } + problems: ["Не выбран дефолтный вопрос"], + }; } + }); - }) + console.log(problems); + + useUiTools.setState({ whyCantCreatePublic: problems }); - useUiTools.setState({ whyCantCreatePublic: problems }) if (Object.keys(problems).length > 0) { - updateQuiz(quiz?.id, (state) => { state.status = "stop" }) - updateCanCreatePublic(false) + updateQuiz(quiz?.id, (state) => { + state.status = "stop"; + }); + updateCanCreatePublic(false); } else { - updateCanCreatePublic(true) + updateCanCreatePublic(true); } - - }, 600); - useEffect(() => { - updateQuestionHint(questions) + updateQuestionHint(questions); }, [questions]); - async function handleLogoutClick() { const [, logoutError] = await logout(); @@ -137,7 +132,7 @@ export default function EditPage() { navigate("/"); } - if (!quizConfig) return <> + if (!quizConfig) return <>; return ( <> {/*хедер*/} @@ -366,7 +361,7 @@ export default function EditPage() { )} - {!canCreatePublic && quiz.config.type !== "form" ? + {!canCreatePublic && quiz.config.type !== "form" ? ( - : + ) : ( - {quiz?.status === "start" && https://hbpn.link/{quiz.qid} - } + {quiz?.status === "start" ? "Стоп" : "Старт"} + + {quiz?.status === "start" && ( + + https://hbpn.link/{quiz.qid} + + )} + - ); diff --git a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx index 57472479..672e78a4 100644 --- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx @@ -1,240 +1,247 @@ -import { - Box, - Button, - ButtonBase, - Link, - Paper, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material"; import { useCurrentQuiz } from "@root/quizes/hooks"; import YoutubeEmbedIframe from "./YoutubeEmbedIframe"; import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { notReachable } from "../../utils/notReachable"; import { useUADevice } from "../../utils/hooks/useUADevice"; - export default function QuizPreviewLayout() { - const theme = useTheme(); - const quiz = useCurrentQuiz(); - const { isMobileDevice } = useUADevice(); + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const { isMobileDevice } = useUADevice(); - if (!quiz) return null; + if (!quiz) return null; - const handleCopyNumber = () => { - navigator.clipboard.writeText(quiz.config.info.phonenumber); - }; + const handleCopyNumber = () => { + navigator.clipboard.writeText(quiz.config.info.phonenumber); + }; - const background = quiz.config.startpage.background.type === "image" - ? quiz.config.startpage.background.desktop - ? ( + const background = + quiz.config.startpage.background.type === "image" ? ( + quiz.config.startpage.background.desktop ? ( + + ) : null + ) : quiz.config.startpage.background.type === "video" ? ( + quiz.config.startpage.background.video ? ( + + ) : null + ) : null; + + return ( + + + + {quiz.config.startpage.logo && ( - ) - : null - : quiz.config.startpage.background.type === "video" - ? quiz.config.startpage.background.video - ? ( - + )} + {quiz.config.info.orgname} + + + } + quizMainBlock={ + <> + + {quiz.name} + {quiz.config.startpage.description} + + + + + + {quiz.config.info.clickable ? ( + isMobileDevice ? ( + + + {quiz.config.info.phonenumber} + + + ) : ( + + + {quiz.config.info.phonenumber} + + ) - : null - : null; - - return ( - - - - {quiz.config.startpage.logo && ( - - )} - - {quiz.config.info.orgname} - - - } - quizMainBlock={<> - - {quiz.name} - - {quiz.config.startpage.description} - - - - - - - {quiz.config.info.clickable ? ( - isMobileDevice ? ( - - - {quiz.config.info.phonenumber} - - - ) : ( - - - {quiz.config.info.phonenumber} - - - ) - ) : ( - - {quiz.config.info.phonenumber} - - )} - - {quiz.config.info.law} - - - } - backgroundBlock={background} - startpageType={quiz.config.startpageType} - alignType={quiz.config.startpage.position} - /> - - ); + ) : ( + + {quiz.config.info.phonenumber} + + )} + {quiz.config.info.law} + + + } + backgroundBlock={background} + startpageType={quiz.config.startpageType} + alignType={quiz.config.startpage.position} + /> + + ); } -function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: { - quizHeaderBlock: JSX.Element; - quizMainBlock: JSX.Element; - backgroundBlock: JSX.Element | null; - startpageType: QuizStartpageType; - alignType: QuizStartpageAlignType; +function QuizPreviewLayoutByType({ + quizHeaderBlock, + quizMainBlock, + backgroundBlock, + startpageType, + alignType, +}: { + quizHeaderBlock: JSX.Element; + quizMainBlock: JSX.Element; + backgroundBlock: JSX.Element | null; + startpageType: QuizStartpageType; + alignType: QuizStartpageAlignType; }) { - const theme = useTheme(); - const isTablet = useMediaQuery(theme.breakpoints.down(630)); + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(630)); - switch (startpageType) { - case null: - case "standard": { - return ( - - - {quizHeaderBlock} - {quizMainBlock} - - - {backgroundBlock} - - - ); - } - case "expanded": { - return ( - - - {quizHeaderBlock} - {quizMainBlock} - - - {backgroundBlock} - - - ); - } - case "centered": { - return ( - - {quizHeaderBlock} - {backgroundBlock && - - {backgroundBlock} - - } - {quizMainBlock} - - ); - } - default: notReachable(startpageType); + switch (startpageType) { + case null: + case "standard": { + return ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ); } + case "expanded": { + return ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ); + } + case "centered": { + return ( + + {quizHeaderBlock} + {backgroundBlock && {backgroundBlock}} + {quizMainBlock} + + ); + } + default: + notReachable(startpageType); + } } const startpageAlignTypeToJustifyContent: Record = { - left: "start", - center: "center", - right: "end", + left: "start", + center: "center", + right: "end", }; From a448ddfffa929d3f1aeea3a5916dbfe1efa43e44 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 21 Dec 2023 01:59:28 +0300 Subject: [PATCH 03/31] update --- src/pages/ViewPublicationPage/Question.tsx | 6 +- .../ViewPublicationPage/questions/Page.tsx | 39 +- .../startPage/ModalInfoWhyCantCreate.tsx | 75 ++-- src/ui_kit/QuizPreview/QuizPreviewLayout.tsx | 414 +++++++++--------- .../QuizPreviewQuestionTypes/Page.tsx | 39 +- 5 files changed, 289 insertions(+), 284 deletions(-) diff --git a/src/pages/ViewPublicationPage/Question.tsx b/src/pages/ViewPublicationPage/Question.tsx index ff251329..7533f99a 100644 --- a/src/pages/ViewPublicationPage/Question.tsx +++ b/src/pages/ViewPublicationPage/Question.tsx @@ -43,8 +43,7 @@ const QUESTIONS_MAP: any = { export const Question = ({ questions }: QuestionProps) => { const quiz = useCurrentQuiz(); - const [currentQuestion, setCurrentQuestion] = - useState(); + const [currentQuestion, setCurrentQuestion] = useState(); const [showContactForm, setShowContactForm] = useState(false); const [showResultForm, setShowResultForm] = useState(false); @@ -62,8 +61,7 @@ export const Question = ({ questions }: QuestionProps) => { if (!currentQuestion) return <>не смог отобразить вопрос; - const QuestionComponent = - QUESTIONS_MAP[currentQuestion.type as Exclude]; + const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude]; return ( diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx index 619aea4b..c04e606b 100644 --- a/src/pages/ViewPublicationPage/questions/Page.tsx +++ b/src/pages/ViewPublicationPage/questions/Page.tsx @@ -12,10 +12,14 @@ export const Page = ({ currentQuestion }: PageProps) => { const { answers } = useQuizViewStore(); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {}; + console.log(currentQuestion); + return ( - {currentQuestion.title} - {currentQuestion.content.text} + + {currentQuestion.title} + + {currentQuestion.content.text} { marginTop: "20px", }} > - {currentQuestion.content.picture && ( - - - - - )} - {currentQuestion.content.video && ( + {currentQuestion.content.useImage ? ( + + + + ) : ( + + ); +}; diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx index 3c4ed097..003d76b7 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx @@ -1,10 +1,20 @@ -import { Box, Button, LinearProgress, Paper, Typography, FormControl, Select as MuiSelect, MenuItem, useTheme } from "@mui/material"; +import { + Box, + Button, + LinearProgress, + Paper, + Typography, + FormControl, + Select as MuiSelect, + MenuItem, + useTheme, +} from "@mui/material"; import { useQuestionsStore } from "@root/questions/store"; import { - decrementCurrentQuestionIndex, - incrementCurrentQuestionIndex, - useQuizPreviewStore, - setCurrentQuestionIndex + decrementCurrentQuestionIndex, + incrementCurrentQuestionIndex, + useQuizPreviewStore, + setCurrentQuestionIndex, } from "@root/quizPreview"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; import { useEffect } from "react"; @@ -24,217 +34,211 @@ import { notReachable } from "../../utils/notReachable"; import ArrowDownIcon from "@icons/ArrowDownIcon"; export default function QuizPreviewLayout() { - const theme = useTheme(); - const questions = useQuestionsStore(state => state.questions); - const currentQuizStep = useQuizPreviewStore( - (state) => state.currentQuestionIndex - ); + const theme = useTheme(); + const questions = useQuestionsStore((state) => state.questions); + const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex); - const nonDeletedQuizQuestions = questions.filter( - (question) => !question.deleted - ); - const maxCurrentQuizStep = - nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0; - const currentProgress = Math.floor( - (currentQuizStep / maxCurrentQuizStep) * 100 - ); + const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted); + const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0; + const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100); - const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; + const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; - useEffect( - function resetCurrentQuizStep() { - if (currentQuizStep > maxCurrentQuizStep) { - decrementCurrentQuestionIndex(); - } - }, - [currentQuizStep, maxCurrentQuizStep] - ); + useEffect( + function resetCurrentQuizStep() { + if (currentQuizStep > maxCurrentQuizStep) { + decrementCurrentQuestionIndex(); + } + }, + [currentQuizStep, maxCurrentQuizStep] + ); - return ( - + + + + + + + setCurrentQuestionIndex(window.Number(target.value))} + sx={{ + height: "48px", + borderRadius: "8px", + "& .MuiOutlinedInput-notchedOutline": { + border: `1px solid ${theme.palette.brightPurple.main} !important`, + }, + }} + MenuProps={{ + PaperProps: { + sx: { + mt: "8px", + p: "4px", + borderRadius: "8px", + border: "1px solid #EEE4FC", + boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", + }, + }, + MenuListProps: { + sx: { + py: 0, + display: "flex", + flexDirection: "column", + gap: "8px", + "& .Mui-selected": { + backgroundColor: theme.palette.background.default, + color: theme.palette.brightPurple.main, + }, + }, + }, + }} + inputProps={{ + sx: { + color: theme.palette.brightPurple.main, + display: "flex", + alignItems: "center", + px: "9px", + gap: "20px", + }, + }} + IconComponent={(props) => } + > + {Object.values(questions).map(({ id, title }, index) => ( + + {`${index + 1}. ${title}`} + + ))} + + + + + - + + {nonDeletedQuizQuestions.length > 0 + ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}` + : "Нет вопросов"} + + {nonDeletedQuizQuestions.length > 0 && ( + + )} + + + + - - - - - - ); + Далее + + + + + + ); } -function QuestionPreviewComponent({ question }: { - question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined; -}) { - if (!question || question.type === null) return null; +function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) { + if (!question || question.type === null) return null; - switch (question.type) { - case "variant": return ; - case "images": return ; - case "varimg": return ; - case "emoji": return ; - case "text": return ; - case "select": return ; + case "date": + return ; + case "number": + return ; + case "file": + return ; + case "page": + return ; + case "rating": + return ; + default: + notReachable(question); + } } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx index 4567eee6..1f4559e1 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx @@ -1,4 +1,5 @@ import { Box, Typography } from "@mui/material"; +import YoutubeEmbedIframe from "@ui_kit/StartPagePreview/YoutubeEmbedIframe"; import type { QuizQuestionPage } from "model/questionTypes/page"; @@ -7,6 +8,7 @@ interface Props { } export default function Page({ question }: Props) { + console.log(question); return ( - {question.title} - {question.content.text} - {question.content.picture && ( - - - + + {question.title} + + + + {question.content.text} + + + {question.content.useImage ? ( + + ) : ( + )} ); From bfe19091ac04d9156c01c8ce98e8068ad27891f6 Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 21 Dec 2023 03:08:58 +0300 Subject: [PATCH 04/31] =?UTF-8?q?=D1=82=D0=B5=D0=BC=D1=8B=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=20=D1=81=D1=82=D0=B5=D0=B9=D1=82=D0=B0?= =?UTF-8?q?=D1=85(=D0=BD=D1=83=D0=B6=D0=BD=D1=8B=20=D0=B4=D0=BE=D1=80?= =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ViewPublicationPage/Footer.tsx | 2 +- .../StartPageViewPublication.tsx | 8 ++-- src/pages/ViewPublicationPage/index.tsx | 28 +++++++---- .../ViewPublicationPage/questions/Emoji.tsx | 3 +- .../ViewPublicationPage/questions/File.tsx | 11 +++-- .../ViewPublicationPage/questions/Images.tsx | 6 ++- .../ViewPublicationPage/questions/Rating.tsx | 11 +++-- .../ViewPublicationPage/questions/Variant.tsx | 2 +- .../ViewPublicationPage/questions/Varimg.tsx | 2 +- src/utils/themes/themePublication.ts | 47 +++++++++++++++++++ 10 files changed, 94 insertions(+), 26 deletions(-) create mode 100644 src/utils/themes/themePublication.ts diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx index 8a1f2dea..e6ccf759 100644 --- a/src/pages/ViewPublicationPage/Footer.tsx +++ b/src/pages/ViewPublicationPage/Footer.tsx @@ -222,7 +222,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh alignItems: "center", gap: "10px", marginRight: "auto", - color: theme.palette.grey1.main, + // color: theme.palette.grey1.main, }} > {/* Шаг diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index 3b129a02..ea2ffccd 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -112,7 +112,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { {quiz.config.info.orgname} - + {quiz.config.info.site} @@ -184,19 +184,19 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { {quiz.config.info.clickable ? ( isMobileDevice ? ( - + {quiz.config.info.phonenumber} ) : ( - + {quiz.config.info.phonenumber} ) ) : ( - + {quiz.config.info.phonenumber} )} diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index a84851a3..f780e1c4 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { Box } from "@mui/material"; +import {Box, Button, ThemeProvider} from "@mui/material"; import { StartPageViewPublication } from "./StartPageViewPublication"; import { Question } from "./Question"; @@ -18,6 +18,9 @@ import { useQuestionsStore } from "@root/questions/store"; import { setQuestions } from "@root/questions/actions"; import { questionApi } from "@api/question"; import { ApologyPage } from "./ApologyPage" +import {themesPublication} from "../../utils/themes/themePublication"; + +type themePublic = "StandardTheme" | "PinkTheme" export const ViewPage = () => { const quiz = useCurrentQuiz(); @@ -55,15 +58,24 @@ export const ViewPage = () => { console.log(questions) + const [themeState, setThemeState] = useState("StandardTheme"); + if (visualStartPage === undefined) return <>; if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return return ( - - {!visualStartPage ? ( - - ) : ( - - )} - + + + {!visualStartPage ? ( + + ) : ( + + )} + + + + + + + ); }; diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx index 42b69f6e..8642e3e6 100644 --- a/src/pages/ViewPublicationPage/questions/Emoji.tsx +++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx @@ -55,7 +55,8 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { key={variant.id} sx={{ borderRadius: "12px", - border: `1px solid ${theme.palette.grey2.main}`, + // border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid #9A9AAF`, overflow: "hidden", maxWidth: "317px", width: "100%", diff --git a/src/pages/ViewPublicationPage/questions/File.tsx b/src/pages/ViewPublicationPage/questions/File.tsx index e107e9ac..12ebd62f 100644 --- a/src/pages/ViewPublicationPage/questions/File.tsx +++ b/src/pages/ViewPublicationPage/questions/File.tsx @@ -72,7 +72,7 @@ export const File = ({ currentQuestion }: FileProps) => { { alignItems: "center", padding: "33px 44px 33px 55px", backgroundColor: theme.palette.background.default, - border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid #9A9AAF`, + // border: `1px solid ${theme.palette.grey2.main}`, borderRadius: "8px", }} > @@ -123,7 +124,8 @@ export const File = ({ currentQuestion }: FileProps) => { @@ -134,7 +136,8 @@ export const File = ({ currentQuestion }: FileProps) => { { sx={{ cursor: "pointer", borderRadius: "5px", - border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid #9A9AAF`, + // border: `1px solid ${theme.palette.grey2.main}`, }} onClick={(event) => { event.preventDefault(); @@ -98,7 +99,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => { sx={{ display: "block", textAlign: "center", - color: theme.palette.grey2.main, + color: "#9A9AAF", + // color: theme.palette.grey2.main, marginTop: "10px", }} value={index} diff --git a/src/pages/ViewPublicationPage/questions/Rating.tsx b/src/pages/ViewPublicationPage/questions/Rating.tsx index 14860935..55330e93 100644 --- a/src/pages/ViewPublicationPage/questions/Rating.tsx +++ b/src/pages/ViewPublicationPage/questions/Rating.tsx @@ -74,7 +74,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => { marginTop: "20px", }} > - + {currentQuestion.content.ratingNegativeDescription} { } sx={{ height: "50px", gap: "15px" }} max={currentQuestion.content.steps} - icon={form?.icon(theme.palette.brightPurple.main)} - emptyIcon={form?.icon(theme.palette.grey2.main)} + icon={form?.icon(theme.palette.primary.main)} + emptyIcon={form?.icon("#9A9AAF")} /> - + {currentQuestion.content.ratingPositiveDescription} diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx index 1b5276e4..8e0806d7 100644 --- a/src/pages/ViewPublicationPage/questions/Variant.tsx +++ b/src/pages/ViewPublicationPage/questions/Variant.tsx @@ -134,7 +134,7 @@ const VariantItem = ({ margin: "0", borderRadius: "12px", padding: "15px", - border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid #9A9AAF`, display: "flex", maxWidth: "685px", justifyContent: "space-between", diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx index 5e07766b..5f2d0185 100644 --- a/src/pages/ViewPublicationPage/questions/Varimg.tsx +++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx @@ -57,7 +57,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { borderRadius: "5px", padding: "15px", color: "#4D4D4D", - border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid #9A9AAF`, display: "flex", }} value={index} diff --git a/src/utils/themes/themePublication.ts b/src/utils/themes/themePublication.ts new file mode 100644 index 00000000..731d9acb --- /dev/null +++ b/src/utils/themes/themePublication.ts @@ -0,0 +1,47 @@ +import { createTheme } from "@mui/material"; +import theme from "./generic"; + + +const StandardTheme = createTheme({ + // ...theme, + palette: { + primary: { + main: "#7E2AEA", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#7E2AEA", + }, + + background: { + default: "#FFFFFF", + }, + } +}) + +const PinkTheme = createTheme({ + // ...theme, + palette: { + primary: { + main: "#D34085", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#D34085", + }, + + background: { + default: "#FFF9FC", + }, + } +}) +export const themesPublication = { + StandardTheme, + PinkTheme, +} \ No newline at end of file From 4cdd23d71fa587fbc8a5b8f42e87412db918595f Mon Sep 17 00:00:00 2001 From: Nastya Date: Thu, 21 Dec 2023 11:58:47 +0300 Subject: [PATCH 05/31] =?UTF-8?q?=D1=82=D0=B5=D0=BC=D1=8B=20=D0=BF=D1=83?= =?UTF-8?q?=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B9=20=D1=81=D0=BE?= =?UTF-8?q?=D1=85=D1=80=D0=B0=D0=BD=D1=8F=D1=8E=D1=82=D1=81=D1=8F=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=B1=D0=B5=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/quizSettings.ts | 2 ++ src/pages/ViewPublicationPage/index.tsx | 12 ++++++++---- src/pages/startPage/EditPage.tsx | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index db37e5c4..7bde9206 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -33,6 +33,7 @@ export interface QuizConfig { startpageType: QuizStartpageType; results: QuizResultsType; haveRoot: string | null; + theme: string | "StandardTheme" | "PinkTheme"; resultInfo: { when: 'before' | 'after' | 'email', share: true | false, @@ -92,6 +93,7 @@ export const defaultQuizConfig: QuizConfig = { startpageType: null, results: null, haveRoot: null, + theme: "StandardTheme", resultInfo: { when: 'after', share: false, diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index f780e1c4..4a9ba34f 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -7,7 +7,7 @@ import { useQuestions } from "@root/questions/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks"; import useSWR from "swr"; import { quizApi } from "@api/quiz"; -import { setQuizes } from "@root/quizes/actions"; +import { setQuizes, updateQuiz } from "@root/quizes/actions"; import { isAxiosError } from "axios"; import { devlog } from "@frontend/kitui"; import { useQuizStore } from "@root/quizes/store"; @@ -63,7 +63,7 @@ export const ViewPage = () => { if (visualStartPage === undefined) return <>; if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return return ( - + {!visualStartPage ? ( @@ -71,8 +71,12 @@ export const ViewPage = () => { )} - - + + diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 11f091bb..636ed4ad 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -52,6 +52,7 @@ export default function EditPage() { const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); + console.log(quiz) useEffect(() => { const getData = async () => { const quizes = await quizApi.getList(); From 372300ead9f58d639ce955cb3e5f79bdc0c1debc Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Mon, 25 Dec 2023 15:02:35 +0300 Subject: [PATCH 06/31] fix: publication Number --- src/assets/icons/ArrowGear.svg | 2 +- src/assets/icons/NameplateLogoFQ.tsx | 55 ++++++++++++--- src/constants/number.ts | 4 +- .../ViewPublicationPage/questions/Number.tsx | 69 ++++++++++--------- src/ui_kit/CustomTextField.tsx | 20 ++++-- 5 files changed, 100 insertions(+), 50 deletions(-) diff --git a/src/assets/icons/ArrowGear.svg b/src/assets/icons/ArrowGear.svg index 735328ac..53a0ca2a 100644 --- a/src/assets/icons/ArrowGear.svg +++ b/src/assets/icons/ArrowGear.svg @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/src/assets/icons/NameplateLogoFQ.tsx b/src/assets/icons/NameplateLogoFQ.tsx index db350ab5..947a7eae 100644 --- a/src/assets/icons/NameplateLogoFQ.tsx +++ b/src/assets/icons/NameplateLogoFQ.tsx @@ -1,22 +1,57 @@ import { FC, SVGProps } from "react"; export const NameplateLogoFQ: FC> = (props) => ( - + - - - + + + - - - - - + + + + + - + diff --git a/src/constants/number.ts b/src/constants/number.ts index 96cbd5a3..76d47ff8 100644 --- a/src/constants/number.ts +++ b/src/constants/number.ts @@ -10,11 +10,11 @@ export const QUIZ_QUESTION_NUMBER: Omit required: false, innerNameCheck: false, innerName: "", - range: "1—100", + range: "0—100", defaultValue: 0, step: 1, steps: 5, - start: 50, + start: 0, chooseRange: false, form: "star", }, diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index 6056beab..e8c6569e 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { Box, Typography, Slider, useTheme } from "@mui/material"; +import { Box, Typography } from "@mui/material"; import { useDebouncedCallback } from "use-debounce"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -16,7 +16,6 @@ type NumberProps = { export const Number = ({ currentQuestion }: NumberProps) => { const [minRange, setMinRange] = useState("0"); const [maxRange, setMaxRange] = useState("100000000000"); - const theme = useTheme(); const { answers } = useQuizViewStore(); const updateMinRangeDebounced = useDebouncedCallback( (value, crowded = false) => { @@ -26,7 +25,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { updateAnswer(currentQuestion.content.id, value); }, - 1000 + 3000 ); const updateMaxRangeDebounced = useDebouncedCallback( (value, crowded = false) => { @@ -36,7 +35,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { updateAnswer(currentQuestion.content.id, value); }, - 1000 + 3000 ); const answer = answers.find( ({ questionId }) => questionId === currentQuestion.content.id @@ -44,7 +43,14 @@ export const Number = ({ currentQuestion }: NumberProps) => { const min = window.Number(currentQuestion.content.range.split("—")[0]); const max = window.Number(currentQuestion.content.range.split("—")[1]); - const sliderValue = answer || currentQuestion.content.start + "—" + max; + const step = currentQuestion.content.step; + const sliderValue = + answer || + (currentQuestion.content.start < min || currentQuestion.content.start > max + ? min + : currentQuestion.content.start) + + "—" + + max; useEffect(() => { if (answer) { @@ -53,7 +59,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { } if (!answer) { - setMinRange(String(currentQuestion.content.start)); + setMinRange(sliderValue.split("—")[0]); setMaxRange(String(max)); } }, []); @@ -80,7 +86,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { } min={min} max={max} - step={currentQuestion.content.step || 1} + step={(max - min) % step ? 1 : step} onChange={(_, value) => { const range = String(value).replace(",", "—"); updateAnswer(currentQuestion.content.id, range); @@ -96,26 +102,31 @@ export const Number = ({ currentQuestion }: NumberProps) => { /> {!currentQuestion.content.chooseRange && ( - { - updateAnswer( - currentQuestion.content.id, - window.Number(target.value) > max - ? String(max) - : window.Number(target.value) < min - ? String(min) - : target.value - ); - }} + + > + { + updateAnswer( + currentQuestion.content.id, + window.Number(target.value) > max + ? String(max) + : window.Number(target.value) < min + ? String(min) + : target.value + ); + }} + sx={{ maxWidth: "80px", textAlign: "center" }} + /> + )} - {currentQuestion.content.chooseRange && ( { updateMinRangeDebounced(`${target.value}—${maxRange}`); }} - sx={{ - maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, - }} + sx={{ maxWidth: "80px", textAlign: "center" }} /> до { updateMaxRangeDebounced(`${minRange}—${target.value}`); }} - sx={{ - maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, - }} + sx={{ maxWidth: "80px", textAlign: "center" }} /> )} diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx index bf7ea992..c9023f40 100755 --- a/src/ui_kit/CustomTextField.tsx +++ b/src/ui_kit/CustomTextField.tsx @@ -1,5 +1,11 @@ -import React, { useState } from "react"; -import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material"; +import React, { useEffect, useState } from "react"; +import { + Box, + FormControl, + TextField, + Typography, + useTheme, +} from "@mui/material"; import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react"; import type { InputProps, SxProps, Theme } from "@mui/material"; @@ -19,7 +25,7 @@ interface CustomTextFieldProps { export default function CustomTextField({ placeholder, - value, + value = "", onChange, onKeyDown, onBlur, @@ -32,9 +38,13 @@ export default function CustomTextField({ }: CustomTextFieldProps) { const theme = useTheme(); - const [inputValue, setInputValue] = useState(value || text || ""); + const [inputValue, setInputValue] = useState(""); const [isInputActive, setIsInputActive] = useState(false); + useEffect(() => { + setInputValue(value); + }, [value]); + const handleInputChange = (event: React.ChangeEvent) => { const inputValue = event.target.value; setInputValue(inputValue); @@ -88,8 +98,8 @@ export default function CustomTextField({ fontSize: "18px", lineHeight: "21px", py: 0, + ...sx, }, - ...sx, }} data-cy="textfield" /> From 3584d32820a370dbef77dfa142d802a94985a40b Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Mon, 25 Dec 2023 18:38:40 +0300 Subject: [PATCH 07/31] fix: force remove questions --- .../Questions/BranchingMap/CsComponent.tsx | 2 +- .../Questions/QuestionSwitchWindowTool.tsx | 147 +++++++++++++++--- .../Questions/SwitchBranchingPanel/index.tsx | 41 ++--- 3 files changed, 151 insertions(+), 39 deletions(-) diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx index f5ab0a57..88e65537 100644 --- a/src/pages/Questions/BranchingMap/CsComponent.tsx +++ b/src/pages/Questions/BranchingMap/CsComponent.tsx @@ -58,7 +58,7 @@ function CsComponent({ const { dragQuestionContentId, desireToOpenABranchingModal, canCreatePublic } = useUiTools() const trashQuestions = useQuestionsStore().questions - const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null) + const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null && !question.deleted) const [startCreate, setStartCreate] = useState(""); const [startRemove, setStartRemove] = useState(""); diff --git a/src/pages/Questions/QuestionSwitchWindowTool.tsx b/src/pages/Questions/QuestionSwitchWindowTool.tsx index 5988ecd0..efbf9c58 100644 --- a/src/pages/Questions/QuestionSwitchWindowTool.tsx +++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx @@ -1,26 +1,135 @@ - -import { - Box, useMediaQuery, useTheme, -} from "@mui/material"; +import { useEffect } from "react"; +import { Box, useMediaQuery, useTheme } from "@mui/material"; import { DraggableList } from "./DraggableList"; import { SwitchBranchingPanel } from "./SwitchBranchingPanel"; import { BranchingMap } from "./BranchingMap"; -import {useQuestionsStore} from "@root/questions/store"; +import { useQuestionsStore } from "@root/questions/store"; import { useUiTools } from "@root/uiTools/store"; +import { useQuestions } from "@root/questions/hooks"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { + copyQuestion, + deleteQuestion, + deleteQuestionWithTimeout, + clearRuleForAll, + updateQuestion, + getQuestionByContentId, +} from "@root/questions/actions"; +import { updateRootContentId } from "@root/quizes/actions"; + +import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; export const QuestionSwitchWindowTool = () => { - const {questions} = useQuestionsStore.getState() - const {openBranchingPanel} = useUiTools() - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - return ( - - - {openBranchingPanel? : } - - - - ) -} \ No newline at end of file + const { questions } = useQuestionsStore.getState(); + const { openBranchingPanel } = useUiTools(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const quiz = useCurrentQuiz(); + + const deleteFn = (question: AnyTypedQuizQuestion) => { + if (question.type !== null) { + if (question.content.rule.parentId === "root") { + //удалить из стора root и очистить rule всем вопросам + updateRootContentId(quiz?.id || "", ""); + clearRuleForAll(); + deleteQuestion(question.id); + } else if (question.content.rule.parentId.length > 0) { + //удалить из стора вопрос из дерева и очистить его потомков + const clearQuestions = [] as string[]; + + //записываем потомков , а их результаты удаляем + const getChildren = (parentQuestion: AnyTypedQuizQuestion) => { + questions.forEach((targetQuestion) => { + if ( + targetQuestion.type !== null && + targetQuestion.content.rule.parentId === parentQuestion.content.id + ) { + //если у вопроса совпал родитель с родителем => он потомок, в кучу его + if ( + targetQuestion.type !== "result" && + targetQuestion.type !== null + ) { + if (!clearQuestions.includes(targetQuestion.content.id)) + clearQuestions.push(targetQuestion.content.id); + getChildren(targetQuestion); //и ищем его потомков + } + } + }); + }; + getChildren(question); + //чистим потомков от инфы ветвления + clearQuestions.forEach((id) => { + updateQuestion(id, (question) => { + question.content.rule.parentId = ""; + question.content.rule.main = []; + question.content.rule.default = ""; + }); + }); + + //чистим rule родителя + const parentQuestion = getQuestionByContentId( + question.content.rule.parentId + ); + const newRule = {}; + newRule.main = parentQuestion.content.rule.main.filter( + (data) => data.next !== question.content.id + ); //удаляем условия перехода от родителя к этому вопросу + newRule.parentId = parentQuestion.content.rule.parentId; + newRule.default = + parentQuestion.content.rule.parentId === question.content.id + ? "" + : parentQuestion.content.rule.parentId; + newRule.children = [...parentQuestion.content.rule.children].splice( + parentQuestion.content.rule.children.indexOf(question.content.id), + 1 + ); + + updateQuestion(question.content.rule.parentId, (PQ) => { + PQ.content.rule = newRule; + }); + deleteQuestion(question.id); + } + + deleteQuestion(question.id); + + const result = questions.find( + (q) => + q.type === "result" && q.content.rule.parentId === question.content.id + ); + if (result) deleteQuestion(result.id); + } else { + deleteQuestion(question.id); + } + }; + + const deleteTimeoutedQuestions = () => { + const questionsForDeletion = questions.filter( + ({ type, deleted }) => type && type !== "result" && deleted + ) as AnyTypedQuizQuestion[]; + + questionsForDeletion.forEach(deleteFn); + }; + + useEffect(() => { + if (openBranchingPanel) { + deleteTimeoutedQuestions(); + } + }, [openBranchingPanel]); + + return ( + + + {openBranchingPanel ? : } + + + + ); +}; diff --git a/src/pages/Questions/SwitchBranchingPanel/index.tsx b/src/pages/Questions/SwitchBranchingPanel/index.tsx index bd20f70b..9e05fc3f 100644 --- a/src/pages/Questions/SwitchBranchingPanel/index.tsx +++ b/src/pages/Questions/SwitchBranchingPanel/index.tsx @@ -1,23 +1,27 @@ - - -import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material"; +import { + Box, + Typography, + Switch, + useTheme, + Button, + useMediaQuery, +} from "@mui/material"; import { QuestionsList } from "./QuestionsList"; import { updateOpenBranchingPanel } from "@root/uiTools/actions"; -import {useQuestionsStore} from "@root/questions/store"; -import {useRef} from "react"; +import { useQuestionsStore } from "@root/questions/store"; +import { useRef } from "react"; import { useUiTools } from "@root/uiTools/store"; export const SwitchBranchingPanel = () => { const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(660)); - const isTablet = useMediaQuery(theme.breakpoints.down(1446)); - - const {openBranchingPanel} = useUiTools() - const ref = useRef() - - return ( !isTablet || openBranchingPanel ? + const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isTablet = useMediaQuery(theme.breakpoints.down(1446)); + const { openBranchingPanel } = useUiTools(); + const ref = useRef(); + + return !isTablet || openBranchingPanel ? ( { }} > updateOpenBranchingPanel(e.target.checked) - } + checked={openBranchingPanel} + onChange={({ target }) => { + updateOpenBranchingPanel(target.checked); + }} sx={{ width: 50, height: 30, @@ -87,11 +91,10 @@ export const SwitchBranchingPanel = () => { Настройте связи между вопросами - - { openBranchingPanel && } + {openBranchingPanel && } - : + ) : ( <> ); }; From 8430ff999250d285c21d3cf4e470fea921565dfa Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Mon, 25 Dec 2023 19:16:04 +0300 Subject: [PATCH 08/31] fix: step --- src/pages/Questions/SliderOptions/SliderOptions.tsx | 10 ++++++++++ src/pages/ViewPublicationPage/questions/Number.tsx | 11 ++--------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index 4a7225fe..77f223cb 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -219,8 +219,10 @@ export default function SliderOptions({ question }: Props) { }); }} onBlur={({ target }) => { + const min = Number(question.content.range.split("—")[0]); const max = Number(question.content.range.split("—")[1]); const step = Number(target.value); + const range = max - min; if (step > max) { updateQuestion(question.id, (question) => { @@ -229,6 +231,14 @@ export default function SliderOptions({ question }: Props) { question.content.step = max; }); } + + if (range % step) { + updateQuestion(question.id, (question) => { + if (question.type !== "number") return; + + question.content.step = 1; + }); + } }} /> diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index e8c6569e..d6f65eb4 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -43,14 +43,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { const min = window.Number(currentQuestion.content.range.split("—")[0]); const max = window.Number(currentQuestion.content.range.split("—")[1]); - const step = currentQuestion.content.step; - const sliderValue = - answer || - (currentQuestion.content.start < min || currentQuestion.content.start > max - ? min - : currentQuestion.content.start) + - "—" + - max; + const sliderValue = answer || currentQuestion.content.start + "—" + max; useEffect(() => { if (answer) { @@ -86,7 +79,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { } min={min} max={max} - step={(max - min) % step ? 1 : step} + step={currentQuestion.content.step || 1} onChange={(_, value) => { const range = String(value).replace(",", "—"); updateAnswer(currentQuestion.content.id, range); From e34de497ce6da50465a014886e2d1f55532386f6 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Mon, 25 Dec 2023 23:39:12 +0300 Subject: [PATCH 09/31] - YoutubeEmbedIframe update --- src/pages/ViewPublicationPage/questions/Page.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx index c04e606b..1199c32b 100644 --- a/src/pages/ViewPublicationPage/questions/Page.tsx +++ b/src/pages/ViewPublicationPage/questions/Page.tsx @@ -3,6 +3,7 @@ import { Box, Typography } from "@mui/material"; import { useQuizViewStore, updateAnswer } from "@root/quizView"; import type { QuizQuestionPage } from "../../../model/questionTypes/page"; +import YoutubeEmbedIframe from "@ui_kit/StartPagePreview/YoutubeEmbedIframe"; type PageProps = { currentQuestion: QuizQuestionPage; @@ -42,15 +43,9 @@ export const Page = ({ currentQuestion }: PageProps) => { /> ) : ( - - {openBranchingPanel && } + {openBranchingPage && } ) : ( <> diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 891d3393..09de543c 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -63,13 +63,16 @@ import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate"; import { ConfirmLeaveModal } from "./ConfirmLeaveModal"; import { checkQuestionHint } from "@utils/checkQuestionHint"; +import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; +let init:() => void export default function EditPage() { const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); - console.log(quiz); + console.log('quiz ',quiz); + console.log(questions); useEffect(() => { const getData = async () => { const quizes = await quizApi.getList(); @@ -78,19 +81,21 @@ export default function EditPage() { if (editQuizId) { const questions = await questionApi.getList({ quiz_id: editQuizId }); setQuestions(questions); + //Всегда должен существовать хоть 1 резулт - "line" + // console.log("сейчас будем ворошиться в этих квешенах ", questions); + + if ( + !questions?.find( + (q) => + (q.type === "result" && q.content.includes(':"line"')) || + q.content.includes(":'line'") + ) + ) { + createResult(quiz?.backendId, "line"); + console.log("Я не нашёл линейный резулт и собираюсь создать новый") + } } - //Всегда должен существовать хоть 1 резулт - "line" - console.log(questions); - - if ( - !questions?.find( - (q) => - (q.type === "result" && q.content.includes(':"line"')) || - q.content.includes(":'line'") - ) - ) - createResult(quiz?.backendId, "line"); }; getData(); }, []); @@ -110,6 +115,14 @@ export default function EditPage() { const [nextStep, setNextStep] = useState(0); const quizConfig = quiz?.config; const disableTest = quiz === undefined ? true : quiz.config.type === null; + const [openBranchingPage, setOpenBranchingPage] = useState(false); + + const openBranchingPageHC = () => { + if (!openBranchingPage) { + deleteTimeoutedQuestions(questions, quiz) + } + setOpenBranchingPage(old => !old) + } useEffect(() => { if (editQuizId === null) navigate("/list"); @@ -310,6 +323,8 @@ export default function EditPage() { quizType={quizConfig.type} quizResults={quizConfig.results} quizStartPageType={quizConfig.startpageType} + openBranchingPage={openBranchingPage} + setOpenBranchingPage={setOpenBranchingPage} /> )} @@ -344,8 +359,8 @@ export default function EditPage() { }} > updateOpenBranchingPanel(e.target.checked)} + checked={openBranchingPage} + onChange={openBranchingPageHC} sx={{ width: 50, height: 30, @@ -413,7 +428,7 @@ export default function EditPage() { }} onClick={() => Object.keys(whyCantCreatePublic).length === 0 - ? () => {} + ? () => { } : updateModalInfoWhyCantCreate(true) } > @@ -459,10 +474,10 @@ export default function EditPage() { onClick={ Object.keys(whyCantCreatePublic).length === 0 ? () => - updateQuiz(quiz?.id, (state) => { - state.status = - quiz?.status === "start" ? "stop" : "start"; - }) + updateQuiz(quiz?.id, (state) => { + state.status = + quiz?.status === "start" ? "stop" : "start"; + }) : () => updateModalInfoWhyCantCreate(true) } > diff --git a/src/stores/questions/actions.ts b/src/stores/questions/actions.ts index 97e4b7fb..a5dcd65c 100644 --- a/src/stores/questions/actions.ts +++ b/src/stores/questions/actions.ts @@ -177,7 +177,7 @@ const REQUEST_DEBOUNCE = 200; const requestQueue = new RequestQueue(); let requestTimeoutId: ReturnType; -export const updateQuestion = ( +export const updateQuestion = async ( questionId: string, updateFn: (question: T) => void, skipQueue = false, @@ -481,20 +481,22 @@ export const getQuestionByContentId = (questionContentId: string | null) => { export const clearRuleForAll = () => { const { questions } = useQuestionsStore.getState(); - questions.forEach(question => { - if (question.type !== null && + return Promise.allSettled( + questions.map(question => { + if (question.type !== null && (question.content.rule.main.length > 0 - || question.content.rule.default.length > 0 - || question.content.rule.parentId.length > 0) - && question.type !== "result") { - - updateQuestion(question.content.id, question => { - question.content.rule.parentId = ""; - question.content.rule.main = []; - question.content.rule.default = ""; - }); - } - }); + || question.content.rule.default.length > 0 + || question.content.rule.parentId.length > 0) + && question.type !== "result") { + console.log("вызываю очистку рул вопросов") + updateQuestion(question.content.id, question => { + question.content.rule.parentId = ""; + question.content.rule.main = []; + question.content.rule.default = ""; + }); + } + }) + ) }; export const createResult = async ( @@ -506,7 +508,7 @@ export const createResult = async ( } //Мы получили запрос на создание резулта. Анализируем существует ли такой. Если да - просто делаем его активным - const question = useQuestionsStore.getState().questions.find(q=> q.type !== null && q?.content.rule.parentId === parentContentId) + const question = useQuestionsStore.getState().questions.find(q => q.type !== null && q?.content.rule.parentId === parentContentId) console.log("Получил запрос на создание результа родителю ", parentContentId) console.log("Ищу такой же результ в списке ", question) @@ -519,9 +521,9 @@ export const createResult = async ( } else {//не существует, создаём const content = JSON.parse(JSON.stringify(defaultQuestionByType["result"].content)); content.rule.parentId = parentContentId; - + try { - const createdQuestion:RawQuestion = await questionApi.create({ + const createdQuestion: RawQuestion = await questionApi.create({ quiz_id: quizId, type: "result", title: "", @@ -530,7 +532,7 @@ export const createResult = async ( required: true, content: JSON.stringify(content), }); - + setProducedState(state => { state.questions.push(rawQuestionToQuestion(createdQuestion)) }, { @@ -541,6 +543,6 @@ export const createResult = async ( devlog("Error creating question", error); enqueueSnackbar("Не удалось создать вопрос"); } - } + } }); diff --git a/src/stores/uiTools/actions.ts b/src/stores/uiTools/actions.ts index 29b63dc5..7225818e 100644 --- a/src/stores/uiTools/actions.ts +++ b/src/stores/uiTools/actions.ts @@ -39,3 +39,6 @@ export const updateCanCreatePublic = (can: boolean) => useUiTools.setState({ can export const updateModalInfoWhyCantCreate = (can: boolean) => useUiTools.setState({ openModalInfoWhyCantCreate: can }); export const updateDeleteId = (deleteNodeId: string | null = null) => useUiTools.setState({ deleteNodeId }); export const setShowConfirmLeaveModal = (showConfirmLeaveModal: boolean) => useUiTools.setState({ showConfirmLeaveModal }); + + +export const updateSomeWorkBackend = (someWorkBackend: boolean) => useUiTools.setState({ someWorkBackend }); diff --git a/src/stores/uiTools/store.ts b/src/stores/uiTools/store.ts index c7ddc9a5..baa0a444 100644 --- a/src/stores/uiTools/store.ts +++ b/src/stores/uiTools/store.ts @@ -12,6 +12,7 @@ export type UiTools = { openModalInfoWhyCantCreate: boolean; deleteNodeId: string | null; showConfirmLeaveModal: boolean; + someWorkBackend: boolean; }; export type WhyCantCreatePublic = { @@ -31,6 +32,7 @@ const initialState: UiTools = { openModalInfoWhyCantCreate: false, deleteNodeId: null, showConfirmLeaveModal: false, + someWorkBackend: false }; export const useUiTools = create()( diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx index b89b755a..9e7a1fae 100755 --- a/src/ui_kit/switchStepPages.tsx +++ b/src/ui_kit/switchStepPages.tsx @@ -16,6 +16,8 @@ interface Props { quizType: QuizType; quizStartPageType: QuizStartpageType; quizResults: QuizResultsType; + openBranchingPage: boolean; + setOpenBranchingPage: (a:boolean) => void; } export default function SwitchStepPages({ @@ -23,6 +25,8 @@ export default function SwitchStepPages({ quizType, quizStartPageType, quizResults, + openBranchingPage, + setOpenBranchingPage }: Props) { switch (activeStep) { case 0: { @@ -30,7 +34,10 @@ export default function SwitchStepPages({ if (!quizStartPageType) return ; return ; } - case 1: return quizType === "form" ? : ; + case 1: return quizType === "form" ? : ; case 2: return ; case 3: return ; case 4: return ; diff --git a/src/utils/deleteFunc.ts b/src/utils/deleteFunc.ts new file mode 100644 index 00000000..5158f2ce --- /dev/null +++ b/src/utils/deleteFunc.ts @@ -0,0 +1,66 @@ +import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; +import { clearRuleForAll, deleteQuestion, getQuestionByContentId, updateQuestion } from "@root/questions/actions"; +import { updateRootContentId } from "@root/quizes/actions"; + +//Всё здесь нужно сделать последовательно. И пусть весь мир ждёт. + +export const DeleteFunction = async (questions: any, question: any, quiz: any) => { + + + if (question.type !== null) { + if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам + updateRootContentId(quiz.id, ""); + await clearRuleForAll(); + console.log("очистка рулов закончилась") + await deleteQuestion(question.id); + } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков + const clearQuestions = [] as string[]; + + //записываем потомков , а их результаты удаляем + const getChildren = (parentQuestion: AnyTypedQuizQuestion) => { + questions.forEach((targetQuestion) => { + if (targetQuestion.type !== null && targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его + if (targetQuestion.type !== "result" && targetQuestion.type !== null) { + if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id); + getChildren(targetQuestion); //и ищем его потомков + } + } + }); + }; + getChildren(question); + //чистим потомков от инфы ветвления + await Promise.allSettled( + clearQuestions.map((id) => { + updateQuestion(id, question => { + question.content.rule.parentId = ""; + question.content.rule.main = []; + question.content.rule.default = ""; + }); + }) + ) + + + //чистим rule родителя + const parentQuestion = getQuestionByContentId(question.content.rule.parentId); + const newRule = {}; + newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу + newRule.parentId = parentQuestion.content.rule.parentId; + newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId; + newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1); + + await updateQuestion(question.content.rule.parentId, (PQ) => { + PQ.content.rule = newRule; + }); + await deleteQuestion(question.id); + } + + await deleteQuestion(question.id); + + const result = questions.find(q => q.type === "result" && q.content.rule.parentId === question.content.id) + if (result) await deleteQuestion(result.id); + + } else { + await deleteQuestion(question.id); + } + +} \ No newline at end of file diff --git a/src/utils/deleteTimeoutedQuestions.ts b/src/utils/deleteTimeoutedQuestions.ts new file mode 100644 index 00000000..19c18322 --- /dev/null +++ b/src/utils/deleteTimeoutedQuestions.ts @@ -0,0 +1,25 @@ +import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared"; +import { Quiz } from "@model/quiz/quiz"; +import { updateSomeWorkBackend } from "@root/uiTools/actions"; +import { DeleteFunction } from "@utils/deleteFunc"; + +type allQuestionsTypes = AnyTypedQuizQuestion | UntypedQuizQuestion + +export const deleteTimeoutedQuestions = async (questions: allQuestionsTypes[], quiz: Quiz|undefined) => { + console.log("Я отвечаю за удаление неудалёнышей при переключении. Привет, буде знакомы") + const questionsForDeletion = questions.filter( + ({ type, deleted }) => type && type !== "result" && deleted + ) as AnyTypedQuizQuestion[]; + if (questionsForDeletion.length > 0) { + console.log("меняю занятость беком на true") + updateSomeWorkBackend(true) + + + await Promise.allSettled( + questionsForDeletion.map(question => DeleteFunction(questions, question, quiz)) + ) + + console.log("______________меняю на 'можно редактировать дальше'______________") + updateSomeWorkBackend(false) + } +}; \ No newline at end of file From ec93f8a052cbfc734d4f88e19a1ca406af223e30 Mon Sep 17 00:00:00 2001 From: Nastya Date: Wed, 27 Dec 2023 10:45:13 +0300 Subject: [PATCH 18/31] =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=D1=81=D1=8F=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=B0=D0=BA=D0=BA,=20=D1=83=D0=B4?= =?UTF-8?q?=D0=B0=D0=BB=D1=8F=D1=8E=D1=82=D1=81=D1=8F=20=D0=B2=D1=81=D0=B5?= =?UTF-8?q?=20=D1=81=D0=BB=D1=83=D1=88=D0=B0=D1=82=D0=B5=D0=BB=D0=B8=20?= =?UTF-8?q?=D0=A6=D0=A1=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/Questions/BranchingMap/hooks/usePopper.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 7136bf2e..859a593e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -53,7 +53,7 @@ export default function App() { }); useUserAccountFetcher({ - url: "https://squiz.pena.digital/customer/account", + url: "https://squiz.pena.digital/squiz/account", userId, onNewUserAccount: setUserAccount, onError: (error) => { diff --git a/src/pages/Questions/BranchingMap/hooks/usePopper.ts b/src/pages/Questions/BranchingMap/hooks/usePopper.ts index 615532a1..55ec7363 100644 --- a/src/pages/Questions/BranchingMap/hooks/usePopper.ts +++ b/src/pages/Questions/BranchingMap/hooks/usePopper.ts @@ -111,6 +111,8 @@ export const usePopper = ({ ); }); + cy?.removeAllListeners() + nodesInView.toArray()?.forEach((item) => { const node = item as NodeSingularWithPopper; From c8a472ed0bae5e01ae529e1c6a05cb6ef81cb901 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Wed, 27 Dec 2023 11:28:37 +0300 Subject: [PATCH 19/31] fix: slider answer logic --- .../Questions/SliderOptions/SliderOptions.tsx | 34 ++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index 77f223cb..b413fd51 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -1,11 +1,16 @@ import { useEffect, useState } from "react"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; -import ButtonsOptions from "../ButtonsOptions"; +import { useDebouncedCallback } from "use-debounce"; + import CustomNumberField from "@ui_kit/CustomNumberField"; + +import ButtonsOptions from "../ButtonsOptions"; import SwitchSlider from "./switchSlider"; -import type { QuizQuestionNumber } from "../../../model/questionTypes/number"; + import { updateQuestion } from "@root/questions/actions"; +import type { QuizQuestionNumber } from "../../../model/questionTypes/number"; + interface Props { question: QuizQuestionNumber; } @@ -19,14 +24,31 @@ export default function SliderOptions({ question }: Props) { const [startError, setStartError] = useState(false); const [minError, setMinError] = useState(false); const [maxError, setMaxError] = useState(false); + const startValueDebounce = useDebouncedCallback((value) => { + updateQuestion(question.id, (question) => { + if (question.type !== "number") return; + + question.content.start = value; + }); + }, 2000); useEffect(() => { const min = Number(question.content.range.split("—")[0]); const max = Number(question.content.range.split("—")[1]); const start = Number(question.content.start); - if (start < min || start > max) { + if (start < min) { setStartError(true); + startValueDebounce(min); + + return; + } + + if (start > max && min < max) { + setStartError(true); + startValueDebounce(max); + + return; } if (start >= min && start <= max) { @@ -211,7 +233,11 @@ export default function SliderOptions({ question }: Props) { placeholder={"1"} error={stepError} value={String(question.content.step)} - onChange={({ target }) => { + onChange={({ target, type }) => { + if (type === "blur") { + return; + } + updateQuestion(question.id, (question) => { if (question.type !== "number") return; From 24c1311631082befe83f16ac1e14b7cc207edf41 Mon Sep 17 00:00:00 2001 From: Nastya Date: Wed, 27 Dec 2023 11:42:10 +0300 Subject: [PATCH 20/31] =?UTF-8?q?=D0=BD=D0=B5=D0=BE=D1=82=D0=BE=D0=B1?= =?UTF-8?q?=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BD=D0=BE?= =?UTF-8?q?=D0=BF=D0=BA=D0=B8=20=D0=B2=D0=B5=D1=82=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D1=83=204=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D1=81=D0=BE=D0=B2=20=D0=B1=D0=B5=D0=B7=20=D0=B2=D0=B5=D1=82?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/Questions/ButtonsOptions.tsx | 104 +++++++++--------- src/pages/Questions/ButtonsOptionsAndPict.tsx | 10 +- 3 files changed, 60 insertions(+), 56 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 859a593e..7136bf2e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -53,7 +53,7 @@ export default function App() { }); useUserAccountFetcher({ - url: "https://squiz.pena.digital/squiz/account", + url: "https://squiz.pena.digital/customer/account", userId, onNewUserAccount: setUserAccount, onError: (error) => { diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index aa89665b..f6eba2ac 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -118,53 +118,57 @@ export default function ButtonsOptions({ > {buttonSetting.map(({ icon, title, value, myFunc }) => ( - {value === "branching" ? ( - - - Будет показан при условии - - - Название - - - Условие 1, Условие 2 - - - Все условия обязательны - - - } - > + {value === "branching" ? + question.type === "page" || question.type === "text" || question.type === "date" || question.type === "number" ? + <> + : + ( + // + // + // Будет показан при условии + // + // + // Название + // + // + // Условие 1, Условие 2 + // + // + // Все условия обязательны + // + // + // } + // > { @@ -193,7 +197,7 @@ export default function ButtonsOptions({ {icon} {isWrappMiniButtonSetting ? null : title} - + // ) : ( <> ))} - <> + {/* <> - + */} <> - } - > + > */} setButtonHover("branching")} onMouseLeave={() => setButtonHover("")} @@ -232,7 +232,7 @@ export default function ButtonsOptionsAndPict({ /> {isIconMobile ? null : "Ветвление"} - + {/* */} setButtonHover("image")} onMouseLeave={() => setButtonHover("")} @@ -266,7 +266,7 @@ export default function ButtonsOptionsAndPict({ /> {isIconMobile ? null : "Изображение"} - setOpenedReallyChangingModal(true)} sx={{ minWidth: "30px", @@ -295,7 +295,7 @@ export default function ButtonsOptionsAndPict({ }} > - + */} Date: Wed, 27 Dec 2023 14:48:25 +0300 Subject: [PATCH 21/31] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=80=D0=B0?= =?UTF-8?q?=D1=81=D0=BF=D0=BE=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=BD=D0=B8=D0=B6=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Questions/QuestionSwitchWindowTool.tsx | 39 +-- src/pages/Questions/QuestionsPage.tsx | 11 +- src/pages/startPage/EditPage.tsx | 274 ++++++++---------- 3 files changed, 129 insertions(+), 195 deletions(-) diff --git a/src/pages/Questions/QuestionSwitchWindowTool.tsx b/src/pages/Questions/QuestionSwitchWindowTool.tsx index 10372180..e60f50ca 100644 --- a/src/pages/Questions/QuestionSwitchWindowTool.tsx +++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx @@ -7,42 +7,27 @@ import { useQuestionsStore } from "@root/questions/store"; import { useUiTools } from "@root/uiTools/store"; import { useQuestions } from "@root/questions/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks"; -import { updateSomeWorkBackend } from "@root/uiTools/actions"; -import { - copyQuestion, - deleteQuestion, - deleteQuestionWithTimeout, - clearRuleForAll, - updateQuestion, - getQuestionByContentId, -} from "@root/questions/actions"; -import { updateRootContentId } from "@root/quizes/actions"; - -import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; -import { DeleteFunction } from "@utils/deleteFunc"; import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; interface Props { openBranchingPage: boolean; - setOpenBranchingPage: (a:boolean) => void; + setOpenBranchingPage: (a: boolean) => void; } -export const QuestionSwitchWindowTool = ({ - openBranchingPage, - setOpenBranchingPage}:Props) => { +export const QuestionSwitchWindowTool = ({ openBranchingPage, setOpenBranchingPage }: Props) => { const { questions } = useQuestionsStore.getState(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); const quiz = useCurrentQuiz(); - console.log("Я компонент в котором отвечала") + console.log("Я компонент в котором отвечала"); const openBranchingPageHC = () => { if (!openBranchingPage) { - deleteTimeoutedQuestions(questions, quiz) + deleteTimeoutedQuestions(questions, quiz); } - setOpenBranchingPage(!openBranchingPage) - } + setOpenBranchingPage(!openBranchingPage); + }; return ( - - {openBranchingPage ? : } - - + {openBranchingPage ? : } + {openBranchingPage && ( + + )} ); }; diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index c33752a6..e5ae8a7c 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -15,12 +15,10 @@ import { useUiTools } from "@root/uiTools/store"; interface Props { openBranchingPage: boolean; - setOpenBranchingPage: (a:boolean) => void; + setOpenBranchingPage: (a: boolean) => void; } -export default function QuestionsPage({ - openBranchingPage, - setOpenBranchingPage}:Props) { +export default function QuestionsPage({ openBranchingPage, setOpenBranchingPage }: Props) { const theme = useTheme(); const { openedModalSettingsId, openBranchingPanel } = useUiTools(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); @@ -62,10 +60,7 @@ export default function QuestionsPage({ Свернуть всё - + void +let init: () => void; export default function EditPage() { const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); - console.log('quiz ',quiz); + console.log("quiz ", quiz); console.log(questions); useEffect(() => { const getData = async () => { @@ -86,26 +76,18 @@ export default function EditPage() { if ( !questions?.find( - (q) => - (q.type === "result" && q.content.includes(':"line"')) || - q.content.includes(":'line'") + (q) => (q.type === "result" && q.content.includes(':"line"')) || q.content.includes(":'line'") ) ) { createResult(quiz?.backendId, "line"); - console.log("Я не нашёл линейный резулт и собираюсь создать новый") + console.log("Я не нашёл линейный резулт и собираюсь создать новый"); } } - }; getData(); }, []); - const { - openBranchingPanel, - whyCantCreatePublic, - canCreatePublic, - showConfirmLeaveModal, - } = useUiTools(); + const { openBranchingPanel, whyCantCreatePublic, canCreatePublic, showConfirmLeaveModal } = useUiTools(); const theme = useTheme(); const navigate = useNavigate(); const currentStep = useQuizStore((state) => state.currentStep); @@ -119,10 +101,10 @@ export default function EditPage() { const openBranchingPageHC = () => { if (!openBranchingPage) { - deleteTimeoutedQuestions(questions, quiz) + deleteTimeoutedQuestions(questions, quiz); } - setOpenBranchingPage(old => !old) - } + setOpenBranchingPage((old) => !old); + }; useEffect(() => { if (editQuizId === null) navigate("/list"); @@ -137,21 +119,18 @@ export default function EditPage() { [] ); - const updateQuestionHint = useDebouncedCallback( - (questions: AnyTypedQuizQuestion[]) => { - const problems = checkQuestionHint(questions); - useUiTools.setState({ whyCantCreatePublic: problems }); - if (Object.keys(problems).length > 0) { - updateQuiz(quiz?.id, (state) => { - state.status = "stop"; - }); - updateCanCreatePublic(false); - } else { - updateCanCreatePublic(true); - } - }, - 600 - ); + const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => { + const problems = checkQuestionHint(questions); + useUiTools.setState({ whyCantCreatePublic: problems }); + if (Object.keys(problems).length > 0) { + updateQuiz(quiz?.id, (state) => { + state.status = "stop"; + }); + updateCanCreatePublic(false); + } else { + updateCanCreatePublic(true); + } + }, 600); useEffect(() => { updateQuestionHint(questions); @@ -175,6 +154,8 @@ export default function EditPage() { }; if (!quizConfig) return <>; + + const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; return ( <> {/*хедер*/} @@ -308,45 +289,44 @@ export default function EditPage() { sx={{ background: theme.palette.background.default, width: "100%", - padding: isMobile ? "16px 16px 140px 16px" : "25px 25px 140px 25px", - height: "calc(100vh - 80px)", - overflow: "auto", - boxSizing: "border-box", }} > - {/* Выбор текущей страницы редактирования чего-либо находится здесь */} - {quizConfig && ( - <> - - - - )} - + - {[1].includes(currentStep) && - !openBranchingPanel && - quizConfig.type !== "form" && ( + boxSizing: "border-box", + }} + > + {/* Выбор текущей страницы редактирования чего-либо находится здесь */} + {quizConfig && ( + <> + + + + )} + + + {isConditionMet && ( - - Логика ветвления - + Логика ветвления )} - {!canCreatePublic && quiz.config.type !== "form" ? ( - - ) : ( - + {!canCreatePublic && quiz.config.type !== "form" ? ( - - )} + ) : ( + + + + )} - - {quiz?.status === "start" && ( - + updateQuiz(quiz?.id, (state) => { + state.status = quiz?.status === "start" ? "stop" : "start"; + }) + : () => updateModalInfoWhyCantCreate(true) + } > - https://hbpn.link/{quiz.qid} - - )} + {quiz?.status === "start" ? "Стоп" : "Старт"} + + {quiz?.status === "start" && ( + + https://hbpn.link/{quiz.qid} + + )} + From d6a9955a880b6ddb0d26f3f51d8895ae89a77f90 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 27 Dec 2023 18:16:23 +0300 Subject: [PATCH 22/31] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=BD=D0=B8=D0=B6=D0=BD=D0=B8=D0=B5=20=D0=BC=D0=B5=D0=BD=D1=8E?= =?UTF-8?q?=20=D0=BF=D0=BE=D0=B4=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D0=BA?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/BackButtonIcon.tsx | 11 + src/assets/icons/CrossedEyeIcon.tsx | 9 +- src/assets/icons/EyeIcon.tsx | 47 +- src/assets/icons/LinkSimple.tsx | 27 + .../FormDraggableList/QuestionPageCard.tsx | 493 +++++++++--------- src/pages/startPage/EditPage.tsx | 157 ++++-- src/ui_kit/QuizPreview/QuizPreview.tsx | 21 +- src/ui_kit/StartPagePreview/index.tsx | 20 +- 8 files changed, 432 insertions(+), 353 deletions(-) create mode 100644 src/assets/icons/BackButtonIcon.tsx create mode 100644 src/assets/icons/LinkSimple.tsx diff --git a/src/assets/icons/BackButtonIcon.tsx b/src/assets/icons/BackButtonIcon.tsx new file mode 100644 index 00000000..c0fc7065 --- /dev/null +++ b/src/assets/icons/BackButtonIcon.tsx @@ -0,0 +1,11 @@ +export const BackButtonIcon = () => ( + + + +); diff --git a/src/assets/icons/CrossedEyeIcon.tsx b/src/assets/icons/CrossedEyeIcon.tsx index c9021ca9..1d433122 100644 --- a/src/assets/icons/CrossedEyeIcon.tsx +++ b/src/assets/icons/CrossedEyeIcon.tsx @@ -2,14 +2,7 @@ import { FC, SVGProps } from "react"; export const CrossedEyeIcon: FC> = (props) => { return ( - + - - - - - - ); -} \ No newline at end of file + return ( + + + + + + + ); +} diff --git a/src/assets/icons/LinkSimple.tsx b/src/assets/icons/LinkSimple.tsx new file mode 100644 index 00000000..193b7acb --- /dev/null +++ b/src/assets/icons/LinkSimple.tsx @@ -0,0 +1,27 @@ +import { FC, SVGProps } from "react"; + +export const LinkSimple: FC> = (props) => ( + + + + + +); diff --git a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx index d5d4663d..6def0204 100644 --- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx @@ -12,21 +12,24 @@ import Page from "@icons/questionsPage/page"; import RatingIcon from "@icons/questionsPage/rating"; import Slider from "@icons/questionsPage/slider"; import { - Box, Checkbox, - FormControl, - FormControlLabel, - IconButton, - InputAdornment, - Paper, TextField, - useMediaQuery, - useTheme + Box, + Checkbox, + FormControl, + FormControlLabel, + IconButton, + InputAdornment, + Paper, + TextField, + useMediaQuery, + useTheme, } from "@mui/material"; import { - copyQuestion, - deleteQuestion, deleteQuestionWithTimeout, - toggleExpandQuestion, - updateQuestion, - updateUntypedQuestion + copyQuestion, + deleteQuestion, + deleteQuestionWithTimeout, + toggleExpandQuestion, + updateQuestion, + updateUntypedQuestion, } from "@root/questions/actions"; import CustomTextField from "@ui_kit/CustomTextField"; import { useRef, useState } from "react"; @@ -66,246 +69,236 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr }); }, 200); - return ( - <> - + + + + - - - - setTitle(target.value)} - sx={{ - width: "100%", - margin: isMobile ? "10px 0" : 0, - "& .MuiInputBase-root": { - color: "#000000", - backgroundColor: question.expanded - ? theme.palette.background.default - : "transparent", - height: "48px", - borderRadius: "10px", - ".MuiOutlinedInput-notchedOutline": { - borderWidth: "1px !important", - border: !question.expanded ? "none" : null, - }, - "& .MuiInputBase-input::placeholder": { - color: "#4D4D4D", - opacity: 0.8, - }, - }, - }} - InputProps={{ - startAdornment: ( - - setOpen((isOpened) => !isOpened)} - > - {IconAndrom(question.type)} - - setOpen(false)} - anchorRef={anchorRef} - question={question} - questionType={question.type} - /> - - ), - }} - /> - - - - toggleExpandQuestion(question.id)} - > - {question.expanded ? ( - - ) : ( - - )} - - - {question.expanded ? ( - <> - ) : ( - - - } - checkedIcon={} - /> - } - label={""} - sx={{ - color: theme.palette.grey2.main, - ml: "-9px", - mr: 0, - userSelect: "none", - }} - /> - copyQuestion(question.id, question.quizId)} - > - - - { - deleteQuestionWithTimeout(question.id, () => deleteQuestion(question.id)); - - }} - > - - - - )} - - - {questionIndex + 1} - - - - - - - + setTitle(target.value)} + sx={{ + width: "100%", + margin: isMobile ? "10px 0" : 0, + "& .MuiInputBase-root": { + color: "#000000", + backgroundColor: question.expanded ? theme.palette.background.default : "transparent", + height: "48px", + borderRadius: "10px", + ".MuiOutlinedInput-notchedOutline": { + borderWidth: "1px !important", + border: !question.expanded ? "none" : null, + }, + "& .MuiInputBase-input::placeholder": { + color: "#4D4D4D", + opacity: 0.8, + }, + }, + }} + InputProps={{ + startAdornment: ( + + setOpen((isOpened) => !isOpened)} + > + {IconAndrom(question.type)} + + setOpen(false)} + anchorRef={anchorRef} + question={question} + questionType={question.type} + /> - {question.expanded && ( - <> - {question.type === null ? ( - - ) : ( - - )} - - )} + ), + }} + /> + + + + toggleExpandQuestion(question.id)} + > + {question.expanded ? ( + + ) : ( + + )} + + + {question.expanded ? ( + <> + ) : ( + + + } + checkedIcon={} + /> + } + label={""} + sx={{ + color: theme.palette.grey2.main, + ml: "-9px", + mr: 0, + userSelect: "none", + }} + /> + copyQuestion(question.id, question.quizId)}> + + + { + deleteQuestionWithTimeout(question.id, () => deleteQuestion(question.id)); + }} + > + + + + )} + + + {questionIndex + 1} - - - ); + + + + + + + + {question.expanded && ( + <> + {question.type === null ? ( + + ) : ( + + )} + + )} + + + + ); } const IconAndrom = (questionType: QuestionType | null) => { diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 5c7d6288..a414177e 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -4,6 +4,8 @@ import BackArrowIcon from "@icons/BackArrowIcon"; import { Burger } from "@icons/Burger"; import EyeIcon from "@icons/EyeIcon"; import { PenaLogoIcon } from "@icons/PenaLogoIcon"; +import VisibilityIcon from "@mui/icons-material/Visibility"; + import { Box, Button, @@ -54,6 +56,9 @@ import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate"; import { ConfirmLeaveModal } from "./ConfirmLeaveModal"; import { checkQuestionHint } from "@utils/checkQuestionHint"; import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; +import { toggleQuizPreview } from "@root/quizPreview"; +import { LinkSimple } from "@icons/LinkSimple"; +import { BackButtonIcon } from "@icons/BackButtonIcon"; let init: () => void; export default function EditPage() { @@ -93,6 +98,7 @@ export default function EditPage() { const currentStep = useQuizStore((state) => state.currentStep); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); const [mobileSidebar, setMobileSidebar] = useState(false); const [nextStep, setNextStep] = useState(0); const quizConfig = quiz?.config; @@ -156,6 +162,27 @@ export default function EditPage() { if (!quizConfig) return <>; const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; + + const [buttonText, setButtonText] = useState("Опубликовать"); + + const handleClickStatusQuiz = () => { + if (Object.keys(whyCantCreatePublic).length === 0) { + setButtonText("Опубликовано"); + + setTimeout(() => { + setButtonText("Отозвать"); + }, 3000); + + updateQuiz(quiz?.id, (state) => { + state.status = quiz?.status === "start" ? "stop" : "start"; + }); + } else { + updateModalInfoWhyCantCreate(true); + } + }; + + console.log(buttonText); + return ( <> {/*хедер*/} @@ -289,14 +316,14 @@ export default function EditPage() { sx={{ background: theme.palette.background.default, width: "100%", + overflow: "hidden", }} > @@ -320,7 +347,8 @@ export default function EditPage() { width: "100%", padding: isMobile ? "20px 16px" : "20px 20px", display: "flex", - justifyContent: "flex-start", + justifyContent: isMobile ? (isMobileSm ? "center" : "flex-end") : "flex-start", + flexDirection: isMobile ? "row-reverse" : "-moz-initial", alignItems: "center", gap: "15px", background: "#FFF", @@ -387,64 +415,64 @@ export default function EditPage() { )} - {!canCreatePublic && quiz.config.type !== "form" ? ( - - ) : ( - + + {!canCreatePublic && quiz.config.type !== "form" ? ( - - )} + ) : ( + + + + )} + {quiz?.status === "start" && ( )} + + {isMobile ? ( + + ) : ( + + + + )} + + {isMobile && quiz?.status === "start" && ( + + + + )} diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index 3fa01fe8..342d2f52 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -1,4 +1,3 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; import { Box, IconButton } from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { useLayoutEffect, useRef } from "react"; @@ -34,13 +33,7 @@ export default function QuizPreview() { function stickPreviewToBottomRight() { const rnd = rndRef.current; const rndSelfElement = rnd?.getSelfElement(); - if ( - !rnd || - !rndSelfElement || - !rndParentRef.current || - !isFirstShowRef.current - ) - return; + if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return; const rndParentRect = rndParentRef.current.getBoundingClientRect(); const rndRect = rndSelfElement.getBoundingClientRect(); @@ -118,18 +111,6 @@ export default function QuizPreview() { )} - - - ); } diff --git a/src/ui_kit/StartPagePreview/index.tsx b/src/ui_kit/StartPagePreview/index.tsx index 97442480..6e4b782e 100644 --- a/src/ui_kit/StartPagePreview/index.tsx +++ b/src/ui_kit/StartPagePreview/index.tsx @@ -1,4 +1,3 @@ -import VisibilityIcon from "@mui/icons-material/Visibility"; import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { useLayoutEffect, useRef } from "react"; @@ -35,13 +34,7 @@ export const StartPagePreview = () => { function stickPreviewToBottomRight() { const rnd = rndRef.current; const rndSelfElement = rnd?.getSelfElement(); - if ( - !rnd || - !rndSelfElement || - !rndParentRef.current || - !isFirstShowRef.current - ) - return; + if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return; const rndParentRect = rndParentRef.current.getBoundingClientRect(); const rndRect = rndSelfElement.getBoundingClientRect(); @@ -119,17 +112,6 @@ export const StartPagePreview = () => { )} - - - ); }; From 85dac95e60eeebab1cf01e580456ef034ba05969 Mon Sep 17 00:00:00 2001 From: skeris Date: Wed, 27 Dec 2023 18:30:40 +0300 Subject: [PATCH 23/31] feat: create account in squiz --- src/App.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 7136bf2e..783f38cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,15 +16,61 @@ import { ResultSettings } from "./pages/ResultPage/ResultSettings"; import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull"; import Main from "./pages/main"; import EditPage from "./pages/startPage/EditPage"; -import { clearAuthToken, getMessageFromFetchError, useUserAccountFetcher, useUserFetcher } from "@frontend/kitui"; +import { clearAuthToken, getMessageFromFetchError, useUserFetcher, UserAccount, makeRequest, devlog, createUserAccount } from "@frontend/kitui"; import { clearUserData, setUser, setUserAccount, useUserStore } from "@root/user"; import { enqueueSnackbar } from "notistack"; import PrivateRoute from "@ui_kit/PrivateRoute"; import { Restore } from "./pages/startPage/Restore"; +import { isAxiosError } from "axios"; +import { useEffect, useLayoutEffect, useRef } from "react"; +export function useUserAccountFetcher({ onError, onNewUserAccount, url, userId }: { + url: string; + userId: string | null; + onNewUserAccount: (response: UserAccount) => void; + onError?: (error: any) => void; +}) { + const onNewUserAccountRef = useRef(onNewUserAccount); + const onErrorRef = useRef(onError); + useLayoutEffect(() => { + onNewUserAccountRef.current = onNewUserAccount; + onErrorRef.current = onError; + }, [onError, onNewUserAccount]); + useEffect(() => { + if (!userId) return; + const controller = new AbortController(); + makeRequest({ + url, + contentType: true, + method: "GET", + useToken: true, + withCredentials: false, + signal: controller.signal, + }).then(result => { + devlog("User account", result); + onNewUserAccountRef.current(result); + }).catch(error => { + devlog("Error fetching user account", error); + if (isAxiosError(error) && error.response?.status === 404) { + createUserAccount(controller.signal, url.replace('get','create')).then(result => { + devlog("Created user account", result); + onNewUserAccountRef.current(result); + }).catch(error => { + devlog("Error creating user account", error); + onErrorRef.current?.(error); + }); + } else { + onErrorRef.current?.(error); + } + }); + return () => controller.abort(); + }, [url, userId]); +} + dayjs.locale("ru"); + const routeslink = [ { path: "/list", page: , header: false, sidebar: false }, { path: "/questions/:quizId", page: , header: true, sidebar: true }, @@ -53,7 +99,7 @@ export default function App() { }); useUserAccountFetcher({ - url: "https://squiz.pena.digital/customer/account", + url: "https://squiz.pena.digital/squiz/account/get", userId, onNewUserAccount: setUserAccount, onError: (error) => { From aa05145228c2858b3b0ff8eb556126d5db03bf6d Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 27 Dec 2023 18:39:21 +0300 Subject: [PATCH 24/31] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8E=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=BE?= =?UTF-8?q?=D0=B1=D0=B8=D0=BB=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index a414177e..33c5c634 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -164,14 +164,16 @@ export default function EditPage() { const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; const [buttonText, setButtonText] = useState("Опубликовать"); - const handleClickStatusQuiz = () => { if (Object.keys(whyCantCreatePublic).length === 0) { - setButtonText("Опубликовано"); - - setTimeout(() => { - setButtonText("Отозвать"); - }, 3000); + if (buttonText === "Опубликовать") { + setButtonText("Опубликовано"); + setTimeout(() => { + setButtonText("Отозвать"); + }, 3000); + } else { + setButtonText("Опубликовать"); + } updateQuiz(quiz?.id, (state) => { state.status = quiz?.status === "start" ? "stop" : "start"; @@ -181,7 +183,7 @@ export default function EditPage() { } }; - console.log(buttonText); + console.log(quiz?.status); return ( <> @@ -455,7 +457,7 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", - background: buttonText === "Опубликовать" || "Отозвать" ? "#7E2AEA" : "#FA5B0E", + background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA", }} onClick={handleClickStatusQuiz} > From 9b47cd018c89b6ea8a6d43355e750cbe7671c84c Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 27 Dec 2023 18:47:02 +0300 Subject: [PATCH 25/31] =?UTF-8?q?=D1=81=D0=BC=D0=B5=D0=BD=D0=B0=20=D1=82?= =?UTF-8?q?=D0=B5=D0=BA=D1=81=D1=82=D0=B0=20=D1=83=20=D0=BA=D0=BD=D0=BE?= =?UTF-8?q?=D0=BF=D0=BA=D0=B8=20=D0=BE=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 33c5c634..8a0bed52 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -457,7 +457,7 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", - background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA", + background: quiz?.status === "start" ? "#7E2AEA" : "#FA5B0E", }} onClick={handleClickStatusQuiz} > From fddd2d3cbaf2c6cbca551b97c06a81f78f7e3170 Mon Sep 17 00:00:00 2001 From: Nastya Date: Wed, 27 Dec 2023 20:26:55 +0300 Subject: [PATCH 26/31] =?UTF-8?q?=D0=B2=D0=B5=D1=82=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=83=D0=BC=D0=B5=D0=B5=D1=82=20=D0=B8?= =?UTF-8?q?=D1=81=D0=BA=D0=B0=D1=82=D1=8C=20=D1=81=D0=BB=D0=B5=D0=B4=D1=83?= =?UTF-8?q?=D1=8E=D1=89=D0=B8=D0=B9=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81?= =?UTF-8?q?=20=D1=81=20=D1=83=D1=81=D0=BB=D0=BE=D0=B2=D0=B8=D0=B5=D0=BC=20?= =?UTF-8?q?=D0=BD=D0=B5=D0=BE=D0=B1=D1=8F=D0=B7=D0=B0=D1=82=D0=B5=D0=BB?= =?UTF-8?q?=D1=8C=D0=BD=D0=BE=D1=81=D1=82=D0=B8=20=D0=B8=20=D1=83=D0=BC?= =?UTF-8?q?=D0=B5=D0=B5=D1=82=20=D0=B8=D1=81=D0=BA=D0=B0=D1=82=D1=8C=20?= =?UTF-8?q?=D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ViewPublicationPage/Footer.tsx | 51 +++++++++++++++--------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx index 1720dadc..054a3d9f 100644 --- a/src/pages/ViewPublicationPage/Footer.tsx +++ b/src/pages/ViewPublicationPage/Footer.tsx @@ -9,8 +9,8 @@ import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questio import { getQuestionByContentId } from "@root/questions/actions"; import { enqueueSnackbar } from "notistack"; import { NameplateLogoFQ } from "@icons/NameplateLogoFQ"; -import {NameplateLogoFQDark} from "@icons/NameplateLogoFQDark"; -import {modes} from "../../utils/themes/Publication/themePublication"; +import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark"; +import { modes } from "../../utils/themes/Publication/themePublication"; import { checkEmptyData } from "../ResultPage/cards/ResultCard"; type FooterProps = { @@ -116,10 +116,14 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh }; const getNextQuestionId = () => { + console.log("net") + console.log(question) + let readyBeNextQuestion = ""; + + //вопрос обязателен, анализируем ответ и условия ветвления if (answers.length) { const answer = answers.find(({ questionId }) => questionId === question.content.id); - let readyBeNextQuestion = ""; (question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => { let longerArray = Math.max( @@ -146,8 +150,23 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh } }); - return readyBeNextQuestion; + if (readyBeNextQuestion) return readyBeNextQuestion; } + + if (!question.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления + console.log("вопрос не обязателен ищем дальше") + const defaultQ = question.content.rule.default + if (defaultQ) return defaultQ + + } + //ничё не нашли, ищем резулт + console.log("ничё не нашли, ищем резулт ") + return questions.find(q => { + console.log('q.type === "result"', q.type === "result") + console.log('q.content.rule.parentId === question.content.id', q.content.rule.parentId === question.content.id) + return q.type === "result" && q.content.rule.parentId === question.content.id + })?.content.id + }; const followPreviousStep = () => { @@ -195,22 +214,18 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh const nextQuestionId = getNextQuestionId(); + console.log(nextQuestionId) if (nextQuestionId) { const nextQuestion = getQuestionByContentId(nextQuestionId); + console.log(nextQuestion) - if (nextQuestion?.type && nextQuestion.type !== "result") { - setCurrentQuestion(nextQuestion); - return; + if (nextQuestion?.type && nextQuestion.type === "result") { + showResult(nextQuestion); } else { - enqueueSnackbar("не могу получить последующий вопрос"); + setCurrentQuestion(nextQuestion); } } else { - const nextQuestion = getQuestionByContentId(question.content.rule.default); - if (nextQuestion?.type && nextQuestion.type !== "result") { - setCurrentQuestion(nextQuestion); - } else { - showResult(nextQuestion); - } + enqueueSnackbar("не могу получить последующий вопрос"); } }; @@ -237,9 +252,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh }} > {mode[quiz.config.theme] ? ( - - ):( - + + ) : ( + ) } @@ -311,7 +326,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
+ + Все настройки, кроме заголовка вопроса будут сброшены
(вопрос всё ещё будет участвовать в ветвлении, но его условия будут сброшены) { + onClick={async () => { + + updateSomeWorkBackend(true) setOpenModal(false); + const clearQuestions = [] as string[]; + + //записываем потомков , а их результаты удаляем + const getChildren = (parentQuestion: any) => { + questions.forEach((targetQuestion) => { + if (targetQuestion.type !== null && targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его + if (targetQuestion.type !== "result" && targetQuestion.type !== null) { + if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id); + getChildren(targetQuestion); //и ищем его потомков + } + } + }); + }; + getChildren(question); + + updateQuestion(question.id, q => { + q.content.rule.parentId = ""; + q.content.rule.main = []; + q.content.rule.children = []; + q.content.rule.default = ""; + }); + //чистим потомков от инфы ветвления + await Promise.allSettled( + clearQuestions.map((id) => { + updateQuestion(id, question => { + question.content.rule.parentId = ""; + question.content.rule.main = []; + question.content.rule.children = []; + question.content.rule.default = ""; + }); + }) + ) changeQuestionType(question.id, selectedValue); + updateSomeWorkBackend(false) }} > Подтвердить diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 3ff301e3..397c6f17 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -40,6 +40,7 @@ import { updateCanCreatePublic, updateModalInfoWhyCantCreate, setShowConfirmLeaveModal, + updateSomeWorkBackend, } from "@root/uiTools/actions"; import { BranchingPanel } from "../Questions/BranchingPanel"; import { useQuestionsStore } from "@root/questions/store"; @@ -123,6 +124,7 @@ export default function EditPage() { resetEditConfig(); cleanQuestions(); updateModalInfoWhyCantCreate(false); + updateSomeWorkBackend(false) }, [] ); diff --git a/src/utils/deleteFunc.ts b/src/utils/deleteFunc.ts index 5158f2ce..27098b9d 100644 --- a/src/utils/deleteFunc.ts +++ b/src/utils/deleteFunc.ts @@ -33,6 +33,7 @@ export const DeleteFunction = async (questions: any, question: any, quiz: any) = clearQuestions.map((id) => { updateQuestion(id, question => { question.content.rule.parentId = ""; + question.content.rule.children = []; question.content.rule.main = []; question.content.rule.default = ""; }); From 3e791e98a8bc43e7f7cc5d0e8a1b1b2d842e1914 Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 28 Dec 2023 00:30:41 +0300 Subject: [PATCH 31/31] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=84=D0=BE?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D0=BE?= =?UTF-8?q?=D0=B9=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D0=B8=20=D0=BF=D1=83?= =?UTF-8?q?=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../StartPageViewPublication.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index 50638d5c..cce8c412 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -80,14 +80,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { sx={{ height: "100vh", width: "100vw", - background: - quiz.config.startpageType === "expanded" - ? quiz.config.startpage.position === "left" - ? "linear-gradient(90deg,#272626,transparent)" - : quiz.config.startpage.position === "center" - ? "linear-gradient(180deg,transparent,#272626)" - : "linear-gradient(270deg,#272626,transparent)" - : "", + background: + quiz.config.startpageType === "expanded" && !isMobile + ? quiz.config.startpage.position === "left" + ? "linear-gradient(90deg,#272626,transparent)" + : quiz.config.startpage.position === "center" + ? "linear-gradient(180deg,transparent,#272626)" + : "linear-gradient(270deg,#272626,transparent)" + : theme.palette.background.default, color: quiz.config.startpageType === "expanded" ? "white" : "black", }} @@ -114,7 +114,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { alt="" /> )} - {quiz.config.info.orgname} + {quiz.config.info.orgname} @@ -152,7 +152,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { overflowWrap: "break-word", width: "100%", textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial", - color: quiz.config.startpageType === "expanded" ? "white" : theme.palette.text.primary + color: quiz.config.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary }} > {quiz.name} @@ -225,8 +225,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { gap: "15px" }} > - - + + Сделано на PenaQuiz