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

fix: little fixes

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-30 19:46:02 +03:00
parent 9dfa464afd
commit 128a33ef80
15 changed files with 284 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

@ -1,6 +1,7 @@
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import LabeledDatePicker from "@ui_kit/LabeledDatePicker"; import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
import { QuizQuestionDate } from "model/questionTypes/date"; import type { QuizQuestionDate } from "model/questionTypes/date";
interface Props { interface Props {
question: QuizQuestionDate; question: QuizQuestionDate;

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon"; import { useState, ChangeEvent } from "react";
import { import {
Box, Box,
FormControl, FormControl,
@ -9,8 +9,10 @@ import {
Tooltip, Tooltip,
Typography, Typography,
} from "@mui/material"; } 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 { interface Props {
question: QuizQuestionEmoji; question: QuizQuestionEmoji;

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 { 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 { interface Props {
question: QuizQuestionFile; question: QuizQuestionFile;
} }
export default function File({ question }: Props) { export default function File({ question }: Props) {
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [acceptedType, setAcceptedType] = useState<any>(
UPLOAD_FILE_TYPES_MAP.all
);
function handleFileChange(event: ChangeEvent<HTMLInputElement>) { useEffect(() => {
if (!event.target.files?.[0]) return setFile(null); setAcceptedType(UPLOAD_FILE_TYPES_MAP[question.content.type]);
setFile(event.target.files[0]); }, [question.content.type]);
}
return ( function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
<Box sx={{ if (!event.target.files?.[0]) return setFile(null);
display: "flex", setFile(event.target.files[0]);
flexDirection: "column", }
alignItems: "start",
gap: 1, return (
}}> <Box
<Typography variant="h6">{question.title}</Typography> sx={{
<Button display: "flex",
variant="contained" flexDirection: "column",
onClick={() => fileInputRef.current?.click()} alignItems: "start",
> gap: 1,
Загрузить файл }}
<input >
ref={fileInputRef} <Typography variant="h6">{question.title}</Typography>
onChange={handleFileChange} <Button variant="contained" onClick={() => fileInputRef.current?.click()}>
type="file" Загрузить файл
style={{ <input
display: "none", ref={fileInputRef}
}} onChange={handleFileChange}
/> type="file"
</Button> accept={acceptedType}
{file && <Typography>Выбран файл: {file.name}</Typography>} style={{
</Box> display: "none",
); }}
/>
</Button>
{file && <Typography>Выбран файл: {file.name}</Typography>}
</Box>
);
} }

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon"; import { useEffect, useState } from "react";
import { import {
Box, Box,
ButtonBase, ButtonBase,
@ -7,8 +7,10 @@ import {
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } 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 { interface Props {
question: QuizQuestionImages; question: QuizQuestionImages;

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 { 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 { interface Props {
question: QuizQuestionNumber; question: QuizQuestionNumber;
} }
export default function Number({ question }: Props) { 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 start = question.content.start;
const min = parseInt(question.content.range.split("—")[0]); const min = parseInt(question.content.range.split("—")[0]);
const max = parseInt(question.content.range.split("—")[1]); const max = parseInt(question.content.range.split("—")[1]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (question.content.chooseRange) { if (question.content.chooseRange) {
setSliderValues([start, start + (max - start) / 2]); setSliderValues([start, start + (max - start) / 2]);
} else { } else {
setSliderValues(start); setSliderValues(start);
} }
}, [max, question.content.chooseRange, start]); }, [max, question.content.chooseRange, start]);
return ( return (
<Box sx={{ <Box
display: "flex", sx={{
flexDirection: "column", display: "flex",
gap: 1, flexDirection: "column",
}}> gap: 1,
<Typography variant="h6">{question.title}</Typography> }}
<Box sx={{ >
px: 2, <Typography variant="h6">{question.title}</Typography>
}}> <Box
<CustomSlider sx={{
value={sliderValues} px: 2,
onChange={value => setSliderValues(value)} }}
min={min} >
max={max} <CustomSlider
defaultValue={start} value={sliderValues}
step={question.content.step} onChange={(value) => setSliderValues(value)}
/> min={min}
</Box> max={max}
</Box> 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 { Box, Typography } from "@mui/material";
import { QuizQuestionPage } from "model/questionTypes/page";
import type { QuizQuestionPage } from "model/questionTypes/page";
interface Props { interface Props {
question: QuizQuestionPage; question: QuizQuestionPage;
} }
export default function Page({ question }: Props) { export default function Page({ question }: Props) {
return (
return ( <Box
<Box sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "start", alignItems: "start",
gap: 1, gap: 1,
}}> }}
<Typography variant="h6">{question.title}</Typography> >
<Typography>{question.content.text}</Typography> <Typography variant="h6">{question.title}</Typography>
{question.content.picture && <Typography>{question.content.text}</Typography>
<img {question.content.picture && (
src={question.content.picture} <img
alt="" src={question.content.picture}
style={{ alt=""
width: "100%", style={{
display: "block", width: "100%",
objectFit: "scale-down", display: "block",
flexGrow: 1, objectFit: "scale-down",
}} flexGrow: 1,
/> }}
} />
</Box> )}
); </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 { FC, useState } from "react";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
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 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; }>> = { type RatingIconType =
"star": StarIconMini, | "star"
"trophie": TropfyIcon, | "trophie"
"flag": FlagIcon, | "flag"
"heart": HeartIcon, | "heart"
"like": LikeIcon, | "like"
"bubble": LightbulbIcon, | "bubble"
"hashtag": HashtagIcon, | "hashtag";
const ratingIconComponentByType: Record<
RatingIconType,
FC<{ color: string }>
> = {
star: StarIconMini,
trophie: TropfyIcon,
flag: FlagIcon,
heart: HeartIcon,
like: LikeIcon,
bubble: LightbulbIcon,
hashtag: HashtagIcon,
}; };
interface Props { interface Props {
question: QuizQuestionRating; question: QuizQuestionRating;
} }
export default function Rating({ question }: Props) { export default function Rating({ question }: Props) {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [selectedRating, setSelectedRating] = useState<number>(0); 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 ( return (
<Box sx={{ <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", display: "flex",
flexDirection: "column", gap: isMobile ? "10px" : "15px",
gap: 1, flexWrap: "wrap",
}}> }}
<Typography variant="h6">{question.title}</Typography> >
<Box sx={{ {Array.from(
display: "flex", { length: question.content.steps },
flexDirection: "column", (_, index) => index
gap: 1, ).map((itemNumber) => (
width: "fit-content", <Box
}}> key={itemNumber}
<Box sx={{ onClick={() => setSelectedRating(itemNumber + 1)}
display: "flex", sx={{
gap: isMobile ? "10px" : "15px", cursor: "pointer",
flexWrap: "wrap", transform: "scale(1.5)",
}}> ":hover": {
{Array.from( transform: "scale(1.7)",
{ length: question.content.steps }, transition: "0.2s",
(_, index) => index },
).map((itemNumber) => ( }}
<Box >
key={itemNumber} <RatingIconComponent
onClick={() => setSelectedRating(itemNumber + 1)} color={
sx={{ selectedRating > itemNumber
cursor: "pointer", ? theme.palette.brightPurple.main
transform: "scale(1.5)", : theme.palette.grey2.main
":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>
))}
</Box> </Box>
); <Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: 2,
}}
>
<Typography>{question.content.ratingNegativeDescription}</Typography>
<Typography>{question.content.ratingPositiveDescription}</Typography>
</Box>
</Box>
</Box>
);
} }

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

@ -1,4 +1,4 @@
import ArrowDownIcon from "@icons/ArrowDownIcon"; import { useState } from "react";
import { import {
Box, Box,
FormControl, FormControl,
@ -8,9 +8,10 @@ import {
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { QuizQuestionSelect } from "model/questionTypes/select";
import { useState } from "react";
import ArrowDownIcon from "@icons/ArrowDownIcon";
import type { QuizQuestionSelect } from "model/questionTypes/select";
interface Props { interface Props {
question: QuizQuestionSelect; question: QuizQuestionSelect;
} }
@ -45,6 +46,7 @@ export default function Text({ question }: Props) {
id="category-select" id="category-select"
variant="outlined" variant="outlined"
value={selectValue} value={selectValue}
placeholder={question.content.default}
displayEmpty displayEmpty
onChange={handleChange} onChange={handleChange}
sx={{ sx={{
@ -84,6 +86,15 @@ export default function Text({ question }: Props) {
alignItems: "center", alignItems: "center",
px: "9px", px: "9px",
gap: "20px", gap: "20px",
"& + input": !selectValue && {
border: "none",
transform: "translateY(-50%)",
top: "50%",
left: "10px",
opacity: 1,
color: "#333",
fontSize: "16px",
},
}, },
}} }}
IconComponent={(props) => <ArrowDownIcon {...props} />} IconComponent={(props) => <ArrowDownIcon {...props} />}

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

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

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon"; import { ChangeEvent, useState } from "react";
import { import {
Box, Box,
FormControl, FormControl,
@ -9,8 +9,10 @@ import {
Tooltip, Tooltip,
Typography, Typography,
} from "@mui/material"; } 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 { interface Props {
question: QuizQuestionVariant; question: QuizQuestionVariant;

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

@ -1,4 +1,4 @@
import InfoIcon from "@icons/InfoIcon"; import { useState, ChangeEvent } from "react";
import { import {
Box, Box,
FormControl, FormControl,
@ -9,9 +9,11 @@ import {
Tooltip, Tooltip,
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
import { QuestionVariant } from "model/questionTypes/shared";
import { QuizQuestionVarImg } from "model/questionTypes/varimg"; import InfoIcon from "@icons/InfoIcon";
import { useState, ChangeEvent } from "react";
import type { QuestionVariant } from "model/questionTypes/shared";
import type { QuizQuestionVarImg } from "model/questionTypes/varimg";
interface Props { interface Props {
question: QuizQuestionVarImg; question: QuizQuestionVarImg;

14
src/ui_kit/Stepper.tsx
View File

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