diff --git a/src/constants/page.ts b/src/constants/page.ts index c33ad659..f57d4082 100644 --- a/src/constants/page.ts +++ b/src/constants/page.ts @@ -11,6 +11,7 @@ export const QUIZ_QUESTION_PAGE: Omit = { innerName: "", text: "", picture: "", + originalPicture: "", video: "", }, }; diff --git a/src/model/questionTypes/page.ts b/src/model/questionTypes/page.ts index d994ff6b..2b4536aa 100644 --- a/src/model/questionTypes/page.ts +++ b/src/model/questionTypes/page.ts @@ -13,6 +13,7 @@ export interface QuizQuestionPage extends QuizQuestionBase { innerName: string; text: string; picture: string; + originalPicture: string; video: string; hint: QuestionHint; rule: QuestionBranchingRule; diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index 41321791..faad4e7d 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -1,9 +1,8 @@ -import { ImageAddIcons } from "@icons/ImageAddIcons"; import { VideofileIcon } from "@icons/questionsPage/VideofileIcon"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { questionStore, updateQuestionsList } from "@root/questions"; +import { questionStore, setPageQuestionOriginalPicture, setPageQuestionPicture, updateQuestionsList } from "@root/questions"; import CustomTextField from "@ui_kit/CustomTextField"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useParams } from "react-router-dom"; import { useDebouncedCallback } from "use-debounce"; import ButtonsOptions from "../ButtonsOptions"; @@ -11,6 +10,9 @@ import { UploadImageModal } from "../UploadImage/UploadImageModal"; import { UploadVideoModal } from "../UploadVideoModal"; import SwitchPageOptions from "./switchPageOptions"; +import { openCropModal } from "@root/cropModal"; +import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton"; +import { CropModal } from "@ui_kit/Modal/CropModal"; import type { QuizQuestionPage } from "../../../model/questionTypes/page"; type Props = { @@ -39,6 +41,21 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { setSwitchState(data); }; + function handleImageUpload(fileList: FileList | null) { + if (!fileList?.length) return; + + const url = URL.createObjectURL(fileList[0]); + + setPageQuestionPicture(quizId, totalIndex, url); + setPageQuestionOriginalPicture(quizId, totalIndex, url); + setOpenImageModal(false); + openCropModal(url, url); + } + + function handleCropModalSaveClick(url: string) { + setPageQuestionPicture(quizId, totalIndex, url); + } + return ( <> setOpenImageModal(true)} sx={{ cursor: "pointer", display: "flex", @@ -78,101 +94,22 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { gap: "20px", }} > - {isMobile ? ( - - - {question.content.picture ? ( - - - - ) : ( - - )} - - - + - - - ) : ( - - {question.content.picture ? ( - - - - ) : ( - - - - )} - - + - - - )} + { + if (question.content.picture) { + return openCropModal( + question.content.picture, + question.content.originalPicture + ); + } + + setOpenImageModal(true); + }} + onPlusClick={() => { + setOpenImageModal(true); + }} + /> setOpenImageModal(false)} - imgHC={(fileList) => { - if (fileList?.length) { - updateQuestionsList(quizId, totalIndex, { - content: { - ...question.content, - picture: URL.createObjectURL(fileList[0]), - }, - }); - } - }} - // onClick={() => setOpenVideoModal(true)} + imgHC={handleImageUpload} /> + или ( questionStore.setState({ listQuestions: questionListClone }); }; +export const updateQuestion = ( + quizId: number, + questionIndex: number, + recipe: (question: T) => void, +) => setProducedState(state => { + const question = state.listQuestions[quizId][questionIndex] as T; + + recipe(question); +}, { + type: "updateQuestion", + quizId, + questionIndex, + recipe, +}); + export const removeQuestionsByQuizId = (quizId: number) => setProducedState(state => { delete state.listQuestions[quizId]; }, "removeQuestionsByQuizId"); @@ -172,6 +187,36 @@ export const setVariantOriginalImageUrl = ( url, }); +export const setPageQuestionPicture = ( + quizId: number, + questionIndex: number, + url: string, +) => setProducedState(state => { + const question = state.listQuestions[quizId][questionIndex]; + if (question.type !== "page") return; + + if (question.content.picture === url) return; + + if ( + question.content.picture !== question.content.originalPicture + ) URL.revokeObjectURL(question.content.picture); + question.content.picture = url; +}); + +export const setPageQuestionOriginalPicture = ( + quizId: number, + questionIndex: number, + url: string, +) => setProducedState(state => { + const question = state.listQuestions[quizId][questionIndex]; + if (question.type !== "page") return; + + if (question.content.originalPicture === url) return; + + URL.revokeObjectURL(question.content.originalPicture); + question.content.originalPicture = url; +}); + export const updateQuestionsListDragAndDrop = ( quizId: number, updatedQuestions: AnyQuizQuestion[]