From cfe785802687e25045f65a66cc00376e1266aecc Mon Sep 17 00:00:00 2001 From: nflnkr Date: Tue, 24 Oct 2023 18:18:31 +0300 Subject: [PATCH] fix question background setting crop modal add original image loading --- src/constants/base.ts | 1 + src/model/questionTypes/date.ts | 1 + src/model/questionTypes/emoji.ts | 1 + src/model/questionTypes/file.ts | 1 + src/model/questionTypes/images.ts | 1 + src/model/questionTypes/number.ts | 1 + src/model/questionTypes/page.ts | 1 + src/model/questionTypes/rating.ts | 1 + src/model/questionTypes/select.ts | 1 + src/model/questionTypes/shared.ts | 1 + src/model/questionTypes/text.ts | 1 + src/model/questionTypes/variant.ts | 1 + src/model/questionTypes/varimg.ts | 1 + src/pages/Questions/UploadImage/index.tsx | 142 ++++++++++++---------- src/stores/questions.ts | 28 +++++ 15 files changed, 122 insertions(+), 61 deletions(-) diff --git a/src/constants/base.ts b/src/constants/base.ts index feae09e3..41062159 100644 --- a/src/constants/base.ts +++ b/src/constants/base.ts @@ -24,6 +24,7 @@ export const QUIZ_QUESTION_BASE: Omit = { ], }, back: "", + originalBack: "", autofill: false, }, }; diff --git a/src/model/questionTypes/date.ts b/src/model/questionTypes/date.ts index ea1c8dd4..2b905e85 100644 --- a/src/model/questionTypes/date.ts +++ b/src/model/questionTypes/date.ts @@ -18,6 +18,7 @@ export interface QuizQuestionDate extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; }; } diff --git a/src/model/questionTypes/emoji.ts b/src/model/questionTypes/emoji.ts index 84193a43..4a9f7efc 100644 --- a/src/model/questionTypes/emoji.ts +++ b/src/model/questionTypes/emoji.ts @@ -22,6 +22,7 @@ export interface QuizQuestionEmoji extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; }; } diff --git a/src/model/questionTypes/file.ts b/src/model/questionTypes/file.ts index 514424f2..e60e4376 100644 --- a/src/model/questionTypes/file.ts +++ b/src/model/questionTypes/file.ts @@ -29,5 +29,6 @@ export interface QuizQuestionFile extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; }; } diff --git a/src/model/questionTypes/images.ts b/src/model/questionTypes/images.ts index 64009058..169abd20 100644 --- a/src/model/questionTypes/images.ts +++ b/src/model/questionTypes/images.ts @@ -29,6 +29,7 @@ export interface QuizQuestionImages extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; largeCheck: boolean; }; diff --git a/src/model/questionTypes/number.ts b/src/model/questionTypes/number.ts index 2beb1f5c..68f1370e 100644 --- a/src/model/questionTypes/number.ts +++ b/src/model/questionTypes/number.ts @@ -27,6 +27,7 @@ export interface QuizQuestionNumber extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; form: "star" | "trophie" | "flag" | "heart" | "like" | "bubble" | "hashtag"; }; diff --git a/src/model/questionTypes/page.ts b/src/model/questionTypes/page.ts index 2b4536aa..9f829c86 100644 --- a/src/model/questionTypes/page.ts +++ b/src/model/questionTypes/page.ts @@ -18,6 +18,7 @@ export interface QuizQuestionPage extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; }; } diff --git a/src/model/questionTypes/rating.ts b/src/model/questionTypes/rating.ts index 7799dff6..2f73ef17 100644 --- a/src/model/questionTypes/rating.ts +++ b/src/model/questionTypes/rating.ts @@ -20,6 +20,7 @@ export interface QuizQuestionRating extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; /** Позитивное описание рейтинга */ ratingPositiveDescription: string; diff --git a/src/model/questionTypes/select.ts b/src/model/questionTypes/select.ts index 6b734a90..f74cfdb5 100644 --- a/src/model/questionTypes/select.ts +++ b/src/model/questionTypes/select.ts @@ -22,6 +22,7 @@ export interface QuizQuestionSelect extends QuizQuestionBase { rule: QuestionBranchingRule; hint: QuestionHint; back: string; + originalBack: string; autofill: boolean; }; } diff --git a/src/model/questionTypes/shared.ts b/src/model/questionTypes/shared.ts index 4469d76c..c5fd91a5 100644 --- a/src/model/questionTypes/shared.ts +++ b/src/model/questionTypes/shared.ts @@ -55,6 +55,7 @@ export interface QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; }; } diff --git a/src/model/questionTypes/text.ts b/src/model/questionTypes/text.ts index 43f35417..ef9b6dbf 100644 --- a/src/model/questionTypes/text.ts +++ b/src/model/questionTypes/text.ts @@ -20,5 +20,6 @@ export interface QuizQuestionText extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; }; } diff --git a/src/model/questionTypes/variant.ts b/src/model/questionTypes/variant.ts index 9a7f3c9b..32c0c4bc 100644 --- a/src/model/questionTypes/variant.ts +++ b/src/model/questionTypes/variant.ts @@ -25,6 +25,7 @@ export interface QuizQuestionVariant extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; }; } diff --git a/src/model/questionTypes/varimg.ts b/src/model/questionTypes/varimg.ts index 48434d3f..62145515 100644 --- a/src/model/questionTypes/varimg.ts +++ b/src/model/questionTypes/varimg.ts @@ -20,6 +20,7 @@ export interface QuizQuestionVarImg extends QuizQuestionBase { hint: QuestionHint; rule: QuestionBranchingRule; back: string; + originalBack: string; autofill: boolean; largeCheck: boolean; replText: string; diff --git a/src/pages/Questions/UploadImage/index.tsx b/src/pages/Questions/UploadImage/index.tsx index 8e6beef3..d255b0c7 100644 --- a/src/pages/Questions/UploadImage/index.tsx +++ b/src/pages/Questions/UploadImage/index.tsx @@ -1,77 +1,97 @@ -import { useParams } from "react-router-dom"; -import { Typography, Box, useTheme, ButtonBase } from "@mui/material"; -import UploadBox from "@ui_kit/UploadBox"; +import { Box, ButtonBase, Typography, useTheme } from "@mui/material"; +import { questionStore, setQuestionBackgroundImage, setQuestionOriginalBackgroundImage } from "@root/questions"; import { CropModal } from "@ui_kit/Modal/CropModal"; -import UploadIcon from "../../../assets/icons/UploadIcon"; +import UploadBox from "@ui_kit/UploadBox"; import * as React from "react"; -import { questionStore, updateQuestionsList } from "@root/questions"; +import { useParams } from "react-router-dom"; +import UploadIcon from "../../../assets/icons/UploadIcon"; import { UploadImageModal } from "./UploadImageModal"; -import type { DragEvent } from "react"; -import type { QuizQuestionImages } from "../../../model/questionTypes/images"; import { openCropModal } from "@root/cropModal"; +import { QuizQuestionBase } from "model/questionTypes/shared"; +import type { DragEvent } from "react"; type UploadImageProps = { - totalIndex: number; + totalIndex: number; }; export default function UploadImage({ totalIndex }: UploadImageProps) { - const quizId = Number(useParams().quizId); - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - const { listQuestions } = questionStore(); - const question = listQuestions[quizId][totalIndex] as QuizQuestionImages; + const quizId = Number(useParams().quizId); + const theme = useTheme(); + const [isUploadImageModalOpen, setIsUploadImageModalOpen] = React.useState(false); + const { listQuestions } = questionStore(); + const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - const imgHC = (files: FileList | null) => { - if (files?.length) { - const [file] = Array.from(files); + const handleImageUpload = (files: FileList | null) => { + if (!files?.length) return; - updateQuestionsList(quizId, totalIndex, { - content: { - ...question.content, - back: URL.createObjectURL(file), - }, - }); + const [file] = Array.from(files); - handleClose(); - openCropModal(question.content.back, question.content.back); + const url = URL.createObjectURL(file); + + setQuestionBackgroundImage(quizId, totalIndex, url); + setQuestionOriginalBackgroundImage(quizId, totalIndex, url); + setIsUploadImageModalOpen(false); + openCropModal(url, url); + }; + + const handleDrop = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + + handleImageUpload(event.dataTransfer.files); + }; + + function handleCropModalSaveClick(url: string) { + setQuestionBackgroundImage(quizId, totalIndex, url); } - }; - const handleDrop = (event: DragEvent) => { - event.preventDefault(); - event.stopPropagation(); - - imgHC(event.dataTransfer.files); - }; - - return ( - - - Загрузить изображение - - - } - text="5 MB максимум" - /> - - - - - ); + return ( + + + Загрузить изображение + + setIsUploadImageModalOpen(true)} + sx={{ + width: "100%", + maxWidth: "260px", + height: "120px", + }} + > + {question.content.back ? + question background + : + } + text="5 MB максимум" + /> + } + + setIsUploadImageModalOpen(false)} + imgHC={handleImageUpload} + /> + + + ); } diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 3903dd91..f1121c88 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -217,6 +217,34 @@ export const setPageQuestionOriginalPicture = ( question.content.originalPicture = url; }); +export const setQuestionBackgroundImage = ( + quizId: number, + questionIndex: number, + url: string, +) => setProducedState(state => { + const question = state.listQuestions[quizId][questionIndex]; + + if (question.content.back === url) return; + + if ( + question.content.back !== question.content.originalBack + ) URL.revokeObjectURL(question.content.back); + question.content.back = url; +}) + +export const setQuestionOriginalBackgroundImage = ( + quizId: number, + questionIndex: number, + url: string, +) => setProducedState(state => { + const question = state.listQuestions[quizId][questionIndex]; + + if (question.content.originalBack === url) return; + + URL.revokeObjectURL(question.content.originalBack); + question.content.originalBack = url; +}) + export const updateQuestionsListDragAndDrop = ( quizId: number, updatedQuestions: AnyQuizQuestion[]