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

Типы вопросов эмоджи, в-ы, в-ы с кртнкми, в-ы и кртинк выводят новые правила

Browse Source
This commit is contained in:
Nastya 2024-09-07 22:57:11 +03:00
parent f301308c74
commit 19b80694cb
28 changed files with 315 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,10 +7,10 @@ import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon";
interface Props {
switchState: string;
SSHC: (data: string) => void;
setSwitchState: (data: string) => void;
}
export default function ButtonSettingForms({ SSHC, switchState }: Props) {
export default function ButtonSettingForms({ setSwitchState, switchState }: Props) {
const theme = useTheme();
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
{
@ -68,7 +68,7 @@ export default function ButtonSettingForms({ SSHC, switchState }: Props) {
<MiniButtonSetting
key={i}
onClick={() => {
SSHC(e.value);
setSwitchState(e.value);
}}
sx={{
backgroundColor:

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

@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions";
import SwitchDropDown from "./switchDropDown";
import type { QuizQuestionSelect } from "@frontend/squzanswerer";
@ -100,7 +100,7 @@ export default function DropDown({ question, openBranchingPage, setOpenBranching
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}

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

@ -6,7 +6,7 @@ import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import type { QuizQuestionEmoji } from "@frontend/squzanswerer";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions";
import EmojiAnswerItem from "./EmojiAnswerItem/EmojiAnswerItem";
import SwitchEmoji from "./switchEmoji";
@ -115,7 +115,7 @@ export default function Emoji({ question, openBranchingPage, setOpenBranchingPag
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}

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

@ -3,21 +3,31 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { memo } from "react";
import CustomTextField from "@ui_kit/CustomTextField";
type SettingEmojiProps = {
questionId: string;
isRequired: boolean;
isMulti: boolean;
isOwn: boolean;
isLargeCheck?: boolean;
};
const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, isRequired, isMulti, isOwn }) {
const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, ownPlaceholder, isRequired, isLargeCheck, isMulti, isOwn }) {
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isTablet = useMediaQuery(theme.breakpoints.down(985));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setOwnPlaceholder = (replText: string) => {
updateQuestion(questionId, (question) => {
if (question.type !== "varimg") return;
question.content.ownPlaceholder = replText;
});
};
return (
<Box
sx={{
@ -29,7 +39,7 @@ const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, isRequired,
pt: isTablet ? "5px" : "0px",
}}
>
{/* <Box
<Box
sx={{
boxSizing: "border-box",
pt: "20px",
@ -50,6 +60,17 @@ const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, isRequired,
>
Настройки ответов
</Typography>
<CustomCheckbox
dataCy="checkbox-long-text-answer"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Многострочный ответ"}
checked={isLargeCheck}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
question.content.largeCheck = target.checked;
});
}}
/>
<CustomCheckbox
dataCy="checkbox-multiple-answers"
sx={{ mr: isMobile ? "0px" : "16px" }}
@ -72,7 +93,31 @@ const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, isRequired,
});
}}
/>
</Box> */}
<Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
mb: "14px",
}}
>
Подсказка "своего ответа"
</Typography>
<CustomTextField
sx={{
maxWidth: "330px",
width: "100%",
mr: isMobile ? "0px" : "16px",
}}
maxLength={60}
placeholder={"мой ответ: три"}
value={ownPlaceholder}
onChange={({ target }) => setOwnPlaceholder(target.value)}
/>
</Box>
</Box>
<Box
sx={{
pt: "20px",

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

@ -16,6 +16,8 @@ export default function SwitchEmoji({ switchState = "setting", question }: Props
isRequired={question.content.required}
isOwn={question.content.own}
isMulti={question.content.multi}
isLargeCheck={question.content.isLargeCheck}
ownPlaceholder={question.content.ownPlaceholder}
/>
);
case "help":

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

@ -5,7 +5,7 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { useEffect, useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "@frontend/squzanswerer";
import ButtonsOptionsAndPict from "../QuestionOptions/ButtonsOptions/ButtonsOptionsAndPict";
import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions";
import SwitchTextField from "./switchTextField";
interface Props {
@ -90,9 +90,9 @@ export default function OwnTextField({ question, openBranchingPage, setOpenBranc
)}
</Box>
</Box>
<ButtonsOptionsAndPict
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionHasParent={question.content.rule.parentId?.length !== 0}

109
src/pages/Questions/QuestionOptions/ButtonsOptions/ButtonsOptionsAndPict.tsx → src/pages/Questions/QuestionOptions/ButtonsLayout/ButtonsOptions.tsx
View File

@ -30,17 +30,19 @@ import { DeleteBranchingQuestionModal } from "./DeleteBranchingQuestionModal";
interface Props {
switchState: string;
SSHC: (data: string) => void;
setSwitchState: (data: string) => void;
openBranchingPage: boolean;
setOpenBranchingPage: (a: boolean) => void;
questionId: string;
questionType: QuestionType;
questionContentId: string;
questionHasParent: boolean;
}
};
const ButtonsOptionsAndPict = memo<Props>(function ({
SSHC,
const IgnoreImage = ["images", "emoji", "number", "date", "select", "text", "file", "rating"]
const ButtonsOptions = memo<Props>(function ({
setSwitchState,
switchState,
openBranchingPage,
setOpenBranchingPage,
@ -49,17 +51,17 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
questionContentId,
questionHasParent,
}) {
const theme = useTheme();
const quiz = useCurrentQuiz();
const isQuestionFirst = useQuestionsStore((state) => state.questions[0]?.id === questionId,);
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIgnoreImage = !IgnoreImage.includes(questionType)
const [buttonHover, setButtonHover] = useState<string>("");
const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState<boolean>(false);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
const quiz = useCurrentQuiz();
const [openDelete, setOpenDelete] = useState<boolean>(false);
const isQuestionFirst = useQuestionsStore(
(state) => state.questions[0]?.id === questionId,
);
if (!quiz) return null;
@ -74,7 +76,6 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
height: isMobile ? "92px" : "70px",
}}
>
ButtonsOptionsAndPict
<Box
sx={{
padding: isMobile ? " 3px 12px 11px" : "20px",
@ -88,7 +89,7 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
onMouseEnter={() => setButtonHover("setting")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
SSHC("setting");
switchState === "setting" ? setSwitchState("") : setSwitchState("setting");
}}
sx={{
maxWidth: "104px",
@ -156,38 +157,40 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
{isIconMobile ? null : "Ветвление"}
</MiniButtonSetting>
)}
<MiniButtonSetting
onMouseEnter={() => setButtonHover("image")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
SSHC("image");
}}
sx={{
height: "30px",
maxWidth: "123px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor:
switchState === "image"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": {
color: switchState === "image" ? theme.palette.grey3.main : null,
},
}}
>
<ImgIcon
color={
buttonHover === "image"
? theme.palette.grey3.main
: switchState === "image"
? "#ffffff"
: theme.palette.grey3.main
}
/>
{isIconMobile ? null : "Изображение"}
</MiniButtonSetting>
{isIgnoreImage &&
<MiniButtonSetting
onMouseEnter={() => setButtonHover("image")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
switchState === "image" ? setSwitchState("") : setSwitchState("image");
}}
sx={{
height: "30px",
maxWidth: "123px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor:
switchState === "image"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": {
color: switchState === "image" ? theme.palette.grey3.main : null,
},
}}
>
<ImgIcon
color={
buttonHover === "image"
? theme.palette.grey3.main
: switchState === "image"
? "#ffffff"
: theme.palette.grey3.main
}
/>
{isIconMobile ? null : "Изображение"}
</MiniButtonSetting>
}
</Box>
<Box
sx={{
@ -220,12 +223,12 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
)}
<DeleteBranchingQuestionModal
open={openDelete}
onclose={() => setOpenDelete(false)}
questionId={questionId}
/>
</Box>
<DeleteBranchingQuestionModal
open={openDelete}
onclose={() => setOpenDelete(false)}
questionId={questionId}
/>
<ReallyChangingModal
opened={openedReallyChangingModal}
onClose={() => setOpenedReallyChangingModal(false)}
@ -234,6 +237,4 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
);
});
ButtonsOptionsAndPict.displayName = "ButtonsOptionsAndPict";
export default ButtonsOptionsAndPict;
export default ButtonsOptions;

0
src/pages/Questions/QuestionOptions/ButtonsOptions/DeleteBranchingQuestionModal.tsx → src/pages/Questions/QuestionOptions/ButtonsLayout/DeleteBranchingQuestionModal.tsx
View File

8
src/pages/Questions/QuestionOptions/ButtonsOptions/ButtonsOptions.tsx → src/pages/Questions/QuestionOptions/ButtonsLayout/lalala.tsx
View File

@ -17,7 +17,7 @@ import { DeleteBranchingQuestionModal } from "./DeleteBranchingQuestionModal";
interface Props {
switchState: string;
SSHC: (data: string) => void;
setSwitchState: (data: string) => void;
questionId: string;
questionContentId: string;
questionType: QuestionType;
@ -26,8 +26,8 @@ interface Props {
sx?: SxProps;
}
const ButtonsOptions = memo<Props>(function ({
SSHC,
const lalalalala = memo<Props>(function ({
setSwitchState,
switchState,
questionId,
questionContentId,
@ -120,7 +120,7 @@ const ButtonsOptions = memo<Props>(function ({
<MiniButtonSetting
key={title}
onClick={() => {
SSHC(value);
setSwitchState(value);
myFunc();
}}
sx={{

54
src/pages/Questions/QuestionOptions/ButtonsOptions/SwitchButtonsForQuestionTypes.tsx
View File

@ -1,54 +0,0 @@
//Передаём сюда тип вопроса и получаем нужный набор
const KIT = {
variant: {
settings: ["required"],
branch: true,
image: true,
},
images: {
settings: [],
branch: true,
image: true,
},
varimg: {
settings: [],
branch: true,
image: true,
},
emoji: {
settings: [],
branch: true,
image: true,
},
text: {
settings: [],
branch: true,
image: true,
},
select: {
settings: [],
branch: true,
image: true,
},
date: {
settings: [],
branch: true,
image: true,
},
number: {
settings: [],
branch: true,
image: true,
},
file: {
settings: [],
branch: true,
image: false,
},
rating: {
settings: [],
branch: true,
image: true,
},
}

10
src/pages/Questions/QuestionOptions/DataOptions/DataOptions.tsx → src/pages/Questions/QuestionOptions/DateOptions/DateOptions.tsx
View File

@ -1,8 +1,8 @@
import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react";
import InfoIcon from "@/assets/icons/InfoIcon";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import SwitchData from "./switchData";
import ButtonsOptions from "../ButtonsLayout/ButtonsOptions";
import SwitchDate from "./switchDate";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { QuizQuestionDate } from "@frontend/squzanswerer";
@ -12,7 +12,7 @@ interface Props {
setOpenBranchingPage: (a: boolean) => void;
}
export default function DataOptions({ question, openBranchingPage, setOpenBranchingPage }: Props) {
export default function DateOptions({ question, openBranchingPage, setOpenBranchingPage }: Props) {
const [switchState, setSwitchState] = useState("setting");
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
@ -64,14 +64,14 @@ export default function DataOptions({ question, openBranchingPage, setOpenBranch
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}
questionHasParent={question.content.rule.parentId?.length !== 0}
setOpenBranchingPage={setOpenBranchingPage}
/>
<SwitchData
<SwitchDate
switchState={switchState}
question={question}
/>

0
src/pages/Questions/QuestionOptions/DataOptions/settingData.tsx → src/pages/Questions/QuestionOptions/DateOptions/settingDate.tsx
View File

4
src/pages/Questions/QuestionOptions/DataOptions/switchData.tsx → src/pages/Questions/QuestionOptions/DateOptions/switchDate.tsx
View File

@ -1,6 +1,6 @@
import { QuizQuestionDate } from "@frontend/squzanswerer";
import HelpQuestions from "../../helpQuestions";
import SettingData from "./settingData";
import SettingDate from "./settingDate";
interface Props {
switchState: string;
@ -11,7 +11,7 @@ export default function SwitchData({ switchState = "setting", question }: Props)
switch (switchState) {
case "setting":
return (
<SettingData
<SettingDate
questionId={question.id}
isRequired={question.content.required}
isDateRange={question.content.dateRange}

6
src/pages/Questions/QuestionOptions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -8,7 +8,7 @@ import type { QuizQuestionVarImg } from "@frontend/squzanswerer";
import { useDisclosure } from "@/utils/useDisclosure";
import { AnswerDraggableList } from "../../AnswerDraggableList";
import ImageEditAnswerItem from "../../AnswerDraggableList/ImageEditAnswerItem";
import ButtonsOptionsAndPict from "../ButtonsOptions/ButtonsOptionsAndPict";
import ButtonsOptions from "../ButtonsLayout/ButtonsOptions";
import { UploadImageModal } from "../../UploadImage/UploadImageModal";
import SwitchOptionsAndPict from "./switchOptionsAndPict";
@ -152,9 +152,9 @@ export default function OptionsAndPicture({ question, setOpenBranchingPage }: Pr
)}
</Box>
</Box>
<ButtonsOptionsAndPict
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionHasParent={question.content.rule.parentId?.length !== 0}

82
src/pages/Questions/QuestionOptions/OptionsAndPicture/SettingOptionsAndPict.tsx
View File

@ -9,10 +9,13 @@ type SettingOptionsAndPictProps = {
questionId: string;
replText: string;
isRequired: boolean;
isLargeCheck: boolean;
isOwn: boolean;
ownPlaceholder?: boolean;
isMulti?: boolean;
};
const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({ questionId, replText, isRequired, isOwn }) {
const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({ questionId, ownPlaceholder, isMulti, isLargeCheck, replText, isRequired, isOwn }) {
const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
@ -26,6 +29,13 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({ quest
question.content.replText = replText;
});
};
const setOwnPlaceholder = (replText: string) => {
updateQuestion(questionId, (question) => {
if (question.type !== "varimg") return;
question.content.ownPlaceholder = replText;
});
};
return (
<>
@ -49,7 +59,7 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({ quest
width: "100%",
}}
>
{/* <Typography
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
@ -58,18 +68,64 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({ quest
}}
>
Настройки ответов
</Typography> */}
{/* <CustomCheckbox
dataCy="checkbox-own-answer"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={'Вариант "свой ответ"'}
checked={isOwn}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
question.content.own = target.checked;
});
</Typography>
<CustomCheckbox
dataCy="checkbox-long-text-answer"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Многострочный ответ"}
checked={isLargeCheck}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
question.content.largeCheck = target.checked;
});
}}
/>
<CustomCheckbox
dataCy="checkbox-multiple-answers"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Можно несколько"}
checked={isMulti}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
question.content.multi = target.checked;
});
}}
/>
<CustomCheckbox
dataCy="checkbox-own-answer"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={'Вариант "свой ответ"'}
checked={isOwn}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
question.content.own = target.checked;
});
}}
/>
<Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
mb: "14px",
}}
/> */}
>
Подсказка "своего ответа"
</Typography>
<CustomTextField
sx={{
maxWidth: "330px",
width: "100%",
mr: isMobile ? "0px" : "16px",
}}
maxLength={60}
placeholder={"мой ответ: три"}
value={ownPlaceholder}
onChange={({ target }) => setOwnPlaceholder(target.value)}
/>
</Box>
{!isWrappColumn && (
<Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
<Typography

3
src/pages/Questions/QuestionOptions/OptionsAndPicture/switchOptionsAndPict.tsx
View File

@ -9,6 +9,7 @@ interface Props {
}
export default function SwitchOptionsAndPict({ switchState = "setting", question }: Props) {
console.log(question)
switch (switchState) {
case "setting":
return (
@ -17,6 +18,8 @@ export default function SwitchOptionsAndPict({ switchState = "setting", question
replText={question.content.replText}
isRequired={question.content.required}
isOwn={question.content.own}
isLargeCheck={question.content.largeCheck}
isMulti={question.content.multi}
/>
);
case "help":

4
src/pages/Questions/QuestionOptions/OptionsPicture/OptionsPicture.tsx
View File

@ -9,7 +9,7 @@ import { useAddAnswer } from "@/utils/hooks/useAddAnswer";
import { useDisclosure } from "@/utils/useDisclosure";
import { AnswerDraggableList } from "../../AnswerDraggableList";
import ImageEditAnswerItem from "../../AnswerDraggableList/ImageEditAnswerItem";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import ButtonsOptions from "../ButtonsLayout/ButtonsOptions";
import { UploadImageModal } from "../../UploadImage/UploadImageModal";
import SwitchAnswerOptionsPict from "./switchOptionsPict";
@ -137,7 +137,7 @@ export default function OptionsPicture({ question, openBranchingPage, setOpenBra
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}

60
src/pages/Questions/QuestionOptions/OptionsPicture/settingOpytionsPict.tsx → src/pages/Questions/QuestionOptions/OptionsPicture/settingOptionsPict.tsx
View File

@ -8,6 +8,7 @@ import FormatIcon2 from "@/assets/icons/questionsPage/FormatIcon2";
import ProportionsIcon11 from "@/assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "@/assets/icons/questionsPage/ProportionsIcon12";
import ProportionsIcon21 from "@/assets/icons/questionsPage/ProportionsIcon21";
import CustomTextField from "@ui_kit/CustomTextField";
type Proportion = "1:1" | "1:2" | "2:1";
@ -34,19 +35,21 @@ const FORMATS: FormatItem[] = [
{ value: "masonry", icon: FormatIcon1 },
];
type SettingOpytionsPictProps = {
type SettingOptionsPictProps = {
questionId: string;
isRequired: boolean;
isMulti: boolean;
isOwn: boolean;
proportions: Proportion;
format: Format;
ownPlaceholder?: boolean;
isLargeCheck?: boolean;
};
const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
const SettingOptionsPict = memo<SettingOptionsPictProps>(function ({
questionId,
isRequired,
isMulti,
ownPlaceholder, isMulti, isLargeCheck,
isOwn,
proportions,
format,
@ -55,6 +58,14 @@ const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
const isTablet = useMediaQuery(theme.breakpoints.down(985));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const setOwnPlaceholder = (replText: string) => {
updateQuestion(questionId, (question) => {
if (question.type !== "varimg") return;
question.content.ownPlaceholder = replText;
});
};
return (
<Box
@ -68,8 +79,8 @@ const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
pt: isTablet ? "5px" : "0px",
}}
>
{/* <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
<Box
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
{/* <Box
sx={{
boxSizing: "border-box",
pt: "20px",
@ -110,7 +121,7 @@ const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
/>
))}
</Box>
</Box>
</Box> */}
<Box
sx={{
boxSizing: "border-box",
@ -132,6 +143,17 @@ const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
>
Настройки ответов
</Typography>
<CustomCheckbox
dataCy="checkbox-long-text-answer"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Многострочный ответ"}
checked={isLargeCheck}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
question.content.largeCheck = target.checked;
});
}}
/>
<CustomCheckbox
dataCy="checkbox-multiple-answers"
sx={{ mr: isMobile ? "0px" : "16px" }}
@ -154,8 +176,32 @@ const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
});
}}
/>
<Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
mb: "14px",
}}
>
Подсказка "своего ответа"
</Typography>
<CustomTextField
sx={{
maxWidth: "330px",
width: "100%",
mr: isMobile ? "0px" : "16px",
}}
maxLength={60}
placeholder={"мой ответ: три"}
value={ownPlaceholder}
onChange={({ target }) => setOwnPlaceholder(target.value)}
/>
</Box>
</Box>
</Box> */}
</Box>
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
{/* <Box
sx={{

7
src/pages/Questions/QuestionOptions/OptionsPicture/switchOptionsPict.tsx
View File

@ -1,6 +1,6 @@
import { QuizQuestionImages } from "@frontend/squzanswerer";
import HelpQuestions from "../../helpQuestions";
import SettingOpytionsPict from "./settingOpytionsPict";
import SettingOptionsPict from "./settingOptionsPict";
interface Props {
switchState: string;
@ -11,13 +11,16 @@ export default function SwitchAnswerOptionsPict({ switchState = "setting", quest
switch (switchState) {
case "setting":
return (
<SettingOpytionsPict
<SettingOptionsPict
questionId={question.id}
isRequired={question.content.required}
isMulti={question.content.multi}
isOwn={question.content.own}
proportions={question.content.xy}
format={question.content.format}
ownPlaceholder={question.content.ownPlaceholder}
isLargeCheck={question.content.isLargeCheck}
/>
);
case "help":

4
src/pages/Questions/QuestionOptions/RatingOptions/RatingOptions.tsx
View File

@ -9,7 +9,7 @@ import LightbulbIcon from "@/assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "@/assets/icons/questionsPage/likeIcon";
import TropfyIcon from "@/assets/icons/questionsPage/tropfyIcon";
import type { QuizQuestionRating } from "@frontend/squzanswerer";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import ButtonsOptions from "../ButtonsLayout/ButtonsOptions";
import SwitchRating from "./switchRating";
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
@ -289,7 +289,7 @@ export default function RatingOptions({ question, openBranchingPage, setOpenBran
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}

4
src/pages/Questions/QuestionOptions/SliderOptions/SliderOptions.tsx
View File

@ -4,7 +4,7 @@ import { useDebouncedCallback } from "use-debounce";
import CustomNumberField from "@ui_kit/CustomNumberField";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import ButtonsOptions from "../ButtonsLayout/ButtonsOptions";
import SwitchSlider from "./switchSlider";
import { updateQuestion } from "@root/questions/actions";
@ -209,7 +209,7 @@ export default function SliderOptions({ question, openBranchingPage, setOpenBran
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}

6
src/pages/Questions/QuestionOptions/answerOptions/AnswerOptions.tsx
View File

@ -5,7 +5,7 @@ import type { QuizQuestionVariant } from "@frontend/squzanswerer";
import { useAddAnswer } from "@/utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../../AnswerDraggableList";
import AnswerItem from "../../AnswerDraggableList/AnswerItem";
import ButtonsOptionsAndPict from "../ButtonsOptions/ButtonsOptionsAndPict";
import ButtonsOptions from "../ButtonsLayout/ButtonsOptions";
import SwitchAnswerOptions from "./switchAnswerOptions";
interface Props {
@ -100,9 +100,9 @@ export default function AnswerOptions({ question, openBranchingPage, setOpenBran
)}
</Box>
</Box>
<ButtonsOptionsAndPict
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionHasParent={question.content.rule.parentId?.length !== 0}

41
src/pages/Questions/QuestionOptions/answerOptions/responseSettings.tsx
View File

@ -3,6 +3,7 @@ import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import type { QuizQuestionVariant } from "@frontend/squzanswerer";
import { memo } from "react";
import CustomTextField from "@ui_kit/CustomTextField";
interface Props {
questionId: string;
@ -10,13 +11,21 @@ interface Props {
isLargeCheck: boolean;
isMulti: boolean;
isOwn: boolean;
ownPlaceholder?: string;
}
const ResponseSettings = memo<Props>(function ({ questionId, isRequired, isLargeCheck, isMulti, isOwn }) {
const ResponseSettings = memo<Props>(function ({ questionId, ownPlaceholder, isRequired, isLargeCheck, isMulti, isOwn }) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(900));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setOwnPlaceholder = (replText: string) => {
updateQuestion(questionId, (question) => {
if (question.type !== "varimg") return;
question.content.ownPlaceholder = replText;
});
};
return (
<Box
@ -30,7 +39,7 @@ const ResponseSettings = memo<Props>(function ({ questionId, isRequired, isLarge
pt: isTablet ? "5px" : "0px",
}}
>
{/* <Box
<Box
sx={{
boxSizing: "border-box",
pt: "20px",
@ -54,7 +63,7 @@ const ResponseSettings = memo<Props>(function ({ questionId, isRequired, isLarge
<CustomCheckbox
dataCy="checkbox-long-text-answer"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Длинный текстовый ответ"}
label={"Многострочный ответ"}
checked={isLargeCheck}
handleChange={({ target }) => {
updateQuestion<QuizQuestionVariant>(questionId, (question) => {
@ -84,7 +93,31 @@ const ResponseSettings = memo<Props>(function ({ questionId, isRequired, isLarge
});
}}
/>
</Box> */}
<Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
mb: "14px",
}}
>
Подсказка "своего ответа"
</Typography>
<CustomTextField
sx={{
maxWidth: "330px",
width: "100%",
mr: isMobile ? "0px" : "16px",
}}
maxLength={60}
placeholder={"мой ответ: три"}
value={ownPlaceholder}
onChange={({ target }) => setOwnPlaceholder(target.value)}
/>
</Box>
</Box>
<Box
sx={{
boxSizing: "border-box",

1
src/pages/Questions/QuestionOptions/answerOptions/switchAnswerOptions.tsx
View File

@ -18,6 +18,7 @@ export default function SwitchAnswerOptions({ switchState = "setting", question
isLargeCheck={question.content.largeCheck}
isMulti={question.content.multi}
isOwn={question.content.own}
isOwnPlaceholder={question.content.ownPlaceholder}
/>
);
case "help":

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

@ -1,4 +1,4 @@
import DataOptions from "./QuestionOptions/DataOptions/DataOptions";
import DateOptions from "./QuestionOptions/DateOptions/DateOptions";
import DropDown from "./DropDown/DropDown";
import Emoji from "./Emoji/Emoji";
import OptionsAndPicture from "./QuestionOptions/OptionsAndPicture/OptionsAndPicture";
@ -76,7 +76,7 @@ export default function SwitchQuestionsPage({ question, openBranchingPage, setOp
case "date":
return (
<DataOptions
<DateOptions
question={question}
openBranchingPage={openBranchingPage}
setOpenBranchingPage={setOpenBranchingPage}

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

@ -13,7 +13,7 @@ import { updateQuestion } from "@root/questions/actions";
import { useEffect, useState } from "react";
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import InfoIcon from "../../../assets/icons/InfoIcon";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions";
import SwitchUpload from "./switchUpload";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { QuizQuestionFile, UploadFileType } from "@frontend/squzanswerer";
@ -187,7 +187,7 @@ export default function UploadFile({ question, openBranchingPage, setOpenBranchi
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
setSwitchState={setSwitchState}
questionId={question.id}
questionContentId={question.content.id}
questionType={question.type}

6
src/pages/ResultPage/DescriptionForm/ButtinsOptionsForm.tsx
View File

@ -10,10 +10,10 @@ import StarIconPoints from "./StarIconsPoints";
interface Props {
switchState: string;
SSHC: (data: string) => void;
setSwitchState: (data: string) => void;
}
export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
export default function ButtonsOptionsForm({ setSwitchState, switchState }: Props) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(800));
@ -74,7 +74,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
<MiniButtonSetting
key={index}
onClick={() => {
SSHC(value);
setSwitchState(value);
}}
sx={{
backgroundColor:

4
src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx
View File

@ -24,7 +24,7 @@ export const DescriptionForm = () => {
setPriceButtonsType(type);
};
const SSHC = (data: string) => {
const setSwitchState = (data: string) => {
setSwitchState(data);
};
@ -188,7 +188,7 @@ export const DescriptionForm = () => {
</Button>
)}
</Box>
<ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
<ButtonsOptionsForm switchState={switchState} setSwitchState={setSwitchState} />
<SwitchResult switchState={switchState} totalIndex={0} />
</Box>
);