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

feat: questions store hint

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-24 14:09:47 +03:00
parent a7778a3120
commit 6ea8bdb1a9
23 changed files with 857 additions and 685 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,56 +1,70 @@
import {Box, Typography, useTheme} from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData"; import SwitchData from "./switchData";
import React, {useState} from "react"; import React, { useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import SelectableButton from "@ui_kit/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
type dataType = "calendar" | "mask"; type dataType = "calendar" | "mask";
interface Props{ interface Props {
totalIndex: number totalIndex: number;
} }
export default function DataOptions({totalIndex}: Props) { export default function DataOptions({ totalIndex }: Props) {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
const [dataType, setDataType] = useState<dataType>("calendar"); const [dataType, setDataType] = useState<dataType>("calendar");
return ( return (
<> <>
<Box <Box
sx={{ sx={{
width: '100%', width: "100%",
maxWidth: '640px', maxWidth: "640px",
display: 'flex', display: "flex",
padding: '20px', padding: "20px",
flexDirection: 'column', flexDirection: "column",
gap: '20px'}} gap: "20px",
> }}
>
<Box sx={{gap: '10px', display: 'flex'}}> <Box sx={{ gap: "10px", display: "flex" }}>
<SelectableButton isSelected={dataType === "calendar"} onClick={() => setDataType("calendar")}> <SelectableButton
Использовать календарь isSelected={dataType === "calendar"}
</SelectableButton> onClick={() => setDataType("calendar")}
<SelectableButton isSelected={dataType === "mask"} onClick={() => setDataType("mask")}> >
Использовать маску Использовать календарь
</SelectableButton> </SelectableButton>
</Box> <SelectableButton
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}> isSelected={dataType === "mask"}
<Typography sx={{ onClick={() => setDataType("mask")}
fontWeight: 400, >
fontSize: '16px', Использовать маску
lineHeight: '18.96px', </SelectableButton>
color: theme.palette.grey2.main </Box>
}}>Пользователю будет предложено выбрать дату</Typography> <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<InfoIcon/> <Typography
</Box> sx={{
</Box> fontWeight: 400,
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/> fontSize: "16px",
<SwitchData switchState={switchState}/> lineHeight: "18.96px",
</> color: theme.palette.grey2.main,
) }}
} >
Пользователю будет предложено выбрать дату
</Typography>
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchData switchState={switchState} totalIndex={totalIndex} />
</>
);
}

40
src/pages/Questions/DataOptions/switchData.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingData from "./settingData"; import SettingData from "./settingData";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchData({switchState = 'setting' }: Props) { export default function SwitchData({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingData/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingData />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,60 +1,65 @@
import {Box, Typography, Link, useTheme} from "@mui/material"; import { Box, Typography, Link, useTheme } from "@mui/material";
import React from "react"; import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchDropDown from "./switchDropDown"; import SwitchDropDown from "./switchDropDown";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
interface Props { interface Props {
totalIndex: number totalIndex: number;
} }
export default function DropDown({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
export default function DropDown({totalIndex}: Props) { const SSHC = (data: string) => {
const theme = useTheme(); setSwitchState(data);
const [switchState, setSwitchState] = React.useState('setting'); };
const SSHC = (data: string) => { return (
setSwitchState(data) <>
} <Box sx={{ padding: "20px" }}>
<Typography
return ( sx={{
<> padding: "0 0 33px 80px",
<Box sx={{ padding: '20px'}}> fontWeight: 400,
<Typography fontSize: "18px",
sx={{ lineHeight: "21.33px",
padding: '0 0 33px 80px', color: theme.palette.grey2.main,
fontWeight: 400, }}
fontSize: '18px', >
lineHeight: '21.33px', Добавьте ответ
color: theme.palette.grey2.main </Typography>
}} <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
> <Link
Добавьте ответ component="button"
</Typography> variant="body2"
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}> sx={{ color: theme.palette.brightPurple.main }}
<Link // onClick={() => {
component="button" // console.info("I'm a button.");
variant="body2" // }}
sx={{color: theme.palette.brightPurple.main}} >
// onClick={() => { Добавьте ответ
// console.info("I'm a button."); </Link>
// }} <Typography
> sx={{
Добавьте ответ fontWeight: 400,
</Link> fontSize: "18px",
<Typography lineHeight: "21.33px",
sx={{ color: theme.palette.grey2.main,
fontWeight: 400, }}
fontSize: '18px', >
lineHeight: '21.33px', или нажмите Enter
color: theme.palette.grey2.main </Typography>
}} <EnterIcon />
>или нажмите Enter</Typography> </Box>
<EnterIcon/> </Box>
</Box> <ButtonsOptions
</Box> switchState={switchState}
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/> SSHC={SSHC}
<SwitchDropDown switchState={switchState}/> totalIndex={totalIndex}
</> />
) <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
} </>
);
}

40
src/pages/Questions/DropDown/switchDropDown.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingDropDown from "./settingDropDown"; import SettingDropDown from "./settingDropDown";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchDropDown({switchState = 'setting' }: Props) { export default function SwitchDropDown({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingDropDown/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingDropDown />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,61 +1,68 @@
import {Box, Link, Typography, useTheme} from "@mui/material"; import { Box, Link, Typography, useTheme } from "@mui/material";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji"; import SwitchEmoji from "./switchEmoji";
import React from "react"; import React from "react";
import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
interface Props{ interface Props {
totalIndex: number totalIndex: number;
}
export default function Emoji({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box sx={{ padding: "20px" }}>
<Box
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<AddEmoji />
<Typography
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<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}
/>
<SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
</>
);
} }
export default function Emoji({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box sx={{ padding: '20px'}}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
<AddEmoji/>
<Typography
sx={{
padding: '0 0 0 20px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
<Link
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main}}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<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}/>
<SwitchEmoji switchState={switchState}/>
</>
)
}

40
src/pages/Questions/Emoji/switchEmoji.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingEmoji from "./settingEmoji"; import SettingEmoji from "./settingEmoji";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchEmoji({switchState = 'setting' }: Props) { export default function SwitchEmoji({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingEmoji/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingEmoji />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -18,7 +18,9 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "20px" }}>
<Box sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}> <Box
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<AddImage /> <AddImage />
<Typography <Typography
sx={{ sx={{
@ -56,8 +58,12 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<EnterIcon /> <EnterIcon />
</Box> </Box>
</Box> </Box>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} /> <ButtonsOptionsAndPict
<SwitchOptionsAndPict switchState={switchState} /> switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
</> </>
); );
} }

46
src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx
View File

@ -1,30 +1,32 @@
import * as React from 'react'; import * as React from "react";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
import SettingOptionsAndPict from "./SettingOptionsAndPict"; import SettingOptionsAndPict from "./SettingOptionsAndPict";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import UploadImage from "../UploadImage"; import UploadImage from "../UploadImage";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchOptionsAndPict({switchState = 'setting' }: Props) { export default function SwitchOptionsAndPict({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingOptionsAndPict/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingOptionsAndPict />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
case 'image': return <BranchingQuestions />;
return (<UploadImage/>); break;
break; case "image":
default: return <UploadImage />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,71 +1,82 @@
import {Box, Link, Typography, useTheme} from "@mui/material"; import { Box, Link, Typography, useTheme } from "@mui/material";
import React from "react"; import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import AddImage from "../../../assets/icons/questionsPage/addImage"; import AddImage from "../../../assets/icons/questionsPage/addImage";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptionsPict from "./switchOptionsPict"; import SwitchAnswerOptionsPict from "./switchOptionsPict";
interface Props { interface Props {
totalIndex: number totalIndex: number;
} }
export default function OptionsPicture({totalIndex}: Props) { export default function OptionsPicture({ totalIndex }: Props) {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState("setting");
// const [addInput, setAddInput] = React.useState([ // const [addInput, setAddInput] = React.useState([
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]}; // 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
// ]); // ]);
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
// const createCondition = (name) => { // const createCondition = (name) => {
// addInput([...state, {name: name}]) // addInput([...state, {name: name}])
// } // }
// //
// const deleteCondition = (index) => { // const deleteCondition = (index) => {
// //
// } // }
return ( return (
<> <>
<Box sx={{ padding: '20px'}}> <Box sx={{ padding: "20px" }}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}> <Box
<AddImage/> sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
<Typography >
sx={{ <AddImage />
padding: '0 0 0 20px', <Typography
fontWeight: 400, sx={{
fontSize: '18px', padding: "0 0 0 20px",
lineHeight: '21.33px', fontWeight: 400,
color: theme.palette.grey2.main fontSize: "18px",
}} lineHeight: "21.33px",
> color: theme.palette.grey2.main,
Добавьте ответ }}
</Typography> >
</Box> Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}> <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link <Link
component="button" component="button"
variant="body2" variant="body2"
sx={{color: theme.palette.brightPurple.main}} sx={{ color: theme.palette.brightPurple.main }}
// onClick={() => { // onClick={() => {
// console.info("I'm a button."); // console.info("I'm a button.");
// }} // }}
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
<Typography <Typography
sx={{ sx={{
fontWeight: 400, fontWeight: 400,
fontSize: '18px', fontSize: "18px",
lineHeight: '21.33px', lineHeight: "21.33px",
color: theme.palette.grey2.main color: theme.palette.grey2.main,
}} }}
>или нажмите Enter</Typography> >
<EnterIcon/> или нажмите Enter
</Box> </Typography>
</Box> <EnterIcon />
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/> </Box>
<SwitchAnswerOptionsPict switchState={switchState}/> </Box>
</> <ButtonsOptions
) switchState={switchState}
} SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptionsPict
switchState={switchState}
totalIndex={totalIndex}
/>
</>
);
}

40
src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
import SettingOpytionsPict from "./settingOpytionsPict"; import SettingOpytionsPict from "./settingOpytionsPict";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchAnswerOptionsPict({switchState = 'setting' }: Props) { export default function SwitchAnswerOptionsPict({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingOpytionsPict/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingOpytionsPict />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,4 +1,4 @@
import {Box, Typography, useTheme} from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField"; import SwitchTextField from "./switchTextField";
import React from "react"; import React from "react";
@ -6,38 +6,47 @@ import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
interface Props { interface Props {
totalIndex: number totalIndex: number;
}
export default function OwnTextField({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box
sx={{
width: "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<CustomTextField placeholder={"Пример ответа"} text={""} />
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography
sx={{
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.96px",
color: theme.palette.grey2.main,
}}
>
Пользователю будет дано поле для ввода значения{" "}
</Typography>
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchTextField switchState={switchState} totalIndex={totalIndex} />
</>
);
} }
export default function OwnTextField({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<CustomTextField placeholder={"Пример ответа"} text={''}/>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователю будет дано поле для ввода значения </Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchTextField switchState={switchState}/>
</>
)
}

40
src/pages/Questions/OwnTextField/switchTextField.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingTextField from "./settingTextField"; import SettingTextField from "./settingTextField";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchTextField({switchState = 'setting' }: Props) { export default function SwitchTextField({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingTextField/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingTextField />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -59,8 +59,12 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} /> <ButtonsOptions
<SwitchPageOptions switchState={switchState} /> switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
</> </>
); );
} }

38
src/pages/Questions/PageOptions/switchPageOptions.tsx
View File

@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingPageOptions from "./SettingPageOptions"; import SettingPageOptions from "./SettingPageOptions";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchPageOptions({switchState = 'setting' }: Props) { export default function SwitchPageOptions({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingPageOptions/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingPageOptions />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,47 +1,76 @@
import {Box, Typography, useTheme} from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import React from "react"; import React from "react";
import Rating from '@mui/material/Rating'; import Rating from "@mui/material/Rating";
import RatingStar from "../../../assets/icons/questionsPage/ratingStar"; import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating"; import SwitchRating from "./switchRating";
interface Props{ interface Props {
totalIndex: number totalIndex: number;
} }
export default function RatingOptions({totalIndex}: Props) { export default function RatingOptions({ totalIndex }: Props) {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
return ( return (
<> <>
<Box <Box
sx={{ sx={{
width: '100%', width: "100%",
maxWidth: '310px', maxWidth: "310px",
display: 'flex', display: "flex",
padding: '20px', padding: "20px",
flexDirection: 'column', flexDirection: "column",
gap: '20px'}} gap: "20px",
> }}
<Rating >
name="customized-color" <Rating
defaultValue={2} name="customized-color"
getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`} defaultValue={2}
precision={1} getLabelText={(value: number) =>
icon={<RatingStar color={theme.palette.brightPurple.main}/>} `${value} Heart${value !== 1 ? "s" : ""}`
emptyIcon={<RatingStar color={"#9A9AAF"}/>} }
sx={{display: 'flex', gap: '15px'}} precision={1}
/> icon={<RatingStar color={theme.palette.brightPurple.main} />}
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}> emptyIcon={<RatingStar color={"#9A9AAF"} />}
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Негативно</Typography> sx={{ display: "flex", gap: "15px" }}
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Позитивно</Typography> />
</Box> <Box
</Box> sx={{
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/> display: "flex",
<SwitchRating switchState={switchState}/> alignItems: "center",
</> justifyContent: "space-between",
) }}
} >
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
fontWeight: 400,
}}
>
Негативно
</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
fontWeight: 400,
}}
>
Позитивно
</Typography>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchRating switchState={switchState} totalIndex={totalIndex} />
</>
);
}

38
src/pages/Questions/RatingOptions/switchRating.tsx
View File

@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingRating from "./settingRating"; import SettingRating from "./settingRating";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchRating({switchState = 'setting' }: Props) { export default function SwitchRating({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingRating/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingRating />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,54 +1,63 @@
import {Box, Typography, useTheme} from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import React from "react"; import React from "react";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import SwitchSlider from "./switchSlider"; import SwitchSlider from "./switchSlider";
interface Props{ interface Props {
totalIndex: number totalIndex: number;
} }
export default function SliderOptions({totalIndex}: Props) { export default function SliderOptions({ totalIndex }: Props) {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
return ( return (
<> <>
<Box <Box
sx={{ sx={{
width: '100%', width: "100%",
maxWidth: '640px', maxWidth: "640px",
display: 'flex', display: "flex",
padding: '20px', padding: "20px",
flexDirection: 'column', flexDirection: "column",
gap: '20px'}} gap: "20px",
> }}
>
<Box sx={{gap: '10px', display: 'flex', flexDirection: 'column'}}> <Box sx={{ gap: "10px", display: "flex", flexDirection: "column" }}>
<Typography>Выбор значения из диапазона</Typography> <Typography>Выбор значения из диапазона</Typography>
<Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}> <Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
<CustomTextField placeholder={'0'} text={''}/> <CustomTextField placeholder={"0"} text={""} />
<Typography>—</Typography> <Typography>—</Typography>
<CustomTextField placeholder={'100'} text={''}/> <CustomTextField placeholder={"100"} text={""} />
</Box> </Box>
</Box> </Box>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}> <Box
<Box> sx={{
<Typography>Начальное значение</Typography> display: "flex",
<CustomTextField placeholder={'50'} text={''}/> alignItems: "center",
</Box> justifyContent: "space-between",
<Box> }}
<Typography>Шаг</Typography> >
<CustomTextField placeholder={'1'} text={''}/> <Box>
</Box> <Typography>Начальное значение</Typography>
<CustomTextField placeholder={"50"} text={""} />
</Box> </Box>
</Box> <Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/> <Typography>Шаг</Typography>
<SwitchSlider switchState={switchState}/> <CustomTextField placeholder={"1"} text={""} />
</> </Box>
) </Box>
} </Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchSlider switchState={switchState} totalIndex={totalIndex} />
</>
);
}

40
src/pages/Questions/SliderOptions/switchSlider.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
import SettingSlider from "./settingSlider"; import SettingSlider from "./settingSlider";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchSlider({switchState = 'setting' }: Props) { export default function SwitchSlider({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingSlider/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingSlider />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -1,133 +1,149 @@
import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material"; import {
Box,
FormControl,
MenuItem,
Select,
SelectChangeEvent,
Typography,
useTheme,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import React, {useState} from "react"; import React, { useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import ArrowDown from "../../../assets/icons/ArrowDownIcon"; import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import SwitchUpload from "./switchUpload"; import SwitchUpload from "./switchUpload";
interface Props{ interface Props {
totalIndex: number totalIndex: number;
} }
export default function UploadFile({totalIndex}: Props) { export default function UploadFile({ totalIndex }: Props) {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
const designTypes = [ const designTypes = [
["Все типы файлов"], ["Все типы файлов"],
["Изображения"], ["Изображения"],
["Видео"], ["Видео"],
["Аудио"], ["Аудио"],
["Документ"] ["Документ"],
] ];
const [designType, setDesignType] = useState(designTypes[0][0]); const [designType, setDesignType] = useState(designTypes[0][0]);
const handleChange = (event: SelectChangeEvent) => { const handleChange = (event: SelectChangeEvent) => {
setDesignType(event.target.value); setDesignType(event.target.value);
} };
return ( return (
<> <>
<Box <Box
sx={{ sx={{
width: '100%', width: "100%",
maxWidth: '640px', maxWidth: "640px",
display: 'flex', display: "flex",
padding: '20px', padding: "20px",
flexDirection: 'column', flexDirection: "column",
gap: '20px'}} gap: "20px",
}}
>
<Box sx={{ gap: "10px", display: "flex" }}>
<FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
}}
>
<Select
id="category-select"
variant="outlined"
value={designType}
displayEmpty
onChange={handleChange}
sx={{
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
},
}}
IconComponent={(props) => <ArrowDown {...props} />}
> >
{designTypes.map((type) => (
<Box sx={{gap: '10px', display: 'flex'}}> <MenuItem
<FormControl key={type[0]}
fullWidth value={type[0]}
size="small" sx={{
sx={{ display: "flex",
width: "100%", alignItems: "center",
minWidth: "200px", gap: "20px",
height: "48px", p: "4px",
}} borderRadius: "5px",
> color: theme.palette.grey2.main,
<Select }}
id="category-select" >
variant="outlined" {type[0]}
value={designType} </MenuItem>
displayEmpty ))}
onChange={handleChange} </Select>
sx={{ </FormControl>
height: "48px", </Box>
borderRadius: "8px", <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
"& .MuiOutlinedInput-notchedOutline": { <Typography
border: `1px solid ${theme.palette.brightPurple.main} !important`, sx={{
}, fontWeight: 400,
}} fontSize: "16px",
MenuProps={{ lineHeight: "18.96px",
PaperProps: { color: theme.palette.grey2.main,
sx: { }}
mt: "8px", >
p: "4px", Пользователь может загрузить любой собственный файл
borderRadius: "8px", </Typography>
border: "1px solid #EEE4FC", <InfoIcon />
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", </Box>
}, </Box>
}, <ButtonsOptions
MenuListProps: { switchState={switchState}
sx: { SSHC={SSHC}
py: 0, totalIndex={totalIndex}
display: "flex", />
flexDirection: "column", <SwitchUpload switchState={switchState} totalIndex={totalIndex} />
gap: "8px", </>
"& .Mui-selected": { );
backgroundColor: theme.palette.background.default, }
color: theme.palette.brightPurple.main,
}
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
}
}}
IconComponent={props => <ArrowDown {...props} />}
>
{designTypes.map(type =>
<MenuItem
key={type[0]}
value={type[0]}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{type[0]}
</MenuItem>
)}
</Select>
</FormControl>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователь может загрузить любой собственный файл</Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchUpload switchState={switchState}/>
</>
)
}

40
src/pages/Questions/UploadFile/switchUpload.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react'; import * as React from "react";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import SettingsUpload from "./settingUpload"; import SettingsUpload from "./settingUpload";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number;
} }
export default function SwitchUpload({switchState = 'setting' }: Props) { export default function SwitchUpload({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<SettingsUpload/>); switch (switchState) {
break; case "setting":
case 'help': return <SettingsUpload />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
default: return <BranchingQuestions />;
return (<></>) break;
} default:
} return <></>;
}
}

47
src/pages/Questions/answerOptions/switchAnswerOptions.tsx
View File

@ -1,31 +1,32 @@
import * as React from 'react'; import * as React from "react";
import UploadImage from "../UploadImage"; import UploadImage from "../UploadImage";
import HelpQuestions from "../helpQuestions"; import HelpQuestions from "../helpQuestions";
import ResponseSettings from "./responseSettings"; import ResponseSettings from "./responseSettings";
import BranchingQuestions from "../branchingQuestions"; import BranchingQuestions from "../branchingQuestions";
interface Props { interface Props {
switchState: string, switchState: string;
totalIndex: number, totalIndex: number;
} }
export default function SwitchAnswerOptions({switchState = 'setting', totalIndex }: Props) { export default function SwitchAnswerOptions({
switchState = "setting",
switch (switchState) { totalIndex,
case 'setting': }: Props) {
return (<ResponseSettings totalIndex={totalIndex}/>); switch (switchState) {
break; case "setting":
case 'help': return <ResponseSettings totalIndex={totalIndex} />;
return (<HelpQuestions/>); break;
break case "help":
case 'branching': return <HelpQuestions totalIndex={totalIndex} />;
return (<BranchingQuestions/>); break;
break; case "branching":
case 'image': return <BranchingQuestions />;
return (<UploadImage/>); break;
break; case "image":
default: return <UploadImage />;
return (<></>) break;
} default:
} return <></>;
}
}

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

@ -12,16 +12,21 @@ import CustomTextField from "@ui_kit/CustomTextField";
import { useState } from "react"; import { useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon"; import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "@ui_kit/UploadBox"; import UploadBox from "@ui_kit/UploadBox";
import { questionStore, updateQuestionsList } from "@root/questions";
import type { DragEvent } from "react"; import type { DragEvent } from "react";
type BackgroundType = "text" | "video"; type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo"; type BackgroundTypeModal = "linkVideo" | "ownVideo";
export default function HelpQuestions() { type HelpQuestionsProps = {
totalIndex: number;
};
export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [video, setVideo] = useState("");
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text"); const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const { listQuestions } = questionStore();
const [backgroundTypeModal, setBackgroundTypeModal] = const [backgroundTypeModal, setBackgroundTypeModal] =
useState<BackgroundTypeModal>("linkVideo"); useState<BackgroundTypeModal>("linkVideo");
const theme = useTheme(); const theme = useTheme();
@ -31,8 +36,10 @@ export default function HelpQuestions() {
const videoHC = (fileList: FileList | null) => { const videoHC = (fileList: FileList | null) => {
if (fileList?.length) { if (fileList?.length) {
const file = fileList[0]; const clonContent = listQuestions[totalIndex].content;
setVideo(URL.createObjectURL(file)); clonContent.hint.video = URL.createObjectURL(fileList[0]);
clonContent.hint.videoUrl = "";
updateQuestionsList(totalIndex, { content: clonContent });
handleClose(); handleClose();
} }
}; };
@ -77,7 +84,15 @@ export default function HelpQuestions() {
</Box> </Box>
{backgroundType === "text" ? ( {backgroundType === "text" ? (
<> <>
<CustomTextField placeholder={"Текст консультанта"} text={""} /> <CustomTextField
placeholder={"Текст консультанта"}
text={listQuestions[totalIndex].content.hint.text}
onChange={({ target }) => {
let clonContent = listQuestions[totalIndex].content;
clonContent.hint.text = target.value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
</> </>
) : ( ) : (
<Box> <Box>
@ -88,8 +103,16 @@ export default function HelpQuestions() {
onClick={handleOpen} onClick={handleOpen}
sx={{ justifyContent: "flex-start" }} sx={{ justifyContent: "flex-start" }}
> >
{video ? ( {listQuestions[totalIndex].content.hint.videoUrl ||
<video src={video} width="400" controls /> listQuestions[totalIndex].content.hint.video ? (
<video
src={
listQuestions[totalIndex].content.hint.videoUrl ||
listQuestions[totalIndex].content.hint.video
}
width="400"
controls
/>
) : ( ) : (
<> <>
<UploadBox <UploadBox
@ -158,7 +181,13 @@ export default function HelpQuestions() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder={"http://example.com"} placeholder={"http://example.com"}
text={""} text={listQuestions[totalIndex].content.hint.videoUrl}
onChange={({ target }) => {
let clonContent = listQuestions[totalIndex].content;
clonContent.hint.videoUrl = target.value;
clonContent.hint.video = "";
updateQuestionsList(totalIndex, { content: clonContent });
}}
/> />
</Box> </Box>
) : ( ) : (

12
src/stores/questions.ts
View File

@ -7,6 +7,12 @@ export type Variants = {
hints: string; hints: string;
}; };
type Hint = {
text: string;
video: string;
videoUrl: string;
};
export interface Question { export interface Question {
id: number; id: number;
title: string; title: string;
@ -17,6 +23,7 @@ export interface Question {
page: number; page: number;
content: { content: {
variants: Variants[]; variants: Variants[];
hint: Hint;
large: boolean; large: boolean;
multi: boolean; multi: boolean;
own: boolean; own: boolean;
@ -85,6 +92,11 @@ export const createQuestion = (id: number) => {
hints: "", hints: "",
}, },
], ],
hint: {
text: "",
video: "",
videoUrl: "",
},
large: false, large: false,
multi: false, multi: false,
own: false, own: false,