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

Merge branch 'quiz-fixes' into 'dev'

Browse Source 
feat: quiz fixes

See merge request frontend/squiz!43
This commit is contained in:
Nastya 2023-11-01 13:51:23 +00:00
commit cca074feb4
20 changed files with 598 additions and 1087 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/constants/text.ts
View File

@ -12,5 +12,6 @@ export const QUIZ_QUESTION_TEXT: Omit<QuizQuestionText, "id"> = {
innerName: "",
required: false,
answerType: "single",
onlyNumbers: false,
},
};

4
src/model/questionTypes/file.ts
View File

@ -4,7 +4,7 @@ import type {
QuestionBranchingRule,
} from "./shared";
export const uploadFileTypesMap = {
export const UPLOAD_FILE_TYPES_MAP = {
all: "Все типы файлов",
picture: "Изображения",
video: "Видео",
@ -12,7 +12,7 @@ export const uploadFileTypesMap = {
document: "Документ",
} as const;
export type UploadFileType = keyof typeof uploadFileTypesMap;
export type UploadFileType = keyof typeof UPLOAD_FILE_TYPES_MAP;
export interface QuizQuestionFile extends QuizQuestionBase {
type: "file";

3
src/model/questionTypes/text.ts
View File

@ -16,10 +16,11 @@ export interface QuizQuestionText extends QuizQuestionBase {
required: boolean;
/** Чекбокс "Автозаполнение адреса" */
autofill: boolean;
answerType: "single" | "multi" | "number";
answerType: "single" | "multi";
hint: QuestionHint;
rule: QuestionBranchingRule;
back: string;
originalBack: string;
onlyNumbers: boolean;
};
}

1
src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
View File

@ -134,6 +134,7 @@ export const ChooseAnswerModal = ({
removeQuestionForce(quizId, question.id);
createQuestion(quizId, selectedValue, totalIndex);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
title: question.title,
expanded: question.expanded,
});
}}

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

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

56
src/pages/Questions/OwnTextField/settingTextField.tsx
View File

@ -28,16 +28,17 @@ type SettingTextFieldProps = {
type Answer = {
name: string;
value: "single" | "multi" | "number";
value: "single" | "multi";
};
const ANSWER_TYPES: Answer[] = [
{ name: "Однострочное", value: "single" },
{ name: "Многострочное", value: "multi" },
{ name: "Только числа", value: "number" },
];
export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
export default function SettingTextField({
totalIndex,
}: SettingTextFieldProps) {
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
const theme = useTheme();
@ -68,12 +69,24 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
pl: "20px",
}}
>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D", marginBottom: "14px" }}>
<Typography
sx={{
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
marginBottom: "14px",
}}
>
Настройки ответов
</Typography>
<FormControl>
<RadioGroup
sx={{ display: "flex", flexDirection: "column", gap: "14px", width: "100%" }}
sx={{
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
}}
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex(
@ -97,12 +110,29 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
"& .MuiRadio-root": { padding: "8px 9px" },
}}
value={index}
control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
control={
<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
}
label={name}
/>
))}
</RadioGroup>
</FormControl>
<CustomCheckbox
sx={{
display: isMobile ? "flex" : "block",
mr: isMobile ? "0px" : "16px",
marginTop: "15px",
alignItems: isMobile ? "flex-end" : "center",
}}
label={"Только числа"}
checked={question.content.onlyNumbers}
handleChange={({ target }) => {
updateQuestionsList<QuizQuestionText>(quizId, totalIndex, {
content: { ...question.content, onlyNumbers: target.checked },
});
}}
/>
</Box>
<Box
sx={{
@ -115,7 +145,14 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
gap: "14px",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
}}
>
Настройки вопросов
</Typography>
<CustomCheckbox
@ -172,7 +209,10 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
});
}}
/>
<Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>

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

@ -160,5 +160,4 @@ export default function QuizPreviewLayout() {
</Box>
</Paper>
);
}

29
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
View File

@ -1,22 +1,23 @@
import { Box, Typography } from "@mui/material";
import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
import { QuizQuestionDate } from "model/questionTypes/date";
import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
import type { QuizQuestionDate } from "model/questionTypes/date";
interface Props {
question: QuizQuestionDate;
question: QuizQuestionDate;
}
export default function Date({ question }: Props) {
return (
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<LabeledDatePicker />
</Box>
);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<LabeledDatePicker />
</Box>
);
}

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon";
import { useState, ChangeEvent } from "react";
import {
Box,
FormControl,
@ -9,8 +9,10 @@ import {
Tooltip,
Typography,
} from "@mui/material";
import { QuizQuestionEmoji } from "model/questionTypes/emoji";
import { useState, ChangeEvent } from "react";
import InfoIcon from "@icons/InfoIcon";
import type { QuizQuestionEmoji } from "model/questionTypes/emoji";
interface Props {
question: QuizQuestionEmoji;
@ -31,23 +33,27 @@ export default function Emoji({ question }: Props) {
value={value}
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<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="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
{variant.hints && (
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
)}
</Box>
}
/>
))}
</RadioGroup>
</FormControl>
);

87
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
View File

@ -1,44 +1,63 @@
import { ChangeEvent, useEffect, useRef, useState } from "react";
import { Box, Button, Typography } from "@mui/material";
import { QuizQuestionFile } from "model/questionTypes/file";
import { ChangeEvent, useRef, useState } from "react";
import type {
QuizQuestionFile,
UploadFileType,
} from "model/questionTypes/file";
export const UPLOAD_FILE_TYPES_MAP: Record<UploadFileType, string> = {
all: "file",
picture: "image/*",
video: "video/*",
audio: "audio/*",
document:
".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.pdf",
} as const;
interface Props {
question: QuizQuestionFile;
question: QuizQuestionFile;
}
export default function File({ question }: Props) {
const fileInputRef = useRef<HTMLInputElement>(null);
const [file, setFile] = useState<File | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [file, setFile] = useState<File | null>(null);
const [acceptedType, setAcceptedType] = useState<any>(
UPLOAD_FILE_TYPES_MAP.all
);
function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
if (!event.target.files?.[0]) return setFile(null);
setFile(event.target.files[0]);
}
useEffect(() => {
setAcceptedType(UPLOAD_FILE_TYPES_MAP[question.content.type]);
}, [question.content.type]);
return (
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<Button
variant="contained"
onClick={() => fileInputRef.current?.click()}
>
Загрузить файл
<input
ref={fileInputRef}
onChange={handleFileChange}
type="file"
style={{
display: "none",
}}
/>
</Button>
{file && <Typography>Выбран файл: {file.name}</Typography>}
</Box>
);
function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
if (!event.target.files?.[0]) return setFile(null);
setFile(event.target.files[0]);
}
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Button variant="contained" onClick={() => fileInputRef.current?.click()}>
Загрузить файл
<input
ref={fileInputRef}
onChange={handleFileChange}
type="file"
accept={acceptedType}
style={{
display: "none",
}}
/>
</Button>
{file && <Typography>Выбран файл: {file.name}</Typography>}
</Box>
);
}

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon";
import { useEffect, useState } from "react";
import {
Box,
ButtonBase,
@ -7,8 +7,10 @@ import {
Typography,
useTheme,
} from "@mui/material";
import { QuizQuestionImages } from "model/questionTypes/images";
import { useEffect, useState } from "react";
import InfoIcon from "@icons/InfoIcon";
import type { QuizQuestionImages } from "model/questionTypes/images";
interface Props {
question: QuizQuestionImages;
@ -53,54 +55,58 @@ export default function Images({ question }: Props) {
gap: 1,
}}
>
{question.content.variants.map((variant, index) => (
<ButtonBase
key={index}
onClick={() => handleVariantClick(index)}
sx={{
display: "flex",
flexDirection: "column",
borderRadius: "8px",
overflow: "hidden",
border: "1px solid",
borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main
: "#E3E3E3",
}}
>
{variant.extendedText ? (
<img
src={variant.extendedText}
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
) : (
<Typography p={2}>Картинка отсутствует</Typography>
)}
<Divider sx={{ width: "100%" }} />
<Box
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<ButtonBase
key={index}
onClick={() => handleVariantClick(index)}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 2,
p: 1,
flexDirection: "column",
borderRadius: "8px",
overflow: "hidden",
border: "1px solid",
borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main
: "#E3E3E3",
}}
>
<Typography>{variant.answer}</Typography>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</ButtonBase>
))}
{variant.extendedText ? (
<img
src={variant.extendedText}
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
) : (
<Typography p={2}>Картинка отсутствует</Typography>
)}
<Divider sx={{ width: "100%" }} />
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 2,
p: 1,
}}
>
<Typography>{variant.answer}</Typography>
{variant.hints && (
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
)}
</Box>
</ButtonBase>
))}
</Box>
</Box>
);

77
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
View File

@ -1,47 +1,52 @@
import { Box, Typography } from "@mui/material";
import { CustomSlider } from "@ui_kit/CustomSlider";
import { QuizQuestionNumber } from "model/questionTypes/number";
import { useLayoutEffect, useState } from "react";
import { Box, Typography } from "@mui/material";
import { CustomSlider } from "@ui_kit/CustomSlider";
import type { QuizQuestionNumber } from "model/questionTypes/number";
interface Props {
question: QuizQuestionNumber;
question: QuizQuestionNumber;
}
export default function Number({ question }: Props) {
const [sliderValues, setSliderValues] = useState<number | number[]>(0);
const [sliderValues, setSliderValues] = useState<number | number[]>(0);
const start = question.content.start;
const min = parseInt(question.content.range.split("—")[0]);
const max = parseInt(question.content.range.split("—")[1]);
const start = question.content.start;
const min = parseInt(question.content.range.split("—")[0]);
const max = parseInt(question.content.range.split("—")[1]);
useLayoutEffect(() => {
if (question.content.chooseRange) {
setSliderValues([start, start + (max - start) / 2]);
} else {
setSliderValues(start);
}
}, [max, question.content.chooseRange, start]);
useLayoutEffect(() => {
if (question.content.chooseRange) {
setSliderValues([start, start + (max - start) / 2]);
} else {
setSliderValues(start);
}
}, [max, question.content.chooseRange, start]);
return (
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<Box sx={{
px: 2,
}}>
<CustomSlider
value={sliderValues}
onChange={value => setSliderValues(value)}
min={min}
max={max}
defaultValue={start}
step={question.content.step}
/>
</Box>
</Box>
);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Box
sx={{
px: 2,
}}
>
<CustomSlider
value={sliderValues}
onChange={(value) => setSliderValues(value)}
min={min}
max={max}
defaultValue={start}
step={question.content.step}
/>
</Box>
</Box>
);
}

53
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
View File

@ -1,34 +1,35 @@
import { Box, Typography } from "@mui/material";
import { QuizQuestionPage } from "model/questionTypes/page";
import type { QuizQuestionPage } from "model/questionTypes/page";
interface Props {
question: QuizQuestionPage;
question: QuizQuestionPage;
}
export default function Page({ question }: Props) {
return (
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<Typography>{question.content.text}</Typography>
{question.content.picture &&
<img
src={question.content.picture}
alt=""
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
}
</Box>
);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography>{question.content.text}</Typography>
{question.content.picture && (
<img
src={question.content.picture}
alt=""
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
)}
</Box>
);
}

170
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
View File

@ -1,91 +1,113 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { FC, useState } from "react";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
import { QuizQuestionRating } from "model/questionTypes/rating";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import FlagIcon from "@icons/questionsPage/FlagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini";
import HashtagIcon from "@icons/questionsPage/hashtagIcon";
import HeartIcon from "@icons/questionsPage/heartIcon";
import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
import LikeIcon from "@icons/questionsPage/likeIcon";
import TropfyIcon from "@icons/questionsPage/tropfyIcon";
type RatingIconType = "star" | "trophie" | "flag" | "heart" | "like" | "bubble" | "hashtag";
import type { QuizQuestionRating } from "model/questionTypes/rating";
const ratingIconComponentByType: Record<RatingIconType, FC<{ color: string; }>> = {
"star": StarIconMini,
"trophie": TropfyIcon,
"flag": FlagIcon,
"heart": HeartIcon,
"like": LikeIcon,
"bubble": LightbulbIcon,
"hashtag": HashtagIcon,
type RatingIconType =
| "star"
| "trophie"
| "flag"
| "heart"
| "like"
| "bubble"
| "hashtag";
const ratingIconComponentByType: Record<
RatingIconType,
FC<{ color: string }>
> = {
star: StarIconMini,
trophie: TropfyIcon,
flag: FlagIcon,
heart: HeartIcon,
like: LikeIcon,
bubble: LightbulbIcon,
hashtag: HashtagIcon,
};
interface Props {
question: QuizQuestionRating;
question: QuizQuestionRating;
}
export default function Rating({ question }: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [selectedRating, setSelectedRating] = useState<number>(0);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [selectedRating, setSelectedRating] = useState<number>(0);
console.log(question);
console.log(question);
const RatingIconComponent = ratingIconComponentByType[question.content.form as RatingIconType];
const RatingIconComponent =
ratingIconComponentByType[question.content.form as RatingIconType];
return (
<Box sx={{
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
width: "fit-content",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
width: "fit-content",
}}>
<Box sx={{
display: "flex",
gap: isMobile ? "10px" : "15px",
flexWrap: "wrap",
}}>
{Array.from(
{ length: question.content.steps },
(_, index) => index
).map((itemNumber) => (
<Box
key={itemNumber}
onClick={() => setSelectedRating(itemNumber + 1)}
sx={{
cursor: "pointer",
transform: "scale(1.5)",
":hover": {
transform: "scale(1.7)",
transition: "0.2s",
},
}}
>
<RatingIconComponent color={
selectedRating > itemNumber
? theme.palette.brightPurple.main
: theme.palette.grey2.main
} />
</Box>
))}
</Box>
<Box sx={{
display: "flex",
justifyContent: "space-between",
gap: 2,
}}>
<Typography>{question.content.ratingNegativeDescription}</Typography>
<Typography>{question.content.ratingPositiveDescription}</Typography>
</Box>
gap: isMobile ? "10px" : "15px",
flexWrap: "wrap",
}}
>
{Array.from(
{ length: question.content.steps },
(_, index) => index
).map((itemNumber) => (
<Box
key={itemNumber}
onClick={() => setSelectedRating(itemNumber + 1)}
sx={{
cursor: "pointer",
transform: "scale(1.5)",
":hover": {
transform: "scale(1.7)",
transition: "0.2s",
},
}}
>
<RatingIconComponent
color={
selectedRating > itemNumber
? theme.palette.brightPurple.main
: theme.palette.grey2.main
}
/>
</Box>
))}
</Box>
);
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: 2,
}}
>
<Typography>{question.content.ratingNegativeDescription}</Typography>
<Typography>{question.content.ratingPositiveDescription}</Typography>
</Box>
</Box>
</Box>
);
}

202
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
View File

@ -1,102 +1,124 @@
import ArrowDownIcon from "@icons/ArrowDownIcon";
import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from "@mui/material";
import { QuizQuestionSelect } from "model/questionTypes/select";
import { useState } from "react";
import {
Box,
FormControl,
MenuItem,
Select,
SelectChangeEvent,
Typography,
useTheme,
} from "@mui/material";
import ArrowDownIcon from "@icons/ArrowDownIcon";
import type { QuizQuestionSelect } from "model/questionTypes/select";
interface Props {
question: QuizQuestionSelect;
question: QuizQuestionSelect;
}
export default function Text({ question }: Props) {
const theme = useTheme();
const [selectValue, setSelectValue] = useState<string>("");
const theme = useTheme();
const [selectValue, setSelectValue] = useState<string>("");
function handleChange(event: SelectChangeEvent<string | null>) {
setSelectValue((event.target as HTMLInputElement).value);
}
function handleChange(event: SelectChangeEvent<string | null>) {
setSelectValue((event.target as HTMLInputElement).value);
}
return (
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<FormControl
fullWidth
size="small"
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
}}
>
<Select
id="category-select"
variant="outlined"
value={selectValue}
placeholder={question.content.default}
displayEmpty
onChange={handleChange}
sx={{
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
"& + input": !selectValue && {
border: "none",
transform: "translateY(-50%)",
top: "50%",
left: "10px",
opacity: 1,
color: "#333",
fontSize: "16px",
},
},
}}
IconComponent={(props) => <ArrowDownIcon {...props} />}
>
{question.content.variants
.filter(({ answer }) => answer)
.map((variant) => (
<MenuItem
key={variant.answer}
value={variant.answer}
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
<Select
id="category-select"
variant="outlined"
value={selectValue}
displayEmpty
onChange={handleChange}
sx={{
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
},
}}
IconComponent={(props) => <ArrowDownIcon {...props} />}
>
{question.content.variants.map(variant => (
<MenuItem
key={variant.answer}
value={variant.answer}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{variant.answer}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
>
{variant.answer}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}

32
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
View File

@ -1,24 +1,24 @@
import { Box, Typography } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import { QuizQuestionText } from "model/questionTypes/text";
import CustomTextField from "@ui_kit/CustomTextField";
import type { QuizQuestionText } from "model/questionTypes/text";
interface Props {
question: QuizQuestionText;
question: QuizQuestionText;
}
export default function Text({ question }: Props) {
return (
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<CustomTextField
placeholder={question.content.placeholder}
/>
</Box>
);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<CustomTextField placeholder={question.content.placeholder} />
</Box>
);
}

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon";
import { ChangeEvent, useState } from "react";
import {
Box,
FormControl,
@ -9,8 +9,10 @@ import {
Tooltip,
Typography,
} from "@mui/material";
import { QuizQuestionVariant } from "model/questionTypes/variant";
import { ChangeEvent, useState } from "react";
import InfoIcon from "@icons/InfoIcon";
import type { QuizQuestionVariant } from "model/questionTypes/variant";
interface Props {
question: QuizQuestionVariant;
@ -23,41 +25,46 @@ export default function Variant({ question }: Props) {
setValue((event.target as HTMLInputElement).value);
};
return (
<FormControl fullWidth>
<FormLabel
id="quiz-question-radio-group"
data-cy="variant-title"
>{question.title}</FormLabel>
<RadioGroup
aria-labelledby="quiz-question-radio-group"
value={value}
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography
data-cy="variant-answer"
>{variant.answer}</Typography>
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
</RadioGroup>
</FormControl>
);
return (
<FormControl fullWidth>
<FormLabel id="quiz-question-radio-group" data-cy="variant-title">
{question.title}
</FormLabel>
<RadioGroup
aria-labelledby="quiz-question-radio-group"
value={value}
onChange={handleChange}
>
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={
<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography data-cy="variant-answer">
{variant.answer}
</Typography>
{variant.hints && (
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
)}
</Box>
}
/>
))}
</RadioGroup>
</FormControl>
);
}

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon";
import { useState, ChangeEvent } from "react";
import {
Box,
FormControl,
@ -9,9 +9,11 @@ import {
Tooltip,
Typography,
} from "@mui/material";
import { QuestionVariant } from "model/questionTypes/shared";
import { QuizQuestionVarImg } from "model/questionTypes/varimg";
import { useState, ChangeEvent } from "react";
import InfoIcon from "@icons/InfoIcon";
import type { QuestionVariant } from "model/questionTypes/shared";
import type { QuizQuestionVarImg } from "model/questionTypes/varimg";
interface Props {
question: QuizQuestionVarImg;
@ -46,23 +48,27 @@ export default function Varimg({ question }: Props) {
value={currentVariant?.answer ?? ""}
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
{variant.hints && (
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
)}
</Box>
}
/>
))}
</RadioGroup>
</FormControl>
<Box

14
src/ui_kit/Stepper.tsx
View File

@ -7,7 +7,11 @@ interface Props {
steps?: number;
}
export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 8 }: Props) {
export default function ProgressMobileStepper({
desc,
activeStep = 1,
steps = 8,
}: Props) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
@ -18,7 +22,7 @@ export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 8
display: "flex",
justifyContent: "center",
flexDirection: "column",
height: "51px",
height: "73px",
borderRadius: "13px",
border: "solid #7E2AEA 1px",
padding: "0 0 20px 0",
@ -33,7 +37,7 @@ export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 8
sx={{
width: "100%",
flexGrow: 1,
paddingLeft: 0,
padding: "8px 0",
"& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": {
height: "10px",
background: "#ffffff",
@ -47,7 +51,9 @@ export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 8
backButton={<></>}
/>
<Box sx={{ padding: "3px 3px 3px 20px" }}>
<Typography sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}>
<Typography
sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}
>
{" "}
Шаг {activeStep} из {steps - 1}
</Typography>

672
yarn.lock
View File

File diff suppressed because it is too large Load Diff