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

feat: updates

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-11 17:32:26 +03:00
parent 1bb899dcd7
commit 76553d1610
5 changed files with 147 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/assets/icons/questionsPage/addAnswer.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>;
}
export default function AddAnswer({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="32" height="32" rx="8" fill={color} />
<path
d="M15.518 20.612C15.398 20.612 15.296 20.576 15.212 20.504C15.14 20.42 15.104 20.318 15.104 20.198V16.454H11.414C11.294 16.454 11.192 16.418 11.108 16.346C11.036 16.262 11 16.16 11 16.04V15.464C11 15.344 11.036 15.248 11.108 15.176C11.192 15.092 11.294 15.05 11.414 15.05H15.104V11.414C15.104 11.294 15.14 11.198 15.212 11.126C15.296 11.042 15.398 11 15.518 11H16.148C16.268 11 16.364 11.042 16.436 11.126C16.52 11.198 16.562 11.294 16.562 11.414V15.05H20.27C20.39 15.05 20.486 15.092 20.558 15.176C20.642 15.248 20.684 15.344 20.684 15.464V16.04C20.684 16.16 20.642 16.262 20.558 16.346C20.486 16.418 20.39 16.454 20.27 16.454H16.562V20.198C16.562 20.318 16.52 20.42 16.436 20.504C16.364 20.576 16.268 20.612 16.148 20.612H15.518Z"
fill="#7E2AEA"
/>
</svg>
</Box>
);
}

43
src/assets/icons/questionsPage/answerGroup.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>;
}
export default function AnswerGroup({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1 20V2C1 1.44772 1.44772 1 2 1H22C22.5523 1 23 1.44772 23 2V20C23 20.5523 22.5523 21 22 21H2C1.44772 21 1 20.5523 1 20Z"
stroke={color}
stroke-width="1.5"
/>
<path
d="M3 6V4.5C3 3.94772 3.44772 3.5 4 3.5H10C10.5523 3.5 11 3.94772 11 4.5V6C11 6.55228 10.5523 7 10 7H4C3.44772 7 3 6.55228 3 6Z"
stroke={color}
stroke-width="1.5"
/>
<path
d="M13 6V4.5C13 3.94772 13.4477 3.5 14 3.5H20C20.5523 3.5 21 3.94772 21 4.5V6C21 6.55228 20.5523 7 20 7H14C13.4477 7 13 6.55228 13 6Z"
stroke={color}
stroke-width="1.5"
/>
<path
d="M3 12.5V11C3 10.4477 3.44772 10 4 10H20C20.5523 10 21 10.4477 21 11V12.5C21 13.0523 20.5523 13.5 20 13.5H4C3.44772 13.5 3 13.0523 3 12.5Z"
stroke={color}
stroke-width="1.5"
/>
</svg>
</Box>
);
}

255
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -45,6 +45,7 @@ import Slider from "@icons/questionsPage/slider";
import Download from "@icons/questionsPage/download";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import AnswerGroup from "@icons/questionsPage/answerGroup";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { ReactComponent as PlusIcon } from "../../../../assets/icons/plus.svg";
@ -137,7 +138,12 @@ const IconAndrom = (isExpanded: boolean, switchState: string) => {
/>
);
default:
return <></>;
return (
<AnswerGroup
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
}
};
export default function QuestionsPageCard({
@ -176,218 +182,9 @@ export default function QuestionsPageCard({
backgroundColor: question.expanded ? "white" : "#EEE4FC",
border: question.expanded ? "none" : "1px solid #9A9AAF",
boxShadow: "0px 10px 30px #e7e7e7",
marginBottom: "40px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
padding: isMobile ? "10px" : "20px 10px 20px 20px",
flexDirection: isMobile ? "column" : null,
}}
>
<FormControl
variant="standard"
sx={{
p: 0,
maxWidth: isTablet ? "549px" : "640px",
width: "100%",
marginRight: isMobile ? "0px" : "16.1px",
}}
>
<TextField
defaultValue={question.title}
placeholder={"Заголовок группы вопросов"}
onChange={({ target }) => debounced(target.value)}
InputProps={{
startAdornment: (
<Box>
<InputAdornment
ref={anchorRef}
position="start"
sx={{ cursor: "pointer" }}
onClick={() => setOpen((isOpened) => !isOpened)}
>
{IconAndrom(question.expanded, question.type)}
</InputAdornment>
<ChooseAnswerModal
open={open}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
totalIndex={totalIndex}
switchState={question.type}
/>
</Box>
),
}}
sx={{
margin: isMobile ? "10px 0" : 0,
"& .MuiInputBase-root": {
color: question.expanded ? "#9A9AAF" : "#4D4D4D",
backgroundColor: question.expanded
? theme.palette.background.default
: "transparent",
height: "48px",
borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": {
borderWidth: "1px !important",
border: !question.expanded ? "none" : null,
},
"& .MuiInputBase-input::placeholder": {
color: "#4D4D4D",
opacity: 0.8,
},
},
}}
inputProps={{
sx: {
fontSize: "18px",
lineHeight: "21px",
py: 0,
paddingLeft: question.type.length === 0 ? 0 : "18px",
},
}}
/>
</FormControl>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
width: isMobile ? "100%" : "auto",
position: "relative",
}}
>
<IconButton
sx={{ padding: "0", margin: "5px" }}
disableRipple
onClick={() =>
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: !question.expanded,
})
}
>
{question.expanded ? (
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<ExpandLessIcon
sx={{
boxSizing: "border-box",
fill: theme.palette.brightPurple.main,
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
}}
/>
)}
</IconButton>
{question.expanded ? (
<></>
) : (
<Box
sx={{
display: "flex",
height: "30px",
borderRight: "solid 1px #4D4D4D",
}}
>
<FormControlLabel
control={
<Checkbox
icon={
<HideIcon
style={{
boxSizing: "border-box",
color: "#7E2AEA",
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
padding: "3px",
}}
/>
}
checkedIcon={<CrossedEyeIcon />}
/>
}
label={""}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
mr: 0,
userSelect: "none",
}}
/>
<IconButton
sx={{ padding: "0" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon
style={{ color: theme.palette.brightPurple.main }}
/>
</IconButton>
<IconButton
sx={{
cursor: "pointer",
borderRadius: "6px",
padding: "0",
margin: "0 5px 0 10px",
}}
onClick={() => {
const removedId = question.id;
if (question.deleteTimeoutId) {
clearTimeout(question.deleteTimeoutId);
}
removeQuestion(quizId, totalIndex);
const newTimeoutId = window.setTimeout(() => {
removeQuestionForce(quizId, removedId);
}, 5000);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
...question,
deleteTimeoutId: newTimeoutId,
});
}}
>
<DeleteIcon
style={{ color: theme.palette.brightPurple.main }}
/>
</IconButton>
</Box>
)}
<OneIcon
style={{
fontSize: "30px",
marginLeft: "3px",
color: !question.expanded ? "#FFF" : "",
fill: question.expanded
? "#EEE4FC"
: theme.palette.brightPurple.main,
}}
/>
<IconButton
disableRipple
sx={{
padding: isMobile ? "0" : "0 5px",
right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}
{...draggableProps}
>
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Box>
</Box>
{question.expanded && (
<Box
sx={{
display: "flex",
@ -402,43 +199,7 @@ export default function QuestionsPageCard({
<SwitchQuestionsPage totalIndex={totalIndex} />
)}
</Box>
)}
</Paper>
<Box
onMouseEnter={() => setPlusVisible(true)}
onMouseLeave={() => setPlusVisible(false)}
sx={{
maxWidth: "825px",
display: "flex",
alignItems: "center",
height: "40px",
cursor: "pointer",
}}
>
<Box
onClick={() => createQuestion(quizId, "", totalIndex + 1)}
sx={{
display: plusVisible && !isDragging ? "flex" : "none",
width: "100%",
alignItems: "center",
columnGap: "10px",
}}
>
<Box
sx={{
boxSizing: "border-box",
width: "100%",
height: "1px",
backgroundPosition: "bottom",
backgroundRepeat: "repeat-x",
backgroundSize: "20px 1px",
backgroundImage:
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
}}
/>
<PlusIcon />
</Box>
</Box>
</>
);
}

13
src/pages/Questions/Form/FormQuestionsPage.tsx
View File

@ -2,7 +2,6 @@ import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
import { useParams } from "react-router-dom";
import { FormDraggableList } from "./FormDraggableList";
import ButtonsOptions from "../ButtonsOptions";
import {
questionStore,
@ -65,18 +64,11 @@ export default function FormQuestionsPage() {
<Box
sx={{
display: "flex",
justifyContent: "space-between",
justifyContent: "flex-end",
gap: "8px",
maxWidth: "796px",
}}
>
<IconButton
onClick={() => {
createQuestion(quizId);
}}
>
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px" }}>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
@ -97,7 +89,6 @@ export default function FormQuestionsPage() {
Следующий шаг
</Button>
</Box>
</Box>
</>
);
}

46
src/pages/Questions/Form/FormTypeQuestions.tsx
View File

@ -1,5 +1,11 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import CustomTextField from "@ui_kit/CustomTextField";
import ButtonsOptions from "../ButtonsOptions";
import Answer from "../../../assets/icons/questionsPage/answer";
import OptionsPict from "../../../assets/icons/questionsPage/options_pict";
import OptionsAndPict from "../../../assets/icons/questionsPage/options_and_pict";
@ -11,10 +17,7 @@ import Slider from "../../../assets/icons/questionsPage/slider";
import Download from "../../../assets/icons/questionsPage/download";
import Page from "../../../assets/icons/questionsPage/page";
import RatingIcon from "../../../assets/icons/questionsPage/rating";
import { Box } from "@mui/material";
import React from "react";
import { useParams } from "react-router-dom";
import ButtonsOptions from "../ButtonsOptions";
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";
import {
questionStore,
@ -100,13 +103,10 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState("setting");
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
return (
<Box
sx={{
paddingTop: "8px",
}}
>
<Box sx={{ paddingTop: "20px" }}>
<Box
sx={{
display: "flex",
@ -115,16 +115,17 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
margin: "0 20px 20px",
}}
>
<CustomTextField placeholder="Заголовок 1 вопроса" text={""} />
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
<QuestionsMiniButton
key={title}
onClick={() => {
const question = { ...listQuestions[quizId][totalIndex] };
const clonedQuestion = { ...question };
removeQuestionForce(quizId, question.id);
removeQuestionForce(quizId, clonedQuestion.id);
createQuestion(quizId, value, totalIndex);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: question.expanded,
expanded: clonedQuestion.expanded,
type: value,
});
}}
@ -132,6 +133,27 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
text={title}
/>
))}
<Box
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: "15px",
padding: "4px",
width: "100%",
border: "1px solid transparent",
borderRadius: "8px",
"&:hover": {
border: "1px solid #9A9AAF",
},
}}
onClick={() => console.log("add")}
>
<AddAnswer color="#EEE4FC" />
<Typography sx={{ color: "#9A9AAF" }}>
Добавить еще один вопрос
</Typography>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}