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

feat: dev branch updates

Browse Source
This commit is contained in:
IlyaDoronin 2023-09-18 09:25:29 +03:00
commit 843c8a923b
39 changed files with 1046 additions and 1179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/icons/InfoIcon.tsx
View File

@ -20,13 +20,7 @@ export default function InfoIcon({ sx }: InfoIconProps) {
...sx, ...sx,
}} }}
> >
<svg <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path <path
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke={theme.palette.brightPurple.main} stroke={theme.palette.brightPurple.main}

18
src/assets/icons/questionsPage/addImage.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material"; import { Box, SxProps } from "@mui/material";
import { FC } from "react"; import { FC } from "react";
interface Iprops { interface Iprops {
onClick?: () => void; onClick?: () => void;
sx?: SxProps;
} }
const AddImage: FC<Iprops> = ({ onClick }) => { const AddImage: FC<Iprops> = ({ onClick, sx }) => {
return ( return (
<Box <Box
onClick={onClick} onClick={onClick}
@ -18,21 +19,12 @@ const AddImage: FC<Iprops> = ({ onClick }) => {
cursor: "pointer", cursor: "pointer",
}} }}
> >
<svg <svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
width="60"
height="40"
viewBox="0 0 60 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M40.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H40.3333V0Z" d="M40.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H40.3333V0Z"
fill="#EEE4FC" fill="#EEE4FC"
/> />
<path <path d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z" fill="#7E2AEA" />
d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z"
fill="#7E2AEA"
/>
<path <path
d="M49.518 24.612C49.398 24.612 49.296 24.576 49.212 24.504C49.14 24.42 49.104 24.318 49.104 24.198V20.454H45.414C45.294 20.454 45.192 20.418 45.108 20.346C45.036 20.262 45 20.16 45 20.04V19.464C45 19.344 45.036 19.248 45.108 19.176C45.192 19.092 45.294 19.05 45.414 19.05H49.104V15.414C49.104 15.294 49.14 15.198 49.212 15.126C49.296 15.042 49.398 15 49.518 15H50.148C50.268 15 50.364 15.042 50.436 15.126C50.52 15.198 50.562 15.294 50.562 15.414V19.05H54.27C54.39 19.05 54.486 19.092 54.558 19.176C54.642 19.248 54.684 19.344 54.684 19.464V20.04C54.684 20.16 54.642 20.262 54.558 20.346C54.486 20.418 54.39 20.454 54.27 20.454H50.562V24.198C50.562 24.318 50.52 24.42 50.436 24.504C50.364 24.576 50.268 24.612 50.148 24.612H49.518Z" d="M49.518 24.612C49.398 24.612 49.296 24.576 49.212 24.504C49.14 24.42 49.104 24.318 49.104 24.198V20.454H45.414C45.294 20.454 45.192 20.418 45.108 20.346C45.036 20.262 45 20.16 45 20.04V19.464C45 19.344 45.036 19.248 45.108 19.176C45.192 19.092 45.294 19.05 45.414 19.05H49.104V15.414C49.104 15.294 49.14 15.198 49.212 15.126C49.296 15.042 49.398 15 49.518 15H50.148C50.268 15 50.364 15.042 50.436 15.126C50.52 15.198 50.562 15.294 50.562 15.414V19.05H54.27C54.39 19.05 54.486 19.092 54.558 19.176C54.642 19.248 54.684 19.344 54.684 19.464V20.04C54.684 20.16 54.642 20.262 54.558 20.346C54.486 20.418 54.39 20.454 54.27 20.454H50.562V24.198C50.562 24.318 50.52 24.42 50.436 24.504C50.364 24.576 50.268 24.612 50.148 24.612H49.518Z"
fill="white" fill="white"

30
src/assets/icons/questionsPage/addPlusImage.tsx Normal file
View File

@ -0,0 +1,30 @@
import { FC } from "react";
export const AddPlusImage: FC = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40" fill="none">
<path d="M4 0H100V40H4C1.79086 40 0 38.2091 0 36V4C0 1.79086 1.79086 0 4 0Z" fill="#EEE4FC" />
<path d="M118 0H100V40H118C118.46 40 120 39.1046 120 38V2C120 0.89543 118.46 0 118 0Z" fill="#7E2AEA" />
<path
d="M109.518 24.612C109.398 24.612 109.296 24.576 109.212 24.504C109.14 24.42 109.104 24.318 109.104 24.198V20.454H105.414C105.294 20.454 105.192 20.418 105.108 20.346C105.036 20.262 105 20.16 105 20.04V19.464C105 19.344 105.036 19.248 105.108 19.176C105.192 19.092 105.294 19.05 105.414 19.05H109.104V15.414C109.104 15.294 109.14 15.198 109.212 15.126C109.296 15.042 109.398 15 109.518 15H110.148C110.268 15 110.364 15.042 110.436 15.126C110.52 15.198 110.562 15.294 110.562 15.414V19.05H114.27C114.39 19.05 114.486 19.092 114.558 19.176C114.642 19.248 114.684 19.344 114.684 19.464V20.04C114.684 20.16 114.642 20.262 114.558 20.346C114.486 20.418 114.39 20.454 114.27 20.454H110.562V24.198C110.562 24.318 110.52 24.42 110.436 24.504C110.364 24.576 110.268 24.612 110.148 24.612H109.518Z"
fill="white"
/>
<path
d="M61.9583 10H39.0417C38.4664 10 38 10.4477 38 11V29C38 29.5523 38.4664 30 39.0417 30H61.9583C62.5336 30 63 29.5523 63 29V11C63 10.4477 62.5336 10 61.9583 10Z"
stroke="#7E2AEA"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M38 24.9035L44.5495 18.3127C44.6464 18.2137 44.7619 18.135 44.8894 18.0813C45.0168 18.0276 45.1535 18 45.2917 18C45.4298 18 45.5666 18.0276 45.694 18.0813C45.8214 18.135 45.9369 18.2137 46.0339 18.3127L51.8411 24.1567C51.9381 24.2557 52.0536 24.3343 52.181 24.388C52.3084 24.4417 52.4452 24.4694 52.5833 24.4694C52.7215 24.4694 52.8582 24.4417 52.9856 24.388C53.1131 24.3343 53.2286 24.2557 53.3255 24.1567L56.0078 21.4574C56.1047 21.3584 56.2203 21.2797 56.3477 21.2261C56.4751 21.1724 56.6119 21.1447 56.75 21.1447C56.8881 21.1447 57.0249 21.1724 57.1523 21.2261C57.2797 21.2797 57.3953 21.3584 57.4922 21.4574L63 27"
stroke="#7E2AEA"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M53.5 18C54.3284 18 55 17.3284 55 16.5C55 15.6716 54.3284 15 53.5 15C52.6716 15 52 15.6716 52 16.5C52 17.3284 52.6716 18 53.5 18Z"
fill="#7E2AEA"
/>
</svg>
);

20
src/assets/icons/questionsPage/addPlusVideo.tsx Normal file
View File

@ -0,0 +1,20 @@
import { FC } from "react";
export const AddPlusVideo: FC = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40" fill="none">
<path d="M4 0H100V40H4C1.79086 40 0 38.2091 0 36V4C0 1.79086 1.79086 0 4 0Z" fill="#EEE4FC" />
<path d="M118 0H100V40H118C118.46 40 120 39.1046 120 38V2C120 0.89543 118.46 0 118 0Z" fill="#7E2AEA" />
<path
d="M109.518 24.612C109.398 24.612 109.296 24.576 109.212 24.504C109.14 24.42 109.104 24.318 109.104 24.198V20.454H105.414C105.294 20.454 105.192 20.418 105.108 20.346C105.036 20.262 105 20.16 105 20.04V19.464C105 19.344 105.036 19.248 105.108 19.176C105.192 19.092 105.294 19.05 105.414 19.05H109.104V15.414C109.104 15.294 109.14 15.198 109.212 15.126C109.296 15.042 109.398 15 109.518 15H110.148C110.268 15 110.364 15.042 110.436 15.126C110.52 15.198 110.562 15.294 110.562 15.414V19.05H114.27C114.39 19.05 114.486 19.092 114.558 19.176C114.642 19.248 114.684 19.344 114.684 19.464V20.04C114.684 20.16 114.642 20.262 114.558 20.346C114.486 20.418 114.39 20.454 114.27 20.454H110.562V24.198C110.562 24.318 110.52 24.42 110.436 24.504C110.364 24.576 110.268 24.612 110.148 24.612H109.518Z"
fill="white"
/>
<path
d="M40.9048 10H55.381C56.3408 10 57.2613 10.4958 57.94 11.3783C58.6187 12.2608 59 13.4578 59 14.7059V28.8235C59 29.1355 58.9047 29.4348 58.735 29.6554C58.5653 29.8761 58.3352 30 58.0952 30H43.619C42.6592 30 41.7387 29.5042 41.06 28.6217C40.3813 27.7392 40 26.5422 40 25.2941V11.1765C40 10.8645 40.0953 10.5652 40.265 10.3446C40.4347 10.1239 40.6648 10 40.9048 10V10Z"
stroke="#7E2AEA"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M59 18L65 14V26L59 22" stroke="#7E2AEA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);

8
src/index.tsx
View File

@ -44,13 +44,7 @@ root.render(
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
{routeslink.map((e, i) => ( {routeslink.map((e, i) => (
<Route <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
key={i}
path={e.path}
element={
<Main page={e.page} header={e.header} sidebar={e.sidebar} />
}
/>
))} ))}
<Route path="quize-setting/:quizId" element={<StartPage />} /> <Route path="quize-setting/:quizId" element={<StartPage />} />
<Route path="crop" element={<ImageCrop />} /> <Route path="crop" element={<ImageCrop />} />

95
src/pages/ContactFormPage/ButtonSettingForms.tsx
View File

@ -2,49 +2,66 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react"; import React from "react";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Branching from "../../assets/icons/questionsPage/branching"; import Branching from "../../assets/icons/questionsPage/branching";
import {Box, useTheme} from "@mui/material"; import { Box, useTheme } from "@mui/material";
import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon"; import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon";
interface Props { interface Props {
switchState: string switchState: string;
SSHC: (data:string) => void SSHC: (data: string) => void;
} }
export default function ButtonSettingForms ({SSHC, switchState}:Props) { export default function ButtonSettingForms({ SSHC, switchState }: Props) {
const theme = useTheme(); const theme = useTheme();
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
{icon: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'}, {
{icon: <Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Ветвление', value: 'branching'}, icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
{icon: <SupplementIcon color={switchState === 'supplement' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Добавить шаг формы', value: 'supplement'}, title: "Настройки",
] value: "setting",
},
{
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Ветвление",
value: "branching",
},
{
icon: <SupplementIcon color={switchState === "supplement" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Добавить шаг формы",
value: "supplement",
},
];
return ( return (
<Box sx={{ <Box
display: 'flex', sx={{
justifyContent: 'space-between', display: "flex",
width: '100%', justifyContent: "space-between",
background: '#f2f3f7' width: "100%",
}}> background: "#f2f3f7",
<Box }}
sx={{ >
padding: '20px', <Box
display: 'flex', sx={{
gap: '10px' padding: "20px",
}} display: "flex",
> gap: "10px",
{buttonSetting.map( (e,i) => ( }}
<MiniButtonSetting >
key={i} {buttonSetting.map((e, i) => (
onClick={()=>{SSHC(e.value)}} <MiniButtonSetting
sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent', key={i}
color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main, onClick={() => {
}} SSHC(e.value);
> }}
{e.icon} sx={{
{e.title} backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
</MiniButtonSetting> color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
))} }}
</Box> >
</Box> {e.icon}
) {e.title}
</MiniButtonSetting>
))}
</Box>
</Box>
);
} }

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

@ -1,14 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import { import { Box, TextField, FormControl, InputAdornment, IconButton, useTheme, useMediaQuery } from "@mui/material";
Box,
TextField,
FormControl,
InputAdornment,
IconButton,
useTheme,
} from "@mui/material";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
@ -30,16 +23,11 @@ type AnswerItemProps = {
icon?: ReactNode; icon?: ReactNode;
}; };
export const AnswerItem = ({ export const AnswerItem = ({ index, totalIndex, variants, variant, icon }: AnswerItemProps) => {
index,
totalIndex,
variants,
variant,
icon,
}: AnswerItemProps) => {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null); const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@ -109,7 +97,7 @@ export const AnswerItem = ({
key={index} key={index}
fullWidth fullWidth
variant="standard" variant="standard"
sx={{ padding: "0 0 20px 0" }} sx={{ padding: isMobile ? " 15px 0 20px 0" : "0 0 20px 0" }}
> >
<TextField <TextField
value={variant.answer} value={variant.answer}
@ -119,20 +107,14 @@ export const AnswerItem = ({
multiline={listQuestions[quizId][totalIndex].content.largeCheck} multiline={listQuestions[quizId][totalIndex].content.largeCheck}
onChange={onChangeText} onChange={onChangeText}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if ( if (event.code === "Enter" && !listQuestions[quizId][totalIndex].content.largeCheck) {
event.code === "Enter" &&
!listQuestions[quizId][totalIndex].content.largeCheck
) {
addNewAnswer(); addNewAnswer();
} }
}} }}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<> <>
<InputAdornment <InputAdornment {...provided.dragHandleProps} position="start">
{...provided.dragHandleProps}
position="start"
>
<PointsIcon /> <PointsIcon />
</InputAdornment> </InputAdornment>
{icon && icon} {icon && icon}
@ -140,10 +122,7 @@ export const AnswerItem = ({
), ),
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton <IconButton aria-describedby="my-popover-id" onClick={handleClick}>
aria-describedby="my-popover-id"
onClick={handleClick}
>
<MessageIcon /> <MessageIcon />
</IconButton> </IconButton>
<Popover <Popover
@ -158,9 +137,7 @@ export const AnswerItem = ({
placeholder="Подсказка для этого ответа" placeholder="Подсказка для этого ответа"
value={variant.hints} value={variant.hints}
onChange={changeAnswerHint} onChange={changeAnswerHint}
onKeyDown={( onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => event.stopPropagation()}
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
/> />
</Popover> </Popover>
<IconButton onClick={deleteAnswer}> <IconButton onClick={deleteAnswer}>

88
src/pages/Questions/ButtonsOptions.tsx
View File

@ -4,16 +4,11 @@ import React from "react";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue"; import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching"; import Branching from "../../assets/icons/questionsPage/branching";
import { Box, Typography, Tooltip, IconButton, useTheme } from "@mui/material"; import { Box, Typography, Tooltip, IconButton, useTheme, useMediaQuery } from "@mui/material";
import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import HideIcon from "../../assets/icons/questionsPage/hideIcon";
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import { import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions";
questionStore,
resetSomeField,
copyQuestion,
removeQuestion,
} from "@root/questions";
interface Props { interface Props {
switchState: string; switchState: string;
@ -21,11 +16,7 @@ interface Props {
totalIndex: number; totalIndex: number;
} }
export default function ButtonsOptions({ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
SSHC,
switchState,
totalIndex,
}: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { openedModalSettings } = questionStore(); const { openedModalSettings } = questionStore();
const openedModal = () => { const openedModal = () => {
@ -33,6 +24,8 @@ export default function ButtonsOptions({
console.log(openedModalSettings); console.log(openedModalSettings);
}; };
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const buttonSetting: { const buttonSetting: {
icon: JSX.Element; icon: JSX.Element;
title: string; title: string;
@ -40,33 +33,17 @@ export default function ButtonsOptions({
myFunc?: any; myFunc?: any;
}[] = [ }[] = [
{ {
icon: ( icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
<SettingIcon
color={
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
}
/>
),
title: "Настройки", title: "Настройки",
value: "setting", value: "setting",
}, },
{ {
icon: ( icon: <Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />,
<Clue
color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main}
/>
),
title: "Подсказка", title: "Подсказка",
value: "help", value: "help",
}, },
{ {
icon: ( icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
<Branching
color={
switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
}
/>
),
title: "Ветвление", title: "Ветвление",
value: "branching", value: "branching",
myFunc: openedModal, myFunc: openedModal,
@ -86,6 +63,7 @@ export default function ButtonsOptions({
sx={{ sx={{
padding: "20px", padding: "20px",
display: "flex", display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px", gap: "10px",
}} }}
> >
@ -107,9 +85,7 @@ export default function ButtonsOptions({
> >
Будет показан при условии Будет показан при условии
</Typography> </Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}> <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>Название</Typography>
Название
</Typography>
<Typography <Typography
sx={{ sx={{
fontWeight: "bold", fontWeight: "bold",
@ -119,9 +95,7 @@ export default function ButtonsOptions({
> >
Условие 1, Условие 2 Условие 1, Условие 2
</Typography> </Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}> <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>Все условия обязательны</Typography>
Все условия обязательны
</Typography>
</Box> </Box>
} }
> >
@ -132,18 +106,15 @@ export default function ButtonsOptions({
myFunc(); myFunc();
}} }}
sx={{ sx={{
backgroundColor: backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
switchState === value color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
? theme.palette.brightPurple.main minWidth: isMobile ? "30px" : "64px",
: "transparent", height: "30px",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
}} }}
> >
{icon} {icon}
{title}
{isMobile ? null : title}
</MiniButtonSetting> </MiniButtonSetting>
</Tooltip> </Tooltip>
) : ( ) : (
@ -154,18 +125,14 @@ export default function ButtonsOptions({
myFunc(); myFunc();
}} }}
sx={{ sx={{
backgroundColor: backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
switchState === value color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
? theme.palette.brightPurple.main minWidth: isMobile ? "30px" : "64px",
: "transparent", height: "30px",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
}} }}
> >
{icon} {icon}
{title} {isMobile ? null : title}
</MiniButtonSetting> </MiniButtonSetting>
)} )}
</> </>
@ -174,21 +141,16 @@ export default function ButtonsOptions({
<Box <Box
sx={{ sx={{
padding: "20px", padding: "20px",
display: "flex",
}} }}
> >
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} /> <HideIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
<IconButton <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon color={"#4D4D4D"} /> <CopyIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
<IconButton <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}>
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(quizId, totalIndex)}
>
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
</Box> </Box>

112
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -3,18 +3,13 @@ import React from "react";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue"; import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching"; import Branching from "../../assets/icons/questionsPage/branching";
import { Box, IconButton, Tooltip, Typography, useTheme } from "@mui/material"; import { Box, IconButton, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import HideIcon from "../../assets/icons/questionsPage/hideIcon";
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { questionStore, copyQuestion, removeQuestion, resetSomeField } from "@root/questions";
questionStore,
copyQuestion,
removeQuestion,
resetSomeField,
} from "@root/questions";
import "./ButtonsOptionsAndPict.css"; import "./ButtonsOptionsAndPict.css";
@ -24,14 +19,12 @@ interface Props {
totalIndex: number; totalIndex: number;
} }
export default function ButtonsOptionsAndPict({ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
SSHC,
switchState,
totalIndex,
}: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { openedModalSettings } = questionStore(); const { openedModalSettings } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(930));
const openedModal = () => { const openedModal = () => {
resetSomeField({ openedModalSettings: "open" }); resetSomeField({ openedModalSettings: "open" });
@ -50,6 +43,7 @@ export default function ButtonsOptionsAndPict({
sx={{ sx={{
padding: "20px", padding: "20px",
display: "flex", display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px", gap: "10px",
}} }}
> >
@ -58,40 +52,28 @@ export default function ButtonsOptionsAndPict({
SSHC("setting"); SSHC("setting");
}} }}
sx={{ sx={{
backgroundColor: minWidth: isIconMobile ? "30px" : "64px",
switchState === "setting" height: "30px",
? theme.palette.brightPurple.main backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
: "transparent", color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
color:
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
}} }}
> >
<SettingIcon <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />
color={ {isIconMobile ? null : " Настройки"}
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
}
/>
Настройки
</MiniButtonSetting> </MiniButtonSetting>
<MiniButtonSetting <MiniButtonSetting
onClick={() => { onClick={() => {
SSHC("help"); SSHC("help");
}} }}
sx={{ sx={{
backgroundColor: minWidth: isIconMobile ? "30px" : "64px",
switchState === "help" height: "30px",
? theme.palette.brightPurple.main backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
: "transparent", color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
color:
switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
}} }}
> >
<Clue <Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />
color={ {isIconMobile ? null : " Помощь"}
switchState === "help" ? "#ffffff" : theme.palette.grey3.main
}
/>
Помощь
</MiniButtonSetting> </MiniButtonSetting>
<Tooltip <Tooltip
arrow arrow
@ -108,9 +90,7 @@ export default function ButtonsOptionsAndPict({
> >
Будет показан при условии Будет показан при условии
</Typography> </Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}> <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>Название</Typography>
Название
</Typography>
<Typography <Typography
sx={{ sx={{
fontWeight: "bold", fontWeight: "bold",
@ -120,9 +100,7 @@ export default function ButtonsOptionsAndPict({
> >
Условие 1, Условие 2 Условие 1, Условие 2
</Typography> </Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}> <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>Все условия обязательны</Typography>
Все условия обязательны
</Typography>
</Box> </Box>
} }
> >
@ -132,24 +110,14 @@ export default function ButtonsOptionsAndPict({
openedModal(); openedModal();
}} }}
sx={{ sx={{
backgroundColor: height: "30px",
switchState === "branching" minWidth: isIconMobile ? "30px" : "64px",
? theme.palette.brightPurple.main backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
: "transparent", color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
}} }}
> >
<Branching <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />
color={ {isIconMobile ? null : "Ветвление"}
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main
}
/>
Ветвление
</MiniButtonSetting> </MiniButtonSetting>
</Tooltip> </Tooltip>
<MiniButtonSetting <MiniButtonSetting
@ -157,20 +125,14 @@ export default function ButtonsOptionsAndPict({
SSHC("image"); SSHC("image");
}} }}
sx={{ sx={{
backgroundColor: height: "30px",
switchState === "image" minWidth: isIconMobile ? "30px" : "64px",
? theme.palette.brightPurple.main backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
: "transparent", color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
}} }}
> >
<ImgIcon <ImgIcon color={switchState === "image" ? "#ffffff" : theme.palette.grey3.main} />
color={ {isIconMobile ? null : "Изображение"}
switchState === "image" ? "#ffffff" : theme.palette.grey3.main
}
/>
Изображение
</MiniButtonSetting> </MiniButtonSetting>
</Box> </Box>
<Box <Box
@ -181,16 +143,10 @@ export default function ButtonsOptionsAndPict({
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} /> <HideIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
<IconButton <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon color={"#4D4D4D"} /> <CopyIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
<IconButton <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}>
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(quizId, totalIndex)}
>
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
</Box> </Box>

25
src/pages/Questions/DataOptions/DataOptions.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData"; import SwitchData from "./switchData";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
@ -16,6 +16,7 @@ export default function DataOptions({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -33,36 +34,34 @@ export default function DataOptions({ totalIndex }: Props) {
<> <>
<Box <Box
sx={{ sx={{
width: "100%", width: isMobile ? "auto" : "100%",
maxWidth: "640px", maxWidth: "493px",
display: "flex", display: "flex",
padding: "20px", padding: "20px",
flexDirection: "column", flexDirection: "column",
gap: "20px", gap: "20px",
}} }}
> >
<Box sx={{ gap: "10px", display: "flex" }}> <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
<SelectableButton <SelectableButton
isSelected={ isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
listQuestions[quizId][totalIndex].content.type === "calendar"
}
onClick={() => { onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.type = "calendar"; clonContent.type = "calendar";
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonContent });
}} }}
sx={{ maxWidth: "257px", height: "48px", whiteSpace: "nowrap" }}
> >
Использовать календарь Использовать календарь
</SelectableButton> </SelectableButton>
<SelectableButton <SelectableButton
isSelected={ isSelected={listQuestions[quizId][totalIndex].content.type === "mask"}
listQuestions[quizId][totalIndex].content.type === "mask"
}
onClick={() => { onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.type = "mask"; clonContent.type = "mask";
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonContent });
}} }}
sx={{ maxWidth: "211px", height: "48px", whiteSpace: "nowrap" }}
> >
Использовать маску Использовать маску
</SelectableButton> </SelectableButton>
@ -81,11 +80,7 @@ export default function DataOptions({ totalIndex }: Props) {
<InfoIcon /> <InfoIcon />
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchData switchState={switchState} totalIndex={totalIndex} /> <SwitchData switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

15
src/pages/Questions/DataOptions/settingData.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
@ -12,9 +12,11 @@ type SettingsDataProps = {
export default function SettingsData({ totalIndex }: SettingsDataProps) { export default function SettingsData({ totalIndex }: SettingsDataProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
return ( return (
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Typography>Настройки календаря</Typography> <Typography>Настройки календаря</Typography>
<CustomCheckbox <CustomCheckbox
@ -27,6 +29,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
}} }}
/> />
<CustomCheckbox <CustomCheckbox
sx={{ display: "block" }}
label={"Выбор времени"} label={"Выбор времени"}
checked={listQuestions[quizId][totalIndex].content.time} checked={listQuestions[quizId][totalIndex].content.time}
handleChange={({ target }) => { handleChange={({ target }) => {
@ -36,7 +39,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
}} }}
/> />
</Box> </Box>
<Box sx={{ padding: "20px", minWidth: "350px", marginRight: "30px" }}> <Box
sx={{
padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px",
minWidth: isWrappColumn ? null : "350px",
marginRight: "30px",
}}
>
<Typography>Настройки вопросов</Typography> <Typography>Настройки вопросов</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}

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

@ -9,18 +9,13 @@ import {
InputAdornment, InputAdornment,
Paper, Paper,
TextField, TextField,
useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import TypeQuestions from "../TypeQuestions"; import TypeQuestions from "../TypeQuestions";
import SwitchQuestionsPage from "../SwitchQuestionsPage"; import SwitchQuestionsPage from "../SwitchQuestionsPage";
import { import { questionStore, updateQuestionsList, createQuestion, copyQuestion, removeQuestion } from "@root/questions";
questionStore,
updateQuestionsList,
createQuestion,
copyQuestion,
removeQuestion,
} from "@root/questions";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import ExpandLessIcon from "@mui/icons-material/ExpandLess";
@ -54,97 +49,39 @@ interface Props {
const IconAndrom = (isExpanded: boolean, switchState: string) => { const IconAndrom = (isExpanded: boolean, switchState: string) => {
switch (switchState) { switch (switchState) {
case "variant": case "variant":
return ( return <Answer color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Answer
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "images": case "images":
return ( return <OptionsPict color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<OptionsPict
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "varimg": case "varimg":
return ( return <OptionsAndPict color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji": case "emoji":
return ( return <Emoji color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Emoji
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "text": case "text":
return ( return <Input color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Input
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "select": case "select":
return ( return <DropDown color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<DropDown
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "date": case "date":
return ( return <Date color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Date
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "number": case "number":
return ( return <Slider color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Slider
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "file": case "file":
return ( return <Download color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Download
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "page": case "page":
return ( return <Page color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Page
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "rating": case "rating":
return ( return <RatingIcon color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<RatingIcon
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
default: default:
return <></>; return <></>;
} }
}; };
export default function QuestionsPageCard({ export default function QuestionsPageCard({ totalIndex, draggableProps, isDragging }: Props) {
totalIndex,
draggableProps,
isDragging,
}: Props) {
const [plusVisible, setPlusVisible] = useState<boolean>(false); const [plusVisible, setPlusVisible] = useState<boolean>(false);
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const { type: switchState, expanded: isExpanded } = const { type: switchState, expanded: isExpanded } = listQuestions[quizId][totalIndex];
listQuestions[quizId][totalIndex];
return ( return (
<> <>
@ -159,17 +96,19 @@ export default function QuestionsPageCard({
> >
<Box <Box
sx={{ sx={{
width: "100%", maxWidth: isTablet ? "665px" : "760px",
maxWidth: "760px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "10px", gap: isTablet ? "4px" : "10px",
padding: "20px", padding: isMobile ? "20px 20px 0px 20px" : "20px 20px 20px 20px ",
flexDirection: isMobile ? "column-reverse" : null,
}} }}
> >
<FormControl fullWidth variant="standard" sx={{ p: 0 }}> <FormControl
variant="standard"
sx={{ p: 0, maxWidth: isTablet ? (isMobile ? "100%" : "640px") : "100%", width: "100%" }}
>
<TextField <TextField
fullWidth
value={listQuestions[quizId][totalIndex].title} value={listQuestions[quizId][totalIndex].title}
placeholder={"Заголовок вопроса"} placeholder={"Заголовок вопроса"}
onChange={(e) => { onChange={(e) => {
@ -179,18 +118,12 @@ export default function QuestionsPageCard({
console.log(listQuestions[quizId][totalIndex].title); console.log(listQuestions[quizId][totalIndex].title);
}} }}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: <InputAdornment position="start">{IconAndrom(isExpanded, switchState)}</InputAdornment>,
<InputAdornment position="start">
{IconAndrom(isExpanded, switchState)}
</InputAdornment>
),
}} }}
sx={{ sx={{
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
color: isExpanded ? "#9A9AAF" : "white", color: isExpanded ? "#9A9AAF" : "white",
backgroundColor: isExpanded backgroundColor: isExpanded ? theme.palette.background.default : "transparent",
? theme.palette.background.default
: "transparent",
height: "48px", height: "48px",
borderRadius: "10px", borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": { ".MuiOutlinedInput-notchedOutline": {
@ -208,53 +141,50 @@ export default function QuestionsPageCard({
}} }}
/> />
</FormControl> </FormControl>
<Box sx={{ display: "flex", alignItems: "center", width: isMobile ? "100%" : "auto", position: "relative" }}>
<IconButton <Box sx={{ display: "flex", alignItems: "center", marginLeft: isMobile ? "auto" : "0px" }}>
onClick={() => <IconButton onClick={() => updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded })}>
updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded }) {isExpanded ? <ExpandMoreIcon /> : <ExpandLessIcon fill="#7E2AEA" />}
} </IconButton>
> {isExpanded ? (
{isExpanded ? ( <></>
<ExpandMoreIcon /> ) : (
) : ( <Box sx={{ display: "flex", borderRight: "solid 1px white" }}>
<ExpandLessIcon fill="#7E2AEA" /> <FormControlLabel
)} control={<Checkbox icon={<HideIcon color={"#7E2AEA"} />} checkedIcon={<CrossedEyeIcon />} />}
</IconButton> label={""}
{isExpanded ? ( sx={{
<></> color: theme.palette.grey2.main,
) : ( ml: "-9px",
<Box sx={{ display: "flex", borderRight: "solid 1px white" }}> mr: 0,
<FormControlLabel userSelect: "none",
control={ }}
<Checkbox
icon={<HideIcon color={"#7E2AEA"} />}
checkedIcon={<CrossedEyeIcon />}
/> />
} <IconButton onClick={() => copyQuestion(quizId, totalIndex)}>
label={""} <CopyIcon color={"white"} />
sx={{ </IconButton>
color: theme.palette.grey2.main, <IconButton
ml: "-9px", sx={{ cursor: "pointer", borderRadius: "6px", padding: "2px" }}
mr: 0, onClick={() => removeQuestion(quizId, totalIndex)}
userSelect: "none", >
}} <DeleteIcon color={"white"} />
/> </IconButton>
<IconButton onClick={() => copyQuestion(quizId, totalIndex)}> </Box>
<CopyIcon color={"white"} /> )}
</IconButton>
<IconButton
sx={{ cursor: "pointer", borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(quizId, totalIndex)}
>
<DeleteIcon color={"white"} />
</IconButton>
</Box>
)}
<OneIcon /> <OneIcon />
<IconButton {...draggableProps}> </Box>
<PointsIcon /> <IconButton
</IconButton> sx={{
position: isMobile ? "absolute" : "relative",
left: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}
{...draggableProps}
>
<PointsIcon />
</IconButton>
</Box>
</Box> </Box>
{isExpanded && ( {isExpanded && (
<Box <Box
@ -301,8 +231,7 @@ export default function QuestionsPageCard({
backgroundPosition: "bottom", backgroundPosition: "bottom",
backgroundRepeat: "repeat-x", backgroundRepeat: "repeat-x",
backgroundSize: "20px 1px", backgroundSize: "20px 1px",
backgroundImage: backgroundImage: "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
}} }}
/> />
<PlusIcon /> <PlusIcon />

12
src/pages/Questions/DraggableList/index.tsx
View File

@ -17,11 +17,7 @@ export const DraggableList = () => {
const onDragEnd = ({ destination, source }: DropResult) => { const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) { if (destination) {
const newItems = reorder( const newItems = reorder(listQuestions[quizId], source.index, destination.index);
listQuestions[quizId],
source.index,
destination.index
);
updateQuestionsListDragAndDrop(quizId, newItems); updateQuestionsListDragAndDrop(quizId, newItems);
} }
@ -33,11 +29,7 @@ export const DraggableList = () => {
{(provided, snapshot) => ( {(provided, snapshot) => (
<Box ref={provided.innerRef} {...provided.droppableProps}> <Box ref={provided.innerRef} {...provided.droppableProps}>
{listQuestions[quizId]?.map((_, index) => ( {listQuestions[quizId]?.map((_, index) => (
<DraggableListItem <DraggableListItem key={index} index={index} isDragging={snapshot.isDraggingOver} />
key={index}
index={index}
isDragging={snapshot.isDraggingOver}
/>
))} ))}
{provided.placeholder} {provided.placeholder}
</Box> </Box>

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

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, Link, useTheme } from "@mui/material"; import { Box, Typography, Link, useTheme, useMediaQuery } from "@mui/material";
import { AnswerDraggableList } from "../AnswerDraggableList"; import { AnswerDraggableList } from "../AnswerDraggableList";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
@ -18,6 +18,7 @@ export default function DropDown({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const variants = listQuestions[quizId][totalIndex].content.variants; const variants = listQuestions[quizId][totalIndex].content.variants;
const SSHC = (data: string) => { const SSHC = (data: string) => {
@ -38,7 +39,7 @@ export default function DropDown({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: isMobile ? "15px 20px 20px 20px" : "20px 20px 20px 20px " }}>
{variants.length === 0 ? ( {variants.length === 0 ? (
<Typography <Typography
sx={{ sx={{
@ -63,24 +64,24 @@ export default function DropDown({ totalIndex }: Props) {
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
<Typography {isMobile ? null : (
sx={{ <>
fontWeight: 400, <Typography
fontSize: "18px", sx={{
lineHeight: "21.33px", fontWeight: 400,
color: theme.palette.grey2.main, fontSize: "18px",
}} lineHeight: "21.33px",
> color: theme.palette.grey2.main,
или нажмите Enter }}
</Typography> >
<EnterIcon /> или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchDropDown switchState={switchState} totalIndex={totalIndex} /> <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

70
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -15,15 +15,23 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return ( return (
<> <>
<Box <Box
sx={{ display: "flex", width: "100%", justifyContent: "space-between" }} sx={{
position: "relative",
display: "flex",
width: "100%",
justifyContent: "space-between",
flexDirection: isMobile ? "column" : null,
}}
> >
<Box sx={{ padding: "20px", width: "100%" }}> <Box sx={{ padding: isMobile ? "20px 20px 0px 20px" : "20px 20px 20px 20px", width: "100%" }}>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
Настройки ответов
</Typography>
<CustomCheckbox <CustomCheckbox
label={"Можно несколько"} label={"Можно несколько"}
checked={listQuestions[quizId][totalIndex].content.multi} checked={listQuestions[quizId][totalIndex].content.multi}
@ -36,23 +44,22 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}) })
} }
/> />
<Typography sx={{ marginBottom: "15px" }}> <Box sx={{ display: isMobile ? "none" : "block" }}>
Текст в выпадающем списке <Typography sx={{ marginBottom: "15px" }}>Текст в выпадающем списке</Typography>
</Typography> <CustomTextField
<CustomTextField sx={{ maxWidth: "360px" }}
placeholder={"Выберите вариант"} placeholder={"Выберите вариант"}
text={listQuestions[quizId][totalIndex].content.default} text={listQuestions[quizId][totalIndex].content.default}
onChange={({ target }) => { onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.default = target.value; clonContent.default = target.value;
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonContent });
}} }}
/> />
</Box>
</Box> </Box>
<Box sx={{ padding: "20px", width: "100%" }}> <Box sx={{ padding: "20px", width: "100%" }}>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
Настройки вопросов
</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required} checked={!listQuestions[quizId][totalIndex].required}
@ -62,7 +69,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
}); });
}} }}
/> />
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
<CustomCheckbox <CustomCheckbox
label={"Внутреннее название вопроса"} label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck} checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
@ -78,8 +85,23 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
content: clonContent, content: clonContent,
}); });
}} }}
/>{" "} />
<InfoIcon /> <InfoIcon
sx={{ position: isMobile ? "absolute" : null, display: "block", right: isMobile ? "30px" : null }}
/>
</Box>
<Box sx={{ width: "85%", pt: "20px", display: isMobile ? "block" : "none" }}>
<Typography sx={{ marginBottom: "15px" }}>Текст в выпадающем списке</Typography>
<CustomTextField
sx={{}}
placeholder={"Выберите вариант"}
text={listQuestions[quizId][totalIndex].content.default}
onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.default = target.value;
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
</Box> </Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && ( {listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField <CustomTextField

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

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Link, Typography, useTheme } from "@mui/material"; import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji"; import SwitchEmoji from "./switchEmoji";
@ -16,6 +16,7 @@ export default function Emoji({ totalIndex }: Props) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -39,8 +40,7 @@ export default function Emoji({ totalIndex }: Props) {
variant="body2" variant="body2"
sx={{ color: theme.palette.brightPurple.main }} sx={{ color: theme.palette.brightPurple.main }}
onClick={() => { onClick={() => {
const answerNew = const answerNew = listQuestions[quizId][totalIndex].content.variants.slice();
listQuestions[quizId][totalIndex].content.variants.slice();
answerNew.push({ answer: "", hints: "" }); answerNew.push({ answer: "", hints: "" });
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
@ -53,24 +53,24 @@ export default function Emoji({ totalIndex }: Props) {
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
<Typography {isMobile ? null : (
sx={{ <>
fontWeight: 400, <Typography
fontSize: "18px", sx={{
lineHeight: "21.33px", fontWeight: 400,
color: theme.palette.grey2.main, fontSize: "18px",
}} lineHeight: "21.33px",
> color: theme.palette.grey2.main,
или нажмите Enter }}
</Typography> >
<EnterIcon /> или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchEmoji switchState={switchState} totalIndex={totalIndex} /> <SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

15
src/pages/Questions/Emoji/settingEmoji.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
@ -12,9 +12,12 @@ type SettingEmojiProps = {
export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return ( return (
<Box sx={{ display: "flex", justifyContent: "space-between" }}> <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Typography>Настройки ответов</Typography> <Typography>Настройки ответов</Typography>
<CustomCheckbox <CustomCheckbox
@ -36,7 +39,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
}} }}
/> />
</Box> </Box>
<Box sx={{ padding: "20px", minWidth: "350px", marginRight: "30px" }}> <Box
sx={{
padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px ",
minWidth: isWrappColumn ? null : "350px",
marginRight: "30px",
}}
>
<Typography>Настройки вопросов</Typography> <Typography>Настройки вопросов</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}

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

@ -1,4 +1,4 @@
import { Box, Link, Typography, ButtonBase, useTheme } from "@mui/material"; import { Box, Link, Typography, ButtonBase, useTheme, useMediaQuery } from "@mui/material";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import AddImage from "../../../assets/icons/questionsPage/addImage"; import AddImage from "../../../assets/icons/questionsPage/addImage";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
@ -16,6 +16,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
}; };
@ -24,53 +26,48 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Box sx={{ paddingBottom: "25px" }}> <Box sx={{ paddingBottom: "25px" }}>
{listQuestions[quizId][totalIndex].content.variants.map( {listQuestions[quizId][totalIndex].content.variants.map((_, index) => (
(_, index) => ( <ButtonBase
<ButtonBase component="label"
component="label" sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
marginBottom: "15px",
}}
>
<input
onChange={({ target }) => {
if (target.files?.length) {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.variants[index].answer = URL.createObjectURL(target.files[0]);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}
}}
hidden
accept="image/*"
multiple
type="file"
/>
<AddImage />
<Typography
sx={{ sx={{
cursor: "pointer", padding: "0 0 0 20px",
display: "flex", fontWeight: 400,
alignItems: "center", fontSize: "18px",
justifyContent: "flex-start", lineHeight: "21.33px",
marginBottom: "15px", color: theme.palette.grey2.main,
}} }}
> >
<input Добавьте ответ
onChange={({ target }) => { </Typography>
if (target.files?.length) { </ButtonBase>
const clonContent = ))}
listQuestions[quizId][totalIndex].content;
clonContent.variants[index].answer = URL.createObjectURL(
target.files[0]
);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}
}}
hidden
accept="image/*"
multiple
type="file"
/>
<AddImage />
<Typography
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</ButtonBase>
)
)}
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}> <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link <Link
@ -86,24 +83,24 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
<Typography {isMobile ? null : (
sx={{ <>
fontWeight: 400, <Typography
fontSize: "18px", sx={{
lineHeight: "21.33px", fontWeight: 400,
color: theme.palette.grey2.main, fontSize: "18px",
}} lineHeight: "21.33px",
> color: theme.palette.grey2.main,
или нажмите Enter }}
</Typography> >
<EnterIcon /> или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box> </Box>
</Box> </Box>
<ButtonsOptionsAndPict <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} /> <SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

40
src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
@ -10,21 +10,25 @@ type SettingOptionsAndPictProps = {
totalIndex: number; totalIndex: number;
}; };
export default function SettingOptionsAndPict({ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndPictProps) {
totalIndex,
}: SettingOptionsAndPictProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(680));
return ( return (
<> <>
<Box <Box
sx={{ display: "flex", width: "100%", justifyContent: "space-between" }} sx={{
display: "flex",
width: "100%",
justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null,
}}
> >
<Box sx={{ padding: "20px", width: "100%" }}> <Box sx={{ padding: "20px", width: isMobile ? "85%" : "100%" }}>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
Настройки ответов
</Typography>
<CustomCheckbox <CustomCheckbox
label={'Вариант "свой ответ"'} label={'Вариант "свой ответ"'}
checked={listQuestions[quizId][totalIndex].content.own} checked={listQuestions[quizId][totalIndex].content.own}
@ -37,10 +41,9 @@ export default function SettingOptionsAndPict({
}); });
}} }}
/> />
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ marginBottom: "15px" }}>Текст-заглушка на картинке</Typography>
Текст-заглушка на картинке
</Typography>
<CustomTextField <CustomTextField
sx={{ maxWidth: "330px", width: "100%" }}
placeholder={"Пример текста"} placeholder={"Пример текста"}
text={listQuestions[quizId][totalIndex].content.replText} text={listQuestions[quizId][totalIndex].content.replText}
onChange={({ target }) => { onChange={({ target }) => {
@ -53,10 +56,13 @@ export default function SettingOptionsAndPict({
}} }}
/> />
</Box> </Box>
<Box sx={{ padding: "20px", width: "100%" }}> <Box
<Typography sx={{ marginBottom: "15px" }}> sx={{
Настройки вопросов padding: isWrappColumn ? "0px 20px 20px 20px" : "20px 20px 20px 20px",
</Typography> width: isWrappColumn ? "auto" : "100%",
}}
>
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required} checked={listQuestions[quizId][totalIndex].content.required}
@ -83,7 +89,7 @@ export default function SettingOptionsAndPict({
}, },
}); });
}} }}
/>{" "} />
<InfoIcon /> <InfoIcon />
</Box> </Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && ( {listQuestions[quizId][totalIndex].content.innerNameCheck && (

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

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Link, Typography, Button, useTheme } from "@mui/material"; import { Box, Link, Typography, Button, useTheme, useMediaQuery } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
@ -17,6 +17,8 @@ interface Props {
export default function OptionsPicture({ totalIndex }: Props) { export default function OptionsPicture({ totalIndex }: Props) {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const [switchState, setSwitchState] = useState("setting"); const [switchState, setSwitchState] = useState("setting");
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
@ -38,9 +40,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Box <Box sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}>
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<Button component="label" sx={{ padding: "0px" }}> <Button component="label" sx={{ padding: "0px" }}>
<AddImage /> <AddImage />
<input type="file" hidden onChange={addImage} /> <input type="file" hidden onChange={addImage} />
@ -69,28 +69,25 @@ export default function OptionsPicture({ totalIndex }: Props) {
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
<Typography {isMobile ? null : (
sx={{ <>
fontWeight: 400, <Typography
fontSize: "18px", sx={{
lineHeight: "21.33px", fontWeight: 400,
color: theme.palette.grey2.main, fontSize: "18px",
}} lineHeight: "21.33px",
> color: theme.palette.grey2.main,
или нажмите Enter }}
</Typography> >
<EnterIcon /> или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState} <SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptionsPict
switchState={switchState}
totalIndex={totalIndex}
/>
</> </>
); );
} }

54
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -1,6 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Button, Typography, useTheme } from "@mui/material"; import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -31,26 +31,17 @@ const PROPORTIONS = [
export function SelectIconButton({ Icon, isActive = false, onClick }: Props) { export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Button <Button
onClick={onClick} onClick={onClick}
variant="outlined" variant="outlined"
startIcon={ startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
<Icon
color={
isActive
? theme.palette.navbarbg.main
: theme.palette.brightPurple.main
}
/>
}
sx={{ sx={{
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc", backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
borderRadius: 0, borderRadius: 0,
border: "none", border: "none",
color: isActive color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
p: "7px", p: "7px",
width: "auto", width: "auto",
minWidth: 0, minWidth: 0,
@ -60,20 +51,19 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
}, },
"&:hover": { "&:hover": {
border: "none", border: "none",
borderColor: isActive borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
}, },
}} }}
/> />
); );
} }
export default function SettingOpytionsPict({ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictProps) {
totalIndex,
}: SettingOpytionsPictProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
useEffect(() => { useEffect(() => {
if (!listQuestions[quizId][totalIndex].content.xy) { if (!listQuestions[quizId][totalIndex].content.xy) {
@ -93,6 +83,7 @@ export default function SettingOpytionsPict({
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isTablet ? "column" : null,
marginRight: "30px", marginRight: "30px",
}} }}
> >
@ -109,16 +100,13 @@ export default function SettingOpytionsPict({
<SelectIconButton <SelectIconButton
key={index} key={index}
onClick={() => updateProportions(value)} onClick={() => updateProportions(value)}
isActive={ isActive={listQuestions[quizId][totalIndex].content.xy === value}
listQuestions[quizId][totalIndex].content.xy === value
}
Icon={icon} Icon={icon}
/> />
))} ))}
</Box> </Box>
<Typography sx={{ marginBottom: "15px" }}>
Настройки ответов <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
</Typography>
<CustomCheckbox <CustomCheckbox
sx={{ display: "block" }} sx={{ display: "block" }}
@ -134,6 +122,7 @@ export default function SettingOpytionsPict({
} }
/> />
<CustomCheckbox <CustomCheckbox
sx={{ display: "block" }}
label={"Большие картинки"} label={"Большие картинки"}
checked={listQuestions[quizId][totalIndex].content.largeCheck} checked={listQuestions[quizId][totalIndex].content.largeCheck}
handleChange={({ target }) => handleChange={({ target }) =>
@ -146,6 +135,7 @@ export default function SettingOpytionsPict({
} }
/> />
<CustomCheckbox <CustomCheckbox
sx={{ display: "block" }}
label={'Вариант "свой ответ"'} label={'Вариант "свой ответ"'}
checked={listQuestions[quizId][totalIndex].content.own} checked={listQuestions[quizId][totalIndex].content.own}
handleChange={({ target }) => handleChange={({ target }) =>
@ -158,7 +148,7 @@ export default function SettingOpytionsPict({
} }
/> />
</Box> </Box>
<Box sx={{ padding: "20px", minWidth: "350px" }}> <Box sx={{ padding: "20px", minWidth: isMobile ? "100%" : "350px" }}>
<Typography sx={{ marginBottom: "15px" }}>Форма</Typography> <Typography sx={{ marginBottom: "15px" }}>Форма</Typography>
<Box <Box
sx={{ sx={{
@ -176,9 +166,7 @@ export default function SettingOpytionsPict({
}, },
}) })
} }
isActive={ isActive={listQuestions[quizId][totalIndex].content.format === "carousel"}
listQuestions[quizId][totalIndex].content.format === "carousel"
}
Icon={FormatIcon2} Icon={FormatIcon2}
/> />
<SelectIconButton <SelectIconButton
@ -190,15 +178,11 @@ export default function SettingOpytionsPict({
}, },
}) })
} }
isActive={ isActive={listQuestions[quizId][totalIndex].content.format === "masonry"}
listQuestions[quizId][totalIndex].content.format === "masonry"
}
Icon={FormatIcon1} Icon={FormatIcon1}
/> />
</Box> </Box>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
Настройки вопросов
</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required} checked={listQuestions[quizId][totalIndex].content.required}

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

@ -29,8 +29,8 @@ export default function OwnTextField({ totalIndex }: Props) {
<> <>
<Box <Box
sx={{ sx={{
width: "100%", width: "auto",
maxWidth: "640px", maxWidth: "745px",
display: "flex", display: "flex",
padding: "20px", padding: "20px",
flexDirection: "column", flexDirection: "column",
@ -60,11 +60,7 @@ export default function OwnTextField({ totalIndex }: Props) {
<InfoIcon /> <InfoIcon />
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchTextField switchState={switchState} totalIndex={totalIndex} /> <SwitchTextField switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

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

@ -6,6 +6,7 @@ import {
Radio, Radio,
RadioGroup, RadioGroup,
Typography, Typography,
useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
@ -32,18 +33,19 @@ const ANSWER_TYPES: Answer[] = [
{ name: "Только числа", value: "number" }, { name: "Только числа", value: "number" },
]; ];
export default function SettingTextField({ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
totalIndex,
}: SettingTextFieldProps) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isWrapperColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isWrapperColumn ? "column" : null,
marginRight: "50px", marginRight: "50px",
}} }}
> >
@ -53,9 +55,7 @@ export default function SettingTextField({
<RadioGroup <RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group" aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group" name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex( value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])}
({ value }) => listQuestions[quizId][totalIndex].content[value]
)}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => { onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = { const clonContent = {
...listQuestions[quizId][totalIndex].content, ...listQuestions[quizId][totalIndex].content,
@ -76,9 +76,7 @@ export default function SettingTextField({
"& .MuiRadio-root": { padding: "8px 9px" }, "& .MuiRadio-root": { padding: "8px 9px" },
}} }}
value={index} value={index}
control={ control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
}
label={name} label={name}
/> />
))} ))}

26
src/pages/Questions/PageOptions/PageOptions.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import AddImage from "../../../assets/icons/questionsPage/addImage"; import AddImage from "../../../assets/icons/questionsPage/addImage";
@ -9,6 +9,8 @@ import SwitchPageOptions from "./switchPageOptions";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
import { UploadImageModal } from "../UploadImage/UploadImageModal"; import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { UploadVideoModal } from "../UploadVideoModal"; import { UploadVideoModal } from "../UploadVideoModal";
import { AddPlusImage } from "@icons/questionsPage/addPlusImage";
import { AddPlusVideo } from "@icons/questionsPage/addPlusVideo";
type Props = { type Props = {
disableInput?: boolean; disableInput?: boolean;
@ -22,6 +24,8 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(780));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -31,7 +35,7 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
<> <>
<Box <Box
sx={{ sx={{
width: "100%", width: isTablet ? "auto" : "100%",
maxWidth: "640px", maxWidth: "640px",
display: "flex", display: "flex",
padding: "20px", padding: "20px",
@ -50,7 +54,9 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
}} }}
/> />
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}> <Box
sx={{ display: "flex", alignItems: "center", gap: "12px", justifyContent: isMobile ? "space-between" : null }}
>
<Box <Box
onClick={() => setOpenImageModal(true)} onClick={() => setOpenImageModal(true)}
sx={{ sx={{
@ -60,9 +66,11 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
gap: "10px", gap: "10px",
}} }}
> >
<AddImage /> {isMobile ? <AddPlusImage /> : <AddImage />}
<Typography <Typography
sx={{ sx={{
display: isMobile ? "none" : "block",
fontWeight: 400, fontWeight: 400,
fontSize: "16px", fontSize: "16px",
lineHeight: "18.96px", lineHeight: "18.96px",
@ -95,9 +103,11 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
gap: "10px", gap: "10px",
}} }}
> >
<AddVideofile /> {isMobile ? <AddPlusVideo /> : <AddVideofile />}
<Typography <Typography
sx={{ sx={{
display: isMobile ? "none" : "block",
fontWeight: 400, fontWeight: 400,
fontSize: "16px", fontSize: "16px",
lineHeight: "18.96px", lineHeight: "18.96px",
@ -119,11 +129,7 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
/> />
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchPageOptions switchState={switchState} totalIndex={totalIndex} /> <SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

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

@ -1,13 +1,9 @@
import { Box, Button, IconButton, Typography, useTheme } from "@mui/material"; import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import AddPlus from "../../assets/icons/questionsPage/addPlus"; import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { quizStore } from "@root/quizes"; import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { questionStore, createQuestion, updateQuestionsList } from "@root/questions";
questionStore,
createQuestion,
updateQuestionsList,
} from "@root/questions";
import { DraggableList } from "./DraggableList"; import { DraggableList } from "./DraggableList";
export default function QuestionsPage() { export default function QuestionsPage() {
@ -30,9 +26,11 @@ export default function QuestionsPage() {
}; };
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.up(1000));
return ( return (
<> <>
{/*<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />*/} {/* <Stepper activeStep={activeStep} desc={"Задайте вопросы"} /> */}
<Box <Box
sx={{ sx={{
maxWidth: "796px", maxWidth: "796px",
@ -74,15 +72,13 @@ export default function QuestionsPage() {
<AddPlus /> <AddPlus />
</IconButton> </IconButton>
<Box sx={{ display: "flex", gap: "8px" }}> <Box sx={{ display: "flex", gap: "8px" }}>
<Button <Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}>
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px" }}
>
<ArrowLeft /> <ArrowLeft />
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
height: "44px",
padding: "10px 20px", padding: "10px 20px",
borderRadius: "8px", borderRadius: "8px",
background: theme.palette.brightPurple.main, background: theme.palette.brightPurple.main,

15
src/pages/Questions/RatingOptions/RatingOptions.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import RatingStar from "../../../assets/icons/questionsPage/ratingStar"; import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating"; import SwitchRating from "./switchRating";
@ -16,6 +16,7 @@ export default function RatingOptions({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -25,7 +26,7 @@ export default function RatingOptions({ totalIndex }: Props) {
<> <>
<Box <Box
sx={{ sx={{
width: "100%", width: isMobile ? "auto" : "100%",
maxWidth: "310px", maxWidth: "310px",
display: "flex", display: "flex",
padding: "20px", padding: "20px",
@ -100,9 +101,7 @@ export default function RatingOptions({ totalIndex }: Props) {
</Box> </Box>
{listQuestions[quizId][totalIndex].content.ratingExpanded && {listQuestions[quizId][totalIndex].content.ratingExpanded &&
(listQuestions[quizId][totalIndex].content.ratingDescription ? ( (listQuestions[quizId][totalIndex].content.ratingDescription ? (
<Typography> <Typography>{listQuestions[quizId][totalIndex].content.ratingDescription}</Typography>
{listQuestions[quizId][totalIndex].content.ratingDescription}
</Typography>
) : ( ) : (
<CustomTextField <CustomTextField
placeholder={"Описание"} placeholder={"Описание"}
@ -130,11 +129,7 @@ export default function RatingOptions({ totalIndex }: Props) {
/> />
))} ))}
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchRating switchState={switchState} totalIndex={totalIndex} /> <SwitchRating switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

15
src/pages/Questions/RatingOptions/settingRating.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, ButtonBase, Slider, Typography, useTheme } from "@mui/material"; import { Box, ButtonBase, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -26,6 +26,8 @@ type ButtonRatingFrom = {
export default function SettingSlider({ totalIndex }: SettingSliderProps) { export default function SettingSlider({ totalIndex }: SettingSliderProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const buttonRatingForm: ButtonRatingFrom[] = [ const buttonRatingForm: ButtonRatingFrom[] = [
@ -42,11 +44,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
]; ];
return ( return (
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ marginBottom: "15px" }}>Настройки рейтинга</Typography>
Настройки рейтинга
</Typography>
<Typography <Typography
sx={{ sx={{
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
@ -72,10 +72,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
listQuestions[quizId][totalIndex].content.form === name listQuestions[quizId][totalIndex].content.form === name
? theme.palette.brightPurple.main ? theme.palette.brightPurple.main
: "transparent", : "transparent",
color: color: listQuestions[quizId][totalIndex].content.form === name ? "#ffffff" : theme.palette.grey3.main,
listQuestions[quizId][totalIndex].content.form === name
? "#ffffff"
: theme.palette.grey3.main,
width: "40px", width: "40px",
height: "40px", height: "40px",
borderRadius: "4px", borderRadius: "4px",

77
src/pages/Questions/SliderOptions/SliderOptions.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import CustomNumberField from "@ui_kit/CustomNumberField"; import CustomNumberField from "@ui_kit/CustomNumberField";
import SwitchSlider from "./switchSlider"; import SwitchSlider from "./switchSlider";
@ -11,6 +11,9 @@ interface Props {
} }
export default function SliderOptions({ totalIndex }: Props) { export default function SliderOptions({ totalIndex }: Props) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [switchState, setSwitchState] = useState("setting"); const [switchState, setSwitchState] = useState("setting");
const [stepError, setStepError] = useState(""); const [stepError, setStepError] = useState("");
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
@ -24,7 +27,7 @@ export default function SliderOptions({ totalIndex }: Props) {
<> <>
<Box <Box
sx={{ sx={{
width: "100%", width: isTablet ? "auto" : "100%",
maxWidth: "640px", maxWidth: "640px",
display: "flex", display: "flex",
padding: "20px", padding: "20px",
@ -39,14 +42,10 @@ export default function SliderOptions({ totalIndex }: Props) {
placeholder={"0"} placeholder={"0"}
min={0} min={0}
max={99} max={99}
value={ value={listQuestions[quizId][totalIndex].content.range.split("—")[0]}
listQuestions[quizId][totalIndex].content.range.split("—")[0]
}
onChange={({ target }) => { onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${target.value}—${ clonContent.range = `${target.value}—${listQuestions[quizId][totalIndex].content.range.split("—")[1]}`;
listQuestions[quizId][totalIndex].content.range.split("—")[1]
}`;
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
}); });
@ -54,16 +53,12 @@ export default function SliderOptions({ totalIndex }: Props) {
onBlur={({ target }) => { onBlur={({ target }) => {
const start = listQuestions[quizId][totalIndex].content.start; const start = listQuestions[quizId][totalIndex].content.start;
const min = Number(target.value); const min = Number(target.value);
const max = Number( const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
listQuestions[quizId][totalIndex].content.range.split("—")[1]
);
if (min >= max) { if (min >= max) {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${ clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${
listQuestions[quizId][totalIndex].content.range.split( listQuestions[quizId][totalIndex].content.range.split("—")[1]
"—"
)[1]
}`; }`;
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
@ -85,14 +80,10 @@ export default function SliderOptions({ totalIndex }: Props) {
placeholder={"100"} placeholder={"100"}
min={0} min={0}
max={100} max={100}
value={ value={listQuestions[quizId][totalIndex].content.range.split("—")[1]}
listQuestions[quizId][totalIndex].content.range.split("—")[1]
}
onChange={({ target }) => { onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${ clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${target.value}`;
listQuestions[quizId][totalIndex].content.range.split("—")[0]
}—${target.value}`;
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
}); });
@ -100,19 +91,15 @@ export default function SliderOptions({ totalIndex }: Props) {
onBlur={({ target }) => { onBlur={({ target }) => {
const start = listQuestions[quizId][totalIndex].content.start; const start = listQuestions[quizId][totalIndex].content.start;
const step = listQuestions[quizId][totalIndex].content.step; const step = listQuestions[quizId][totalIndex].content.step;
const min = Number( const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
listQuestions[quizId][totalIndex].content.range.split("—")[0]
);
const max = Number(target.value); const max = Number(target.value);
const range = max - min; const range = max - min;
if (max <= min) { if (max <= min) {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${ clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${
listQuestions[quizId][totalIndex].content.range.split( min + 1 >= 100 ? 100 : min + 1
"—" }`;
)[0]
}—${min + 1 >= 100 ? 100 : min + 1}`;
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
}); });
@ -136,11 +123,7 @@ export default function SliderOptions({ totalIndex }: Props) {
}); });
if (range % step) { if (range % step) {
setStepError( setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
`Шаг должен делить без остатка диапазон ${max} - ${min} = ${
max - min
}`
);
} else { } else {
setStepError(""); setStepError("");
} }
@ -161,12 +144,8 @@ export default function SliderOptions({ totalIndex }: Props) {
<Typography>Начальное значение</Typography> <Typography>Начальное значение</Typography>
<CustomNumberField <CustomNumberField
placeholder={"50"} placeholder={"50"}
min={Number( min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
listQuestions[quizId][totalIndex].content.range.split("—")[0] max={Number(listQuestions[quizId][totalIndex].content.range.split("—")[1])}
)}
max={Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
)}
value={String(listQuestions[quizId][totalIndex].content.start)} value={String(listQuestions[quizId][totalIndex].content.start)}
onChange={({ target }) => { onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
@ -193,12 +172,8 @@ export default function SliderOptions({ totalIndex }: Props) {
}); });
}} }}
onBlur={({ target }) => { onBlur={({ target }) => {
const min = Number( const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
listQuestions[quizId][totalIndex].content.range.split("—")[0] const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
);
const max = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
);
const range = max - min; const range = max - min;
const step = Number(target.value); const step = Number(target.value);
@ -212,11 +187,7 @@ export default function SliderOptions({ totalIndex }: Props) {
} }
if (range % step) { if (range % step) {
setStepError( setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
`Шаг должен делить без остатка диапазон ${max} - ${min} = ${
max - min
}`
);
} else { } else {
setStepError(""); setStepError("");
} }
@ -225,11 +196,7 @@ export default function SliderOptions({ totalIndex }: Props) {
</Box> </Box>
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchSlider switchState={switchState} totalIndex={totalIndex} /> <SwitchSlider switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

7
src/pages/Questions/SliderOptions/settingSlider.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
@ -12,9 +12,12 @@ type SettingSliderProps = {
export default function SettingSlider({ totalIndex }: SettingSliderProps) { export default function SettingSlider({ totalIndex }: SettingSliderProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return ( return (
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Typography>Настройки ползунка</Typography> <Typography>Настройки ползунка</Typography>
<CustomCheckbox <CustomCheckbox

14
src/pages/Questions/UploadFile/UploadFile.tsx
View File

@ -7,6 +7,7 @@ import {
Select, Select,
SelectChangeEvent, SelectChangeEvent,
Typography, Typography,
useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
@ -34,6 +35,7 @@ export default function UploadFile({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(980));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -46,9 +48,7 @@ export default function UploadFile({ totalIndex }: Props) {
}; };
useEffect(() => { useEffect(() => {
const isTypeSetted = DESIGN_TYPES.find( const isTypeSetted = DESIGN_TYPES.find(({ value }) => value === listQuestions[quizId][totalIndex].content.type);
({ value }) => value === listQuestions[quizId][totalIndex].content.type
);
if (!isTypeSetted) { if (!isTypeSetted) {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
@ -61,7 +61,7 @@ export default function UploadFile({ totalIndex }: Props) {
<> <>
<Box <Box
sx={{ sx={{
width: "100%", width: isTablet ? "auto" : "100%",
maxWidth: "640px", maxWidth: "640px",
display: "flex", display: "flex",
padding: "20px", padding: "20px",
@ -159,11 +159,7 @@ export default function UploadFile({ totalIndex }: Props) {
<InfoIcon /> <InfoIcon />
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchUpload switchState={switchState} totalIndex={totalIndex} /> <SwitchUpload switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

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

@ -1,14 +1,12 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, Link, useTheme } from "@mui/material"; import { Box, Typography, Link, useTheme, useMediaQuery } from "@mui/material";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions"; import SwitchAnswerOptions from "./switchAnswerOptions";
import { AnswerDraggableList } from "../AnswerDraggableList"; import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
// Импортируем интерфейс Varian
interface Props { interface Props {
totalIndex: number; totalIndex: number;
} }
@ -19,13 +17,14 @@ export default function AnswerOptions({ totalIndex }: Props) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const variants = listQuestions[quizId][totalIndex].content.variants; const variants = listQuestions[quizId][totalIndex].content.variants;
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
}; };
const addNewAnswer = () => { const addNewAnswer = () => {
const answerNew = variants.slice(); // Create a shallow copy of the array const answerNew = variants.slice();
answerNew.push({ answer: "", hints: "" }); answerNew.push({ answer: "", hints: "" });
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
@ -71,24 +70,24 @@ export default function AnswerOptions({ totalIndex }: Props) {
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
<Typography {isMobile ? null : (
sx={{ <>
fontWeight: 400, <Typography
fontSize: "18px", sx={{
lineHeight: "21.33px", fontWeight: 400,
color: theme.palette.grey2.main, fontSize: "18px",
}} lineHeight: "21.33px",
> color: theme.palette.grey2.main,
или нажмите Enter }}
</Typography> >
<EnterIcon /> или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box> </Box>
</Box> </Box>
<ButtonsOptionsAndPict <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} /> <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

8
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -12,12 +12,16 @@ interface Props {
export default function ResponseSettings({ totalIndex }: Props) { export default function ResponseSettings({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(900));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isTablet ? "column" : "none",
marginRight: "30px", marginRight: "30px",
}} }}
> >
@ -81,7 +85,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonContent });
}} }}
/>{" "} />
<InfoIcon /> <InfoIcon />
</Box> </Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && ( {listQuestions[quizId][totalIndex].content.innerNameCheck && (

303
src/pages/startPage/StartPage.tsx
View File

@ -1,159 +1,176 @@
import Stepper from '@ui_kit/Stepper'; import Stepper from "@ui_kit/Stepper";
import SwitchStepPages from "@ui_kit/switchStepPages"; import SwitchStepPages from "@ui_kit/switchStepPages";
import React from "react"; import React from "react";
import PenaLogo from "@ui_kit/PenaLogo"; import PenaLogo from "@ui_kit/PenaLogo";
import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material"; import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
import BackArrowIcon from "@icons/BackArrowIcon"; import BackArrowIcon from "@icons/BackArrowIcon";
import NavMenuItem from "@ui_kit/Header/NavMenuItem"; import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import EyeIcon from "@icons/EyeIcon"; import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "@ui_kit/Header/Avatar"; import CustomAvatar from "@ui_kit/Header/Avatar";
import Sidebar from "@ui_kit/Sidebar"; import Sidebar from "@ui_kit/Sidebar";
import {quizStore} from "@root/quizes"; import { quizStore } from "@root/quizes";
import {useParams} from "react-router-dom"; import { useParams } from "react-router-dom";
export default function StartPage() {
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId);
const activeStep = listQuizes[params].step;
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
export default function StartPage() { const handleNext = () => {
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); updateQuizesList(params, { step: listQuizes[params].step + 1 });
const params = Number(useParams().quizId); };
const activeStep = listQuizes[params].step
const theme = useTheme();
const handleNext = () => { const handleBack = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1}) let result = listQuizes[params].step - 1;
} updateQuizesList(params, { step: result ? result : 1 });
};
const handleBack = () => { return (
let result = listQuizes[params].step - 1 <>
updateQuizesList(params, {step: result ? result : 1}) {/*хедер*/}
}; <Container
component="nav"
return ( maxWidth={false}
<> disableGutters
{/*хедер*/} sx={{
<Container px: "16px",
component="nav" display: "flex",
maxWidth={false} height: "80px",
disableGutters alignItems: "center",
sx={{ bgcolor: "white",
px: "16px", borderBottom: "1px solid #E3E3E3",
display: "flex", zIndex: theme.zIndex.drawer + 1,
height: "80px", }}
alignItems: "center", >
bgcolor: "white", <PenaLogo width={124} />
borderBottom: "1px solid #E3E3E3", <Box
zIndex: theme.zIndex.drawer + 1, sx={{
}} display: "flex",
> alignItems: "center",
<PenaLogo width={124} /> ml: "37px",
<Box }}
sx={{ >
display: "flex", <IconButton sx={{ p: "6px" }} onClick={() => handleBack()}>
alignItems: "center", <BackArrowIcon />
ml: "37px", </IconButton>
}} <FormControl fullWidth variant="standard">
> <TextField
<IconButton sx={{ p: "6px" }} fullWidth
onClick={() => handleBack()} id="project-name"
> placeholder="Название проекта окно"
<BackArrowIcon /> sx={{
</IconButton> width: "270px",
<FormControl "& .MuiInputBase-root": {
fullWidth height: "34px",
variant="standard" borderRadius: "8px",
> p: 0,
<TextField },
fullWidth }}
id="project-name" inputProps={{
placeholder="Название проекта окно" sx: {
sx={{ height: "20px",
width: "270px", borderRadius: "8px",
"& .MuiInputBase-root": { fontSize: "16px",
height: "34px", lineHeight: "20px",
borderRadius: "8px", p: "7px",
p: 0, color: "black",
}, "&::placeholder": {
}} opacity: 1,
inputProps={{ },
sx: { },
height: "20px", }}
borderRadius: "8px", />
fontSize: "16px", </FormControl>
lineHeight: "20px", </Box>
p: "7px", {isTablet ? (
color: "black", <Box
"&::placeholder": { sx={{
opacity: 1, display: "flex",
}, ml: "auto",
}
}}
/>
</FormControl>
</Box>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
ml: "20px",
}}
>
<NavMenuItem text="Редактировать" isActive />
<NavMenuItem text="Заявки" />
<NavMenuItem text="Аналитика" />
<NavMenuItem text="История" />
<NavMenuItem text="Помощь" />
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
gap: "15px",
}}
>
<Button
variant="outlined"
startIcon={<EyeIcon />}
sx={{
color: theme.palette.brightPurple.main,
fontSize: "14px",
lineHeight: "18px",
height: "34px",
"& .MuiButton-startIcon": {
mr: "3px",
}
}}
>Предпросмотр</Button>
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
}}
>Опубликовать</Button>
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
</Box>
</Container>
<Box sx={{
display: 'flex'
}} }}
>
<CustomAvatar
sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
/>
</Box>
) : (
<>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
ml: "20px",
}}
> >
<Sidebar/> <NavMenuItem text="Редактировать" isActive />
<Box <NavMenuItem text="Заявки" />
sx={{ <NavMenuItem text="Аналитика" />
background: theme.palette.background.default, <NavMenuItem text="История" />
width: '100%', <NavMenuItem text="Помощь" />
padding: '25px',
height: 'calc(100vh - 80px)',
overflow: 'auto',
boxSizing: "border-box"
}}
>
<Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"}/>
<SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
</Box>
</Box> </Box>
</> <Box
) sx={{
display: "flex",
ml: "auto",
gap: "15px",
}}
>
<Button
variant="outlined"
startIcon={<EyeIcon />}
sx={{
color: theme.palette.brightPurple.main,
fontSize: "14px",
lineHeight: "18px",
height: "34px",
"& .MuiButton-startIcon": {
mr: "3px",
},
}}
>
Предпросмотр
</Button>
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
}}
>
Опубликовать
</Button>
<CustomAvatar
sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
/>
</Box>
</>
)}
</Container>
<Box
sx={{
display: "flex",
}}
>
<Sidebar />
<Box
sx={{
background: theme.palette.background.default,
width: "100%",
padding: "25px",
height: "calc(100vh - 80px)",
overflow: "auto",
boxSizing: "border-box",
}}
>
<Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"} />
<SwitchStepPages activeStep={activeStep} handleNext={handleNext} />
</Box>
</Box>
</>
);
} }

102
src/ui_kit/CustomCheckbox.tsx
View File

@ -3,69 +3,65 @@ import React from "react";
import type { SxProps } from "@mui/material"; import type { SxProps } from "@mui/material";
interface Props { interface Props {
label: string; label: string;
handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
checked?: boolean; checked?: boolean;
sx?: SxProps; sx?: SxProps;
} }
export default function CustomCheckbox({ label, handleChange, checked, sx}: Props) { export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<FormControlLabel <FormControlLabel
control={ control={<Checkbox icon={<Icon />} checkedIcon={<CheckedIcon />} onChange={handleChange} checked={checked} />}
<Checkbox label={label}
icon={<Icon />} sx={{
checkedIcon={<CheckedIcon />} color: theme.palette.grey2.main,
onChange={handleChange} ml: "-9px",
checked={checked} userSelect: "none",
/>} ...sx,
label={label} }}
sx={{ />
color: theme.palette.grey2.main, );
ml: "-9px",
userSelect: "none",
...sx,
}}
/>
);
} }
function Icon() { function Icon() {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ <Box
height: "26px", sx={{
width: "26px", height: "26px",
borderRadius: "8px", width: "26px",
backgroundColor: theme.palette.background.default, borderRadius: "8px",
border: `1px solid ${theme.palette.grey2.main}`, backgroundColor: theme.palette.background.default,
}} /> border: `1px solid ${theme.palette.grey2.main}`,
); }}
/>
);
} }
function CheckedIcon() { function CheckedIcon() {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ <Box
height: "26px", sx={{
width: "26px", height: "26px",
borderRadius: "8px", width: "26px",
display: "flex", borderRadius: "8px",
justifyContent: "center", display: "flex",
alignItems: "center", justifyContent: "center",
backgroundColor: theme.palette.brightPurple.main, alignItems: "center",
border: `1px solid ${theme.palette.grey2.main}`, backgroundColor: theme.palette.brightPurple.main,
}}> border: `1px solid ${theme.palette.grey2.main}`,
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none"> }}
<path d="M2 9L10 16.5L22.5 1.5" stroke='#ffffff' strokeWidth="4" strokeLinecap="round" /> >
</svg> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
</Box> <path d="M2 9L10 16.5L22.5 1.5" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" />
); </svg>
</Box>
);
} }

241
src/ui_kit/Header/Header.tsx
View File

@ -1,131 +1,138 @@
import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material"; import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
import BackArrowIcon from "@icons/BackArrowIcon"; import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon"; import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "./Avatar"; import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem"; import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo"; import PenaLogo from "../PenaLogo";
import {quizStore} from "@root/quizes"; import { quizStore } from "@root/quizes";
import {useParams} from "react-router-dom"; import { useParams } from "react-router-dom";
export default function Header() {
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId);
const activeStep = listQuizes[params].step;
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
export default function Header() { const handleNext = () => {
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); updateQuizesList(params, { step: listQuizes[params].step + 1 });
const params = Number(useParams().quizId); };
const theme = useTheme();
const handleNext = () => { const handleBack = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1}) let result = listQuizes[params].step - 1;
} updateQuizesList(params, { step: result ? result : 0 });
};
const handleBack = () => { return (
let result = listQuizes[params].step - 1 <Container
updateQuizesList(params, {step: result ? result : 0}) component="nav"
}; maxWidth={false}
disableGutters
return ( sx={{
<Container px: "16px",
component="nav" display: "flex",
maxWidth={false} height: "80px",
disableGutters alignItems: "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
zIndex: theme.zIndex.drawer + 1,
}}
>
<PenaLogo width={124} />
<Box
sx={{
display: "flex",
alignItems: "center",
ml: "37px",
}}
>
<IconButton sx={{ p: "6px" }} onClick={() => handleBack()}>
<BackArrowIcon />
</IconButton>
<FormControl fullWidth variant="standard">
<TextField
fullWidth
id="project-name"
placeholder="Название проекта окно"
sx={{ sx={{
px: "16px", width: "270px",
display: "flex", "& .MuiInputBase-root": {
height: "80px", height: "34px",
alignItems: "center", borderRadius: "8px",
bgcolor: "white", p: 0,
borderBottom: "1px solid #E3E3E3", },
zIndex: theme.zIndex.drawer + 1,
}} }}
> inputProps={{
<PenaLogo width={124} /> sx: {
<Box height: "20px",
sx={{ borderRadius: "8px",
display: "flex", fontSize: "16px",
alignItems: "center", lineHeight: "20px",
ml: "37px", p: "7px",
}} color: "black",
"&::placeholder": {
opacity: 1,
},
},
}}
/>
</FormControl>
</Box>
{isTablet ? null : (
<>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
ml: "20px",
}}
>
<NavMenuItem text="Редактировать" isActive />
<NavMenuItem text="Заявки" />
<NavMenuItem text="Аналитика" />
<NavMenuItem text="История" />
<NavMenuItem text="Помощь" />
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
gap: "15px",
}}
>
<Button
variant="outlined"
startIcon={<EyeIcon />}
sx={{
color: theme.palette.brightPurple.main,
fontSize: "14px",
lineHeight: "18px",
height: "34px",
"& .MuiButton-startIcon": {
mr: "3px",
},
}}
> >
<IconButton sx={{ p: "6px" }} Предпросмотр
onClick={() => handleBack()} </Button>
> <Button
<BackArrowIcon /> variant="contained"
</IconButton> sx={{
<FormControl fontSize: "14px",
fullWidth lineHeight: "18px",
variant="standard" height: "34px",
> }}
<TextField
fullWidth
id="project-name"
placeholder="Название проекта окно"
sx={{
width: "270px",
"& .MuiInputBase-root": {
height: "34px",
borderRadius: "8px",
p: 0,
},
}}
inputProps={{
sx: {
height: "20px",
borderRadius: "8px",
fontSize: "16px",
lineHeight: "20px",
p: "7px",
color: "black",
"&::placeholder": {
opacity: 1,
},
}
}}
/>
</FormControl>
</Box>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
ml: "20px",
}}
> >
<NavMenuItem text="Редактировать" isActive /> Опубликовать
<NavMenuItem text="Заявки" /> </Button>
<NavMenuItem text="Аналитика" /> <CustomAvatar
<NavMenuItem text="История" /> sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
<NavMenuItem text="Помощь" /> />
</Box> </Box>
<Box </>
sx={{ )}
display: "flex", </Container>
ml: "auto", );
gap: "15px",
}}
>
<Button
variant="outlined"
startIcon={<EyeIcon />}
sx={{
color: theme.palette.brightPurple.main,
fontSize: "14px",
lineHeight: "18px",
height: "34px",
"& .MuiButton-startIcon": {
mr: "3px",
}
}}
>Предпросмотр</Button>
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
}}
>Опубликовать</Button>
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
</Box>
</Container>
);
} }

68
src/ui_kit/QuestionsMiniButton.tsx
View File

@ -1,42 +1,46 @@
import {Button, Typography, useTheme} from "@mui/material"; import { Button, Typography, useTheme } from "@mui/material";
import Answer from "../assets/icons/questionsPage/answer"; import Answer from "../assets/icons/questionsPage/answer";
import React from "react"; import React from "react";
import { ReactNode } from "react"; import { ReactNode } from "react";
interface QuestionsMiniButtonProps { interface QuestionsMiniButtonProps {
icon: ReactNode; icon: ReactNode;
text: string; text: string;
onClick: () => void; onClick: () => void;
} }
export default function QuestionsMiniButton({ icon, text, onClick }: QuestionsMiniButtonProps) { export default function QuestionsMiniButton({ icon, text, onClick }: QuestionsMiniButtonProps) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
<Button variant="outlined" <Button
sx={{ variant="outlined"
padding: '26px 15px 15px 15px', sx={{
display: 'flex', padding: "26px 15px 15px 15px",
flexDirection: 'column', display: "flex",
justifyContent: 'space-between', flexDirection: "column",
width: '174px', justifyContent: "space-between",
height: '140px', width: "174px",
border: '1px solid #9A9AAF', height: "140px",
borderRadius: '8px' border: "1px solid #9A9AAF",
}} borderRadius: "8px",
onClick={onClick} }}
> onClick={onClick}
{icon} >
<Typography {icon}
sx={{ <Typography
textAlign: 'left', sx={{
fontWeight: 400, textAlign: "left",
fontSize: '16px', fontWeight: 400,
lineHeight: '18.4px', fontSize: "16px",
color: theme.palette.grey2.main lineHeight: "18.4px",
}}>{text}</Typography> color: theme.palette.grey2.main,
</Button> }}
</> >
); {text}
</Typography>
</Button>
</>
);
} }

98
src/ui_kit/Stepper.tsx
View File

@ -1,55 +1,59 @@
import * as React from 'react'; import * as React from "react";
import MobileStepper from '@mui/material/MobileStepper'; import MobileStepper from "@mui/material/MobileStepper";
import {Box, Typography} from "@mui/material"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
interface Props { interface Props {
desc?: string; desc?: string;
activeStep?: number; activeStep?: number;
steps?: number; steps?: number;
} }
export default function ProgressMobileStepper({desc, activeStep = 1, steps = 7}:Props) { export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 7 }: Props) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return ( return (
<Box <Box
sx={{ sx={{
width: '100%', maxWidth: isTablet ? "800px" : "100%",
display: 'flex', width: "100%",
justifyContent: 'center', display: "flex",
flexDirection: 'column', justifyContent: "center",
height: '51px', flexDirection: "column",
borderRadius: '13px', height: "51px",
border: 'solid #7E2AEA 1px', borderRadius: "13px",
padding: '0 0 20px 0', border: "solid #7E2AEA 1px",
overflow: 'hidden' padding: "0 0 20px 0",
}} overflow: "hidden",
> }}
<MobileStepper >
variant="progress" <MobileStepper
steps={steps} variant="progress"
position="static" steps={steps}
activeStep={activeStep} position="static"
sx={{ activeStep={activeStep}
width: '100%', sx={{
flexGrow: 1, width: "100%",
paddingLeft: 0, flexGrow: 1,
'& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress': { paddingLeft: 0,
height: '10px', "& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": {
background: '#ffffff', height: "10px",
width: '100%' background: "#ffffff",
}, width: "100%",
'& .css-1v0msyf-MuiLinearProgress-bar1': { },
background: '#7e2aea', "& .css-1v0msyf-MuiLinearProgress-bar1": {
}, background: "#7e2aea",
}} },
nextButton={<></>} }}
backButton={<></>} nextButton={<></>}
/> backButton={<></>}
<Box sx={{padding: '3px 3px 3px 20px'}}> />
<Typography sx={{fontWeight:400, <Box sx={{ padding: "3px 3px 3px 20px" }}>
fontSize: '12px', <Typography sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}>
lineHeight: '14.22px'}}> Шаг {activeStep} из {steps-1}</Typography> {" "}
<Typography>{desc}</Typography> Шаг {activeStep} из {steps - 1}
</Box> </Typography>
<Typography>{desc}</Typography>
</Box>
</Box> </Box>
); );
} }

53
src/ui_kit/switchStepPages.tsx
View File

@ -1,38 +1,37 @@
import * as React from 'react'; import * as React from "react";
import StepOne from "../pages/startPage/stepOne"; import StepOne from "../pages/startPage/stepOne";
import Steptwo from "../pages/startPage/steptwo"; import Steptwo from "../pages/startPage/steptwo";
import StartPageSettings from "../pages/startPage/StartPageSettings"; import StartPageSettings from "../pages/startPage/StartPageSettings";
import QuestionsPage from "../pages/Questions/QuestionsPage"; import QuestionsPage from "../pages/Questions/QuestionsPage";
import ContactFormPage from "../pages/ContactFormPage/ContactFormPage"; import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "../pages/InstallQuiz/InstallQuiz"; import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
import {Result} from "../pages/Result/Result"; import { Result } from "../pages/Result/Result";
import {Setting} from "../pages/Result/Setting"; import { Setting } from "../pages/Result/Setting";
interface Props { interface Props {
activeStep: number, activeStep: number;
handleNext: () => void handleNext: () => void;
} }
export default function SwitchStepPages({activeStep = 1, handleNext }: Props) { export default function SwitchStepPages({ activeStep = 1, handleNext }: Props) {
switch (activeStep) {
switch (activeStep) { case 1:
case 1: return <StepOne handleNext={handleNext} />;
return (<StepOne handleNext={handleNext}/>); case 2:
case 2: return <Steptwo handleNext={handleNext} />;
return (<Steptwo handleNext={handleNext}/>); case 3:
case 3: return <StartPageSettings handleNext={handleNext} />;
return (<StartPageSettings handleNext={handleNext}/>); case 4:
case 4: return <QuestionsPage />;
return (<QuestionsPage/>); case 5:
case 5: return <Result />;
return (<Result/>); case 6:
case 6: return <Setting />;
return (<Setting/>); case 7:
case 7: return <ContactFormPage />;
return (<ContactFormPage/>); case 8:
case 8: return <InstallQuiz />;
return (<InstallQuiz/>); default:
default: return <></>;
return (<></>) }
}
} }