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

Merge branch 'input-limit' into support-sse-logic

Browse Source
This commit is contained in:
Nastya 2024-02-15 12:40:27 +03:00
commit d5ad04cf3a
21 changed files with 429 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -430,23 +430,23 @@ const PseudoButton = () => {
if (!quiz) return null;
return (
<TextField
<CustomTextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.button = target.value;
});
}}
maxLength={23}
value={quiz.config.formContact.button}
sx={{
heigth: "44px",
width: "190px",
"& .MuiInputBase-root": {
backgroundColor: "#7E2AEA",
borderRadius: "8px",
color: "white",
},
padding: 0,
"& .MuiInputBase-input": {
padding: "10px 20px",
padding: "10px 10px",
textAlign: "center",
},
"& .MuiInputBase-input::placeholder": {
@ -454,9 +454,7 @@ const PseudoButton = () => {
opacity: "1",
},
}}
placeholder="Название кнопки"
>
{quiz.config.formContact.button || "Название кнопки"}
</TextField>
placeholder={quiz.config.formContact.button || "Название кнопки"}
/>
);
};

2
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
View File

@ -60,6 +60,7 @@ export default function NewFieldParent({
value={quiz.config.formContact.fields[defaultValue].text}
placeholder={placeholderHelp}
text={""}
maxLength={20}
/>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
@ -74,6 +75,7 @@ export default function NewFieldParent({
value={quiz.config.formContact.fields[defaultValue].innerText}
placeholder={placeholderField}
text={""}
maxLength={20}
/>
</Box>
</>

13
src/pages/DesignPage/DesignFilling.tsx
View File

@ -28,11 +28,18 @@ const ButtonsThemeDark = [
["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
];
export const DesignFilling = (mobileSidebar: boolean) => {
interface Props {
mobileSidebar: boolean;
heightSidebar: number;
}
export const DesignFilling = ({ mobileSidebar, heightSidebar }: Props) => {
const quiz = useCurrentQuiz();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(830));
const heightBar = heightSidebar + 51 + 88 + 36;
console.log(mobileSidebar, "111");
return (
<Box
sx={{
@ -40,7 +47,7 @@ export const DesignFilling = (mobileSidebar: boolean) => {
padding: "25px",
height: isMobile
? mobileSidebar
? "calc(100vh - 271px)"
? `calc(100vh - ${heightBar}px)`
: "calc(100vh - 127px)"
: "calc(100vh - 80px)",
}}

13
src/pages/DesignPage/DesignPage.tsx
View File

@ -22,7 +22,12 @@ import { DesignFilling } from "./DesignFilling";
import { createPortal } from "react-dom";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
export const DesignPage = () => {
interface Props {
heightSidebar: number;
mobileSidebar: boolean;
}
export const DesignPage = ({ heightSidebar, mobileSidebar }: Props) => {
const quiz = useCurrentQuiz();
const { editQuizId } = useQuizStore();
const { showConfirmLeaveModal } = useUiTools();
@ -30,7 +35,6 @@ export const DesignPage = () => {
const navigate = useNavigate();
const currentStep = useQuizStore((state) => state.currentStep);
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
const [nextStep, setNextStep] = useState<number>(0);
useEffect(
@ -69,7 +73,10 @@ export const DesignPage = () => {
return (
<>
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
<DesignFilling mobileSidebar={mobileSidebar} />
<DesignFilling
mobileSidebar={mobileSidebar}
heightSidebar={heightSidebar}
/>
{createPortal(<QuizPreview />, document.body)}
</Box>
<ConfirmLeaveModal

10
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -47,7 +47,7 @@ export const AnswerItem = ({
const isTablet = useMediaQuery(theme.breakpoints.down(790));
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const [inputValue, setInputValue] = useState("");
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
setQuestionVariantField(questionId, variant.id, "answer", value);
}, 200);
@ -77,13 +77,17 @@ export const AnswerItem = ({
}}
>
<TextField
defaultValue={variant.answer}
value={variant.answer}
fullWidth
focused={false}
placeholder={"Добавьте ответ"}
multiline={largeCheck}
onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
setQuestionVariantAnswer(target.value || " ");
if (target.value.length <= 1000) {
const inputValue = target.value;
setInputValue(inputValue);
}
setQuestionVariantAnswer(inputValue || " ");
}}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (disableKeyDown) {

9
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -205,8 +205,7 @@ export default function ButtonsOptionsAndPict({
</Box>
}
> */}
{question.type !== "text"
&&
{question.type !== "text" && (
<MiniButtonSetting
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
@ -229,7 +228,9 @@ export default function ButtonsOptionsAndPict({
: theme.palette.grey3.main,
"&:hover": {
color:
switchState === "branching" ? theme.palette.grey3.main : null,
switchState === "branching"
? theme.palette.grey3.main
: null,
},
}}
>
@ -244,7 +245,7 @@ export default function ButtonsOptionsAndPict({
/>
{isIconMobile ? null : "Ветвление"}
</MiniButtonSetting>
}
)}
{/* </Tooltip> */}
<MiniButtonSetting
onMouseEnter={() => setButtonHover("image")}

1
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -99,6 +99,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
<CustomTextField
placeholder={"Выберите вариант"}
text={question.content.default}
maxLength={60}
onChange={({ target }) => debounceAnswer(target.value)}
/>
</Box>

2
src/pages/Questions/Emoji/Emoji.tsx
View File

@ -51,7 +51,7 @@ export default function Emoji({
<AnswerDraggableList
question={question}
additionalContent={(variant) => (
<>Оооооо, тестовая публикация получа
<>
{!isTablet && (
<Box sx={{ cursor: "pointer" }}>
<Box

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

@ -41,6 +41,7 @@ export default function OptionsAndPicture({
setOpenBranchingPage,
}: Props) {
const [switchState, setSwitchState] = useState("setting");
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
null,
);
@ -66,6 +67,8 @@ export default function OptionsAndPicture({
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
setPictureUploading(true);
const url = await uploadQuestionImage(
question.id,
quizQid,
@ -84,6 +87,8 @@ export default function OptionsAndPicture({
);
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(false);
};
function handleCropModalSaveClick(imageBlob: Blob) {
@ -111,6 +116,7 @@ export default function OptionsAndPicture({
{!isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {
@ -136,6 +142,7 @@ export default function OptionsAndPicture({
{isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {

2
src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
View File

@ -24,7 +24,7 @@ export default function SettingOptionsAndPict({
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(680));
console.log("question.content.replText ", question.content.replText)
console.log("question.content.replText ", question.content.replText);
const setReplText = useDebouncedCallback((replText) => {
updateQuestion(question.id, (question) => {
if (question.type !== "varimg") return;

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

@ -1,4 +1,11 @@
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Link,
Typography,
Skeleton,
useMediaQuery,
useTheme,
} from "@mui/material";
import {
addQuestionVariant,
uploadQuestionImage,
@ -30,6 +37,7 @@ export default function OptionsPicture({
const theme = useTheme();
const onClickAddAnAnswer = useAddAnswer();
const quizQid = useCurrentQuiz()?.qid;
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
null,
);
@ -53,6 +61,8 @@ export default function OptionsPicture({
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
setPictureUploading(true);
const url = await uploadQuestionImage(
question.id,
quizQid,
@ -69,8 +79,11 @@ export default function OptionsPicture({
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(false);
};
function handleCropModalSaveClick(imageBlob: Blob) {
@ -98,6 +111,7 @@ export default function OptionsPicture({
{!isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {
@ -123,6 +137,7 @@ export default function OptionsPicture({
{isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {

2
src/pages/Questions/QuestionsPage.tsx
View File

@ -66,7 +66,7 @@ export default function QuestionsPage({
margin: "60px 0 40px 0",
}}
>
<Typography variant={"h5"}>
<Typography variant={"h5"} sx={{ wordBreak: "break-word" }}>
{quiz.name ? quiz.name : "Заголовок quiz"}
</Typography>
{!openBranchingPage && (

38
src/pages/Questions/UploadImage/index.tsx
View File

@ -1,5 +1,6 @@
import { useState } from "react";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { Box, Skeleton, Typography, useTheme } from "@mui/material";
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
@ -12,6 +13,7 @@ type UploadImageProps = {
};
export default function UploadImage({ question }: UploadImageProps) {
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const theme = useTheme();
const quiz = useCurrentQuiz();
@ -29,29 +31,51 @@ export default function UploadImage({ question }: UploadImageProps) {
>
Загрузить изображение
</Typography>
{pictureUploding ? (
<Skeleton variant="rounded" sx={{ height: "120px", width: "300px" }} />
) : (
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
sx={{ maxWidth: "300px", width: "100%" }}
imageUrl={question.content.back}
originalImageUrl={question.content.originalBack}
onImageUploadClick={(file) => {
uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
onImageUploadClick={async (file) => {
setPictureUploading(true);
await uploadQuestionImage(
question.id,
quiz.qid,
file,
(question, url) => {
question.content.back = url;
question.content.originalBack = url;
});
},
);
setPictureUploading(false);
}}
onDeleteClick={() => {
updateQuestion(question.id, (question) => {
question.content.back = null;
});
}}
onImageSaveClick={(file) => {
uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
onImageSaveClick={async (file) => {
setPictureUploading(true);
await uploadQuestionImage(
question.id,
quiz.qid,
file,
(question, url) => {
question.content.back = url;
});
},
);
setPictureUploading(false);
}}
/>
)}
</Box>
);
}

13
src/pages/ResultPage/cards/ResultCard.tsx
View File

@ -131,6 +131,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
const [expand, setExpand] = useState(true);
const [resultCardSettings, setResultCardSettings] = useState(false);
const [buttonPlus, setButtonPlus] = useState(true);
const [inputValue, setInputValue] = useState("");
const question = getQuestionByContentId(resultData.content.rule.parentId);
const quiz = useCurrentQuiz();
@ -328,12 +329,16 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
<TextField
id="heading-description"
value={resultData.content.text}
onChange={({ target }: { target: HTMLInputElement }) =>
onChange={({ target }: { target: HTMLInputElement }) => {
if (target.value.length <= 3000) {
const inputValue = target.value;
setInputValue(inputValue);
}
updateQuestion(
resultData.id,
(question) => (question.content.text = target.value),
)
}
(question) => (question.content.text = inputValue),
);
}}
fullWidth
placeholder="Описание"
multiline

2
src/pages/Tariffs/Tariffs.tsx
View File

@ -258,7 +258,7 @@ function TariffPage() {
component="h2"
mb="20px"
>
Вы подтверждаете платёж в сумму {openModal.price}
Вы подтверждаете платёж в сумму {openModal.price} ₽
</Typography>
<Button variant="contained" onClick={() => tryBuy(openModal)}>
купить

12
src/pages/main.tsx
View File

@ -95,8 +95,9 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
};
const [widthMain, setWidthMain] = useState(null);
const [heightSidebar, setHeightSidebar] = useState(null);
const mainBlock = useRef(0);
const heightHeader = heightSidebar + 51 + 36;
const observer = useRef(
new ResizeObserver((entries) => {
const { width } = entries[0].contentRect;
@ -121,7 +122,11 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
{sidebar ? (
<>
{isMobile ? (
<SidebarMobile open={mobileSidebar} changePage={changePage} />
<SidebarMobile
open={mobileSidebar}
changePage={changePage}
setHeightSitebar={setHeightSidebar}
/>
) : (
<Sidebar changePage={changePage} />
)}
@ -134,7 +139,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
width: "100%",
height: isMobile
? mobileSidebar
? "calc(100vh - 195px)"
? `calc(100vh - ${heightHeader}px)`
: "calc(100vh - 51px)"
: "calc(100vh - 80px)",
display: "flex",
@ -157,6 +162,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
setOpenBranchingPage={openBranchingPageHC}
widthMain={widthMain}
mobileSidebar={mobileSidebar}
heightSidebar={heightSidebar}
/>
</Box>

5
src/pages/startPage/EditPage.tsx
View File

@ -47,12 +47,14 @@ interface Props {
setOpenBranchingPage: (a: boolean) => void;
widthMain: number;
mobileSidebar: boolean;
heightSidebar: number;
}
export default function EditPage({
openBranchingPage,
setOpenBranchingPage,
widthMain,
mobileSidebar,
heightSidebar,
}: Props) {
const quiz = useCurrentQuiz();
const { editQuizId } = useQuizStore();
@ -67,6 +69,7 @@ export default function EditPage({
const quizConfig = quiz?.config;
// const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
const heightBar = heightSidebar + 51 + 88 + 23;
useEffect(() => {
if (editQuizId === null) navigate("/list");
}, [navigate, editQuizId]);
@ -133,7 +136,7 @@ export default function EditPage({
overflow: "auto",
height: isMobile
? mobileSidebar
? `calc(100vh - 269px)`
? `calc(100vh - ${heightBar}px)`
: `calc(100vh - 125px)`
: isConditionMet
? isBranchingLogic

128
src/pages/startPage/StartPageSettings.tsx
View File

@ -22,6 +22,7 @@ import {
Select,
Tooltip,
Typography,
Skeleton,
useMediaQuery,
useTheme,
} from "@mui/material";
@ -72,6 +73,9 @@ export default function StartPageSettings() {
const quiz = useCurrentQuiz();
const [formState, setFormState] = useState<"design" | "content">("design");
const [mobileVersion, setMobileVersion] = useState(false);
const [faviconUploding, setFaviconUploading] = useState<boolean>(false);
const [backgroundUploding, setBackgroundUploading] = useState<boolean>(false);
const [logoUploding, setLogoUploading] = useState<boolean>(false);
if (!quiz) return null;
@ -81,14 +85,20 @@ export default function StartPageSettings() {
const designType = quiz?.config?.startpageType;
const favIconDropZoneElement = (
const favIconDropZoneElement = faviconUploding ? (
<Skeleton sx={{ width: "48px", height: "48px", transform: "none" }} />
) : (
<FaviconDropZone
imageUrl={quiz.config.startpage.favIcon}
onImageUploadClick={async (file) => {
setFaviconUploading(true);
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
await uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
setFaviconUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
@ -327,23 +337,39 @@ export default function StartPageSettings() {
>
Изображение
</Typography>
{backgroundUploding ? (
<Skeleton
sx={{
width: "300px",
height: "120px",
transform: "none",
}}
/>
) : (
<DropZone
value={"5 MB максимум"}
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.background.desktop}
originalImageUrl={
quiz.config.startpage.background.originalDesktop
}
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
onImageUploadClick={async (file) => {
setBackgroundUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop = url;
quiz.config.startpage.background.originalDesktop =
url;
});
setBackgroundUploading(false);
}}
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
onImageSaveClick={async (file) => {
setBackgroundUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
setBackgroundUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
@ -351,6 +377,7 @@ export default function StartPageSettings() {
});
}}
/>
)}
</Box>
<ModalSizeImage />
@ -383,6 +410,17 @@ export default function StartPageSettings() {
</Tooltip>
)}
</Box>
{backgroundUploding ? (
<Skeleton
sx={{
width: "48px",
height: "48px",
transform: "none",
margin: "20px 0",
}}
/>
) : (
<>
<ButtonBase
component="label"
sx={{
@ -395,14 +433,22 @@ export default function StartPageSettings() {
}}
>
<input
onChange={(event) => {
onChange={async (event) => {
setBackgroundUploading(true);
const file = event.target.files?.[0];
if (file) {
uploadQuizImage(quiz.id, file, (quiz, url) => {
await uploadQuizImage(
quiz.id,
file,
(quiz, url) => {
quiz.config.startpage.background.video = url;
});
},
);
// setVideo(URL.createObjectURL(file));
}
setBackgroundUploading(false);
}}
hidden
accept=".mp4"
@ -417,13 +463,15 @@ export default function StartPageSettings() {
}}
/>
</ButtonBase>
{quiz.config.startpage.background.video ? (
{quiz.config.startpage.background.video && (
<video
src={quiz.config.startpage.background.video}
width="400"
controls
/>
) : null}
)}
</>
)}
</>
)}
{designType !== "centered" && (
@ -497,21 +545,36 @@ export default function StartPageSettings() {
>
Логотип
</Typography>
{logoUploding ? (
<Skeleton
sx={{
width: "300px",
height: "120px",
transform: "none",
}}
/>
) : (
<DropZone
value={"5 MB максимум"}
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
onImageUploadClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
setLogoUploading(false);
}}
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
onImageSaveClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
setLogoUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
@ -519,6 +582,7 @@ export default function StartPageSettings() {
});
}}
/>
)}
</Box>
<Typography
@ -564,21 +628,36 @@ export default function StartPageSettings() {
>
Логотип
</Typography>
{logoUploding ? (
<Skeleton
sx={{
width: "300px",
height: "120px",
transform: "none",
}}
/>
) : (
<DropZone
value={"5 MB максимум"}
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
onImageUploadClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
setLogoUploading(false);
}}
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
onImageSaveClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
setLogoUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
@ -586,6 +665,7 @@ export default function StartPageSettings() {
});
}}
/>
)}
</Box>
<Typography
@ -621,7 +701,7 @@ export default function StartPageSettings() {
quiz.name = e.target.value;
})
}
maxLength={40}
maxLength={200}
/>
<Typography
sx={{

22
src/ui_kit/AddOrEditImageButton.tsx
View File

@ -1,12 +1,15 @@
import { Box, Button, Skeleton, useTheme, useMediaQuery } from "@mui/material";
import Plus from "@icons/questionsPage/plus";
import { Box, Button, SxProps, Theme } from "@mui/material";
import Image from "../assets/icons/questionsPage/image";
import type { SxProps, Theme } from "@mui/material";
interface Props {
sx?: SxProps<Theme>;
imageSrc?: string;
onImageClick?: () => void;
onPlusClick?: () => void;
uploading: boolean;
}
export default function AddOrEditImageButton({
@ -14,8 +17,23 @@ export default function AddOrEditImageButton({
onPlusClick,
sx,
imageSrc,
uploading = false,
}: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<>
{uploading ? (
<Skeleton
variant="rounded"
sx={{
height: "40px",
width: isMobile ? "auto" : "80px",
margin: isMobile ? "8px" : "0 10px 0 8px",
}}
/>
) : (
<Box
sx={{
display: "flex",
@ -68,5 +86,7 @@ export default function AddOrEditImageButton({
<Plus />
</Button>
</Box>
)}
</>
);
}

8
src/ui_kit/MediaSelectionAndDisplay.tsx
View File

@ -1,4 +1,4 @@
import { FC } from "react";
import { useState, FC } from "react";
import {
Box,
Button,
@ -25,6 +25,7 @@ interface Iprops {
}
export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const quizQid = useCurrentQuiz()?.qid;
const theme = useTheme();
const {
@ -38,6 +39,8 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
useDisclosure();
async function handleImageUpload(file: File) {
setPictureUploading(true);
const url = await uploadQuestionImage(
resultData.id,
quizQid,
@ -49,6 +52,8 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
);
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(false);
}
function handleCropModalSaveClick(imageBlob: Blob) {
@ -142,6 +147,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
>
<AddOrEditImageButton
imageSrc={resultData.content.back}
uploading={pictureUploding}
onImageClick={() => {
if (resultData.content.back) {
return openCropModal(

25
src/ui_kit/Sidebar/SidebarMobile.tsx
View File

@ -32,6 +32,7 @@ import { clearUserData } from "@root/user";
interface Iprops {
open: boolean;
changePage: (step: number) => void;
setHeightSitebar: any;
}
const quizSetupSteps = [
@ -46,12 +47,29 @@ const quizSetupSteps = [
{ sidebarIcon: <Question style={{ color: "#974BFA", fontSize: "24px" }} /> },
] as const;
export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
export const SidebarMobile: FC<Iprops> = ({
open,
changePage,
setHeightSitebar,
}) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [inputOpen, setInputOpen] = useState<boolean>(false);
const quiz = useCurrentQuiz();
const ref = useRef(null);
const heightSidebar = useRef(null);
const navigate = useNavigate();
const observer = useRef(
new ResizeObserver((entries) => {
const { height } = entries[0].contentRect;
setHeightSitebar(height);
}),
);
useEffect(() => {
observer.current.observe(heightSidebar.current);
}, [heightSidebar, observer]);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
@ -80,6 +98,7 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
const id = openPopper ? "simple-popper" : undefined;
return (
<Box
ref={heightSidebar}
sx={{
display: open ? "block" : "none",
minHeight: "134px",
@ -148,7 +167,9 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
/>
</FormControl>
) : (
<Typography color={"white"}>{quiz.name}</Typography>
<Typography color={"white"} sx={{ wordBreak: "break-word" }}>
{quiz.name}
</Typography>
)}
</Box>
<IconButton onClick={() => setInputOpen(true)}>