SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

загрузка файла в ответ

Browse Source
This commit is contained in:
Nastya 2025-05-21 08:48:32 +03:00
parent 3a8865713a
commit 15434027ba
8 changed files with 316 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
View File

@ -26,6 +26,7 @@ import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { isProduction } from "@/utils/defineDomain";
import { useQuizStore } from "@/stores/useQuizStore";
import { useTranslation } from "react-i18next";
import { isNeftyanka } from "@/ui_kit/neftyankacrutch";
type Props = {
currentQuestion: AnyTypedQuizQuestion;
@ -318,7 +319,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
},
}}
>
{settings.cfg.formContact?.button || t("Get results")}
{isNeftyanka ? t("neftyanka button") : settings.cfg.formContact?.button || t("Get results")}
</Button>
</Box>
{show_badge && (

5
lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/index.tsx
View File

@ -3,6 +3,7 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
import { QuizSettingsConfig } from "@model/settingsData.ts";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { isNeftyanka } from "@/ui_kit/neftyankacrutch";
type ContactTextBlockProps = {
settings: QuizSettingsConfig;
@ -47,7 +48,9 @@ export const ContactTextBlock: FC<ContactTextBlockProps> = ({ settings }) => {
wordBreak: "break-word",
}}
>
{settings.cfg.formContact.title || t("Fill out the form to receive your test results")}
{isNeftyanka
? t("neftyanka FK")
: settings.cfg.formContact.title || t("Fill out the form to receive your test results")}
</Typography>
{settings.cfg.formContact.desc && (
<Typography

119
lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
View File

@ -1,14 +1,29 @@
import { CheckboxIcon } from "@/assets/icons/Checkbox";
import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
import { Box, Checkbox, FormControlLabel, Input, Radio, TextareaAutosize, Typography, useTheme } from "@mui/material";
import {
Box,
Checkbox,
FormControlLabel,
Input,
Radio,
TextareaAutosize,
Typography,
useTheme,
ButtonBase,
} from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useMemo, type MouseEvent, useRef, useEffect } from "react";
import { useMemo, type MouseEvent, useRef, useEffect, useState } from "react";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizStore } from "@/stores/useQuizStore";
import { useTranslation } from "react-i18next";
import { sendAnswer, sendFile } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import { ACCEPT_SEND_FILE_TYPES_MAP, MAX_FILE_SIZE } from "@/components/ViewPublicationPage/tools/fileUpload";
import UploadIcon from "@icons/UploadIcon";
import { uploadFile } from "@/utils/fileUpload";
type ImagesProps = {
questionId: string;
@ -100,6 +115,10 @@ export const ImageVariant = ({
const answers = useQuizViewStore((state) => state.answers);
const isMobile = useRootContainerSize() < 450;
const isTablet = useRootContainerSize() < 850;
const [isSending, setIsSending] = useState(false);
const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
const { quizId, preview } = useQuizStore();
const [imageUrl, setImageUrl] = useState<string | null>(null);
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const containerCanvasRef = useRef<HTMLDivElement | null>(null);
@ -127,6 +146,38 @@ export const ImageVariant = ({
}
};
const handleFileUpload = async (file: File | undefined) => {
if (isSending || !file) return;
const result = await uploadFile({
file,
questionId,
quizId,
fileType: "picture",
preview,
onSuccess: (fileUrl) => {
setImageUrl(URL.createObjectURL(file));
},
onError: (error) => {
console.error(error);
enqueueSnackbar(t(error.message));
},
onProgress: () => {
setIsSending(true);
},
});
setIsSending(false);
};
const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setIsDropzoneHighlighted(false);
const file = event.dataTransfer.files[0];
handleFileUpload(file);
};
const choiceImgUrl = useMemo(() => {
if (variant.editedUrlImagesList !== undefined && variant.editedUrlImagesList !== null) {
return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
@ -171,30 +222,48 @@ export const ImageVariant = ({
onClick={onVariantClick}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box sx={{ width: "100%", height: "300px" }}>
<Box sx={{ width: "100%", height: "300px", position: "relative" }}>
{variant.extendedText && (
<canvas
ref={canvasRef}
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "12px 12px 0 0",
}}
/>
// <img
// src={choiceImgUrl}
// alt=""
// style={{
// display: "block",
// width: "100%",
// height: "100%",
// objectFit: "cover",
// borderRadius: "12px 12px 0 0",
// }}
// />
<>
<img
src={imageUrl || choiceImgUrl}
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "12px 12px 0 0",
}}
alt=""
/>
{own && (
<ButtonBase
component="label"
sx={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.5)",
opacity: isDropzoneHighlighted ? 1 : 0,
transition: "opacity 0.2s",
"&:hover": {
opacity: 1,
},
borderRadius: "12px 12px 0 0",
}}
>
<input
onChange={({ target }) => handleFileUpload(target.files?.[0])}
hidden
accept={ACCEPT_SEND_FILE_TYPES_MAP.picture.join(",")}
type="file"
/>
<UploadIcon color="#FFFFFF" />
</ButtonBase>
)}
</>
)}
</Box>
</Box>

120
lib/components/ViewPublicationPage/questions/Text/TextNeftyanka.tsx Normal file
View File

@ -0,0 +1,120 @@
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { Answer, useQuizViewStore } from "@stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { ChangeEvent, FC } from "react";
import type { QuizQuestionText } from "@model/questionTypes/text";
import { useQuizStore } from "@/stores/useQuizStore";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
interface TextSpecialProps {
currentQuestion: QuizQuestionText;
answer?: Answer;
stepNumber?: number | null;
}
function highlightQuestions(text: string) {
// Регулярка с учётом возможной точки в конце
const regex = /(вопрос\s\d+[a-zA-Zа-яА-Я]\.?)/g;
// Замена на <span> с жирным текстом
return text.replace(regex, '<span style="font-weight: bold">$1</span>');
}
export const TextNeftyanka = ({ currentQuestion, answer, stepNumber }: TextSpecialProps) => {
const { settings } = useQuizStore();
const { updateAnswer } = useQuizViewStore((state) => state);
const isHorizontal = true;
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
updateAnswer(currentQuestion.id, target.value, 0);
};
return (
<Box
sx={{
display: "flex",
flexDirection: isMobile ? "column" : undefined,
alignItems: isMobile ? "center" : undefined,
}}
>
<Box
sx={{
display: "flex",
width: "100%",
marginTop: "20px",
flexDirection: "column",
alignItems: "center",
gap: "20px",
}}
>
{isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box
sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "contain" }}
alt=""
/>
</Box>
)}
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{highlightQuestions(currentQuestion.title)}
</Typography>
{
<TextField
autoFocus={true}
multiline
maxRows={4}
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={onInputChange}
inputProps={{
maxLength: 400,
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}}
sx={{
width: "100%",
"& .MuiOutlinedInput-root": {
backgroundColor: settings.cfg.design ? "rgba(154,154,175, 0.2)" : "#FFFFFF",
},
"&:focus-visible": {
borderColor: theme.palette.primary.main,
},
}}
/>
}
</Box>
{!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box
sx={{ margin: "15px", width: "40vw" }}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "contain" }}
alt=""
/>
</Box>
)}
</Box>
);
};

13
lib/components/ViewPublicationPage/questions/Text/index.tsx
View File

@ -5,6 +5,8 @@ import { TextSpecialHorisontal } from "./TextSpecialHorisontal";
import type { QuizQuestionText } from "@model/questionTypes/text";
import { useQuizStore } from "@/stores/useQuizStore";
import { isNeftyanka } from "@/ui_kit/neftyankacrutch";
import { TextNeftyanka } from "./TextNeftyanka";
type TextProps = {
currentQuestion: QuizQuestionText;
@ -18,7 +20,16 @@ export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
const answers = useQuizViewStore((state) => state.answers);
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
if (pathOnly === "/92ed5e3e-8e6a-491e-87d0-d3197682d0e3" || pathOnly === "/cc006b40-ccbd-4600-a1d3-f902f85aa0a0")
if (isNeftyanka)
return (
<TextNeftyanka
currentQuestion={currentQuestion}
answer={answer}
stepNumber={stepNumber}
/>
);
if (pathOnly === "/92ed5e3e-8e6a-491e-87d0-d3197682d0e3")
return (
<TextSpecialHorisontal
currentQuestion={currentQuestion}

1
lib/ui_kit/neftyankacrutch.ts Normal file
View File

@ -0,0 +1 @@
export const isNeftyanka = window.location.pathname === "/cc006b40-ccbd-4600-a1d3-f902f85aa0a0";

80
lib/utils/fileUpload.ts Normal file
View File

@ -0,0 +1,80 @@
import { UploadFileType } from "@model/questionTypes/file";
import { sendAnswer, sendFile } from "@api/quizRelase";
import { ACCEPT_SEND_FILE_TYPES_MAP, MAX_FILE_SIZE } from "@/components/ViewPublicationPage/tools/fileUpload";
export interface UploadFileOptions {
file: File;
questionId: string;
quizId: string;
fileType: UploadFileType;
preview: boolean;
onSuccess?: (fileUrl: string) => void;
onError?: (error: Error) => void;
onProgress?: (progress: number) => void;
}
export interface UploadFileResult {
success: boolean;
fileUrl?: string;
error?: Error;
}
export async function uploadFile({
file,
questionId,
quizId,
fileType,
preview,
onSuccess,
onError,
onProgress,
}: UploadFileOptions): Promise<UploadFileResult> {
try {
// Проверка размера файла
if (file.size > MAX_FILE_SIZE) {
const error = new Error("File is too big. Maximum size is 50 MB");
onError?.(error);
return { success: false, error };
}
// Проверка типа файла
const isFileTypeAccepted = ACCEPT_SEND_FILE_TYPES_MAP[fileType].some((fileType) =>
file.name.toLowerCase().endsWith(fileType)
);
if (!isFileTypeAccepted) {
const error = new Error("Incorrect file type selected");
onError?.(error);
return { success: false, error };
}
// Загрузка файла
const data = await sendFile({
questionId,
body: {
file,
name: file.name,
preview,
},
qid: quizId,
});
// Отправка ответа
await sendAnswer({
questionId,
body: `${data!.data.fileIDMap[questionId]}`,
qid: quizId,
preview,
});
const fileUrl = `${file.name}|${URL.createObjectURL(file)}`;
onSuccess?.(fileUrl);
onProgress?.(100);
return { success: true, fileUrl };
} catch (error) {
const err = error instanceof Error ? error : new Error("Unknown error occurred");
onError?.(err);
return { success: false, error: err };
}
}

4
public/locales/ru.json
View File

@ -53,5 +53,7 @@
"and": "и",
"Get results": "Получить результаты",
"Data sent successfully": "Данные успешно отправлены",
"Step": "Шаг"
"Step": "Шаг",
"neftyanka FK": "Заполните форму, чтобы отправить ваши ответы на викторину",
"neftyanka button": "Отправить"
}