SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

варианты с картинками открывают кроп

Browse Source
This commit is contained in:
Nastya 2024-11-13 07:40:31 +03:00
parent ba32cce126
commit 9c78e245c3
7 changed files with 142 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/model/CropModal/CropModal.ts
View File

@ -96,6 +96,7 @@ export type Writable<T> = { -readonly [K in keyof T]: T[K] };
export type CropOnOpenType = {
open: boolean;
originalImageUrl?:string;
imageBlob?: Blob;
editedUrlImagesList?: Record<Partial<ScreenStepsTypes>, string>;
@ -103,12 +104,13 @@ export type CropOnOpenType = {
questionType: AcceptedQuestionTypes;
quizId: string;
selfClose?: () => void;
setPictureUploading?: (is: boolean) => void;
selfClose: () => void;
setPictureUploading: (is: boolean) => void;
}
export type WorkSpaceTypes = WorkSpaceTypesList[AcceptedQuestionTypes];
export interface CropModalProps {
open: boolean;
editedImages: Record<keyof WorkSpaceTypes, EditedImage>;
workSpaceTypes: WorkSpaceTypes;
originalImageUrl: string;

5
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -30,6 +30,8 @@ export default function OptionsAndPicture({
}: Props) {
const [switchState, setSwitchState] = useState("setting");
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [openCropModal, setOpenCropModal] = useState(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
null,
);
@ -122,6 +124,9 @@ export default function OptionsAndPicture({
questionId={question.backendId.toString()}
questionType={question.type}
quizId={quizQid}
open={openCropModal}
selfClose={() => setOpenCropModal(false)}
setPictureUploading={setPictureUploading}
/>
<Box
sx={{

49
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -4,7 +4,7 @@ import {
uploadQuestionImage,
} from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useState } from "react";
import { useMemo, useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
@ -32,19 +32,25 @@ export default function OptionsPicture({
const onClickAddAnAnswer = useAddAnswer();
const quizQid = useCurrentQuiz()?.qid;
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
null,
);
const [openCropModal, setOpenCropModal] = useState(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
const variant = useMemo(() => question.content.variants.find(
(variant) => variant.id === selectedVariantId,
),[selectedVariantId])
const [switchState, setSwitchState] = useState("setting");
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
useDisclosure();
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
console.log(variant)
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
setPictureUploading(true);
closeImageUploadModal();
const url = await uploadQuestionImage(
question.id,
quizQid,
@ -62,26 +68,11 @@ export default function OptionsPicture({
},
);
closeImageUploadModal();
setOpenCropModal(true)
setPictureUploading(false);
};
function handleCropModalSaveClick(imageBlob: Blob) {
if (!selectedVariantId) return;
uploadQuestionImage(question.id, quizQid, imageBlob, (question, url) => {
if (!("variants" in question.content)) return;
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
variant.extendedText = url;
});
}
return (
<>
<Box sx={{ padding: "20px" }}>
@ -96,7 +87,7 @@ export default function OptionsPicture({
largeCheck={question.content.largeCheck}
variant={variant}
isMobile={isMobile}
openCropModal={()=>{}}
openCropModal={() => {setOpenCropModal(true)}}
openImageUploadModal={openImageUploadModal}
pictureUploding={pictureUploding}
setSelectedVariantId={setSelectedVariantId}
@ -109,16 +100,14 @@ export default function OptionsPicture({
handleImageChange={handleImageUpload}
/>
<CropModalInit
originalImageUrl={imge}
editedUrlImagesList={{
"desktop": imge,
"tablet": imge,
"mobile": imge,
"small": imge,
}}
originalImageUrl={variant?.originalImageUrl}
editedUrlImagesList={variant?.editedUrlImagesList}
questionId={question.backendId.toString()}
questionType={question.type}
quizId={quizQid}
open={openCropModal}
selfClose={() => setOpenCropModal(false)}
setPictureUploading={setPictureUploading}
/>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link

9
src/pages/startPage/dropZone.tsx
View File

@ -47,6 +47,10 @@ export const DropZone = ({
}: Props) => {
const theme = useTheme();
const quiz = useCurrentQuiz();
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [openCropModal, setOpenCropModal] = useState(false);
const [isDropReady, setIsDropReady] = useState<boolean>(false);
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
useDisclosure();
@ -104,7 +108,10 @@ export const DropZone = ({
}}
questionId={'2'}
questionType={"images"}
quizId={"12"}
quizId={quiz.id}
open={openCropModal}
selfClose={() => setOpenCropModal(false)}
setPictureUploading={setPictureUploading}
/>
<ButtonBase
onClick={ openImageUploadModal

5
src/ui_kit/MediaSelectionAndDisplay.tsx
View File

@ -37,6 +37,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
}) => {
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [backgroundUploding, setBackgroundUploading] = useState<boolean>(false);
const [openCropModal, setOpenCropModal] = useState(false);
const quizQid = useCurrentQuiz()?.qid;
const theme = useTheme();
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
@ -151,7 +152,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
mb: "30px",
}}
>
<AddOrEditImageButton
{/* <AddOrEditImageButton
imageSrc={resultData.content.back}
uploading={pictureUploding}
onImageClick={() => {
@ -167,7 +168,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
onPlusClick={() => {
openImageUploadModal();
}}
/>
/> */}
</Box>
)}
{!resultData.content.useImage && (

3
src/ui_kit/Modal/CropModal/CropModal.tsx
View File

@ -22,6 +22,7 @@ const PriorityOfSteps = ["desktop", "tablet", "mobile", "small"];
export type EditedImagesChangeType = (changed: (old: EditedImage) => Partial<EditedImage>) => void;
export const CropModal: FC<CropModalProps> = ({
open,
editedImages,
workSpaceTypes,
originalImageUrl,
@ -59,7 +60,7 @@ export const CropModal: FC<CropModalProps> = ({
return (
<Modal
open
open={open}
onClose={closeCropModal}
>
<Box

144
src/ui_kit/Modal/CropModal/index.tsx
View File

@ -16,6 +16,7 @@ import AlertModalDeleteImage from "./AlertModalDeleteImage"
import { getModifiedImageBlob } from "./utils/imageManipulation";
export const CropModalInit: FC<CropOnOpenType> = ({
open,
originalImageUrl,
imageBlob,
editedUrlImagesList,
@ -26,6 +27,15 @@ export const CropModalInit: FC<CropOnOpenType> = ({
selfClose,
setPictureUploading,
}) => {
console.log(
open,
originalImageUrl,
imageBlob,
editedUrlImagesList,
questionId,
questionType,
quizId,
)
const [acceptedOriginalImageUrl, setOriginalImageUrl] = useState("");
const [editedImages, setEditedImages] = useState<Record<keyof WorkSpaceTypes, EditedImage> | null>(null);
@ -34,77 +44,99 @@ export const CropModalInit: FC<CropOnOpenType> = ({
console.log(editedImages)
useEffect(() => {
//Если нам не дали с чем работать, то и работать не нужно
if (Boolean(imageBlob) || Boolean(originalImageUrl)) {
(async () => {
let newImageBlob = imageBlob;
if (originalImageUrl !== undefined) {
const response = await fetch(originalImageUrl, {
mode: 'no-cors',
});
newImageBlob = await response.blob();
};
if (open) {
console.log("дали ли на ссылочку? ", Boolean(originalImageUrl))
//Если нам не дали с чем работать, то и работать не нужно
if (Boolean(imageBlob) || Boolean(originalImageUrl)) {
(async () => {
let newImageBlob = imageBlob;
if (originalImageUrl !== undefined) {
const response = await fetch(originalImageUrl, {
mode: 'no-cors',
});
newImageBlob = await response.blob();
};
if (newImageBlob) {
const isGif = await isImageBlobAGifFile(newImageBlob);
if (isGif) {
saveImagesAndRules(newImageBlob);
return;
}
//Для работы нам нужны урлы. Оригинальной и редактированных картинок
let newOriginalImageUrl = originalImageUrl || URL.createObjectURL(newImageBlob)
if (questionId) {
if (questionType) {
if (Boolean(editedUrlImagesList)) {
if (newImageBlob) {
console.log("попытки пытки 0")
const isGif = await isImageBlobAGifFile(newImageBlob);
if (isGif) {
saveImagesAndRules(newImageBlob);
return;
}
//Для работы нам нужны урлы. Оригинальной и редактированных картинок
let newOriginalImageUrl = originalImageUrl || URL.createObjectURL(newImageBlob)
if (questionId) {
console.log("попытки пытки 1")
if (questionType) {
const workSpaceTypesCONST = workSpaceTypesList[questionType];
const workSpaceTypesCONST = workSpaceTypesList[questionType]
type WritableWorkSpaceTypesCONST = Writable<typeof workSpaceTypesCONST>
type WritableWorkSpaceTypesCONST = Writable<typeof workSpaceTypesCONST>;
const writableEditedImagesList: WritableWorkSpaceTypesCONST = { ...workSpaceTypesList[questionType] }; // Теперь object не readonly
type Keys = keyof typeof writableEditedImagesList;
const newEditedImagesList = {} as Record<Keys, EditedImage>;
for (let k in editedUrlImagesList) {
let key = k as Keys;
if (key in writableEditedImagesList) {
newEditedImagesList[key] = {
...writableEditedImagesList[key],
url: editedUrlImagesList[key],
newRules: DEFAULTCROPRULES
} as EditedImage;
//Если вопрос умничка и знает что ему нужно
if (Boolean(editedUrlImagesList)) {
for (let k in editedUrlImagesList) {
let key = k as Keys;
if (key in writableEditedImagesList) {
newEditedImagesList[key] = {
...writableEditedImagesList[key],
url: editedUrlImagesList[key] ?? originalImageUrl,
newRules: DEFAULTCROPRULES
} as EditedImage;
}
}
} else { // Если в первый раз, то создаём ему бланк
for (let k in workSpaceTypesCONST) {
let key = k as Keys;
if (key in writableEditedImagesList) {
newEditedImagesList[key] = {
...writableEditedImagesList[key],
url: originalImageUrl,
newRules: DEFAULTCROPRULES
} as EditedImage;
}
}
}
setOriginalImageUrl(newOriginalImageUrl);
setEditedImages(newEditedImagesList);
console.log("попытки пытки ")
} else {
throw new Error("Не передан тип вопроса")
}
} else {
throw new Error("Не передан тип вопроса")
throw new Error("Не передан id вопроса")
}
} else {
throw new Error("Не передан id вопроса")
}
}
})()
})()
}
}
}, [])
}, [open, originalImageUrl, editedUrlImagesList, questionId, questionType])
const closeModal = () => {
setOriginalImageUrl("");
setEditedImages(null);
selfClose()
selfClose?.()
}
const handleCropModalDeleteImageClick = () => {
//сохранить пустую строку и дефолтные настройки картинки в самом вопросе, не информируя БД о удалении картинки
selfClose?.()
closeModal()
};
const saveImagesAndRules = async (blob?: Blob) => {
setPictureUploading(true)
const img = document.createElement("img");
img.src = editedImages.mobile.url
const bloba = await getModifiedImageBlob(img, editedImages.mobile.newRules.crop, editedImages.mobile.newRules.darken)
@ -113,6 +145,8 @@ export const CropModalInit: FC<CropOnOpenType> = ({
anchor.setAttribute("download", "ЖОПА");
anchor.href = blobUrl;
anchor.click();
closeModal()
setTimeout(() => setPictureUploading(false), 1000)
// if (!selectedVariantId) return;
// uploadQuestionImage(questionId, quizId, imageBlob, (question, url) => {
@ -127,6 +161,13 @@ export const CropModalInit: FC<CropOnOpenType> = ({
// });
};
console.log("acceptedOriginalImageUrl")
console.log("workSpaceTypesList")
console.log("editedImages")
console.log(acceptedOriginalImageUrl)
console.log(workSpaceTypesList)
console.log(editedImages)
if (acceptedOriginalImageUrl.length === 0) return <></>
if (workSpaceTypesList[questionType] === undefined) return <></>
if (editedImages === null) return <></>
@ -134,6 +175,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
return (
<>
<CropModal
open={open}
editedImages={editedImages}
workSpaceTypes={workSpaceTypesList[questionType]}
originalImageUrl={acceptedOriginalImageUrl}
@ -151,4 +193,20 @@ export const CropModalInit: FC<CropOnOpenType> = ({
</>
)
};
};
// function handleCropModalSaveClick(imageBlob: Blob) { OptionsPicture
// if (!selectedVariantId) return;
// uploadQuestionImage(question.id, quizQid, imageBlob, (question, url) => {
// if (!("variants" in question.content)) return;
// const variant = question.content.variants.find(
// (variant) => variant.id === selectedVariantId,
// );
// if (!variant) return;
// variant.extendedText = url;
// });
// }