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,
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<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"
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";
interface Iprops {
onClick?: () => void;
sx?: SxProps;
}
const AddImage: FC<Iprops> = ({ onClick }) => {
const AddImage: FC<Iprops> = ({ onClick, sx }) => {
return (
<Box
onClick={onClick}
@ -18,21 +19,12 @@ const AddImage: FC<Iprops> = ({ onClick }) => {
cursor: "pointer",
}}
>
<svg
width="60"
height="40"
viewBox="0 0 60 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H40.3333V0Z"
fill="#EEE4FC"
/>
<path
d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z"
fill="#7E2AEA"
/>
<path d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z" fill="#7E2AEA" />
<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"
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>
<Routes>
{routeslink.map((e, i) => (
<Route
key={i}
path={e.path}
element={
<Main page={e.page} header={e.header} sidebar={e.sidebar} />
}
/>
<Route 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="crop" element={<ImageCrop />} />

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

@ -2,49 +2,66 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
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";
interface Props {
switchState: string
SSHC: (data:string) => void
switchState: string;
SSHC: (data: string) => void;
}
export default function ButtonSettingForms ({SSHC, switchState}:Props) {
const theme = useTheme();
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: <SupplementIcon color={switchState === 'supplement' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Добавить шаг формы', value: 'supplement'},
]
export default function ButtonSettingForms({ SSHC, switchState }: Props) {
const theme = useTheme();
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: <SupplementIcon color={switchState === "supplement" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Добавить шаг формы",
value: "supplement",
},
];
return (
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
background: '#f2f3f7'
}}>
<Box
sx={{
padding: '20px',
display: 'flex',
gap: '10px'
}}
>
{buttonSetting.map( (e,i) => (
<MiniButtonSetting
key={i}
onClick={()=>{SSHC(e.value)}}
sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main,
}}
>
{e.icon}
{e.title}
</MiniButtonSetting>
))}
</Box>
</Box>
)
}
return (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
background: "#f2f3f7",
}}
>
<Box
sx={{
padding: "20px",
display: "flex",
gap: "10px",
}}
>
{buttonSetting.map((e, i) => (
<MiniButtonSetting
key={i}
onClick={() => {
SSHC(e.value);
}}
sx={{
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
}}
>
{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 { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd";
import {
Box,
TextField,
FormControl,
InputAdornment,
IconButton,
useTheme,
} from "@mui/material";
import { Box, TextField, FormControl, InputAdornment, IconButton, useTheme, useMediaQuery } from "@mui/material";
import { questionStore, updateQuestionsList } from "@root/questions";
@ -30,16 +23,11 @@ type AnswerItemProps = {
icon?: ReactNode;
};
export const AnswerItem = ({
index,
totalIndex,
variants,
variant,
icon,
}: AnswerItemProps) => {
export const AnswerItem = ({ index, totalIndex, variants, variant, icon }: AnswerItemProps) => {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@ -109,7 +97,7 @@ export const AnswerItem = ({
key={index}
fullWidth
variant="standard"
sx={{ padding: "0 0 20px 0" }}
sx={{ padding: isMobile ? " 15px 0 20px 0" : "0 0 20px 0" }}
>
<TextField
value={variant.answer}
@ -119,20 +107,14 @@ export const AnswerItem = ({
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
onChange={onChangeText}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (
event.code === "Enter" &&
!listQuestions[quizId][totalIndex].content.largeCheck
) {
if (event.code === "Enter" && !listQuestions[quizId][totalIndex].content.largeCheck) {
addNewAnswer();
}
}}
InputProps={{
startAdornment: (
<>
<InputAdornment
{...provided.dragHandleProps}
position="start"
>
<InputAdornment {...provided.dragHandleProps} position="start">
<PointsIcon />
</InputAdornment>
{icon && icon}
@ -140,10 +122,7 @@ export const AnswerItem = ({
),
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-describedby="my-popover-id"
onClick={handleClick}
>
<IconButton aria-describedby="my-popover-id" onClick={handleClick}>
<MessageIcon />
</IconButton>
<Popover
@ -158,9 +137,7 @@ export const AnswerItem = ({
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={changeAnswerHint}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => event.stopPropagation()}
/>
</Popover>
<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 Clue from "../../assets/icons/questionsPage/clue";
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 CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import {
questionStore,
resetSomeField,
copyQuestion,
removeQuestion,
} from "@root/questions";
import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions";
interface Props {
switchState: string;
@ -21,11 +16,7 @@ interface Props {
totalIndex: number;
}
export default function ButtonsOptions({
SSHC,
switchState,
totalIndex,
}: Props) {
export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { openedModalSettings } = questionStore();
const openedModal = () => {
@ -33,6 +24,8 @@ export default function ButtonsOptions({
console.log(openedModalSettings);
};
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const buttonSetting: {
icon: JSX.Element;
title: string;
@ -40,33 +33,17 @@ export default function ButtonsOptions({
myFunc?: any;
}[] = [
{
icon: (
<SettingIcon
color={
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
}
/>
),
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Настройки",
value: "setting",
},
{
icon: (
<Clue
color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main}
/>
),
icon: <Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Подсказка",
value: "help",
},
{
icon: (
<Branching
color={
switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
}
/>
),
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Ветвление",
value: "branching",
myFunc: openedModal,
@ -86,6 +63,7 @@ export default function ButtonsOptions({
sx={{
padding: "20px",
display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px",
}}
>
@ -107,9 +85,7 @@ export default function ButtonsOptions({
>
Будет показан при условии
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
Название
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>Название</Typography>
<Typography
sx={{
fontWeight: "bold",
@ -119,9 +95,7 @@ export default function ButtonsOptions({
>
Условие 1, Условие 2
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
Все условия обязательны
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>Все условия обязательны</Typography>
</Box>
}
>
@ -132,18 +106,15 @@ export default function ButtonsOptions({
myFunc();
}}
sx={{
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
minWidth: isMobile ? "30px" : "64px",
height: "30px",
}}
>
{icon}
{title}
{isMobile ? null : title}
</MiniButtonSetting>
</Tooltip>
) : (
@ -154,18 +125,14 @@ export default function ButtonsOptions({
myFunc();
}}
sx={{
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
minWidth: isMobile ? "30px" : "64px",
height: "30px",
}}
>
{icon}
{title}
{isMobile ? null : title}
</MiniButtonSetting>
)}
</>
@ -174,21 +141,16 @@ export default function ButtonsOptions({
<Box
sx={{
padding: "20px",
display: "flex",
}}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(quizId, totalIndex)}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
</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 Clue from "../../assets/icons/questionsPage/clue";
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 CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import { useParams } from "react-router-dom";
import {
questionStore,
copyQuestion,
removeQuestion,
resetSomeField,
} from "@root/questions";
import { questionStore, copyQuestion, removeQuestion, resetSomeField } from "@root/questions";
import "./ButtonsOptionsAndPict.css";
@ -24,14 +19,12 @@ interface Props {
totalIndex: number;
}
export default function ButtonsOptionsAndPict({
SSHC,
switchState,
totalIndex,
}: Props) {
export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { openedModalSettings } = questionStore();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(930));
const openedModal = () => {
resetSomeField({ openedModalSettings: "open" });
@ -50,6 +43,7 @@ export default function ButtonsOptionsAndPict({
sx={{
padding: "20px",
display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px",
}}
>
@ -58,40 +52,28 @@ export default function ButtonsOptionsAndPict({
SSHC("setting");
}}
sx={{
backgroundColor:
switchState === "setting"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
minWidth: isIconMobile ? "30px" : "64px",
height: "30px",
backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<SettingIcon
color={
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
}
/>
Настройки
<SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />
{isIconMobile ? null : " Настройки"}
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => {
SSHC("help");
}}
sx={{
backgroundColor:
switchState === "help"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
minWidth: isIconMobile ? "30px" : "64px",
height: "30px",
backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<Clue
color={
switchState === "help" ? "#ffffff" : theme.palette.grey3.main
}
/>
Помощь
<Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />
{isIconMobile ? null : " Помощь"}
</MiniButtonSetting>
<Tooltip
arrow
@ -108,9 +90,7 @@ export default function ButtonsOptionsAndPict({
>
Будет показан при условии
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
Название
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>Название</Typography>
<Typography
sx={{
fontWeight: "bold",
@ -120,9 +100,7 @@ export default function ButtonsOptionsAndPict({
>
Условие 1, Условие 2
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
Все условия обязательны
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>Все условия обязательны</Typography>
</Box>
}
>
@ -132,24 +110,14 @@ export default function ButtonsOptionsAndPict({
openedModal();
}}
sx={{
backgroundColor:
switchState === "branching"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
height: "30px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<Branching
color={
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main
}
/>
Ветвление
<Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />
{isIconMobile ? null : "Ветвление"}
</MiniButtonSetting>
</Tooltip>
<MiniButtonSetting
@ -157,20 +125,14 @@ export default function ButtonsOptionsAndPict({
SSHC("image");
}}
sx={{
backgroundColor:
switchState === "image"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
height: "30px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<ImgIcon
color={
switchState === "image" ? "#ffffff" : theme.palette.grey3.main
}
/>
Изображение
<ImgIcon color={switchState === "image" ? "#ffffff" : theme.palette.grey3.main} />
{isIconMobile ? null : "Изображение"}
</MiniButtonSetting>
</Box>
<Box
@ -181,16 +143,10 @@ export default function ButtonsOptionsAndPict({
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(quizId, totalIndex)}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
</Box>

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

@ -1,5 +1,5 @@
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 SwitchData from "./switchData";
import { useState, useEffect } from "react";
@ -16,6 +16,7 @@ export default function DataOptions({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => {
setSwitchState(data);
@ -33,36 +34,34 @@ export default function DataOptions({ totalIndex }: Props) {
<>
<Box
sx={{
width: "100%",
maxWidth: "640px",
width: isMobile ? "auto" : "100%",
maxWidth: "493px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<Box sx={{ gap: "10px", display: "flex" }}>
<Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
<SelectableButton
isSelected={
listQuestions[quizId][totalIndex].content.type === "calendar"
}
isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.type = "calendar";
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
sx={{ maxWidth: "257px", height: "48px", whiteSpace: "nowrap" }}
>
Использовать календарь
</SelectableButton>
<SelectableButton
isSelected={
listQuestions[quizId][totalIndex].content.type === "mask"
}
isSelected={listQuestions[quizId][totalIndex].content.type === "mask"}
onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.type = "mask";
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
sx={{ maxWidth: "211px", height: "48px", whiteSpace: "nowrap" }}
>
Использовать маску
</SelectableButton>
@ -81,11 +80,7 @@ export default function DataOptions({ totalIndex }: Props) {
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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 { Box, Typography } from "@mui/material";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -12,9 +12,11 @@ type SettingsDataProps = {
export default function SettingsData({ totalIndex }: SettingsDataProps) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
return (
<Box sx={{ display: "flex" }}>
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки календаря</Typography>
<CustomCheckbox
@ -27,6 +29,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
}}
/>
<CustomCheckbox
sx={{ display: "block" }}
label={"Выбор времени"}
checked={listQuestions[quizId][totalIndex].content.time}
handleChange={({ target }) => {
@ -36,7 +39,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
}}
/>
</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>
<CustomCheckbox
label={"Необязательный вопрос"}

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

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

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

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

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

@ -1,6 +1,6 @@
import { useState } from "react";
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 { questionStore, updateQuestionsList } from "@root/questions";
@ -18,6 +18,7 @@ export default function DropDown({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const variants = listQuestions[quizId][totalIndex].content.variants;
const SSHC = (data: string) => {
@ -38,7 +39,7 @@ export default function DropDown({ totalIndex }: Props) {
return (
<>
<Box sx={{ padding: "20px" }}>
<Box sx={{ padding: isMobile ? "15px 20px 20px 20px" : "20px 20px 20px 20px " }}>
{variants.length === 0 ? (
<Typography
sx={{
@ -63,24 +64,24 @@ export default function DropDown({ totalIndex }: Props) {
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
{isMobile ? null : (
<>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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 { Box, Typography } from "@mui/material";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
@ -15,15 +15,23 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<>
<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%" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки ответов
</Typography>
<Box sx={{ padding: isMobile ? "20px 20px 0px 20px" : "20px 20px 20px 20px", width: "100%" }}>
<Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
<CustomCheckbox
label={"Можно несколько"}
checked={listQuestions[quizId][totalIndex].content.multi}
@ -36,23 +44,22 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
})
}
/>
<Typography sx={{ marginBottom: "15px" }}>
Текст в выпадающем списке
</Typography>
<CustomTextField
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 sx={{ display: isMobile ? "none" : "block" }}>
<Typography sx={{ marginBottom: "15px" }}>Текст в выпадающем списке</Typography>
<CustomTextField
sx={{ maxWidth: "360px" }}
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>
<Box sx={{ padding: "20px", width: "100%" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки вопросов
</Typography>
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
<CustomCheckbox
label={"Необязательный вопрос"}
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
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
@ -78,8 +85,23 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
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>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

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

@ -1,5 +1,5 @@
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 ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji";
@ -16,6 +16,7 @@ export default function Emoji({ totalIndex }: Props) {
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => {
setSwitchState(data);
@ -39,8 +40,7 @@ export default function Emoji({ totalIndex }: Props) {
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
onClick={() => {
const answerNew =
listQuestions[quizId][totalIndex].content.variants.slice();
const answerNew = listQuestions[quizId][totalIndex].content.variants.slice();
answerNew.push({ answer: "", hints: "" });
updateQuestionsList(quizId, totalIndex, {
@ -53,24 +53,24 @@ export default function Emoji({ totalIndex }: Props) {
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
{isMobile ? null : (
<>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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 { Box, Typography } from "@mui/material";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -12,9 +12,12 @@ type SettingEmojiProps = {
export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки ответов</Typography>
<CustomCheckbox
@ -36,7 +39,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
}}
/>
</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>
<CustomCheckbox
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 AddImage from "../../../assets/icons/questionsPage/addImage";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
@ -16,6 +16,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => {
setSwitchState(data);
};
@ -24,53 +26,48 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<>
<Box sx={{ padding: "20px" }}>
<Box sx={{ paddingBottom: "25px" }}>
{listQuestions[quizId][totalIndex].content.variants.map(
(_, index) => (
<ButtonBase
component="label"
{listQuestions[quizId][totalIndex].content.variants.map((_, index) => (
<ButtonBase
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={{
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
marginBottom: "15px",
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
<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={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</ButtonBase>
)
)}
Добавьте ответ
</Typography>
</ButtonBase>
))}
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
@ -86,24 +83,24 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
{isMobile ? null : (
<>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box>
</Box>
<ButtonsOptionsAndPict
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} 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 { Box, Typography } from "@mui/material";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -10,21 +10,25 @@ type SettingOptionsAndPictProps = {
totalIndex: number;
};
export default function SettingOptionsAndPict({
totalIndex,
}: SettingOptionsAndPictProps) {
export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndPictProps) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(680));
return (
<>
<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%" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки ответов
</Typography>
<Box sx={{ padding: "20px", width: isMobile ? "85%" : "100%" }}>
<Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
<CustomCheckbox
label={'Вариант "свой ответ"'}
checked={listQuestions[quizId][totalIndex].content.own}
@ -37,10 +41,9 @@ export default function SettingOptionsAndPict({
});
}}
/>
<Typography sx={{ marginBottom: "15px" }}>
Текст-заглушка на картинке
</Typography>
<Typography sx={{ marginBottom: "15px" }}>Текст-заглушка на картинке</Typography>
<CustomTextField
sx={{ maxWidth: "330px", width: "100%" }}
placeholder={"Пример текста"}
text={listQuestions[quizId][totalIndex].content.replText}
onChange={({ target }) => {
@ -53,10 +56,13 @@ export default function SettingOptionsAndPict({
}}
/>
</Box>
<Box sx={{ padding: "20px", width: "100%" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки вопросов
</Typography>
<Box
sx={{
padding: isWrappColumn ? "0px 20px 20px 20px" : "20px 20px 20px 20px",
width: isWrappColumn ? "auto" : "100%",
}}
>
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
<CustomCheckbox
label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required}
@ -83,7 +89,7 @@ export default function SettingOptionsAndPict({
},
});
}}
/>{" "}
/>
<InfoIcon />
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import { useState } from "react";
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 CustomTextField from "@ui_kit/CustomTextField";
import AddImage from "../../../assets/icons/questionsPage/addImage";
@ -9,6 +9,8 @@ import SwitchPageOptions from "./switchPageOptions";
import { questionStore, updateQuestionsList } from "@root/questions";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { UploadVideoModal } from "../UploadVideoModal";
import { AddPlusImage } from "@icons/questionsPage/addPlusImage";
import { AddPlusVideo } from "@icons/questionsPage/addPlusVideo";
type Props = {
disableInput?: boolean;
@ -22,6 +24,8 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(780));
const SSHC = (data: string) => {
setSwitchState(data);
@ -31,7 +35,7 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
<>
<Box
sx={{
width: "100%",
width: isTablet ? "auto" : "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
@ -50,7 +54,9 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
}}
/>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Box
sx={{ display: "flex", alignItems: "center", gap: "12px", justifyContent: isMobile ? "space-between" : null }}
>
<Box
onClick={() => setOpenImageModal(true)}
sx={{
@ -60,9 +66,11 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
gap: "10px",
}}
>
<AddImage />
{isMobile ? <AddPlusImage /> : <AddImage />}
<Typography
sx={{
display: isMobile ? "none" : "block",
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.96px",
@ -95,9 +103,11 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
gap: "10px",
}}
>
<AddVideofile />
{isMobile ? <AddPlusVideo /> : <AddVideofile />}
<Typography
sx={{
display: isMobile ? "none" : "block",
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.96px",
@ -119,11 +129,7 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
/>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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 ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import {
questionStore,
createQuestion,
updateQuestionsList,
} from "@root/questions";
import { questionStore, createQuestion, updateQuestionsList } from "@root/questions";
import { DraggableList } from "./DraggableList";
export default function QuestionsPage() {
@ -30,9 +26,11 @@ export default function QuestionsPage() {
};
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.up(1000));
return (
<>
{/*<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />*/}
{/* <Stepper activeStep={activeStep} desc={"Задайте вопросы"} /> */}
<Box
sx={{
maxWidth: "796px",
@ -74,15 +72,13 @@ export default function QuestionsPage() {
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px" }}>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px" }}
>
<Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}>
<ArrowLeft />
</Button>
<Button
variant="contained"
sx={{
height: "44px",
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,

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

@ -1,6 +1,6 @@
import { useState } from "react";
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 RatingStar from "../../../assets/icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating";
@ -16,6 +16,7 @@ export default function RatingOptions({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => {
setSwitchState(data);
@ -25,7 +26,7 @@ export default function RatingOptions({ totalIndex }: Props) {
<>
<Box
sx={{
width: "100%",
width: isMobile ? "auto" : "100%",
maxWidth: "310px",
display: "flex",
padding: "20px",
@ -100,9 +101,7 @@ export default function RatingOptions({ totalIndex }: Props) {
</Box>
{listQuestions[quizId][totalIndex].content.ratingExpanded &&
(listQuestions[quizId][totalIndex].content.ratingDescription ? (
<Typography>
{listQuestions[quizId][totalIndex].content.ratingDescription}
</Typography>
<Typography>{listQuestions[quizId][totalIndex].content.ratingDescription}</Typography>
) : (
<CustomTextField
placeholder={"Описание"}
@ -130,11 +129,7 @@ export default function RatingOptions({ totalIndex }: Props) {
/>
))}
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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 { 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 CustomTextField from "@ui_kit/CustomTextField";
@ -26,6 +26,8 @@ type ButtonRatingFrom = {
export default function SettingSlider({ totalIndex }: SettingSliderProps) {
const quizId = Number(useParams().quizId);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const { listQuestions } = questionStore();
const buttonRatingForm: ButtonRatingFrom[] = [
@ -42,11 +44,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
];
return (
<Box sx={{ display: "flex" }}>
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box sx={{ padding: "20px" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки рейтинга
</Typography>
<Typography sx={{ marginBottom: "15px" }}>Настройки рейтинга</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
@ -72,10 +72,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
listQuestions[quizId][totalIndex].content.form === name
? theme.palette.brightPurple.main
: "transparent",
color:
listQuestions[quizId][totalIndex].content.form === name
? "#ffffff"
: theme.palette.grey3.main,
color: listQuestions[quizId][totalIndex].content.form === name ? "#ffffff" : theme.palette.grey3.main,
width: "40px",
height: "40px",
borderRadius: "4px",

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

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

2
src/pages/Questions/SwitchQuestionsPage.tsx
View File

@ -21,7 +21,7 @@ interface Props {
export default function SwitchQuestionsPage({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const switchState = listQuestions[quizId][totalIndex].type;
switch (switchState) {
case "variant":

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

@ -7,6 +7,7 @@ import {
Select,
SelectChangeEvent,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
@ -34,6 +35,7 @@ export default function UploadFile({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(980));
const SSHC = (data: string) => {
setSwitchState(data);
@ -46,9 +48,7 @@ export default function UploadFile({ totalIndex }: Props) {
};
useEffect(() => {
const isTypeSetted = DESIGN_TYPES.find(
({ value }) => value === listQuestions[quizId][totalIndex].content.type
);
const isTypeSetted = DESIGN_TYPES.find(({ value }) => value === listQuestions[quizId][totalIndex].content.type);
if (!isTypeSetted) {
const clonContent = listQuestions[quizId][totalIndex].content;
@ -61,7 +61,7 @@ export default function UploadFile({ totalIndex }: Props) {
<>
<Box
sx={{
width: "100%",
width: isTablet ? "auto" : "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
@ -159,11 +159,7 @@ export default function UploadFile({ totalIndex }: Props) {
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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 { 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 SwitchAnswerOptions from "./switchAnswerOptions";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import { questionStore, updateQuestionsList } from "@root/questions";
// Импортируем интерфейс Varian
interface Props {
totalIndex: number;
}
@ -19,13 +17,14 @@ export default function AnswerOptions({ totalIndex }: Props) {
const { listQuestions } = questionStore();
const variants = listQuestions[quizId][totalIndex].content.variants;
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const SSHC = (data: string) => {
setSwitchState(data);
};
const addNewAnswer = () => {
const answerNew = variants.slice(); // Create a shallow copy of the array
const answerNew = variants.slice();
answerNew.push({ answer: "", hints: "" });
updateQuestionsList(quizId, totalIndex, {
@ -71,24 +70,24 @@ export default function AnswerOptions({ totalIndex }: Props) {
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
{isMobile ? null : (
<>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</>
)}
</Box>
</Box>
<ButtonsOptionsAndPict
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} 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 { Box, Typography } from "@mui/material";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import CustomTextField from "@ui_kit/CustomTextField";
@ -12,12 +12,16 @@ interface Props {
export default function ResponseSettings({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(900));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isTablet ? "column" : "none",
marginRight: "30px",
}}
>
@ -81,7 +85,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
/>
<InfoIcon />
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (

305
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 React from "react";
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 NavMenuItem from "@ui_kit/Header/NavMenuItem";
import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "@ui_kit/Header/Avatar";
import Sidebar from "@ui_kit/Sidebar";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import { quizStore } from "@root/quizes";
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 {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
const params = Number(useParams().quizId);
const activeStep = listQuizes[params].step
const theme = useTheme();
const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1})
}
const handleBack = () => {
let result = listQuizes[params].step - 1;
updateQuizesList(params, { step: result ? result : 1 });
};
const handleBack = () => {
let result = listQuizes[params].step - 1
updateQuizesList(params, {step: result ? result : 1})
};
return (
<>
{/*хедер*/}
<Container
component="nav"
maxWidth={false}
disableGutters
sx={{
px: "16px",
display: "flex",
height: "80px",
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={{
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="Заявки" />
<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'
return (
<>
{/*хедер*/}
<Container
component="nav"
maxWidth={false}
disableGutters
sx={{
px: "16px",
display: "flex",
height: "80px",
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={{
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>
{isTablet ? (
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<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/>
<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>
<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",
}}
>
<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>
</>
);
}

104
src/ui_kit/CustomCheckbox.tsx
View File

@ -3,69 +3,65 @@ import React from "react";
import type { SxProps } from "@mui/material";
interface Props {
label: string;
handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
checked?: boolean;
sx?: SxProps;
label: string;
handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
checked?: boolean;
sx?: SxProps;
}
export default function CustomCheckbox({ label, handleChange, checked, sx}: Props) {
const theme = useTheme();
export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
const theme = useTheme();
return (
<FormControlLabel
control={
<Checkbox
icon={<Icon />}
checkedIcon={<CheckedIcon />}
onChange={handleChange}
checked={checked}
/>}
label={label}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
userSelect: "none",
...sx,
}}
/>
);
return (
<FormControlLabel
control={<Checkbox icon={<Icon />} checkedIcon={<CheckedIcon />} onChange={handleChange} checked={checked} />}
label={label}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
userSelect: "none",
...sx,
}}
/>
);
}
function Icon() {
const theme = useTheme();
const theme = useTheme();
return (
<Box sx={{
height: "26px",
width: "26px",
borderRadius: "8px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`,
}} />
);
return (
<Box
sx={{
height: "26px",
width: "26px",
borderRadius: "8px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`,
}}
/>
);
}
function CheckedIcon() {
const theme = useTheme();
const theme = useTheme();
return (
<Box sx={{
height: "26px",
width: "26px",
borderRadius: "8px",
display: "flex",
justifyContent: "center",
alignItems: "center",
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>
</Box>
);
}
return (
<Box
sx={{
height: "26px",
width: "26px",
borderRadius: "8px",
display: "flex",
justifyContent: "center",
alignItems: "center",
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>
</Box>
);
}

243
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 EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import { quizStore } from "@root/quizes";
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 {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
const params = Number(useParams().quizId);
const theme = useTheme();
const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1})
}
const handleBack = () => {
let result = listQuizes[params].step - 1;
updateQuizesList(params, { step: result ? result : 0 });
};
const handleBack = () => {
let result = listQuizes[params].step - 1
updateQuizesList(params, {step: result ? result : 0})
};
return (
<Container
component="nav"
maxWidth={false}
disableGutters
return (
<Container
component="nav"
maxWidth={false}
disableGutters
sx={{
px: "16px",
display: "flex",
height: "80px",
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={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
zIndex: theme.zIndex.drawer + 1,
width: "270px",
"& .MuiInputBase-root": {
height: "34px",
borderRadius: "8px",
p: 0,
},
}}
>
<PenaLogo width={124} />
<Box
sx={{
display: "flex",
alignItems: "center",
ml: "37px",
}}
inputProps={{
sx: {
height: "20px",
borderRadius: "8px",
fontSize: "16px",
lineHeight: "20px",
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()}
>
<BackArrowIcon />
</IconButton>
<FormControl
fullWidth
variant="standard"
>
<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",
}}
Предпросмотр
</Button>
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
}}
>
<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>
);
}
Опубликовать
</Button>
<CustomAvatar
sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
/>
</Box>
</>
)}
</Container>
);
}

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

100
src/ui_kit/Stepper.tsx
View File

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

55
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 Steptwo from "../pages/startPage/steptwo";
import StartPageSettings from "../pages/startPage/StartPageSettings";
import QuestionsPage from "../pages/Questions/QuestionsPage";
import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
import {Result} from "../pages/Result/Result";
import {Setting} from "../pages/Result/Setting";
import { Result } from "../pages/Result/Result";
import { Setting } from "../pages/Result/Setting";
interface Props {
activeStep: number,
handleNext: () => void
activeStep: number;
handleNext: () => void;
}
export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
switch (activeStep) {
case 1:
return (<StepOne handleNext={handleNext}/>);
case 2:
return (<Steptwo handleNext={handleNext}/>);
case 3:
return (<StartPageSettings handleNext={handleNext}/>);
case 4:
return (<QuestionsPage/>);
case 5:
return (<Result/>);
case 6:
return (<Setting/>);
case 7:
return (<ContactFormPage/>);
case 8:
return (<InstallQuiz/>);
default:
return (<></>)
}
}
export default function SwitchStepPages({ activeStep = 1, handleNext }: Props) {
switch (activeStep) {
case 1:
return <StepOne handleNext={handleNext} />;
case 2:
return <Steptwo handleNext={handleNext} />;
case 3:
return <StartPageSettings handleNext={handleNext} />;
case 4:
return <QuestionsPage />;
case 5:
return <Result />;
case 6:
return <Setting />;
case 7:
return <ContactFormPage />;
case 8:
return <InstallQuiz />;
default:
return <></>;
}
}