Все типы вопросов открывают кроп

2024-11-13 17:45:11 +03:00 · 2024-11-13 17:45:11 +03:00 · 518c4b340d
commit 518c4b340d
parent 9c78e245c3
15 changed files with 69 additions and 108 deletions
--- a/src/components/CustomSelect/CustomSelect.tsx
+++ b/src/components/CustomSelect/CustomSelect.tsx
@ -90,8 +90,6 @@ export const CustomSelect: FC<CustomSelectProps> = ({

  const menuItems = useMemo(() => {
    if (type === "typeUsers" && users && users.length !== 0) {
-      console.log(type)
-      console.log(users)
      return users.map((user) => (
        <MenuItem
          key={user.ID}
--- a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
@ -77,8 +77,6 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
    company: [],
    buyer: [],
  });
-  console.log(questionEntity)
-  console.log(tags)

  useEffect(() => {
    if (isModalOpen && quizID !== undefined && !isRemoveAccount) {
--- a/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx
@ -27,7 +27,6 @@ export const AmoLogin: FC<IntegrationStep1Props> = ({ handleNextStep }) => {
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const onAmoClick = async () => {
-    console.log("Amo click");
    const [url, error] = await connectAmo();
    if (url && !error) {
      window.open(url, "_blank");
--- a/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx
@ -24,7 +24,6 @@ export const AmoModalTitle: FC<AmoModalTitleProps> = ({
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

-    console.log(isSettingsBlock)
  const handleClick = useCallback(async () => {
    if (isSettingsBlock) {
      startRemoveAccount();
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@ -5,7 +5,7 @@ import {
  uploadQuestionImage,
 } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
 import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 import { useDisclosure } from "../../../utils/useDisclosure";
@ -35,6 +35,9 @@ export default function OptionsAndPicture({
  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
    null,
  );
+  const variant = useMemo(() => question.content.variants.find(
+    (variant) => variant.id === selectedVariantId,
+  ),[selectedVariantId])
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const quizQid = useCurrentQuiz()?.qid;
@ -101,7 +104,7 @@ export default function OptionsAndPicture({
              largeCheck={question.content.largeCheck}
              variant={variant}
              isMobile={isMobile}
-              openCropModal={() => {}}
+              openCropModal={() => {setOpenCropModal(true)}}
              openImageUploadModal={openImageUploadModal}
              pictureUploding={pictureUploding}
              setSelectedVariantId={setSelectedVariantId}
@ -114,13 +117,8 @@ export default function OptionsAndPicture({
          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}
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@ -43,8 +43,6 @@ export default function OptionsPicture({
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();

-  console.log(variant)
-
  const handleImageUpload = async (file: File) => {
    if (!selectedVariantId) return;

--- a/src/pages/Questions/UploadImage/index.tsx
+++ b/src/pages/Questions/UploadImage/index.tsx
@ -4,6 +4,7 @@ import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useState } from "react";
 import { DropZone } from "../../../pages/startPage/dropZone";
+import { CropModalInit } from "@/ui_kit/Modal/CropModal";

 type UploadImageProps = {
  question: AnyTypedQuizQuestion;
@ -18,10 +19,13 @@ export default function UploadImage({
  cropAspectRatio,
 }: UploadImageProps) {
  const [pictureUploding, setPictureUploading] = useState<boolean>(false);
+  const [openCropModal, setOpenCropModal] = useState(false);
+  
  const theme = useTheme();
  const quiz = useCurrentQuiz();

  if (!quiz) return null;
+  console.log(question)

  return (
    <Box sx={{ padding: "20px" }}>
@ -42,9 +46,13 @@ export default function UploadImage({
          text={"5 MB максимум"}
          sx={{ maxWidth: "300px", width: "100%" }}
          cropAspectRatio={cropAspectRatio}
-          imageUrl={question.content.back}
+          imageUrl={question.content.originalBack}
          originalImageUrl={question.content.originalBack}
          onImageUploadClick={async (file) => {
+            alert("d")
+            if (question.content.originalBack) {
+              setOpenCropModal(true)
+            } else {
            setPictureUploading(true);

            await uploadQuestionImage(
@ -57,29 +65,30 @@ export default function UploadImage({
              },
            );

+            setOpenCropModal(true)
            setPictureUploading(false);
+            }
          }}
          onDeleteClick={() => {
            updateQuestion(question.id, (question) => {
              question.content.back = null;
            });
          }}
-          onImageSaveClick={async (file) => {
-            setPictureUploading(true);
-
-            await uploadQuestionImage(
-              question.id,
-              quiz.qid,
-              file,
-              (question, url) => {
-                question.content.back = url;
-              },
-            );
-
-            setPictureUploading(false);
+          onImageSavedClick={() => {
+            setOpenCropModal(true)
          }}
        />
      )}
+      <CropModalInit
+        originalImageUrl={question.content.originalBack}
+        editedUrlImagesList={question.content?.editedUrlImagesList}
+        questionId={question.backendId.toString()}
+        questionType={question.type}
+        quizId={quiz.id}
+        open={openCropModal}
+        selfClose={() => setOpenCropModal(false)}
+        setPictureUploading={setPictureUploading}
+      />
    </Box>
  );
 }
--- a/src/pages/createQuize/AvailablePrivilege.tsx
+++ b/src/pages/createQuize/AvailablePrivilege.tsx
@ -72,16 +72,6 @@ export default function AvailablePrivilege() {
  );

  const currentDate = moment();
-  console.log(quizUnlimDays);
-  console.log(moment());
-  console.log(
-    moment(
-      moment(userPrivileges?.quizUnlimTime?.created_at).add(
-        quizUnlimTime,
-        "days",
-      ),
-    ),
-  );

  return (
    <Box
--- a/src/pages/startPage/dropZone.tsx
+++ b/src/pages/startPage/dropZone.tsx
@ -15,6 +15,8 @@ import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageM
 import { useDisclosure } from "../../utils/useDisclosure";
 import imge from "@/assets/card-1.png"
 import { CropModalInit } from "@/ui_kit/Modal/CropModal";
+import DeleteIcon from "@mui/icons-material/Delete";
+

 const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

@ -25,7 +27,7 @@ interface Props {
  imageUrl: string | null;
  originalImageUrl: string | null;
  onImageUploadClick: (image: Blob) => void;
-  onImageSaveClick: (image: Blob) => void;
+  onImageSavedClick?: () => void;
  onDeleteClick: () => void;
  cropAspectRatio?: {
    width: number;
@ -41,19 +43,15 @@ export const DropZone = ({
  imageUrl,
  originalImageUrl,
  onImageUploadClick,
-  onImageSaveClick,
+  onImageSavedClick,
  onDeleteClick,
  cropAspectRatio,
 }: 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();
+  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();

  if (!quiz) return null;

@ -98,23 +96,8 @@ export const DropZone = ({
        onClose={closeImageUploadModal}
        handleImageChange={handleImageUpload}
      />
-      <CropModalInit
-        originalImageUrl={imge}
-        editedUrlImagesList={{
-          "desktop": imge,
-          "tablet": imge,
-          "mobile": imge,
-          "small": imge,
-        }}
-        questionId={'2'}
-        questionType={"images"}
-        quizId={quiz.id}
-        open={openCropModal}
-        selfClose={() => setOpenCropModal(false)}
-        setPictureUploading={setPictureUploading}
-      />
      <ButtonBase
-        onClick={ openImageUploadModal
+        onClick={ () => onImageSavedClick ? onImageSavedClick() : openImageUploadModal()
        }
        sx={{
          width: "100%",
@ -153,7 +136,25 @@ export const DropZone = ({
            </Typography>
          </>
        )}
+  
      </ButtonBase>
+        {imageUrl && (
+          <IconButton
+            onClick={onDeleteClick}
+            sx={{
+              position: "absolute",
+              right: 0,
+              top: 0,
+              color: theme.palette.orange.main,
+              borderRadius: "8px",
+              borderBottomRightRadius: 0,
+              borderTopLeftRadius: 0,
+              ...deleteIconSx,
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        )}
    </Box>
  );
 };
--- a/src/stores/questions/actions.ts
+++ b/src/stores/questions/actions.ts
@ -82,10 +82,6 @@ export const createUntypedQuestion = (
    },
  );

-  console.log(
-    33,
-    useQuestionsStore.getState().questions.map((q) => q.type),
-  );
 };

 const removeQuestion = (questionId: string) =>
--- a/src/stores/results/actions.ts
+++ b/src/stores/results/actions.ts
@ -110,7 +110,6 @@ export const ExportResults = async (
    return;
  }

-  console.log(typeof data);

  const blob = new Blob([data as BlobPart], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
@ -118,7 +117,6 @@ export const ExportResults = async (

  const link = document.createElement("a");
  link.href = window.URL.createObjectURL(data as Blob);
-  console.log(link);
  link.download = `report_${new Date().getTime()}.xlsx`;
  link.click();
 };
--- a/src/ui_kit/MediaSelectionAndDisplay.tsx
+++ b/src/ui_kit/MediaSelectionAndDisplay.tsx
@ -65,6 +65,8 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
    });
  }

+  console.log(resultData)
+
  return (
    <Box
      sx={{
@ -129,16 +131,14 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
          handleImageChange={handleImageUpload}
        />
        <CropModalInit
-          originalImageUrl={imge}
-          editedUrlImagesList={{
-            "desktop": imge,
-            "tablet": imge,
-            "mobile": imge,
-            "small": imge,
-          }}
-          questionId={"12"}
-          questionType={"images"}
+          originalImageUrl={resultData.content.originalBack}
+          editedUrlImagesList={resultData.content?.editedUrlImagesList}
+          questionId={resultData.id}
+          questionType={resultData.type}
          quizId={quizQid}
+          open={openCropModal}
+          selfClose={() => setOpenCropModal(false)}
+          setPictureUploading={setPictureUploading}
        />
      </Box>

@ -152,23 +152,20 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
            mb: "30px",
          }}
        >
-          {/* <AddOrEditImageButton
+          <AddOrEditImageButton
            imageSrc={resultData.content.back}
            uploading={pictureUploding}
            onImageClick={() => {
              if (resultData.content.back) {
-                return openCropModal(
-                  resultData.content.back,
-                  resultData.content.originalBack,
-                );
-              }
-
+                setOpenCropModal(true)
+              } else {
                openImageUploadModal();
+              }
            }}
            onPlusClick={() => {
              openImageUploadModal();
            }}
-          /> */}
+          /> 
        </Box>
      )}
      {!resultData.content.useImage && (
--- a/src/ui_kit/Modal/CropModal/CropGeneral.tsx
+++ b/src/ui_kit/Modal/CropModal/CropGeneral.tsx
@ -160,9 +160,6 @@ export const CropGeneral: FC<Props> = ({
        }
    }

-    console.log("crop")
-    console.log(crop)
-
    return (
        <>
            <Box
@ -180,9 +177,6 @@ export const CropGeneral: FC<Props> = ({
                <ReactCrop
                    crop={crop}
                    onChange={(_, percentCrop) => editedImagesChange((old) => {
-                        console.log("БИБЛИОТЕКА КРОПАЕТ!!!!!!!!!")
-                        console.log("БИБЛИОТЕКА КРОПАЕТ!!!!!!!!")
-                        console.log("БИБЛИОТЕКА КРОПАЕТ!!!!!!")
                        return ({
                            newRules: {
                                ...old.newRules,
@ -206,7 +200,6 @@ export const CropGeneral: FC<Props> = ({
                        onLoad={(e) => {
                            setImageWidth(e.currentTarget.naturalWidth);
                            setImageHeight(e.currentTarget.naturalHeight);
-                            console.log("перелоад картинки")

                            calcCrop()
                        }}
--- a/src/ui_kit/Modal/CropModal/WorkSpace.tsx
+++ b/src/ui_kit/Modal/CropModal/WorkSpace.tsx
@ -46,7 +46,7 @@ export default function WorkSpace({
        modalModels[currentStepName]
    ), [currentStepName]);

-    console.log(" промежуточный рендер которому должно быть похуй")
+    // console.log(" промежуточный рендер которому должно быть похуй")

    return (
        <>
--- a/src/ui_kit/Modal/CropModal/index.tsx
+++ b/src/ui_kit/Modal/CropModal/index.tsx
@ -40,12 +40,9 @@ export const CropModalInit: FC<CropOnOpenType> = ({
    const [acceptedOriginalImageUrl, setOriginalImageUrl] = useState("");
    const [editedImages, setEditedImages] = useState<Record<keyof WorkSpaceTypes, EditedImage> | null>(null);
    const [readyDelete, setReadyDelete] = useState(false);
-    console.log("editedImages index")
-    console.log(editedImages)

    useEffect(() => {
        if (open) {
-            console.log("дали ли на ссылочку? ", Boolean(originalImageUrl))
            //Если нам не дали с чем работать, то и работать не нужно
            if (Boolean(imageBlob) || Boolean(originalImageUrl)) {
                (async () => {
@ -58,7 +55,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                    };

                    if (newImageBlob) {
-                        console.log("попытки пытки 0")
                        const isGif = await isImageBlobAGifFile(newImageBlob);
                        if (isGif) {
                            saveImagesAndRules(newImageBlob);
@ -67,7 +63,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                        //Для работы нам нужны урлы. Оригинальной и редактированных картинок
                        let newOriginalImageUrl = originalImageUrl || URL.createObjectURL(newImageBlob)
                        if (questionId) {
-                            console.log("попытки пытки 1")
                            if (questionType) {
                                const workSpaceTypesCONST = workSpaceTypesList[questionType];

@ -108,7 +103,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                                }
                                setOriginalImageUrl(newOriginalImageUrl);
                                setEditedImages(newEditedImagesList);
-                                console.log("попытки пытки ")
                            } else {
                                throw new Error("Не передан тип вопроса")
                            }
@ -161,13 +155,6 @@ 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 <></>