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

Merge branch 'dev' into 'main'

Browse Source 
Dev

See merge request frontend/squiz!33
This commit is contained in:
Nastya 2023-10-18 06:40:09 +00:00
commit 6cf187703e
28 changed files with 1150 additions and 1274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/constants/base.ts
View File

@ -3,7 +3,7 @@ import type { QuizQuestionInitial } from "../model/questionTypes/shared";
export const QUIZ_QUESTION_BASE: Omit<QuizQuestionInitial, "id"> = {
title: "",
type: "nonselected",
expanded: false,
expanded: true,
required: false,
deleted: false,
deleteTimeoutId: 0,

1
src/constants/emoji.ts
View File

@ -15,7 +15,6 @@ export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id"> = {
variants: [
{
answer: "",
hints: "",
extendedText: "",
},
],

1
src/constants/images.ts
View File

@ -18,7 +18,6 @@ export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
variants: [
{
answer: "",
hints: "",
extendedText: "",
},
],

2
src/constants/select.ts
View File

@ -12,6 +12,6 @@ export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id"> = {
innerNameCheck: false,
innerName: "",
default: "",
variants: [{ answer: "", hints: "", extendedText: "" }],
variants: [{ answer: "", extendedText: "" }],
},
};

2
src/constants/variant.ts
View File

@ -13,6 +13,6 @@ export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id"> = {
innerNameCheck: false,
required: false,
innerName: "",
variants: [{ answer: "", hints: "", extendedText: "" }],
variants: [{ answer: "", extendedText: "" }],
},
};

2
src/constants/varimg.ts
View File

@ -11,7 +11,7 @@ export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
innerNameCheck: false,
innerName: "",
required: false,
variants: [{ answer: "", hints: "", extendedText: "" }],
variants: [{ answer: "", extendedText: "" }],
largeCheck: false,
replText: "",
},

2
src/model/questionTypes/shared.ts
View File

@ -32,8 +32,6 @@ export interface QuestionHint {
export type QuestionVariant = {
/** Текст */
answer: string;
/** Текст подсказки */
hints: string;
/** Дополнительное поле для текста, emoji, ссылки на картинку */
extendedText: string;
};

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

@ -7,7 +7,6 @@ import {
FormControl,
InputAdornment,
IconButton,
Popover,
useTheme,
useMediaQuery,
} from "@mui/material";
@ -17,10 +16,9 @@ import { questionStore, updateQuestionsList } from "@root/questions";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { MessageIcon } from "@icons/messagIcon";
import TextareaAutosize from "@mui/base/TextareaAutosize";
import type { ChangeEvent, KeyboardEvent, ReactNode } from "react";
import type { KeyboardEvent, ReactNode } from "react";
import type { DroppableProvided } from "react-beautiful-dnd";
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
@ -29,9 +27,9 @@ type AnswerItemProps = {
totalIndex: number;
variants: QuestionVariant[];
variant: QuestionVariant;
provided: DroppableProvided;
additionalContent?: ReactNode;
additionalMobile?: ReactNode;
icon?: ReactNode;
};
export const AnswerItem = ({
@ -39,6 +37,7 @@ export const AnswerItem = ({
totalIndex,
variants,
variant,
provided,
additionalContent,
additionalMobile,
}: AnswerItemProps) => {
@ -59,21 +58,9 @@ export const AnswerItem = ({
});
}, 1000);
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
setIsOpen(true);
};
const handleClose = () => {
setIsOpen(false);
};
const addNewAnswer = () => {
const answerNew = variants.slice();
answerNew.push({ answer: "", hints: "", extendedText: "" });
answerNew.push({ answer: "", extendedText: "" });
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
@ -89,19 +76,8 @@ export const AnswerItem = ({
});
};
const changeAnswerHint = (event: ChangeEvent<HTMLTextAreaElement>) => {
const answerNew = variants.slice();
answerNew[index].hints = event.target.value;
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
});
};
return (
<Draggable draggableId={String(index)} index={index}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.draggableProps}>
<Box>
<FormControl
key={index}
fullWidth
@ -128,49 +104,14 @@ export const AnswerItem = ({
InputProps={{
startAdornment: (
<>
<InputAdornment
{...provided.dragHandleProps}
position="start"
>
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
<InputAdornment {...provided.droppableProps} position="start">
<PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</InputAdornment>
{additionalContent}
</>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
sx={{ padding: "0" }}
aria-describedby="my-popover-id"
onClick={handleClick}
>
<MessageIcon
style={{
color: "#9A9AAF",
fontSize: "30px",
marginRight: "6.5px",
}}
/>
</IconButton>
<Popover
id="my-popover-id"
open={isOpen}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={changeAnswerHint}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
/>
</Popover>
<IconButton sx={{ padding: "0" }} onClick={deleteAnswer}>
<DeleteIcon
style={{
@ -184,7 +125,11 @@ export const AnswerItem = ({
}}
sx={{
"& .MuiInputBase-root": {
padding: additionalContent ? "5px 13px" : "13px",
padding: additionalContent
? isTablet
? "13px"
: "5px 13px"
: "13px",
borderRadius: "10px",
background: "#ffffff",
"& input.MuiInputBase-input": {
@ -205,7 +150,5 @@ export const AnswerItem = ({
{additionalMobile}
</FormControl>
</Box>
)}
</Draggable>
);
};

1
src/pages/Questions/AnswerDraggableList/index.tsx
View File

@ -47,6 +47,7 @@ export const AnswerDraggableList = ({
totalIndex={totalIndex}
variants={variants}
variant={variant}
provided={provided}
additionalContent={additionalContent?.(variant, index)}
additionalMobile={additionalMobile?.(variant, index)}
/>

2
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -225,7 +225,7 @@ export default function QuestionsPageCard({
sx={{
margin: isMobile ? "10px 0" : 0,
"& .MuiInputBase-root": {
color: question.expanded ? "#9A9AAF" : "#4D4D4D",
color: question.expanded ? "#000000" : "#4D4D4D",
backgroundColor: question.expanded
? theme.palette.background.default
: "transparent",

16
src/pages/Questions/DropDown/DropDown.tsx
View File

@ -29,7 +29,7 @@ export default function DropDown({ totalIndex }: Props) {
const addNewAnswer = () => {
const answerNew = question.content.variants.slice();
answerNew.push({ answer: "", hints: "", extendedText: "" });
answerNew.push({ answer: "", extendedText: "" });
updateQuestionsList<QuizQuestionSelect>(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
@ -94,12 +94,22 @@ export default function DropDown({ totalIndex }: Props) {
>
или нажмите Enter
</Typography>
<EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
<EnterIcon
style={{
color: "#7E2AEA",
fontSize: "24px",
marginLeft: "6px",
}}
/>
</>
)}
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
</>
);

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

@ -28,7 +28,9 @@ interface Props {
export default function Emoji({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState<string>("setting");
const [open, setOpen] = useState<boolean>(false);
const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);
const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(
null
);
const [currentIndex, setCurrentIndex] = useState<number>(0);
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
@ -37,7 +39,6 @@ export default function Emoji({ totalIndex }: Props) {
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const SSHC = (data: string) => {
setSwitchState(data);
};
@ -198,14 +199,21 @@ export default function Emoji({ totalIndex }: Props) {
}}
/>
</Popover>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: isMobile ? "17px" : "20px" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginBottom: isMobile ? "17px" : "20px",
}}
>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
onClick={() => {
const answerNew = question.content.variants.slice();
answerNew.push({ answer: "", hints: "", extendedText: "" });
answerNew.push({ answer: "", extendedText: "" });
updateQuestionsList<QuizQuestionEmoji>(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
@ -237,7 +245,11 @@ export default function Emoji({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
</>
);

2
src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
View File

@ -27,7 +27,7 @@ export default memo(
{(provided) => (
<ListItem
ref={provided.innerRef}
{...provided.draggableProps}
{...(index !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{questionData.deleted ? (

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

@ -147,11 +147,13 @@ export default function QuestionsPageCard({
),
endAdornment: (
<>
{totalIndex !== 0 && (
<InputAdornment {...draggableProps} position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
)}
</>
),
}}

4
src/pages/Questions/Form/FormDraggableList/index.tsx
View File

@ -15,6 +15,10 @@ export const FormDraggableList = () => {
const { listQuestions } = questionStore();
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination?.index === 0) {
return;
}
if (destination) {
const newItems = reorder(
listQuestions[quizId],

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

@ -93,13 +93,6 @@ export default function FormQuestionsPage() {
}}
onClick={() => {
createQuestion(quizId);
updateQuestionsList<QuizQuestionBase>(
quizId,
listQuestions[quizId].length - 1 || 0,
{
expanded: true,
}
);
}}
>
<AddAnswer color="#EEE4FC" />

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

@ -5,18 +5,14 @@ import { Box } from "@mui/material";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
import Answer from "../../../assets/icons/questionsPage/answer";
import OptionsPict from "../../../assets/icons/questionsPage/options_pict";
import OptionsAndPict from "../../../assets/icons/questionsPage/options_and_pict";
import Emoji from "../../../assets/icons/questionsPage/emoji";
import Input from "../../../assets/icons/questionsPage/input";
import DropDown from "../../../assets/icons/questionsPage/drop_down";
import Date from "../../../assets/icons/questionsPage/date";
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 {
questionStore,
@ -40,27 +36,12 @@ type ButtonTypeQuestion = {
value: QuizQuestionType;
};
export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [
{
icon: <Answer color="#9A9AAF" />,
title: "Варианты ответов",
value: "variant",
},
{
icon: <OptionsPict color="#9A9AAF" />,
title: "Варианты с картинками",
value: "images",
},
{
icon: <OptionsAndPict color="#9A9AAF" />,
title: "Варианты и картинка",
value: "varimg",
},
{
icon: <Emoji color="#9A9AAF" />,
title: "Эмоджи",
value: "emoji",
},
{
icon: <Input color="#9A9AAF" />,
title: "Своё поле для ввода",
@ -86,16 +67,6 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
title: "Загрузка файла",
value: "file",
},
{
icon: <Page color="#9A9AAF" />,
title: "Страница",
value: "page",
},
{
icon: <RatingIcon color="#9A9AAF" />,
title: "Рейтинг",
value: "rating",
},
];
export default function FormTypeQuestions({ totalIndex }: Props) {
@ -114,7 +85,10 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
margin: "20px",
}}
>
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
{(totalIndex === 0
? BUTTON_TYPE_QUESTIONS
: BUTTON_TYPE_SHORT_QUESTIONS
).map(({ icon, title, value }) => (
<QuestionsMiniButton
key={title}
onClick={() => {

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

@ -208,8 +208,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
opened={opened}
onClose={() => setOpened(false)}
picture={question.content.variants[currentIndex]?.extendedText}
onCropPress={url => {
const content = produce(question.content, draft => {
onCropPress={(url) => {
const content = produce(question.content, (draft) => {
draft.variants[currentIndex].extendedText = url;
});
updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {
@ -217,181 +217,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
});
}}
/>
<Box
sx={{
width: "100%",
border: "1px solid #9A9AAF",
borderRadius: "8px",
display: isTablet ? "block" : "none",
}}
>
<TextField
fullWidth
focused={false}
placeholder={"Добавьте ответ"}
multiline={question.content.largeCheck}
InputProps={{
startAdornment: (
<>
<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
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
}}
>
<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>
)}
</>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
sx={{ padding: "0" }}
aria-describedby="my-popover-id"
>
<MessageIcon
style={{
color: "#9A9AAF",
fontSize: "30px",
marginRight: "6.5px",
}}
/>
</IconButton>
<Popover
id="my-popover-id"
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={false}
>
<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 && (
<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
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
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
sx={{
display: "flex",
@ -413,7 +238,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
const clonedContent = { ...question.content };
clonedContent.variants.push({
answer: "",
hints: "",
extendedText: "",
});
updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {

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

@ -6,7 +6,7 @@ import {
Typography,
Button,
useTheme,
useMediaQuery
useMediaQuery,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
@ -62,7 +62,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
const addNewAnswer = () => {
const answerNew = question.content.variants.slice();
answerNew.push({ answer: "", hints: "", extendedText: "" });
answerNew.push({ answer: "", extendedText: "" });
updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
@ -203,8 +203,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
opened={opened}
onClose={() => setOpened(false)}
picture={question.content.variants[currentIndex]?.extendedText}
onCropPress={url => {
const content = produce(question.content, draft => {
onCropPress={(url) => {
const content = produce(question.content, (draft) => {
draft.variants[currentIndex].extendedText = url;
});
updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
@ -244,8 +244,15 @@ export default function OptionsPicture({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptionsPict
switchState={switchState}
totalIndex={totalIndex}
/>
</>
);
}

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

@ -44,11 +44,10 @@ export default function QuestionsPage() {
};
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.up(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(660));
return (
<>
{/* <Stepper activeStep={activeStep} desc={"Задайте вопросы"} /> */}
<Box
sx={{
maxWidth: "796px",
@ -85,10 +84,15 @@ export default function QuestionsPage() {
onClick={() => {
createQuestion(quizId);
}}
sx={{
position: "fixed",
left: isMobile ? "20px" : "250px",
bottom: "20px",
}}
>
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px" }}>
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}

16
src/pages/Questions/answerOptions/AnswerOptions.tsx
View File

@ -27,7 +27,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
const addNewAnswer = () => {
const answerNew = question.content.variants.slice();
answerNew.push({ answer: "", hints: "", extendedText: "" });
answerNew.push({ answer: "", extendedText: "" });
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
@ -89,12 +89,22 @@ export default function AnswerOptions({ totalIndex }: Props) {
>
или нажмите Enter
</Typography>
<EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
<EnterIcon
style={{
color: "#7E2AEA",
fontSize: "24px",
marginLeft: "6px",
}}
/>
</>
)}
</Box>
</Box>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<ButtonsOptionsAndPict
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
</>
);

10
src/stores/quizes.ts
View File

@ -126,7 +126,7 @@ export const quizStore = create<QuizStore>()(
"logo": "hub.pena.digital/img/logo",
"startpage": {
"description": "",// приветственный текст опроса
"button": "Начать", // текст на кнопке начала опроса
"button": "", // текст на кнопке начала опроса
"position": "ltr", // ltr или rtl. отображение элементов поверх фона
"background": {
"type": "image", //image или video
@ -137,11 +137,11 @@ export const quizStore = create<QuizStore>()(
},
},
"info": {
"phonenumber": "+79885895677",
"phonenumber": "",
"clickable": true,
"orgname": "ООО \"Пена\"",
"site": "hub.pena.digital",
"law": "юридическая информация"
"orgname": "",
"site": "",
"law": ""
},
"meta": "что-то"
}

60
src/ui_kit/QuizPreview/QuizPreview.tsx
View File

@ -1,16 +1,14 @@
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { Box, IconButton } from "@mui/material";
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
import { useLayoutEffect, useRef } from "react";
import { Rnd } from "react-rnd";
import QuizPreviewLayout from "./QuizPreviewLayout";
import ResizeIcon from "./ResizeIcon";
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityIcon from "@mui/icons-material/Visibility";
const DRAG_PARENT_MARGIN = 25;
const NAVBAR_HEIGHT = 81;
const DRAG_PARENT_BOTTOM_MARGIN = 65;
const DRAG_PARENT_MARGIN = 0;
const NAVBAR_HEIGHT = 0;
const DRAG_PARENT_BOTTOM_MARGIN = 0;
interface RndPositionAndSize {
x: number;
@ -20,16 +18,28 @@ interface RndPositionAndSize {
}
export default function QuizPreview() {
const isPreviewShown = useQuizPreviewStore(state => state.isPreviewShown);
const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
const rndParentRef = useRef<HTMLDivElement>(null);
const rndRef = useRef<Rnd | null>(null);
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ x: 0, y: 0, width: "340", height: "480" });
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
x: 0,
y: 0,
width: "340",
height: "480",
});
const isFirstShowRef = useRef<boolean>(true);
useLayoutEffect(function stickPreviewToBottomRight() {
useLayoutEffect(
function stickPreviewToBottomRight() {
const rnd = rndRef.current;
const rndSelfElement = rnd?.getSelfElement();
if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return;
if (
!rnd ||
!rndSelfElement ||
!rndParentRef.current ||
!isFirstShowRef.current
)
return;
const rndParentRect = rndParentRef.current.getBoundingClientRect();
const rndRect = rndSelfElement.getBoundingClientRect();
@ -42,7 +52,9 @@ export default function QuizPreview() {
rndPositionAndSizeRef.current.y = y;
isFirstShowRef.current = false;
}, [isPreviewShown]);
},
[isPreviewShown]
);
return (
<Box
@ -58,10 +70,10 @@ export default function QuizPreview() {
zIndex: 100,
}}
>
{isPreviewShown &&
{isPreviewShown && (
<Rnd
minHeight={300}
minWidth={340}
minHeight={20}
minWidth={20}
bounds="parent"
ref={rndRef}
dragHandleClassName="quiz-preview-draghandle"
@ -69,7 +81,7 @@ export default function QuizPreview() {
x: rndPositionAndSizeRef.current.x,
y: rndPositionAndSizeRef.current.y,
width: rndPositionAndSizeRef.current.width,
height: rndPositionAndSizeRef.current.height
height: rndPositionAndSizeRef.current.height,
}}
onResizeStop={(e, direction, ref, delta, position) => {
rndPositionAndSizeRef.current.x = position.x;
@ -88,32 +100,22 @@ export default function QuizPreview() {
topLeft: isPreviewShown,
}}
resizeHandleComponent={{
topLeft: <ResizeIcon />
topLeft: <ResizeIcon />,
}}
resizeHandleStyles={{
topLeft: {
top: "-1px",
left: "-1px",
}
},
}}
style={{
overflow: "hidden",
pointerEvents: "auto",
}}
>
<QuizPreviewLayout />
<IconButton
className="quiz-preview-draghandle"
sx={{
position: "absolute",
bottom: -54,
right: 46,
cursor: "move",
}}
>
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Rnd>
}
)}
<IconButton
onClick={toggleQuizPreview}
sx={{

88
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -1,6 +1,10 @@
import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
import { questionStore } from "@root/questions";
import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview";
import {
decrementCurrentQuestionIndex,
incrementCurrentQuestionIndex,
useQuizPreviewStore,
} from "@root/quizPreview";
import { DefiniteQuestionType } from "model/questionTypes/shared";
import { FC, useEffect } from "react";
import { useParams } from "react-router-dom";
@ -17,7 +21,6 @@ import Text from "./QuizPreviewQuestionTypes/Text";
import Variant from "./QuizPreviewQuestionTypes/Variant";
import Varimg from "./QuizPreviewQuestionTypes/Varimg";
const QuestionPreviewComponentByType: Record<DefiniteQuestionType, FC<any>> = {
variant: Variant,
images: Images,
@ -34,66 +37,89 @@ const QuestionPreviewComponentByType: Record<DefiniteQuestionType, FC<any>> = {
export default function QuizPreviewLayout() {
const quizId = useParams().quizId ?? 0;
const listQuestions = questionStore(state => state.listQuestions);
const currentQuizStep = useQuizPreviewStore(state => state.currentQuestionIndex);
const listQuestions = questionStore((state) => state.listQuestions);
const currentQuizStep = useQuizPreviewStore(
(state) => state.currentQuestionIndex
);
const quizQuestions = listQuestions[quizId] ?? [];
const nonDeletedQuizQuestions = quizQuestions.filter(question => !question.deleted);
const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
const nonDeletedQuizQuestions = quizQuestions.filter(
(question) => !question.deleted
);
const maxCurrentQuizStep =
nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
const currentProgress = Math.floor(
(currentQuizStep / maxCurrentQuizStep) * 100
);
const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
const QuestionComponent = currentQuestion
? QuestionPreviewComponentByType[currentQuestion.type as DefiniteQuestionType]
? QuestionPreviewComponentByType[
currentQuestion.type as DefiniteQuestionType
]
: null;
const questionElement = QuestionComponent
? <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
: null;
const questionElement = QuestionComponent ? (
<QuestionComponent key={currentQuestion.id} question={currentQuestion} />
) : null;
useEffect(function resetCurrentQuizStep() {
useEffect(
function resetCurrentQuizStep() {
if (currentQuizStep > maxCurrentQuizStep) {
decrementCurrentQuestionIndex();
}
}, [currentQuizStep, maxCurrentQuizStep]);
},
[currentQuizStep, maxCurrentQuizStep]
);
return (
<Paper sx={{
<Paper
className="quiz-preview-draghandle"
sx={{
height: "100%",
display: "flex",
flexDirection: "column",
flexGrow: 1,
borderRadius: "12px",
pointerEvents: "auto",
}}>
<Box sx={{
}}
>
<Box
sx={{
p: "16px",
whiteSpace: "break-spaces",
overflowY: "auto",
flexGrow: 1,
}}>
"&::-webkit-scrollbar": { width: 0 },
}}
>
{questionElement}
</Box>
<Box sx={{
<Box
sx={{
mt: "auto",
p: "16px",
display: "flex",
borderTop: "1px solid #E3E3E3",
alignItems: "center",
}}>
<Box sx={{
}}
>
<Box
sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
gap: 1,
}}>
}}
>
<Typography>
{nonDeletedQuizQuestions.length > 0
? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
: "Нет вопросов"
}
? `Вопрос ${currentQuizStep + 1} из ${
nonDeletedQuizQuestions.length
}`
: "Нет вопросов"}
</Typography>
{nonDeletedQuizQuestions.length > 0 &&
{nonDeletedQuizQuestions.length > 0 && (
<LinearProgress
variant="determinate"
value={currentProgress}
@ -106,13 +132,15 @@ export default function QuizPreviewLayout() {
},
}}
/>
}
)}
</Box>
<Box sx={{
<Box
sx={{
ml: 2,
display: "flex",
gap: 1,
}}>
}}
>
<Button
variant="outlined"
onClick={decrementCurrentQuestionIndex}
@ -125,7 +153,9 @@ export default function QuizPreviewLayout() {
variant="contained"
onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
disabled={currentQuizStep >= maxCurrentQuizStep}
>Далее</Button>
>
Далее
</Button>
</Box>
</Box>
</Paper>

27
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
View File

@ -1,9 +1,17 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
import {
Box,
FormControl,
FormControlLabel,
FormLabel,
Radio,
RadioGroup,
Tooltip,
Typography,
} from "@mui/material";
import { QuizQuestionEmoji } from "model/questionTypes/emoji";
import { useState, ChangeEvent } from "react";
interface Props {
question: QuizQuestionEmoji;
}
@ -24,14 +32,21 @@ export default function Emoji({ question }: Props) {
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<FormControlLabel key={index} value={variant.answer} control={<Radio />} label={
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
<Tooltip title={variant.hints} placement="right">
<Box><InfoIcon /></Box>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
} />
}
/>
))}
</RadioGroup>
</FormControl>

47
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
View File

@ -1,9 +1,15 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, ButtonBase, Divider, Tooltip, Typography, useTheme } from "@mui/material";
import {
Box,
ButtonBase,
Divider,
Tooltip,
Typography,
useTheme,
} from "@mui/material";
import { QuizQuestionImages } from "model/questionTypes/images";
import { useEffect, useState } from "react";
interface Props {
question: QuizQuestionImages;
}
@ -24,22 +30,29 @@ export default function Images({ question }: Props) {
setSelectedVariants(newSelectedVariants);
}
useEffect(function resetSelectedVariants() {
useEffect(
function resetSelectedVariants() {
setSelectedVariants([]);
}, [question.content.multi]);
},
[question.content.multi]
);
return (
<Box sx={{
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
}}
>
<Typography variant="h6">{question.title}</Typography>
<Box sx={{
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
gap: 1,
}}>
}}
>
{question.content.variants.map((variant, index) => (
<ButtonBase
key={index}
@ -50,10 +63,12 @@ export default function Images({ question }: Props) {
borderRadius: "8px",
overflow: "hidden",
border: "1px solid",
borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3",
borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main
: "#E3E3E3",
}}
>
{variant.extendedText ?
{variant.extendedText ? (
<img
src={variant.extendedText}
alt="question variant"
@ -64,19 +79,21 @@ export default function Images({ question }: Props) {
flexGrow: 1,
}}
/>
:
) : (
<Typography p={2}>Картинка отсутствует</Typography>
}
)}
<Divider sx={{ width: "100%" }} />
<Box sx={{
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 2,
p: 1,
}}>
}}
>
<Typography>{variant.answer}</Typography>
<Tooltip title={variant.hints} placement="right">
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>

23
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
View File

@ -1,9 +1,17 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
import {
Box,
FormControl,
FormControlLabel,
FormLabel,
Radio,
RadioGroup,
Tooltip,
Typography,
} from "@mui/material";
import { QuizQuestionVariant } from "model/questionTypes/variant";
import { ChangeEvent, useState } from "react";
interface Props {
question: QuizQuestionVariant;
}
@ -24,16 +32,21 @@ export default function Variant({ question }: Props) {
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<FormControlLabel key={index} value={variant.answer} control={<Radio />} label={
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
<Tooltip title={variant.hints} placement="right">
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
} />
}
/>
))}
</RadioGroup>
</FormControl>

49
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -1,10 +1,18 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
import {
Box,
FormControl,
FormControlLabel,
FormLabel,
Radio,
RadioGroup,
Tooltip,
Typography,
} from "@mui/material";
import { QuestionVariant } from "model/questionTypes/shared";
import { QuizQuestionVarImg } from "model/questionTypes/varimg";
import { useState, ChangeEvent } from "react";
interface Props {
question: QuizQuestionVarImg;
}
@ -13,19 +21,24 @@ export default function Varimg({ question }: Props) {
const [selectedVariantIndex, setSelectedVariantIndex] = useState<number>(-1);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setSelectedVariantIndex(question.content.variants.findIndex(
variant => variant.answer === event.target.value
));
setSelectedVariantIndex(
question.content.variants.findIndex(
(variant) => variant.answer === event.target.value
)
);
};
const currentVariant: QuestionVariant | undefined = question.content.variants[selectedVariantIndex];
const currentVariant: QuestionVariant | undefined =
question.content.variants[selectedVariantIndex];
return (
<Box sx={{
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: 2,
}}>
}}
>
<FormControl>
<FormLabel id="quiz-question-radio-group">{question.title}</FormLabel>
<RadioGroup
@ -41,7 +54,7 @@ export default function Varimg({ question }: Props) {
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
<Tooltip title={variant.hints} placement="right">
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
@ -52,15 +65,17 @@ export default function Varimg({ question }: Props) {
))}
</RadioGroup>
</FormControl>
<Box sx={{
<Box
sx={{
border: "1px solid #E3E3E3",
maxWidth: "400px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "8px",
}}>
{currentVariant?.extendedText ?
}}
>
{currentVariant?.extendedText ? (
<img
src={currentVariant.extendedText}
alt="question variant"
@ -71,9 +86,13 @@ export default function Varimg({ question }: Props) {
flexGrow: 1,
}}
/>
:
<Typography p={2}>{selectedVariantIndex === -1 ? "Выберите вариант" : "Картинка отсутствует"}</Typography>
}
) : (
<Typography p={2}>
{selectedVariantIndex === -1
? "Выберите вариант"
: "Картинка отсутствует"}
</Typography>
)}
</Box>
</Box>
);