2023-11-29 13:49:52 +00:00
|
|
|
|
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
2023-10-24 15:18:31 +00:00
|
|
|
|
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
|
2023-12-01 18:05:59 +00:00
|
|
|
|
import { uploadQuestionImage } from "@root/questions/actions";
|
2023-09-13 14:14:27 +00:00
|
|
|
|
import { CropModal } from "@ui_kit/Modal/CropModal";
|
2023-10-24 15:18:31 +00:00
|
|
|
|
import UploadBox from "@ui_kit/UploadBox";
|
2023-11-16 16:41:25 +00:00
|
|
|
|
import { type DragEvent } from "react";
|
2023-10-24 15:18:31 +00:00
|
|
|
|
import UploadIcon from "../../../assets/icons/UploadIcon";
|
2023-09-05 13:54:41 +00:00
|
|
|
|
import { UploadImageModal } from "./UploadImageModal";
|
2023-12-02 09:35:35 +00:00
|
|
|
|
import { setCropModal } from "@root/cropModal";
|
2023-12-01 18:05:59 +00:00
|
|
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
2023-12-02 09:35:35 +00:00
|
|
|
|
import { useDisclosure } from "../../../utils/useDisclosure";
|
2023-09-05 13:54:41 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type UploadImageProps = {
|
2023-11-29 13:49:52 +00:00
|
|
|
|
question: AnyTypedQuizQuestion;
|
2023-09-05 13:54:41 +00:00
|
|
|
|
};
|
|
|
|
|
|
2023-11-15 18:38:02 +00:00
|
|
|
|
export default function UploadImage({ question }: UploadImageProps) {
|
2023-10-24 15:18:31 +00:00
|
|
|
|
const theme = useTheme();
|
2023-12-01 18:05:59 +00:00
|
|
|
|
const quizQid = useCurrentQuiz()?.qid;
|
2023-12-02 09:35:35 +00:00
|
|
|
|
const [isCropModalOpen, openCropModal, closeCropModal] = useDisclosure();
|
|
|
|
|
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
|
2023-09-05 13:54:41 +00:00
|
|
|
|
|
2023-12-01 18:05:59 +00:00
|
|
|
|
const handleImageUpload = async (files: FileList | null) => {
|
2023-10-24 15:18:31 +00:00
|
|
|
|
if (!files?.length) return;
|
2023-09-05 13:54:41 +00:00
|
|
|
|
|
2023-12-01 18:05:59 +00:00
|
|
|
|
const url = await uploadQuestionImage(question.id, quizQid, files[0], (question, url) => {
|
|
|
|
|
question.content.back = url;
|
|
|
|
|
question.content.originalBack = url;
|
|
|
|
|
});
|
2023-11-16 16:41:25 +00:00
|
|
|
|
closeImageUploadModal();
|
2023-12-02 09:35:35 +00:00
|
|
|
|
setCropModal(files[0], url);
|
|
|
|
|
openCropModal();
|
2023-10-24 15:18:31 +00:00
|
|
|
|
};
|
2023-09-05 13:54:41 +00:00
|
|
|
|
|
2023-10-24 15:18:31 +00:00
|
|
|
|
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
|
|
handleImageUpload(event.dataTransfer.files);
|
|
|
|
|
};
|
|
|
|
|
|
2023-12-01 18:05:59 +00:00
|
|
|
|
function handleCropModalSaveClick(imageBlob: Blob) {
|
|
|
|
|
uploadQuestionImage(question.id, quizQid, imageBlob, (question, url) => {
|
|
|
|
|
question.content.back = url;
|
|
|
|
|
});
|
2023-10-24 15:18:31 +00:00
|
|
|
|
}
|
2023-09-05 13:54:41 +00:00
|
|
|
|
|
2023-10-24 15:18:31 +00:00
|
|
|
|
return (
|
|
|
|
|
<Box sx={{ padding: "20px" }}>
|
|
|
|
|
<Typography
|
|
|
|
|
sx={{
|
|
|
|
|
fontWeight: 500,
|
|
|
|
|
color: theme.palette.grey3.main,
|
|
|
|
|
mt: "11px",
|
|
|
|
|
mb: "14px",
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Загрузить изображение
|
|
|
|
|
</Typography>
|
|
|
|
|
<ButtonBase
|
2023-11-16 16:41:25 +00:00
|
|
|
|
onClick={openImageUploadModal}
|
2023-10-24 15:18:31 +00:00
|
|
|
|
sx={{
|
|
|
|
|
width: "100%",
|
|
|
|
|
maxWidth: "260px",
|
|
|
|
|
height: "120px",
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{question.content.back ?
|
|
|
|
|
<img
|
|
|
|
|
src={question.content.back}
|
|
|
|
|
alt="question background"
|
|
|
|
|
style={{
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "100%",
|
|
|
|
|
objectFit: "scale-down",
|
|
|
|
|
display: "block",
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
:
|
|
|
|
|
<UploadBox
|
|
|
|
|
handleDrop={handleDrop}
|
|
|
|
|
sx={{ maxWidth: "260px" }}
|
|
|
|
|
icon={<UploadIcon />}
|
|
|
|
|
text="5 MB максимум"
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
</ButtonBase>
|
2023-12-02 09:35:35 +00:00
|
|
|
|
<UploadImageModal isOpen={isImageUploadOpen} onClose={closeImageUploadModal} imgHC={handleImageUpload} />
|
|
|
|
|
<CropModal isOpen={isCropModalOpen} onClose={closeCropModal} onSaveImageClick={handleCropModalSaveClick} />
|
2023-10-24 15:18:31 +00:00
|
|
|
|
</Box>
|
|
|
|
|
);
|
2023-09-05 13:54:41 +00:00
|
|
|
|
}
|