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

fix: OptionsAndPicture

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-01 15:48:39 +03:00
parent 1dbd5bea87
commit e3e01a17f5
1 changed files with 312 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,25 @@
import { useState } from "react";
import { import {
Box, Box,
Link, Link,
Typography, Typography,
ButtonBase,
useTheme, useTheme,
useMediaQuery, useMediaQuery,
InputAdornment, InputAdornment,
IconButton, IconButton,
Button,
Popover, Popover,
TextareaAutosize, TextareaAutosize,
TextField, TextField,
} from "@mui/material"; } from "@mui/material";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import AddImage from "../../../assets/icons/questionsPage/addImage";
import { AnswerDraggableList } from "../AnswerDraggableList";
import { CropModal } from "@ui_kit/Modal/CropModal";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import AddImage from "@icons/questionsPage/addImage";
import Image from "@icons/questionsPage/image";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchOptionsAndPict from "./switchOptionsAndPict"; import SwitchOptionsAndPict from "./switchOptionsAndPict";
@ -22,233 +29,344 @@ import { ImageAddIcons } from "@icons/ImageAddIcons";
import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { MessageIcon } from "@icons/messagIcon"; import { MessageIcon } from "@icons/messagIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import PlusImage from "@icons/questionsPage/plus";
interface Props { interface Props {
totalIndex: number; totalIndex: number;
} }
export default function OptionsAndPicture({ totalIndex }: Props) { export default function OptionsAndPicture({ totalIndex }: Props) {
const [switchState, setSwitchState] = React.useState("setting"); const [open, setOpen] = useState(false);
const { listQuestions } = questionStore(); const [opened, setOpened] = useState<boolean>(false);
const quizId = Number(useParams().quizId); const [switchState, setSwitchState] = useState("setting");
const [currentIndex, setCurrentIndex] = useState<number>(0);
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
}; };
const uploadImage = (files: FileList | null) => {
if (files?.length) {
const [file] = Array.from(files);
const clonContent = { ...listQuestions[quizId][totalIndex].content };
clonContent.variants[currentIndex].image = URL.createObjectURL(file);
updateQuestionsList(quizId, totalIndex, { content: clonContent });
setOpen(false);
setOpened(true);
}
};
const addNewAnswer = () => {
const answerNew =
listQuestions[quizId][totalIndex].content.variants.slice();
answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
updateQuestionsList(quizId, totalIndex, {
content: {
...listQuestions[quizId][totalIndex].content,
variants: answerNew,
},
});
};
return ( return (
<> <>
<Box sx={{ pl: "20px", pr: "20px" }}> <Box sx={{ pl: "20px", pr: "20px" }}>
<Box <AnswerDraggableList
sx={{ variants={listQuestions[quizId][totalIndex].content.variants}
display: "flex", totalIndex={totalIndex}
alignItems: "center", additionalContent={(variant, index) => (
paddingBottom: isMobile ? "15px" : "24px", <>
marginTop: isMobile ? "15px" : "4px", {!isMobile && (
height: isMobile ? "auto" : "40px",
marginLeft: isTablet ? "0px" : "60px",
}}
>
{listQuestions[quizId][totalIndex].content.variants.map((_, index) => (
<ButtonBase
key={index}
component="label"
sx={{
display: isTablet ? "none" : "flex",
cursor: "pointer",
alignItems: "center",
justifyContent: "flex-start",
}}
>
<input
onChange={({ target }) => {
if (target.files?.length) {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.variants[index].answer = URL.createObjectURL(target.files[0]);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}
}}
hidden
accept="image/*"
multiple
type="file"
/>
<Box sx={{ display: isTablet ? "none" : "flex", alignItems: "center" }}>
<Box <Box
sx={{ sx={{ cursor: "pointer" }}
width: "60px", onClick={() => {
height: "40px", setCurrentIndex(index);
background: "#EEE4FC", setOpen(true);
display: "flex",
justifyContent: "space-between",
}} }}
> >
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}> {variant.image ? (
<ImageAddIcons fontSize="22px" color="#7E2AEA" /> <Box
</Box> sx={{
<span overflow: "hidden",
style={{ width: "60px",
display: "flex",
alignItems: "center",
background: "#EEE4FC",
borderRadius: "3px",
margin: "0 10px",
height: "40px",
}}
>
<Box sx={{ display: "flex", width: "40px" }}>
<img
src={variant.image}
alt=""
style={{ width: "100%" }}
/>
</Box>
<PlusImage />
</Box>
) : (
<Button component="label" sx={{ padding: "0px" }}>
<AddImage
sx={{
height: "40px",
width: "60px",
margin: "0 10px",
}}
/>
</Button>
)}
</Box>
)}
</>
)}
additionalMobile={(variant, index) => (
<>
{isMobile && (
<Box
onClick={() => {
setCurrentIndex(index);
setOpen(true);
}}
sx={{
overflow: "hidden",
display: "flex",
alignItems: "center",
m: "8px",
position: "relative",
borderRadius: "3px",
}}
>
<Box
sx={{
width: "100%",
background: "#EEE4FC",
height: "40px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
background: "#7E2AEA", }}
height: "100%", >
width: "25px", {variant.image ? (
<Box
sx={{
overflow: "hidden",
width: "40px",
display: "flex",
alignItems: "center",
background: "#EEE4FC",
height: "30px",
borderRadius: "3px",
}}
>
<img
src={variant.image}
alt=""
style={{ width: "100%" }}
/>
</Box>
) : (
<Button component="label" sx={{ padding: "0px" }}>
<Image
sx={{
height: "40px",
width: "60px",
margin: "0 10px",
}}
/>
</Button>
)}
</Box>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
background: "#EEE4FC",
height: "40px",
color: "white", color: "white",
fontSize: "15px", backgroundColor: "#7E2AEA",
}} }}
> >
+ +
</span> </Box>
</Box> </Box>
<Typography )}
sx={{ </>
padding: "0 0 0 20px", )}
fontWeight: 400, />
fontSize: "18px", <UploadImageModal
lineHeight: "21.33px", open={open}
color: theme.palette.grey2.main, onClose={() => setOpen(false)}
}} imgHC={uploadImage}
> />
Добавьте ответ <CropModal
</Typography> opened={opened}
</Box> onClose={() => setOpened(false)}
</ButtonBase> picture={
))} listQuestions[quizId][totalIndex].content.variants[currentIndex]
<Box .image
sx={{ }
width: "100%", />
border: "1px solid #9A9AAF", <Box
borderRadius: "8px", sx={{
display: isTablet ? "block" : "none", width: "100%",
}} border: "1px solid #9A9AAF",
> borderRadius: "8px",
<TextField display: isTablet ? "block" : "none",
fullWidth }}
focused={false} >
placeholder={"Добавьте ответ"} <TextField
multiline={listQuestions[quizId][totalIndex].content.largeCheck} fullWidth
InputProps={{ focused={false}
startAdornment: ( placeholder={"Добавьте ответ"}
<> multiline={listQuestions[quizId][totalIndex].content.largeCheck}
<InputAdornment position="start"> InputProps={{
<PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} /> startAdornment: (
</InputAdornment> <>
{!isMobile && ( <InputAdornment position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
{!isMobile && (
<Box
sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex",
justifyContent: "space-between",
marginRight: "20px",
marginLeft: "12px",
}}
>
<Box <Box
sx={{ sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex", display: "flex",
justifyContent: "space-between", alignItems: "center",
marginRight: "20px", justifyContent: "center",
marginLeft: "12px", width: "100%",
}} }}
> >
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}> <ImageAddIcons fontSize="22px" color="#7E2AEA" />
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "25px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box> </Box>
)} <span
</> style={{
), display: "flex",
endAdornment: ( alignItems: "center",
<InputAdornment position="end"> justifyContent: "center",
<IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id"> background: "#7E2AEA",
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} /> height: "100%",
</IconButton> width: "25px",
<Popover color: "white",
id="my-popover-id" fontSize: "15px",
anchorOrigin={{ vertical: "bottom", horizontal: "left" }} }}
open={false} >
> +
<TextareaAutosize </span>
style={{ margin: "10px" }} </Box>
placeholder="Подсказка для этого ответа" )}
/> </>
</Popover> ),
<IconButton sx={{ padding: "0" }}> endAdornment: (
<DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} /> <InputAdornment position="end">
</IconButton> <IconButton
</InputAdornment> sx={{ padding: "0" }}
), aria-describedby="my-popover-id"
}} >
sx={{ <MessageIcon
"& .MuiInputBase-root": { style={{
padding: "13.5px", color: "#9A9AAF",
borderRadius: "10px", fontSize: "30px",
background: "#ffffff", marginRight: "6.5px",
height: "48px", }}
}, />
"& .MuiOutlinedInput-notchedOutline": { </IconButton>
border: "none", <Popover
}, id="my-popover-id"
}} anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
inputProps={{ open={false}
sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, >
}} <TextareaAutosize
/> style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
/>
</Popover>
<IconButton sx={{ padding: "0" }}>
<DeleteIcon
style={{
color: theme.palette.grey2.main,
marginRight: "-1px",
}}
/>
</IconButton>
</InputAdornment>
),
}}
sx={{
"& .MuiInputBase-root": {
padding: "13.5px",
borderRadius: "10px",
background: "#ffffff",
height: "48px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
}}
inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
}}
/>
{isMobile && ( {isMobile && (
<Box
sx={{
display: "flex",
alignItems: "center",
m: "8px",
position: "relative",
}}
>
<Box
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
/>
<ImageAddIcons
style={{
position: "absolute",
color: "#7E2AEA",
fontSize: "20px",
left: "45%",
right: "55%",
}}
/>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "center",
alignItems: "center", alignItems: "center",
m: "8px", width: "20px",
position: "relative", background: "#EEE4FC",
height: "40px",
color: "white",
backgroundColor: "#7E2AEA",
}} }}
> >
<Box +
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
/>
<ImageAddIcons
style={{
position: "absolute",
color: "#7E2AEA",
fontSize: "20px",
left: "45%",
right: "55%",
}}
/>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
background: "#EEE4FC",
height: "40px",
color: "white",
backgroundColor: "#7E2AEA",
}}
>
+
</Box>
</Box> </Box>
)} </Box>
</Box> )}
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -293,7 +411,13 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
> >
или нажмите Enter или нажмите Enter
</Typography> </Typography>
<EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} /> <EnterIcon
style={{
color: "#7E2AEA",
fontSize: "24px",
marginLeft: "6px",
}}
/>
</> </>
)} )}
</Box> </Box>