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

fix: View File descriptions

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-14 16:31:36 +03:00
parent d95757f79d
commit 141614cb72
1 changed files with 111 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/pages/ViewPublicationPage/questions/File.tsx
View File

@ -1,23 +1,48 @@
import {Box, Typography, ButtonBase, useTheme, IconButton} from "@mui/material";
import {
Box,
Typography,
ButtonBase,
useTheme,
IconButton,
} from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView";
import { UPLOAD_FILE_TYPES_MAP } from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
import UploadIcon from "@icons/UploadIcon";
import X from "@icons/CloseBold";
import CloseBold from "@icons/CloseBold";
import type { ChangeEvent } from "react";
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
import {DragEvent} from "react";
import type { DragEvent } from "react";
import type { UploadFileType } from "@model/questionTypes/file";
type FileProps = {
currentQuestion: QuizQuestionFile;
};
export const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
UploadFileType,
{ title: string; description: string }
> = {
all: { title: "Добавить файл", description: "Принимает любые файлы" },
picture: {
title: "Добавить изображение",
description: "Принимает изображения",
},
video: {
title: "Добавить видео",
description: "Принимает .mp4 и .mov формат — максимум 100мб",
},
audio: { title: "Добавить аудиофайл", description: "Принимает аудиофайлы" },
document: { title: "Добавить документ", description: "Принимает документы" },
} as const;
export const File = ({ currentQuestion }: FileProps) => {
const { answers } = useQuizViewStore();
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
const theme = useTheme();
const theme = useTheme();
const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
const file = target.files?.[0];
@ -38,80 +63,92 @@ export const File = ({ currentQuestion }: FileProps) => {
flexDirection: "column",
width: "100%",
marginTop: "20px",
maxWidth: answer?.split("|")[0] ? "640px" : "550px"
maxWidth: answer?.split("|")[0] ? "640px" : "550px",
}}
>
{answer?.split("|")[0] && (
<Box sx={{display: "flex", alignItems: "center", gap: "15px"}}>
<Typography>Вы загрузили:</Typography>
<Box sx={{padding: "5px 5px 5px 16px", backgroundColor: theme.palette.brightPurple.main,
borderRadius: "8px",
color: "#FFFFFF",
display: "flex",
alignItems: "center",
gap: "15px"
}}>
<Typography>
{answer?.split("|")[0]}
</Typography>
<IconButton
sx={{p: 0}}
onClick={() => {updateAnswer(currentQuestion.content.id, "");}}
>
<X/>
</IconButton>
</Box>
{answer?.split("|")[0] && (
<Box sx={{ display: "flex", alignItems: "center", gap: "15px" }}>
<Typography>Вы загрузили:</Typography>
<Box
sx={{
padding: "5px 5px 5px 16px",
backgroundColor: theme.palette.brightPurple.main,
borderRadius: "8px",
color: "#FFFFFF",
display: "flex",
alignItems: "center",
gap: "15px",
}}
>
<Typography>{answer?.split("|")[0]}</Typography>
<IconButton
sx={{ p: 0 }}
onClick={() => {
updateAnswer(currentQuestion.content.id, "");
}}
>
<CloseBold />
</IconButton>
</Box>
</Box>
)}
{!answer?.split("|")[0] && (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={uploadFile}
hidden
accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
multiple
type="file"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>
event.preventDefault()
}
sx={{
width: "100%",
height: "120px",
display: "flex",
gap: "50px",
justifyContent: "flex-start",
alignItems: "center",
padding: "33px 44px 33px 55px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "8px",
}}
>
<UploadIcon />
<Box>
<Typography
sx={{
color: theme.palette.grey2.main,
fontWeight: 500,
}}
>
{
UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
.title
}
</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
lineHeight: "19px",
}}
>
{
UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
.description
}
</Typography>
</Box>
)}
{!answer?.split("|")[0] && (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={uploadFile}
hidden
accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
multiple
type="file"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
sx={{
width: "100%",
height: "120px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "33px 44px 33px 55px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "8px",
}}
>
<UploadIcon />
<Box>
<Typography
sx={{
color: theme.palette.grey2.main,
fontWeight: 500
}}
>Добавить видео</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
lineHeight: "19px",
}}
>
Принимает .mp4 и .mov формат — максимум 100мб
</Typography>
</Box>
</Box>
</ButtonBase>
)}
{answer && currentQuestion.content.type === "picture" && (
</Box>
</ButtonBase>
)}
{answer && currentQuestion.content.type === "picture" && (
<img
src={answer.split("|")[1]}
alt=""