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

Merge branch 'dev' into 'main'

Browse Source 
chore: Restrict image uploads to JPG and PNG formats

See merge request frontend/squiz!76
This commit is contained in:
Nastya 2023-12-16 12:52:32 +00:00
commit b657ab4ac4
50 changed files with 3402 additions and 2677 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
cypress/e2e/image/Bunner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

296
cypress/e2e/quizPublish.cy.ts Normal file
View File

@ -0,0 +1,296 @@
import "cypress-file-upload";
describe("Форма Входа", () => {
beforeEach(() => {
cy.visit("http://localhost:3000");
cy.wait(1000);
cy.contains("Регистрация / Войти").click();
const login = "valid_user@exammple.com";
const password = "valid_password";
cy.get("#email").type(login);
cy.get("#password").type(password);
cy.get('button[type="submit"]').click();
});
it("Тестирование создания, публикации и удаления опросника с проверкой обязательных вопросов", () => {
cy.get('[data-cy="create-quiz"]').click();
cy.wait(1000);
cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
cy.wait(1000);
cy.get('button[data-cy="select-quiz-layout-standard"]').click();
cy.get('input[type="checkbox"]').click();
cy.get('[data-cy="setup-questions"]').click();
cy.contains("button", "Варианты с картинками").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.contains("div", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Варианты ответов +
cy.contains("button", "Варианты ответов").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.contains("label", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Варианты и картинка +
cy.contains("button", "Варианты и картинка").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.contains("div", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Эмоджи +
cy.contains("button", "Эмоджи").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.contains("div", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Своё поле для ввода +
cy.contains("button", "Своё поле для ввода").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('input[placeholder="Пример ответа"]').eq(0).type("1").type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get('input[type="text"]').type("email@invalid.com");
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Выпадающий список +
cy.contains("button", "Выпадающий список").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#display-select").click();
cy.get("li").eq(0).click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Дата +
cy.contains("button", "Дата").click();
cy.contains("label", "Необязательный вопрос").click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get('button[data-cy="open-datepicker"]').click();
cy.wait(500);
cy.get('button[role="gridcell"]').eq(16).click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Ползунок +
cy.contains("button", "Ползунок").click();
cy.contains("label", "Необязательный вопрос").click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get('input[aria-invalid="false"][id=":r0:"][placeholder="0"]').type("10");
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Загрузка файла +
cy.contains("button", "Загрузка файла").click();
cy.contains("label", "Необязательный вопрос").click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get('label.MuiButtonBase-root input[type="file"]').attachFile("./image/Bunner.png");
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Рейтинг
cy.contains("button", "Рейтинг").click();
cy.contains("label", "Необязательный вопрос").click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.contains("label", "4 Stars").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Удаления Квиза
cy.visit("http://localhost:3000/list");
cy.wait(500);
cy.get('[data-cy="delete-quiz"]').each(($button) => {
cy.wrap($button).click();
cy.wait(500);
cy.contains("button", "Удалить").click();
});
});
});

3
package.json
View File

@ -21,6 +21,7 @@
"@types/react-dnd": "^3.0.2",
"@types/react-dom": "^18.0.0",
"axios": "^1.5.1",
"cypress-file-upload": "^5.0.8",
"cytoscape": "^3.26.0",
"cytoscape-popper": "^2.0.0",
"dayjs": "^1.11.10",
@ -78,6 +79,6 @@
"@types/react-beautiful-dnd": "^13.1.4",
"@types/react-cytoscapejs": "^1.2.4",
"craco-alias": "^3.0.1",
"cypress": "^13.4.0"
"cypress": "^13.6.1"
}
}

27
src/assets/icons/ArrowLeftSP.tsx Normal file
View File

@ -0,0 +1,27 @@
import {Box, SxProps, Theme, useTheme} from "@mui/material";
interface Props {
right: boolean
}
export default function ArrowLeftSP({right} : Props) {
const theme = useTheme();
return (
<Box
sx={{
height: "14px",
width: "19px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transform: right ? "rotate(180deg)" : undefined
}}
>
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z" fill={theme.palette.brightPurple.main}/>
</svg>
</Box>
);
}

42
src/assets/icons/CropIcon.tsx
View File

@ -1,40 +1,10 @@
import { FC, SVGProps } from "react";
export const CropIcon: FC = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M6 6H2.25"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 2.25V18H21.75"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 15V6H9"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 21.75V18"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);

2
src/model/questionTypes/shared.ts
View File

@ -96,6 +96,8 @@ export type AnyTypedQuizQuestion =
| QuizQuestionRating
| QuizQuestionResult;
type FilterQuestionsWithVariants<T> = T extends {
content: { variants: QuestionVariant[]; };
} ? T : never;

62
src/model/quizSettings.ts
View File

@ -40,7 +40,7 @@ export interface QuizConfig {
theme: string,
reply: string,
replname: string,
}
}
startpage: {
description: string;
button: string;
@ -58,6 +58,16 @@ export interface QuizConfig {
cycle: boolean;
};
};
formContact: {
title: string;
desc: string;
name: FCField;
email: FCField;
phone: FCField;
text: FCField;
address: FCField;
button: string
};
info: {
phonenumber: string;
clickable: boolean;
@ -68,6 +78,14 @@ export interface QuizConfig {
meta: string;
}
type FCField = {
text: string
innerText: string
key: string
required: boolean
used: boolean
}
export const defaultQuizConfig: QuizConfig = {
type: null,
noStartPage: false,
@ -81,7 +99,7 @@ export const defaultQuizConfig: QuizConfig = {
theme: "",
reply: "",
replname: "",
},
},
startpage: {
description: "",
button: "",
@ -106,5 +124,45 @@ export const defaultQuizConfig: QuizConfig = {
site: "",
law: "",
},
formContact: {
title: "",
desc: "",
name: {
text: "",
innerText: "",
key: "",
required: false,
used: true
},
email: {
text: "",
innerText: "",
key: "",
required: false,
used: true
},
phone: {
text: "",
innerText: "",
key: "",
required: false,
used: true
},
text: {
text: "",
innerText: "",
key: "",
required: false,
used: false
},
address: {
text: "",
innerText: "",
key: "",
required: false,
used: false
},
button: ""
},
meta: "",
};

422
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -1,129 +1,122 @@
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme } from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material";
import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import React from "react";
import InfoIcon from "../../assets/icons/InfoIcon";
import Info from "../../assets/icons/Info";
import Trash from "@icons/trash";
import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { decrementCurrentStep } from "@root/quizes/actions";
import ButtonSettingForms from "./ButtonSettingForms";
import DrawerNewField from "./DrawerParent";
import WindowMessengers from "./Massengers/WindowMessengers";
import WindowNewField from "./NewField/WindowNewField";
import SwitchContactForm from "./switchContactForm";
import GearIcon from "@icons/GearIcon";
import { useQuestionsStore } from "@root/questions/store";
import { useCurrentQuiz } from "@root/quizes/hooks";
const buttons = [
{
name: "Имя",
desc: "Дмитрий",
key: "name"
},
{
name: "Email",
desc: "mail@xample.ru",
key: "email"
},
{
name: "Номер",
desc: "+7 900 000 00 00",
key: "phone"
},
{
name: "Фамилия",
desc: "Иванов",
key: "text"
},
{
name: "Адрес",
desc: "Москва, Лаврушинский пер., 10",
key: "address"
},
]
export default function ContactFormPage() {
const [drawerNewField, setDrawerNewField] = React.useState(false);
const theme = useTheme();
const quiz = useCurrentQuiz()
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
const [drawerNewField, setDrawerNewField] = React.useState("");
const [drawerMessenger, setDrawerMessenger] = React.useState(false);
const drawerNewFieldHC = (bool: boolean) => {
setDrawerNewField(bool);
const drawerNewFieldHC = (str: string) => {
setDrawerNewField(str);
};
const drawerMessengerHC = (bool: boolean) => {
setDrawerMessenger(bool);
};
const theme = useTheme();
return (
<>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box
sx={{
p: isTablet ? "0 0 150px 0" : "0"
}}
>
<Box sx={{
display: "flex",
alignItems: "center",
gap: "10px",
m: "67px 0 41px 0",
}}>
<Link
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Как собрать данные посетителя
</Link>{" "}
<InfoIcon />
{/* <Popover>
<Info />
</Popover> */}
</Box>
<ContactFormParent>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
<OneIcon />
<IconButton>
{" "}
<ExpandMoreIcon />{" "}
</IconButton>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px", padding: "10px 20px" }}>
<Typography>Имя*</Typography>
<CustomTextField placeholder="Дмитрий" text={""} />
<Typography>E-mail*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Typography>Телефон*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Button
onClick={() => drawerNewFieldHC(true)}
variant="contained"
sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
>
Добавить поле +
</Button>
<DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}>
<WindowNewField />
</DrawerNewField>
<Link
component="button"
onClick={() => drawerMessengerHC(true)}
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
textAlign: "left",
}}
>
Добавить мессенджеры
</Link>
<DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
<WindowMessengers />
</DrawerNewField>
<Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
Название кнопки
</Button>
</Box>
</ContactFormParent>
<ContactFormParent>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
<OneIcon />
<IconButton>
{" "}
<ExpandMoreIcon />{" "}
</IconButton>
</Box>
<Button variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
Добавить поле +
</Button>
<Box sx={{ display: "flex" }}>
<Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
<InfoIcon />
</Box>
<Link
sx={{
mt: "20px",
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Добавить мессенджеры
</Link>
<Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
Название кнопки
</Button>
</ContactFormParent>
{
!quiz?.config.formContact.name.used &&
!quiz?.config.formContact.email.used &&
!quiz?.config.formContact.phone.used &&
!quiz?.config.formContact.text.used &&
!quiz?.config.formContact.address.used ?
<ContactFormParent>
<EmptyCard drawerNewFieldHC={drawerNewFieldHC} />
</ContactFormParent>
:
<ContactFormParent>
<ButtonsCard drawerNewFieldHC={drawerNewFieldHC} />
</ContactFormParent>
}
<Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
<IconButton>
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px" }}>
<Button variant="outlined">
<Button
onClick={decrementCurrentStep}
variant="outlined">
<ArrowLeft />
</Button>
<Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
@ -131,7 +124,13 @@ export default function ContactFormPage() {
</Button>
</Box>
</Box>
</>
<DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
<WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
</DrawerNewField>
</Box>
);
}
@ -142,10 +141,8 @@ interface Props {
function ContactFormParent({ outerContainerSx: sx, children }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
const quiz = useCurrentQuiz()
return (
<Paper
sx={{
@ -154,23 +151,36 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
borderRadius: "12px",
margin: "20px 0",
display: "flex",
flexDirection: "column",
}}
>
<Box sx={{ width: "100%", display: "flex" }}>
<Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
<Box
sx={{
borderRight: `1px solid ${theme.palette.grey2.main}`,
// borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
maxWidth: "386px",
width: "100%",
padding: "113px 20px 20px 20px",
padding: "100px 20px 20px 20px",
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<CustomTextField placeholder="Заголовок формы" text={""} />
<CustomTextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.title = target.value
})
}}
value={quiz.config.formContact.title}
placeholder="Заголовок формы" text={""} />
<TextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.desc = target.value
})
}}
value={quiz.config.formContact.desc}
id="outlined-multiline-static"
multiline
rows={8}
@ -182,18 +192,216 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
borderRadius: "10px",
alignItems: "start",
color: theme.palette.grey2.main,
color:"black",
},
}}
/>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
{children}
</Box>
</Box>
<Box>
<ButtonSettingForms switchState={switchState} SSHC={SSHC} />
<SwitchContactForm switchState={switchState} />
<Divider sx={{
height: isTablet ? "1px" : "80%",
width: isTablet ? "80%" : "1px",
margin: "auto"
}}
orientation={isTablet ? "horisontal" : "vertical"}
/>
{children}
</Box>
</Paper>
);
}
const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => {
const theme = useTheme();
const quiz = useCurrentQuiz()
return (
<>
<Typography>{quiz.config.formContact[type].text || name}</Typography>
<Box
sx={{ display: "flex", mb: "10px" }}
>
<Typography
sx={{
color: quiz.config.formContact[type].innerText ? "black" : "#9A9AAF",
fontSize: "20px",
backgroundColor: theme.palette.background.default,
height: "48px",
borderRadius: "10px",
border: "1px #9A9AAF solid",
lineHeight: "21px",
p: " 0 25px 0 14px ",
display: "flex",
alignItems: "center",
width: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
position: "relative"
}}
>
{quiz.config.formContact[type].innerText || placeholder}
<IconButton
onClick={() => drawerNewFieldHC(type)}
sx={{
position: "absolute",
right: "0"
}}>
<GearIcon height="20px" width="20px" color="#7e2aea" />
</IconButton>
</Typography>
<IconButton
onClick={() => updateQuiz(quiz?.id, (quiz) => {
quiz.config.formContact[type].used = false
})}
sx={{
width: "48px",
ml: "5px"
}}
>
<Trash />
</IconButton>
</Box>
</>
)
}
const ButtonsCard = ({ drawerNewFieldHC }: any) => {
const theme = useTheme();
const quiz = useCurrentQuiz()
return (
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
{
buttons.map((contentData) => {
const content = quiz?.config.formContact[contentData.key]
return content.used ? <SettingField drawerNewFieldHC={drawerNewFieldHC} key={contentData.key} type={contentData.key} name={content.text || contentData.name} placeholder={content.innerText || contentData.desc} /> : <></>
})
}
{
(
quiz?.config.formContact.name.used &&
quiz?.config.formContact.email.used &&
quiz?.config.formContact.phone.used &&
quiz?.config.formContact.text.used &&
quiz?.config.formContact.address.used
) ?
<></>
:
<Button
onClick={() => drawerNewFieldHC("all")}
variant="contained"
sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
>
Добавить поле +
</Button>
}
<Link
component="button"
// onClick={() => drawerMessengerHC(true)}
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
textAlign: "left",
}}
>
Добавить мессенджеры
</Link>
<PseudoButton />
</Box>
)
}
const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void }) => {
const theme = useTheme();
const [FC, setFC] = React.useState(false)
const openFC = () => setFC(true)
const closeFC = () => setFC(false)
const popover = React.useRef(null);
return (
<Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
<Button
onClick={() => drawerNewFieldHC("all")}
variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
Добавить поле +
</Button>
<Box sx={{ display: "flex" }}>
<Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
<Box ref={popover}>
<Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
</Box>
<Popover
open={FC}
onClose={closeFC}
anchorEl={popover.current}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
disableRestoreFocus
>
<Typography sx={{ m: "20px", textAlign: "center" }}>
Если вам не нужно собирать контакты, <br></br> отключите форму контактов
</Typography>
</Popover>
</Box>
<Link
sx={{
mt: "20px",
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Добавить мессенджеры
</Link>
<PseudoButton />
</Box>
)
}
const PseudoButton = () => {
const quiz = useCurrentQuiz()
return (
<TextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.button = target.value
})
}}
value={quiz.config.formContact.button}
sx={{
heigth: "44px",
width: "190px",
"& .MuiInputBase-root": {
backgroundColor: "#7E2AEA",
borderRadius: "8px",
color: "white",
},
"& .MuiInputBase-input": {
padding: "10px 20px",
textAlign: "center"
},
"& .MuiInputBase-input::placeholder": {
color: "white",
opacity: "1"
}
}}
placeholder="Название кнопки"
>
{quiz?.config.formContact.button || "Название кнопки"}
</TextField>
)
}

10
src/pages/ContactFormPage/DrawerParent.tsx
View File

@ -7,18 +7,18 @@ import {SxProps, Theme} from "@mui/material";
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
isOpen: boolean;
openHC: (arg0: boolean) => void
isOpenDrawer: string;
drawerNewFieldHC: (str: string) => void
}
export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
export default function DrawerNewField({outerContainerSx: sx, children, isOpenDrawer: isOpen, drawerNewFieldHC }: Props) {
return (
<>
<Drawer
anchor='right'
open={isOpen}
onClose={() => openHC(false)}
open={Boolean(isOpen)}
onClose={() => drawerNewFieldHC("")}
>
<Box
sx={{ width: 450 }}

13
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -6,14 +6,19 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
import { useCurrentQuiz } from "@root/quizes/hooks";
interface Props {
switchState: string
SSHC: (data:string) => void
type: string
}
export default function ButtonsNewField ({SSHC, switchState}:Props) {
export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
const theme = useTheme();
const quiz = useCurrentQuiz()
console.log(quiz)
console.log(type)
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
{icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
{icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
@ -31,16 +36,20 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
}}
>
{buttonSetting.map( (e,i) => (
type === e.value || type === "all" ?
<MiniButtonSetting
disabled = {quiz?.config.formContact[e.value]?.used}
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,
color: switchState === e.value && type === "all" ? '#ffffff' : theme.palette.grey3.main,
}}
>
{e.icon}
{e.title}
</MiniButtonSetting>
:
<></>
))}
</Box>
)

111
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
View File

@ -1,9 +1,11 @@
import Box from "@mui/material/Box";
import {FormControl, SxProps, TextField, Theme, Typography} from "@mui/material";
import { FormControl, SxProps, TextField, Theme, Typography } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import Button from "@mui/material/Button";
import * as React from "react";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateQuiz } from "@root/quizes/actions";
interface Props {
outerContainerSx?: SxProps<Theme>;
@ -11,51 +13,88 @@ interface Props {
defaultValue?: string;
placeholderHelp: string;
placeholderField: string;
drawerNewFieldHC:(a:string)=>void
}
export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) {
return(
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
<Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
<Typography>Подсказка</Typography>
<CustomTextField placeholder={placeholderHelp} text={''}/>
export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
const quiz = useCurrentQuiz()
console.log({ defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children })
return (
<Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
<Typography
>Подсказка</Typography>
<CustomTextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].text = target.value
})
}}
value={quiz.config.formContact[defaultValue].text}
placeholder={placeholderHelp} text={''} />
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
<Typography>Подсказка внутри поля</Typography>
<CustomTextField placeholder={placeholderField} text={''}/>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
<Typography
>Подсказка внутри поля</Typography>
<CustomTextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].innerText = target.value
})
}}
value={quiz.config.formContact[defaultValue].innerText}
placeholder={placeholderField} text={''} />
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
<Typography>Ключ</Typography>
<FormControl
fullWidth
variant="standard"
sx={{ p: 0, border: 0 }}
>
<TextField
disabled
id="outlined-disabled"
value={defaultValue}
sx={{
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
border: 'none'
},
"& .MuiInputBase-root": {
height: "48px",
borderRadius: "10px",
backgroundColor: '#EEE4FC',
},
}}
/>
</FormControl>
<CustomCheckbox label={"Обязательно к заполнению"}/>
<TextField
value={quiz.config.formContact[defaultValue].key}
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].key = target.value
})
}}
placeholder="text"
sx={{
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
border: 'none'
},
"& .MuiInputBase-root": {
height: "48px",
borderRadius: "10px",
backgroundColor: '#EEE4FC',
},
}}
/>
<CustomCheckbox
checked={quiz.config.formContact[defaultValue].required}
handleChange={({ target }) => {
console.log("click")
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].required = target.checked
})
}}
label={"Обязательно к заполнению"} />
</Box>
<Box>
{/* <Box>
<Typography>Запрашивать на</Typography>
<CustomCheckbox label={'Шаг 1'}/>
<CustomCheckbox label={'Шаг 2'}/>
</Box>
</Box> */}
{children}
<Button variant='contained' sx={{maxWidth: '125px'}}>Добавить</Button>
<Button
onClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].used = true
})
drawerNewFieldHC("")
}}
variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
</Box>
)
}

18
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
View File

@ -8,27 +8,29 @@ import CustomizedSwitch from "@ui_kit/CustomSwitch";
interface Props {
switchState: string,
drawerNewFieldHC:(a:string)=>void
}
export default function SwitchNewField({switchState ='name'}: Props) {
export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) {
const [SwitchMask, setSwitchMask] = React.useState(false);
console.log(switchState)
const SwitchMaskHC = (bool:boolean) => {
setSwitchMask(bool)
}
switch (switchState) {
case 'name':
return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
break;
case 'email':
return (<NewFieldParent placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
break;
case 'phone':
return (
<NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
<FormControlLabel
<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
{/* <FormControlLabel
value="start"
control={<CustomizedSwitch/>}
label="Маска для телефона"
@ -41,7 +43,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
SwitchMaskHC(!SwitchMask)
}}
/>
/> */}
{SwitchMask ?
<SelectMask/>
@ -52,10 +54,10 @@ export default function SwitchNewField({switchState ='name'}: Props) {
);
break;
case 'text':
return (<NewFieldParent placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
break;
case 'address':
return (<NewFieldParent placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
break;
default:
return (<></>)

28
src/pages/ContactFormPage/NewField/WindowNewField.tsx
View File

@ -1,29 +1,39 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {Typography, useTheme} from "@mui/material";
import { Typography, useTheme } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import ButtonsNewField from "./ButtonsNewField";
import SwitchNewField from "./SwitchNewField";
import { useCurrentQuiz } from '@root/quizes/hooks';
export default function WindowNewField() {
export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) {
const quiz = useCurrentQuiz()
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('name');
const [switchState, setSwitchState] = React.useState("");
React.useEffect(() => {
for (let val in quiz?.config.formContact) {
if (!quiz?.config.formContact[val]?.used && (val !== "title" && val !== "desc" && val !== "button")) {
setSwitchState(val)
return
}
}
}, [])
const SSHC = (data: string) => {
setSwitchState(data)
}
return(
return (
<>
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
<Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
<Typography>Новое поле</Typography>
<Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
<Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
</Box>
<Box><ButtonsNewField switchState={switchState} SSHC={SSHC}/></Box>
<SwitchNewField switchState={switchState}/>
<Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
<SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
</>
)
}

119
src/pages/InstallQuiz/InstallQuiz.tsx
View File

@ -104,10 +104,7 @@ export default function InstallQuiz() {
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<LinkIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
/>
<LinkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
<Typography>Ссылка на квиз</Typography>
<Tooltip
@ -242,11 +239,7 @@ export default function InstallQuiz() {
}}
/>
</FormControl>
<CopyIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
marL={"10px"}
/>
<CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} marL={"10px"} />
</Box>
<Box
sx={{
@ -274,16 +267,11 @@ export default function InstallQuiz() {
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<VkIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
/>
<VkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
<Typography> Вконтакте</Typography>
</Box>
<Typography>
Для публикации сниппета на стене группы, призывающего пройти тест.
</Typography>
<Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
<Link
component="button"
onClick={handleOpenVk}
@ -312,16 +300,10 @@ export default function InstallQuiz() {
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<DomenIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
/>
<DomenIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
<Typography>Свой домен</Typography>
</Box>
<Typography>
Подключите свой домен, если хотите, чтобы квиз открывался по вашей
ссылке.
</Typography>
<Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
<Link
component="button"
onClick={handleOpenDom}
@ -397,16 +379,13 @@ export default function InstallQuiz() {
<AutoOpenInstall />
<VidjetInstall />
<InstallQzCode />
<Box
sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px" }}
>
<Box sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}>
<Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
<ArrowLeft />
</Button>
<Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
<Button variant="contained" onClick={incrementCurrentStep}>
Запустить рекламу
</Button>
</Box>
<Modal
@ -438,9 +417,7 @@ export default function InstallQuiz() {
background: theme.palette.background.default,
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Добавить квиз в группу ВК
</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>Добавить квиз в группу ВК</Typography>
</Box>
<Box
sx={{
@ -473,19 +450,12 @@ export default function InstallQuiz() {
Добавить приложение
</Button>
<Typography sx={{ color: theme.palette.grey2.main }}>
Для публикации сниппета на стене, призывающего пройти тест,
вставьте в новую запись ссылку на приложение
Для публикации сниппета на стене, призывающего пройти тест, вставьте в новую запись ссылку на приложение
</Typography>
<CustomTextField
placeholder={""}
text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
/>
<Typography
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
>
где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
можно узнать в браузерной строке, открыв приложение в вашей
группе
<CustomTextField placeholder={""} text={"https://vk.com/app6656524_-XXXXXXXXXXX"} />
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке, открыв
приложение в вашей группе
</Typography>
</Box>
@ -496,24 +466,13 @@ export default function InstallQuiz() {
flexDirection: "column",
}}
>
<Typography>
2. Откройте квиз в группе (вы должны быть администратором
группы)
<Typography>2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
Справа снизу нажмите на значок "редактировать" В появившемся окне введите id квиза и нажмите
"Привязать". Готово! Квиз привязан к группе
</Typography>
<Typography
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
>
Справа снизу нажмите на значок "редактировать" В появившемся
окне введите id квиза и нажмите "Привязать". Готово! Квиз
привязан к группе
</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>
ID этого квиза
</Typography>
<CustomTextField
placeholder={""}
text={"639727c5177be5004f11a0f2"}
/>
<Typography sx={{ color: theme.palette.grey2.main }}>ID этого квиза</Typography>
<CustomTextField placeholder={""} text={"639727c5177be5004f11a0f2"} />
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
@ -555,9 +514,7 @@ export default function InstallQuiz() {
background: theme.palette.background.default,
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Подключить свой домен
</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>Подключить свой домен</Typography>
</Box>
<Box
sx={{
@ -575,21 +532,14 @@ export default function InstallQuiz() {
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Подключите домен к проекту, чтобы создать несколько квизов на
одном домене
Подключите домен к проекту, чтобы создать несколько квизов на одном домене
</Typography>
<Typography>1. Настройте записи в регистраторе домена</Typography>
<Box sx={{ display: "flex" }}>
<SelectableButton
isSelected={backgroundType === "text"}
onClick={() => setBackgroundType("text")}
>
<SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
Для поддоменов
</SelectableButton>
<SelectableButton
isSelected={backgroundType === "video"}
onClick={() => setBackgroundType("video")}
>
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
Для доменов
</SelectableButton>
</Box>
@ -623,8 +573,7 @@ export default function InstallQuiz() {
maxWidth: "372px",
}}
>
Как подключить свой домен/поддомен к квизу? Ошибки при
подключении домена
Как подключить свой домен/поддомен к квизу? Ошибки при подключении домена
</Link>
</Box>
@ -655,10 +604,7 @@ export default function InstallQuiz() {
// onMouseDown={}
edge="end"
>
<CopyIcon
color={"#ffffff"}
bgcolor={theme.palette.brightPurple.main}
/>
<CopyIcon color={"#ffffff"} bgcolor={theme.palette.brightPurple.main} />
</IconButton>
</InputAdornment>
}
@ -668,11 +614,8 @@ export default function InstallQuiz() {
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<Typography
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
>
Привязка домена и обновление DNS записей может занять до 48
часов
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
Привязка домена и обновление DNS записей может занять до 48 часов
</Typography>
<Button variant="outlined" onClick={handleCloseDom}>
Отмена

8
src/pages/Landing/HeaderLanding.tsx
View File

@ -18,7 +18,7 @@ export default function Component() {
const [select, setSelect] = React.useState(0);
const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
const location = useLocation()
const location = useLocation();
const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
@ -41,7 +41,9 @@ export default function Component() {
padding: 0,
}}
>
<QuizLogo width={isMobile ? 100 : 150} />
<Link to="/">
<QuizLogo width={isMobile ? 100 : 150} />
</Link>
{/*<Box*/}
{/* sx={{*/}
{/* maxWidth: '595px',*/}
@ -67,7 +69,7 @@ export default function Component() {
{/* ))}*/}
{/*</Box>*/}
<Button
variant="outlined"
variant="outlined"
onClick={onClick}
sx={{
color: "black",

402
src/pages/Landing/headerMobileLanding.tsx
View File

@ -4,17 +4,17 @@ import {} from "react-router-dom";
import { useLocation, Link } from "react-router-dom";
import {
useMediaQuery,
useTheme,
Button,
Dialog,
ListItem,
AppBar,
List,
Toolbar,
IconButton,
Box,
Slide,
useMediaQuery,
useTheme,
Button,
Dialog,
ListItem,
AppBar,
List,
Toolbar,
IconButton,
Box,
Slide,
} from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";
@ -38,212 +38,202 @@ import Logotip from "./images/icons/QuizLogo";
// ];
interface Props {
theme?: "dark" | "light";
bgColor?: string;
theme?: "dark" | "light";
bgColor?: string;
}
const Transition = React.forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
ref: React.Ref<unknown>
) {
return <Slide direction={"left"} ref={ref} {...props} />;
return <Slide direction={"left"} ref={ref} {...props} />;
});
const height = "80px";
export default function FullScreenDialog({
theme = "dark",
bgColor = "#F2F3F7",
}: Props) {
const [open, setOpen] = useState(false);
const location = useLocation();
const themeMUI = useTheme();
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
export default function FullScreenDialog({ theme = "dark", bgColor = "#F2F3F7" }: Props) {
const [open, setOpen] = useState(false);
const location = useLocation();
const themeMUI = useTheme();
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
const handleClickOpen = () => {
setOpen(true);
};
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<SectionStyled
tag="header"
bg={bgColor}
mwidth={"1200px"}
sxsect={{
minHeight: isMobile? "50px" : {height},
position: "fixed",
zIndex: 11
return (
<>
<SectionStyled
tag="header"
bg={bgColor}
mwidth={"1200px"}
sxsect={{
minHeight: isMobile ? "50px" : { height },
position: "fixed",
zIndex: 11,
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
svg: { color: "#000000" },
padding: isMobile ? 0 : "0 22px 0 40px",
}}
>
<Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
<Link to="/">
<Logotip width={150} />
</Link>
</Box>
{!isMobile && (
<Button
// onClick={() => setIsContactFormOpen(true)}
disableRipple
sx={{
color: "black",
border: "1px solid black",
ml: "auto",
mr: "38px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
"&:hover": {
background: "rgba(126, 42, 234, 0.07)",
bgcolor: "#7E2AEA",
},
}}
>
Предрегистрация
</Button>
)}
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
svg: { color: "#000000" },
padding: isMobile ? 0 : "0 22px 0 40px"
}}
<Button disableRipple variant="text" onClick={handleClickOpen}>
<MenuIcon />
</Button>
<Dialog
fullScreen
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar
sx={{
position: "relative",
background: theme === "dark" ? "#252734" : "#F2F3F7",
boxShadow: "none",
height: isMobile ? "66px" : "100px",
}}
>
<Toolbar
sx={{
display: "flex",
justifyContent: "space-between",
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
pt: "12px",
}}
>
<Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
<Logotip width={150}/>
</Box>
{!isMobile && (
<Button
// onClick={() => setIsContactFormOpen(true)}
disableRipple
sx={{
color: "black",
border: "1px solid black",
ml: "auto",
mr: "38px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
"&:hover": {
background: "rgba(126, 42, 234, 0.07)",
bgcolor: "#7E2AEA",
},
}}
>
Предрегистрация
</Button>
)}
<Button disableRipple variant="text" onClick={handleClickOpen}>
<MenuIcon />
</Button>
<Dialog
fullScreen
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar
sx={{
position: "relative",
background: theme === "dark" ? "#252734" : "#F2F3F7",
boxShadow: "none",
height: isMobile ? "66px" : "100px",
}}
>
<Toolbar
sx={{
display: "flex",
justifyContent: "space-between",
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
pt: "12px",
}}
>
{isMobile && (
<Logotip width={150}/>
)}
<IconButton
sx={{ ml: "auto" }}
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<List
sx={{
background: theme === "dark" ? "#252734" : "#F2F3F7",
height: "100vh",
p: "0",
}}
>
{/*<ListItem*/}
{/* sx={{*/}
{/* pl: "40px",*/}
{/* flexDirection: "column",*/}
{/* alignItems: isMobile ? "stretch" : "end",*/}
{/* }}*/}
{/*>*/}
{/* {buttonMenu.map(({ path, title }) => (*/}
{/* <Link*/}
{/* key={path}*/}
{/* to={path}*/}
{/* style={{*/}
{/* textDecoration: "none",*/}
{/* height: "20px",*/}
{/* marginBottom: "25px",*/}
{/* }}*/}
{/* >*/}
{/* <Button*/}
{/* disableRipple*/}
{/* variant="text"*/}
{/* sx={{*/}
{/* color:*/}
{/* location.pathname === path*/}
{/* ? "#7E2AEA"*/}
{/* : theme === "dark"*/}
{/* ? "white"*/}
{/* : "black",*/}
{/* height: "20px",*/}
{/* textTransform: "none",*/}
{/* fontSize: "16px",*/}
{/* "&:hover": {*/}
{/* background: "none",*/}
{/* color: "#7E2AEA",*/}
{/* },*/}
{/* }}*/}
{/* >*/}
{/* {title}*/}
{/* </Button>*/}
{/* </Link>*/}
{/* ))}*/}
{/*</ListItem>*/}
{isMobile ? (
<Button
// onClick={() => setIsContactFormOpen(true)}
variant="outlined"
sx={{
position: "absolute",
bottom: 0,
mb: "60px",
width: "188px",
color: theme === "dark" ? "white" : "black",
border: "1px solid black",
ml: "40px",
mt: "180px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Предрегистрация
</Button>
) : (
<Box
sx={{
position: "absolute",
right: "40px",
bottom: "60px",
}}
>
<Logotip width={150}/>
</Box>
)}
</List>
</Dialog>
</SectionStyled>
<Box sx={{height: isMobile ? "50px" : {height}}} />
</>
);
{isMobile && <Logotip width={150} />}
<IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<List
sx={{
background: theme === "dark" ? "#252734" : "#F2F3F7",
height: "100vh",
p: "0",
}}
>
{/*<ListItem*/}
{/* sx={{*/}
{/* pl: "40px",*/}
{/* flexDirection: "column",*/}
{/* alignItems: isMobile ? "stretch" : "end",*/}
{/* }}*/}
{/*>*/}
{/* {buttonMenu.map(({ path, title }) => (*/}
{/* <Link*/}
{/* key={path}*/}
{/* to={path}*/}
{/* style={{*/}
{/* textDecoration: "none",*/}
{/* height: "20px",*/}
{/* marginBottom: "25px",*/}
{/* }}*/}
{/* >*/}
{/* <Button*/}
{/* disableRipple*/}
{/* variant="text"*/}
{/* sx={{*/}
{/* color:*/}
{/* location.pathname === path*/}
{/* ? "#7E2AEA"*/}
{/* : theme === "dark"*/}
{/* ? "white"*/}
{/* : "black",*/}
{/* height: "20px",*/}
{/* textTransform: "none",*/}
{/* fontSize: "16px",*/}
{/* "&:hover": {*/}
{/* background: "none",*/}
{/* color: "#7E2AEA",*/}
{/* },*/}
{/* }}*/}
{/* >*/}
{/* {title}*/}
{/* </Button>*/}
{/* </Link>*/}
{/* ))}*/}
{/*</ListItem>*/}
{isMobile ? (
<Button
// onClick={() => setIsContactFormOpen(true)}
variant="outlined"
sx={{
position: "absolute",
bottom: 0,
mb: "60px",
width: "188px",
color: theme === "dark" ? "white" : "black",
border: "1px solid black",
ml: "40px",
mt: "180px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Предрегистрация
</Button>
) : (
<Box
sx={{
position: "absolute",
right: "40px",
bottom: "60px",
}}
>
<Logotip width={150} />
</Box>
)}
</List>
</Dialog>
</SectionStyled>
<Box sx={{ height: isMobile ? "50px" : { height } }} />
</>
);
}

11
src/pages/Questions/BranchingMap/CsComponent.tsx
View File

@ -7,7 +7,7 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootContentId } from "@root/quizes/actions"
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"
import { useQuestionsStore } from "@root/questions/store";
import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll } from "@root/questions/actions";
import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll, createFrontResult } from "@root/questions/actions";
import { updateOpenedModalSettingsId, } from "@root/uiTools/actions";
import { cleardragQuestionContentId } from "@root/uiTools/actions";
import { withErrorBoundary } from "react-error-boundary";
@ -160,7 +160,6 @@ function CsComponent({
}, [modalQuestionTargetContentId])
const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
//запрещаем работу родителя-ребенка если это один и тот же вопрос
if (parentNodeContentId === targetNodeContentId) return
@ -170,10 +169,10 @@ function CsComponent({
const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
//если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
const targetQuestion = { ...getQuestionByContentId(targetNodeContentId || dragQuestionContentId) } as AnyTypedQuizQuestion
if (Object.keys(targetQuestion).length !== 0 && Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
if (Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
cy?.data('changed', true)
createFrontResult(quiz.backendId, targetQuestion.content.id)
const es = cy?.add([
{
data: {
@ -203,6 +202,7 @@ function CsComponent({
//смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
trashQuestions.forEach((targetQuestion) => {
if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
console.log('deleteQ', targetQuestion.id)
deleteQuestion(targetQuestion.id);
}
})
@ -271,7 +271,8 @@ function CsComponent({
const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
if (targetNodeContentId && parentQuestionContentId) {
if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
createFrontResult(quiz.backendId, parentQuestionContentId)
clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
}

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

@ -73,6 +73,7 @@ export default function ButtonsOptionsAndPict({
display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "6px",
maxWidth: isMobile ? "200px" : undefined
}}
>
<MiniButtonSetting

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

@ -18,18 +18,28 @@ import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import {
Box,
Checkbox,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
Paper,
TextField,
useMediaQuery,
useTheme,
Box,
Checkbox,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
Paper,
TextField,
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, createUntypedQuestion, deleteQuestion, clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, getQuestionByContentId, deleteQuestionWithTimeout } from "@root/questions/actions";
import {
copyQuestion,
createUntypedQuestion,
deleteQuestion,
clearRuleForAll,
toggleExpandQuestion,
updateQuestion,
updateUntypedQuestion,
getQuestionByContentId,
deleteQuestionWithTimeout,
} from "@root/questions/actions";
import { updateRootContentId } from "@root/quizes/actions";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@ -44,445 +54,387 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
interface Props {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
isDragging: boolean;
index: number;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
isDragging: boolean;
index: number;
}
export default function QuestionsPageCard({ question, draggableProps, isDragging, index }: Props) {
const { questions } = useQuestionsStore();
const [plusVisible, setPlusVisible] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const anchorRef = useRef(null);
const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore();
const [plusVisible, setPlusVisible] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const anchorRef = useRef(null);
const quiz = useCurrentQuiz();
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
question.title = title;
});
}, 200);
updateQuestionFn(question.id, (question) => {
question.title = title;
});
}, 200);
return (
<>
<Paper
id={question.id}
data-cy="quiz-question-card"
sx={{
maxWidth: "796px",
width: "100%",
borderRadius: "12px",
backgroundColor: question.expanded ? "white" : "#EEE4FC",
border: question.expanded ? "none" : "1px solid #9A9AAF",
boxShadow: "0px 10px 30px #e7e7e7",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
padding: isMobile ? "10px" : "20px 10px 20px 20px",
flexDirection: isMobile ? "column" : null,
}}
>
<FormControl
variant="standard"
sx={{
p: 0,
maxWidth: isTablet ? "549px" : "640px",
width: "100%",
marginRight: isMobile ? "0px" : "16.1px",
}}
return (
<>
<Paper
id={question.id}
data-cy="quiz-question-card"
sx={{
maxWidth: "796px",
width: "100%",
borderRadius: "12px",
backgroundColor: question.expanded ? "white" : "#EEE4FC",
border: question.expanded ? "none" : "1px solid #9A9AAF",
boxShadow: "0px 10px 30px #e7e7e7",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
padding: isMobile ? "10px" : "20px 10px 20px 20px",
flexDirection: isMobile ? "column" : null,
}}
>
<FormControl
variant="standard"
sx={{
p: 0,
maxWidth: isTablet ? "549px" : "640px",
width: "100%",
marginRight: isMobile ? "0px" : "16.1px",
}}
>
<TextField
defaultValue={question.title}
placeholder={"Заголовок вопроса"}
onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value || " ")}
InputProps={{
startAdornment: (
<Box>
<InputAdornment
ref={anchorRef}
position="start"
sx={{ cursor: "pointer" }}
onClick={() => setOpen((isOpened) => !isOpened)}
>
<TextField
defaultValue={question.title}
placeholder={"Заголовок вопроса"}
onChange={({ target }: { target: HTMLInputElement; }) => setTitle(target.value || " ")}
InputProps={{
startAdornment: (
<Box>
<InputAdornment
ref={anchorRef}
position="start"
sx={{ cursor: "pointer" }}
onClick={() => setOpen((isOpened) => !isOpened)}
>
{IconAndrom(question.expanded, question.type)}
</InputAdornment>
<ChooseAnswerModal
open={open}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
question={question}
questionType={question.type}
/>
</Box>
),
}}
sx={{
margin: isMobile ? "10px 0" : 0,
"& .MuiInputBase-root": {
color: "#000000",
backgroundColor: question.expanded
? theme.palette.background.default
: "transparent",
height: "48px",
borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": {
borderWidth: "1px !important",
border: !question.expanded ? "none" : null,
},
"& .MuiInputBase-input::placeholder": {
color: "#4D4D4D",
opacity: 0.8,
},
},
}}
inputProps={{
sx: {
fontSize: "18px",
lineHeight: "21px",
py: 0,
paddingLeft: question.type === null ? 0 : "18px",
},
"data-cy": "quiz-question-title",
}}
/>
</FormControl>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
width: isMobile ? "100%" : "auto",
position: "relative",
}}
>
<IconButton
sx={{ padding: "0", margin: "5px" }}
disableRipple
data-cy="expand-question"
onClick={() => toggleExpandQuestion(question.id)}
>
{question.expanded ? (
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<ExpandLessIcon
sx={{
boxSizing: "border-box",
fill: theme.palette.brightPurple.main,
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
}}
/>
)}
</IconButton>
{question.expanded ? (
<></>
) : (
<Box
sx={{
display: "flex",
height: "30px",
borderRight: "solid 1px #4D4D4D",
}}
>
<FormControlLabel
control={
<Checkbox
icon={
<HideIcon
style={{
boxSizing: "border-box",
color: "#7E2AEA",
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
padding: "3px",
}}
/>
}
checkedIcon={<CrossedEyeIcon />}
/>
}
label={""}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
mr: 0,
userSelect: "none",
}}
/>
<IconButton
sx={{ padding: "0" }}
onClick={() => copyQuestion(question.id, question.quizId)}
>
<CopyIcon
style={{ color: theme.palette.brightPurple.main }}
/>
</IconButton>
<IconButton
sx={{
cursor: "pointer",
borderRadius: "6px",
padding: "0",
margin: "0 5px 0 10px",
}}
onClick={() => {
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
deleteQuestion(question.id);
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[];
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
getChildren(targetQuestion); //и ищем его потомков
}
}
});
};
getChildren(question);
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
question.content.rule.parentId = "";
question.content.rule.main = [];
question.content.rule.default = "";
});
});
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
const newRule = {};
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId;
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule;
});
deleteQuestion(question.id);
}
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
deleteQuestionWithTimeout(question.id, deleteFn);
}}
data-cy="delete-question"
>
<DeleteIcon
style={{ color: theme.palette.brightPurple.main }}
/>
</IconButton>
</Box>
)}
{question.type !== null &&
<Box
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "30px",
width: "30px",
marginLeft: "3px",
borderRadius: "50%",
fontSize: "16px",
color: question.expanded
? theme.palette.brightPurple.main
: "#FFF",
background: question.expanded
? "#EEE4FC"
: theme.palette.brightPurple.main,
}}
>
{question.page + 1}
</Box>
}
<IconButton
disableRipple
sx={{
padding: isMobile ? "0" : "0 5px",
right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}
{...draggableProps}
>
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Box>
</Box>
{question.expanded && (
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: 0,
borderRadius: "12px",
}}
>
{question.type === null ? (
<TypeQuestions question={question} />
) : (
<SwitchQuestionsPage question={question} />
)}
</Box>
)}
</Paper>
<Box
onMouseEnter={() => setPlusVisible(true)}
onMouseLeave={() => setPlusVisible(false)}
sx={{
maxWidth: "825px",
display: "flex",
alignItems: "center",
height: "40px",
cursor: "pointer",
}}
>
<Box
onClick={() => createUntypedQuestion(question.quizId, question.id)}
sx={{
display: plusVisible && !isDragging ? "flex" : "none",
width: "100%",
alignItems: "center",
columnGap: "10px",
}}
data-cy="create-question"
>
<Box
sx={{
boxSizing: "border-box",
width: "100%",
height: "1px",
backgroundPosition: "bottom",
backgroundRepeat: "repeat-x",
backgroundSize: "20px 1px",
backgroundImage:
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
}}
{IconAndrom(question.expanded, question.type)}
</InputAdornment>
<ChooseAnswerModal
open={open}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
question={question}
questionType={question.type}
/>
<PlusIcon />
</Box>
</Box>
</>
);
</Box>
),
}}
sx={{
margin: isMobile ? "10px 0" : 0,
"& .MuiInputBase-root": {
color: "#000000",
backgroundColor: question.expanded ? theme.palette.background.default : "transparent",
height: "48px",
borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": {
borderWidth: "1px !important",
border: !question.expanded ? "none" : null,
},
"& .MuiInputBase-input::placeholder": {
color: "#4D4D4D",
opacity: 0.8,
},
},
}}
inputProps={{
sx: {
fontSize: "18px",
lineHeight: "21px",
py: 0,
paddingLeft: question.type === null ? 0 : "18px",
},
"data-cy": "quiz-question-title",
}}
/>
</FormControl>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
width: isMobile ? "100%" : "auto",
position: "relative",
}}
>
<IconButton
sx={{ padding: "0", margin: "5px" }}
disableRipple
data-cy="expand-question"
onClick={() => toggleExpandQuestion(question.id)}
>
{question.expanded ? (
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<ExpandLessIcon
sx={{
boxSizing: "border-box",
fill: theme.palette.brightPurple.main,
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
}}
/>
)}
</IconButton>
{question.expanded ? (
<></>
) : (
<Box
sx={{
display: "flex",
height: "30px",
borderRight: "solid 1px #4D4D4D",
}}
>
<FormControlLabel
control={
<Checkbox
icon={
<HideIcon
style={{
boxSizing: "border-box",
color: "#7E2AEA",
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
padding: "3px",
}}
/>
}
checkedIcon={<CrossedEyeIcon />}
/>
}
label={""}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
mr: 0,
userSelect: "none",
}}
/>
<IconButton sx={{ padding: "0" }} onClick={() => copyQuestion(question.id, question.quizId)}>
<CopyIcon style={{ color: theme.palette.brightPurple.main }} />
</IconButton>
<IconButton
sx={{
cursor: "pointer",
borderRadius: "6px",
padding: "0",
margin: "0 5px 0 10px",
}}
onClick={() => {
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") {
//удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
deleteQuestion(question.id);
questions.forEach((q) => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
} else if (question.content.rule.parentId.length > 0) {
//удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[];
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {
//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id))
clearQuestions.push(targetQuestion.content.id);
getChildren(targetQuestion); //и ищем его потомков
}
}
});
};
getChildren(question);
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, (question) => {
question.content.rule.parentId = "";
question.content.rule.main = [];
question.content.rule.default = "";
});
});
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
const newRule = {};
newRule.main = parentQuestion.content.rule.main.filter(
(data) => data.next !== question.content.id
); //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId;
newRule.default =
parentQuestion.content.rule.parentId === question.content.id
? ""
: parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(
parentQuestion.content.rule.children.indexOf(question.content.id),
1
);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule;
});
deleteQuestion(question.id);
}
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
deleteQuestionWithTimeout(question.id, deleteFn);
}}
data-cy="delete-question"
>
<DeleteIcon style={{ color: theme.palette.brightPurple.main }} />
</IconButton>
</Box>
)}
{question.type !== null && (
<Box
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "30px",
width: "30px",
marginLeft: "3px",
borderRadius: "50%",
fontSize: "16px",
color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
}}
>
{question.page + 1}
</Box>
)}
<IconButton
disableRipple
sx={{
padding: isMobile ? "0" : "0 5px",
right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}
{...draggableProps}
>
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Box>
</Box>
{question.expanded && (
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: 0,
borderRadius: "12px",
}}
>
{question.type === null ? (
<TypeQuestions question={question} />
) : (
<SwitchQuestionsPage question={question} />
)}
</Box>
)}
</Paper>
<Box
onMouseEnter={() => setPlusVisible(true)}
onMouseLeave={() => setPlusVisible(false)}
sx={{
maxWidth: "825px",
display: "flex",
alignItems: "center",
height: "40px",
cursor: "pointer",
}}
>
<Box
onClick={() => createUntypedQuestion(question.quizId, question.id)}
sx={{
display: plusVisible && !isDragging ? "flex" : "none",
width: "100%",
alignItems: "center",
columnGap: "10px",
}}
data-cy="create-question"
>
<Box
sx={{
boxSizing: "border-box",
width: "100%",
height: "1px",
backgroundPosition: "bottom",
backgroundRepeat: "repeat-x",
backgroundSize: "20px 1px",
backgroundImage: "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
}}
/>
<PlusIcon />
</Box>
</Box>
</>
);
}
const IconAndrom = (isExpanded: boolean, questionType: QuestionType | null) => {
switch (questionType) {
case "variant":
return (
<Answer
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "images":
return (
<OptionsPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "varimg":
return (
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji":
return (
<Emoji
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "text":
return (
<Input
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "select":
return (
<DropDown
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "date":
return (
<Date
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "number":
return (
<Slider
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "file":
return (
<Download
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "page":
return (
<Page
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "rating":
return (
<RatingIcon
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
default:
return <></>;
}
switch (questionType) {
case "variant":
return <Answer color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "images":
return <OptionsPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "varimg":
return <OptionsAndPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "emoji":
return <Emoji color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "text":
return <Input color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "select":
return <DropDown color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "date":
return <Date color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "number":
return <Slider color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "file":
return <Download color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "page":
return <Page color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "rating":
return <RatingIcon color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
default:
return <></>;
}
};

143
src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
View File

@ -5,80 +5,77 @@ import { Draggable } from "react-beautiful-dnd";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
import QuestionsPageCard from "./QuestionPageCard";
type FormDraggableListItemProps = {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
};
export default memo(
({ question, questionIndex }: FormDraggableListItemProps) => {
const theme = useTheme();
export default memo(({ question, questionIndex }: FormDraggableListItemProps) => {
const theme = useTheme();
return (
<Draggable draggableId={String(questionIndex)} index={questionIndex}>
{(provided) => (
<ListItem
ref={provided.innerRef}
{...(questionIndex !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{question.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{
width: "100%",
maxWidth: "800px",
display: "flex",
justifyContent: "center",
marginTop: "30px",
gap: "5px",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.grey2.main,
}}
>
Вопрос удалён.
</Typography>
<Typography
onClick={() => {
updateQuestion(question.id, question => {
question.deleted = false;
});
}}
sx={{
cursor: "pointer",
fontSize: "16px",
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Восстановить?
</Typography>
</Box>
) : (
<Box
sx={{
width: "100%",
position: "relative",
borderBottom: "1px solid rgba(0, 0, 0, 0.23)",
}}
>
<QuestionsPageCard
key={questionIndex}
question={question}
questionIndex={questionIndex}
draggableProps={provided.dragHandleProps}
/>
</Box>
)}
</ListItem>
)}
</Draggable>
);
}
);
return (
<Draggable draggableId={String(questionIndex)} index={questionIndex}>
{(provided) => (
<ListItem
ref={provided.innerRef}
{...(questionIndex !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{question.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{
width: "100%",
maxWidth: "800px",
display: "flex",
justifyContent: "center",
marginTop: "30px",
gap: "5px",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.grey2.main,
}}
>
Вопрос удалён.
</Typography>
<Typography
onClick={() => {
updateQuestion(question.id, (question) => {
question.deleted = false;
});
}}
sx={{
cursor: "pointer",
fontSize: "16px",
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Восстановить?
</Typography>
</Box>
) : (
<Box
sx={{
width: "100%",
position: "relative",
borderBottom: "1px solid rgba(0, 0, 0, 0.23)",
}}
>
<QuestionsPageCard
key={questionIndex}
question={question}
questionIndex={questionIndex}
draggableProps={provided.dragHandleProps}
/>
</Box>
)}
</ListItem>
)}
</Draggable>
);
});

320
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -11,8 +11,8 @@ import OptionsPict from "@icons/questionsPage/options_pict";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import { Box, InputAdornment, Paper } from "@mui/material";
import { updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import { Box, FormControlLabel, IconButton, InputAdornment, Paper, useMediaQuery, useTheme } from "@mui/material";
import { toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@ -22,142 +22,206 @@ import SwitchQuestionsPage from "../../SwitchQuestionsPage";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import FormTypeQuestions from "../FormTypeQuestions";
import { QuestionType } from "@model/question/question";
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { HideIcon } from "@icons/questionsPage/hideIcon";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { NoLuggageOutlined, SignalCellularNullOutlined } from "@mui/icons-material";
interface Props {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
}
export default function QuestionsPageCard({
question,
questionIndex,
draggableProps,
}: Props) {
const [open, setOpen] = useState<boolean>(false);
const anchorRef = useRef(null);
export default function QuestionsPageCard({ question, questionIndex, draggableProps }: Props) {
const [open, setOpen] = useState<boolean>(false);
const anchorRef = useRef(null);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
question.title = title;
});
}, 200);
updateQuestionFn(question.id, (question) => {
question.title = title;
});
}, 200);
return (
<>
<Paper
sx={{
overflow: "hidden",
maxWidth: "796px",
width: "100%",
backgroundColor: "white",
border: "none",
boxShadow: "none",
paddingBottom: "20px",
borderRadius: "0",
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: 0,
}}
>
<CustomTextField
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
text={question.title}
onChange={({ target }) => setTitle(target.value)}
sx={{ margin: "20px", width: "auto" }}
InputProps={{
startAdornment: (
<Box>
<InputAdornment
ref={anchorRef}
position="start"
sx={{ cursor: "pointer" }}
onClick={() => setOpen((isOpened) => !isOpened)}
>
{IconAndrom(question.type)}
</InputAdornment>
<ChooseAnswerModal
open={open}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
question={question}
questionType={question.type}
/>
</Box>
),
endAdornment: (
<Box {...draggableProps}>
{questionIndex !== 0 && (
<InputAdornment position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
)}
</Box>
),
}}
return (
<>
<Paper
sx={{
overflow: "hidden",
maxWidth: "796px",
width: "100%",
backgroundColor: "white",
border: "none",
boxShadow: "none",
paddingBottom: "20px",
borderRadius: "0",
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
}}
>
<Box
sx={{
display: "flex",
p: 0,
flexDirection: "column",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
margin: "20px",
gap: "18px",
flexDirection: isMobile ? "column-reverse" : null,
}}
>
<CustomTextField
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
text={question.title}
onChange={({ target }) => setTitle(target.value)}
sx={{ width: "100%" }}
InputProps={{
startAdornment: (
<Box>
<InputAdornment
ref={anchorRef}
position="start"
sx={{ cursor: "pointer" }}
onClick={() => setOpen((isOpened) => !isOpened)}
>
{IconAndrom(question.type)}
</InputAdornment>
<ChooseAnswerModal
open={open}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
question={question}
questionType={question.type}
/>
{question.type === null ? (
<FormTypeQuestions question={question} />
) : (
<SwitchQuestionsPage question={question} />
)}
</Box>
),
}}
/>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: isMobile ? "100%" : "auto",
position: "relative",
}}
>
<Box
sx={{
flexDirection: isMobile ? "row-reverse" : null,
display: "flex",
alignItems: "center",
gap: "4px",
}}
>
<IconButton
sx={{ padding: "0", margin: "5px" }}
disableRipple
data-cy="expand-question"
onClick={() => toggleExpandQuestion(question.id)}
>
{question.expanded ? (
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<ExpandLessIcon
sx={{
boxSizing: "border-box",
fill: theme.palette.brightPurple.main,
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
}}
/>
)}
</IconButton>
<Box
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "30px",
width: "30px",
marginLeft: "3px",
borderRadius: "50%",
fontSize: "16px",
color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
}}
>
{questionIndex + 1}
</Box>
</Paper>
</>
);
</Box>
<IconButton
disableRipple
sx={{
padding: isMobile ? "0" : "0 5px",
right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}
{...draggableProps}
>
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Box>
</Box>
{question.type === null ? (
<FormTypeQuestions question={question} />
) : (
<SwitchQuestionsPage question={question} />
)}
</Box>
</Paper>
</>
);
}
const IconAndrom = (questionType: QuestionType | null) => {
switch (questionType) {
case "variant":
return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "images":
return (
<OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
case "varimg":
return (
<OptionsAndPict
color="#9A9AAF"
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji":
return <Emoji color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "text":
return <Input color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "select":
return (
<DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
case "date":
return <Date color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "number":
return <Slider color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "file":
return (
<Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
case "page":
return <Page color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "rating":
return (
<RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
default:
return (
<AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
}
switch (questionType) {
case "variant":
return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "images":
return <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "varimg":
return <OptionsAndPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "emoji":
return <Emoji color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "text":
return <Input color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "select":
return <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "date":
return <Date color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "number":
return <Slider color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "file":
return <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "page":
return <Page color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "rating":
return <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
default:
return <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
}
};

42
src/pages/Questions/Form/FormDraggableList/index.tsx
View File

@ -5,31 +5,25 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
import FormDraggableListItem from "./FormDraggableListItem";
import { useQuestions } from "@root/questions/hooks";
export const FormDraggableList = () => {
const { questions } = useQuestions();
const { questions } = useQuestions()
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index);
};
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable-list">
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
{questions?.map((question, index) => (
<FormDraggableListItem
key={question.id}
question={question}
questionIndex={index}
/>
))}
{provided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
);
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable-list">
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
{questions?.map((question, index) => (
<FormDraggableListItem key={question.id} question={question} questionIndex={index} />
))}
{provided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
);
};

195
src/pages/Questions/Form/FormQuestionsPage.tsx
View File

@ -8,106 +8,103 @@ import { FormDraggableList } from "./FormDraggableList";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
export default function FormQuestionsPage() {
const theme = useTheme();
const quiz = useCurrentQuiz();
const theme = useTheme();
const quiz = useCurrentQuiz();
if (!quiz) return null;
if (!quiz) return null;
return (
<>
<Box
sx={{
maxWidth: "796px",
width: "100%",
display: "flex",
justifyContent: "space-between",
margin: "60px 0 40px 0",
}}
>
<Typography variant={"h5"}>Заголовок анкеты</Typography>
<Button
sx={{
fontSize: "16px",
lineHeight: "19px",
padding: 0,
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
onClick={collapseAllQuestions}
>
Свернуть всё
</Button>
</Box>
<Box
sx={{
maxWidth: "796px",
boxShadow: "0px 10px 30px #e7e7e7",
borderRadius: "12px",
marginBottom: "30px",
borderTop: "1px solid transparent",
borderBottom: "1px solid transparent",
background: "#FFFFFF",
}}
>
<FormDraggableList />
<Box
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: "15px",
padding: "4px",
margin: "15px",
border: "1px solid transparent",
borderRadius: "8px",
"&:hover": {
border: "1px solid #9A9AAF",
},
}}
onClick={() => {
createUntypedQuestion(quiz.backendId);
}}
data-cy="create-question"
>
<AddAnswer color="#EEE4FC" />
<Typography sx={{ color: "#9A9AAF" }}>
Добавить еще один вопрос
</Typography>
</Box>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
gap: "8px",
maxWidth: "796px",
}}
>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>
<Button
variant="contained"
sx={{
height: "44px",
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={incrementCurrentStep}
>
Следующий шаг
</Button>
</Box>
{createPortal(<QuizPreview />, document.body)}
</>
);
return (
<>
<Box
sx={{
maxWidth: "796px",
width: "100%",
display: "flex",
justifyContent: "space-between",
margin: "60px 0 40px 0",
}}
>
<Typography variant={"h5"}>Заголовок анкеты</Typography>
<Button
sx={{
fontSize: "16px",
lineHeight: "19px",
padding: 0,
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
onClick={collapseAllQuestions}
>
Свернуть всё
</Button>
</Box>
<Box
sx={{
maxWidth: "796px",
boxShadow: "0px 10px 30px #e7e7e7",
borderRadius: "12px",
marginBottom: "30px",
borderTop: "1px solid transparent",
borderBottom: "1px solid transparent",
background: "#FFFFFF",
}}
>
<FormDraggableList />
<Box
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: "15px",
padding: "4px",
margin: "15px",
border: "1px solid transparent",
borderRadius: "8px",
"&:hover": {
border: "1px solid #9A9AAF",
},
}}
onClick={() => {
createUntypedQuestion(quiz.backendId);
}}
data-cy="create-question"
>
<AddAnswer color="#EEE4FC" />
<Typography sx={{ color: "#9A9AAF" }}>Добавить еще один вопрос</Typography>
</Box>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
gap: "8px",
maxWidth: "796px",
}}
>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>
<Button
variant="contained"
sx={{
height: "44px",
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={incrementCurrentStep}
>
Следующий шаг
</Button>
</Box>
{createPortal(<QuizPreview />, document.body)}
</>
);
}

125
src/pages/Questions/Form/FormTypeQuestions.tsx
View File

@ -12,80 +12,75 @@ import Slider from "../../../assets/icons/questionsPage/slider";
import { QuestionType } from "@model/question/question";
import { createTypedQuestion } from "@root/questions/actions";
import type {
UntypedQuizQuestion
} from "../../../model/questionTypes/shared";
import type { UntypedQuizQuestion } from "../../../model/questionTypes/shared";
type ButtonTypeQuestion = {
icon: JSX.Element;
title: string;
value: QuestionType;
icon: JSX.Element;
title: string;
value: QuestionType;
};
const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [
{
icon: <Answer color="#9A9AAF" />,
title: "Варианты ответов",
value: "variant",
},
{
icon: <Input color="#9A9AAF" />,
title: "Своё поле для ввода",
value: "text",
},
{
icon: <DropDown color="#9A9AAF" />,
title: "Выпадающий список",
value: "select",
},
{
icon: <Date color="#9A9AAF" />,
title: "Дата",
value: "date",
},
{
icon: <Slider color="#9A9AAF" />,
title: "Ползунок",
value: "number",
},
{
icon: <Download color="#9A9AAF" />,
title: "Загрузка файла",
value: "file",
},
{
icon: <Answer color="#9A9AAF" />,
title: "Варианты ответов",
value: "variant",
},
{
icon: <Input color="#9A9AAF" />,
title: "Своё поле для ввода",
value: "text",
},
{
icon: <DropDown color="#9A9AAF" />,
title: "Выпадающий список",
value: "select",
},
{
icon: <Date color="#9A9AAF" />,
title: "Дата",
value: "date",
},
{
icon: <Slider color="#9A9AAF" />,
title: "Ползунок",
value: "number",
},
{
icon: <Download color="#9A9AAF" />,
title: "Загрузка файла",
value: "file",
},
];
interface Props {
question: UntypedQuizQuestion;
question: UntypedQuizQuestion;
}
export default function FormTypeQuestions({ question }: Props) {
return (
<Box>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: "20px",
margin: "20px",
}}
>
{(("page" in question) && question.page === 0
? BUTTON_TYPE_QUESTIONS
: BUTTON_TYPE_SHORT_QUESTIONS
).map(({ icon, title, value: questionType }) => (
<QuestionsMiniButton
key={title}
onClick={() => {
createTypedQuestion(question.id, questionType);
}}
icon={icon}
text={title}
/>
))}
</Box>
</Box>
);
return (
<Box>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: "20px",
margin: "20px",
}}
>
{("page" in question && question.page === 0 ? BUTTON_TYPE_QUESTIONS : BUTTON_TYPE_SHORT_QUESTIONS).map(
({ icon, title, value: questionType }) => (
<QuestionsMiniButton
key={title}
onClick={() => {
createTypedQuestion(question.id, questionType);
}}
icon={icon}
text={title}
/>
)
)}
</Box>
</Box>
);
}

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

@ -151,181 +151,181 @@ export default function OptionsAndPicture({ question }: Props) {
onClose={closeCropModal}
onSaveImageClick={handleCropModalSaveClick}
/>
<Box
sx={{
width: "100%",
border: "1px solid #9A9AAF",
borderRadius: "8px",
display: isTablet ? "block" : "none",
}}
>
<TextField
fullWidth
focused={false}
placeholder={"Добавьте ответ"}
multiline={question.content.largeCheck}
InputProps={{
startAdornment: (
<>
<InputAdornment position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
{!isMobile && (
<Box
sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex",
justifyContent: "space-between",
marginRight: "20px",
marginLeft: "12px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
}}
>
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "25px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box>
)}
</>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
sx={{ padding: "0" }}
aria-describedby="my-popover-id"
>
<MessageIcon
style={{
color: "#9A9AAF",
fontSize: "30px",
marginRight: "6.5px",
}}
/>
</IconButton>
<Popover
id="my-popover-id"
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={false}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
/>
</Popover>
<IconButton sx={{ padding: "0" }}>
<DeleteIcon
style={{
color: theme.palette.grey2.main,
marginRight: "-1px",
}}
/>
</IconButton>
</InputAdornment>
),
}}
sx={{
"& .MuiInputBase-root": {
padding: "13.5px",
borderRadius: "10px",
background: "#ffffff",
height: "48px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
}}
inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
}}
/>
{/*<Box*/}
{/* sx={{*/}
{/* width: "100%",*/}
{/* border: "1px solid #9A9AAF",*/}
{/* borderRadius: "8px",*/}
{/* display: isTablet ? "block" : "none",*/}
{/* }}*/}
{/*>*/}
{/* <TextField*/}
{/* fullWidth*/}
{/* focused={false}*/}
{/* placeholder={"Добавьте ответ"}*/}
{/* multiline={question.content.largeCheck}*/}
{/* InputProps={{*/}
{/* startAdornment: (*/}
{/* <>*/}
{/* <InputAdornment position="start">*/}
{/* <PointsIcon*/}
{/* style={{ color: "#9A9AAF", fontSize: "30px" }}*/}
{/* />*/}
{/* </InputAdornment>*/}
{/* {!isMobile && (*/}
{/* <Box*/}
{/* sx={{*/}
{/* width: "60px",*/}
{/* height: "40px",*/}
{/* background: "#EEE4FC",*/}
{/* display: "flex",*/}
{/* justifyContent: "space-between",*/}
{/* marginRight: "20px",*/}
{/* marginLeft: "12px",*/}
{/* }}*/}
{/* >*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: "flex",*/}
{/* alignItems: "center",*/}
{/* justifyContent: "center",*/}
{/* width: "100%",*/}
{/* }}*/}
{/* >*/}
{/* <ImageAddIcons fontSize="22px" color="#7E2AEA" />*/}
{/* </Box>*/}
{/* <span*/}
{/* style={{*/}
{/* display: "flex",*/}
{/* alignItems: "center",*/}
{/* justifyContent: "center",*/}
{/* background: "#7E2AEA",*/}
{/* height: "100%",*/}
{/* width: "25px",*/}
{/* color: "white",*/}
{/* fontSize: "15px",*/}
{/* }}*/}
{/* >*/}
{/* +*/}
{/* </span>*/}
{/* </Box>*/}
{/* )}*/}
{/* </>*/}
{/* ),*/}
{/* endAdornment: (*/}
{/* <InputAdornment position="end">*/}
{/* <IconButton*/}
{/* sx={{ padding: "0" }}*/}
{/* aria-describedby="my-popover-id"*/}
{/* >*/}
{/* <MessageIcon*/}
{/* style={{*/}
{/* color: "#9A9AAF",*/}
{/* fontSize: "30px",*/}
{/* marginRight: "6.5px",*/}
{/* }}*/}
{/* />*/}
{/* </IconButton>*/}
{/* <Popover*/}
{/* id="my-popover-id"*/}
{/* anchorOrigin={{ vertical: "bottom", horizontal: "left" }}*/}
{/* open={false}*/}
{/* >*/}
{/* <TextareaAutosize*/}
{/* style={{ margin: "10px" }}*/}
{/* placeholder="Подсказка для этого ответа"*/}
{/* />*/}
{/* </Popover>*/}
{/* <IconButton sx={{ padding: "0" }}>*/}
{/* <DeleteIcon*/}
{/* style={{*/}
{/* color: theme.palette.grey2.main,*/}
{/* marginRight: "-1px",*/}
{/* }}*/}
{/* />*/}
{/* </IconButton>*/}
{/* </InputAdornment>*/}
{/* ),*/}
{/* }}*/}
{/* sx={{*/}
{/* "& .MuiInputBase-root": {*/}
{/* padding: "13.5px",*/}
{/* borderRadius: "10px",*/}
{/* background: "#ffffff",*/}
{/* height: "48px",*/}
{/* },*/}
{/* "& .MuiOutlinedInput-notchedOutline": {*/}
{/* border: "none",*/}
{/* },*/}
{/* }}*/}
{/* inputProps={{*/}
{/* sx: { fontSize: "18px", lineHeight: "21px", py: 0 },*/}
{/* }}*/}
{/* />*/}
{isMobile && (
<Box
sx={{
display: "flex",
alignItems: "center",
m: "8px",
position: "relative",
}}
>
<Box
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
/>
<ImageAddIcons
style={{
position: "absolute",
color: "#7E2AEA",
fontSize: "20px",
left: "45%",
right: "55%",
}}
/>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
background: "#EEE4FC",
height: "40px",
color: "white",
backgroundColor: "#7E2AEA",
}}
>
<Box
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
/>
<ImageAddIcons
style={{
position: "absolute",
color: "#7E2AEA",
fontSize: "20px",
left: "45%",
right: "55%",
}}
/>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
background: "#EEE4FC",
height: "40px",
color: "white",
backgroundColor: "#7E2AEA",
}}
>
+
</Box>
</Box>
</Box>
)}
</Box>
{/*{isMobile && (*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: "flex",*/}
{/* alignItems: "center",*/}
{/* m: "8px",*/}
{/* position: "relative",*/}
{/* }}*/}
{/* >*/}
{/* <Box*/}
{/* sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
{/* />*/}
{/* <ImageAddIcons*/}
{/* style={{*/}
{/* position: "absolute",*/}
{/* color: "#7E2AEA",*/}
{/* fontSize: "20px",*/}
{/* left: "45%",*/}
{/* right: "55%",*/}
{/* }}*/}
{/* />*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: "flex",*/}
{/* justifyContent: "center",*/}
{/* alignItems: "center",*/}
{/* width: "20px",*/}
{/* background: "#EEE4FC",*/}
{/* height: "40px",*/}
{/* color: "white",*/}
{/* backgroundColor: "#7E2AEA",*/}
{/* }}*/}
{/* >*/}
{/* <Box*/}
{/* sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
{/* />*/}
{/* <ImageAddIcons*/}
{/* style={{*/}
{/* position: "absolute",*/}
{/* color: "#7E2AEA",*/}
{/* fontSize: "20px",*/}
{/* left: "45%",*/}
{/* right: "55%",*/}
{/* }}*/}
{/* />*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: "flex",*/}
{/* justifyContent: "center",*/}
{/* alignItems: "center",*/}
{/* width: "20px",*/}
{/* background: "#EEE4FC",*/}
{/* height: "40px",*/}
{/* color: "white",*/}
{/* backgroundColor: "#7E2AEA",*/}
{/* }}*/}
{/* >*/}
{/* +*/}
{/* </Box>*/}
{/* </Box>*/}
{/* </Box>*/}
{/*)}*/}
{/*</Box>*/}
<Box
sx={{
display: "flex",

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

@ -1,12 +1,5 @@
import { useState, useEffect, useLayoutEffect, useRef } from "react"
import {
Box,
Button,
IconButton,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useState, useEffect, useLayoutEffect, useRef } from "react";
import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -14,105 +7,102 @@ import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
import { useQuestionsStore } from "@root/questions/store";
import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";
export default function QuestionsPage() {
const theme = useTheme();
const { openedModalSettingsId, openBranchingPanel } = useUiTools();
const isMobile = false//useMediaQuery(theme.breakpoints.down(660));
const quiz = useCurrentQuiz();
useLayoutEffect(() => {
updateOpenBranchingPanel(false)
updateEditSomeQuestion()
},[])
const theme = useTheme();
const { openedModalSettingsId, openBranchingPanel } = useUiTools();
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const quiz = useCurrentQuiz();
useLayoutEffect(() => {
updateOpenBranchingPanel(false);
updateEditSomeQuestion();
}, []);
const ref = useRef()
if (!quiz) return null;
const ref = useRef();
if (!quiz) return null;
return (
<>
<Box
ref={ref}
id="QuestionsPage"
sx={{
maxWidth: "796px",
width: "100%",
display: "flex",
justifyContent: "space-between",
margin: "60px 0 40px 0",
}}
>
<Typography variant={"h5"}>{quiz.name ? quiz.name : "Заголовок квиза"}</Typography>
<Button
sx={{
display: openBranchingPanel ? "none" : "flex",
fontSize: "16px",
lineHeight: "19px",
padding: 0,
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
onClick={collapseAllQuestions}
>
Свернуть всё
</Button>
</Box>
<QuestionSwitchWindowTool />
<Box
sx={{
display: "flex",
justifyContent: "space-between",
maxWidth: "796px",
}}
>
<IconButton
onClick={() => {
createUntypedQuestion(quiz.backendId);
}}
sx={{
position: "fixed",
left: isMobile ? "20px" : "250px",
bottom: isMobile ? "140px" : "20px",
}}
data-cy="create-question"
>
<AddPlus />
</IconButton>
return (
<>
<Box
ref={ref}
id="QuestionsPage"
sx={{
maxWidth: "796px",
width: "100%",
display: "flex",
justifyContent: "space-between",
margin: "60px 0 40px 0",
}}
>
<Typography variant={"h5"}>{
quiz.name ? quiz.name : "Заголовок квиза" }</Typography>
<Button
sx={{
display: openBranchingPanel ? "none" : "flex",
fontSize: "16px",
lineHeight: "19px",
padding: 0,
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
onClick={collapseAllQuestions}
>
Свернуть всё
</Button>
</Box>
<QuestionSwitchWindowTool/>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
maxWidth: "796px",
}}
>
<IconButton
onClick={() => {
createUntypedQuestion(quiz.backendId);
}}
sx={{
position: "fixed",
left: isMobile ? "20px" : "250px",
bottom: "20px",
}}
data-cy="create-question"
>
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
data-cy="back-button"
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>
<Button
variant="contained"
sx={{
height: "44px",
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={incrementCurrentStep}
>
Следующий шаг
</Button>
</Box>
</Box>
{createPortal(<QuizPreview />, document.body)}
{openedModalSettingsId !== null && <BranchingQuestions/>}
</>
);
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
data-cy="back-button"
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>
<Button
variant="contained"
sx={{
height: "44px",
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={incrementCurrentStep}
>
Следующий шаг
</Button>
</Box>
</Box>
{createPortal(<QuizPreview />, document.body)}
{openedModalSettingsId !== null && <BranchingQuestions />}
</>
);
}

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

@ -6,217 +6,216 @@ import SwitchSlider from "./switchSlider";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
import { updateQuestion } from "@root/questions/actions";
interface Props {
question: QuizQuestionNumber;
question: QuizQuestionNumber;
}
export default function SliderOptions({ question }: 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 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 SSHC = (data: string) => {
setSwitchState(data);
};
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box
sx={{
width: isTablet ? "auto" : "100%",
maxWidth: "720.8px",
display: "flex",
pl: "20px",
pr: isMobile ? "13px" : "20px",
pb: isMobile ? "30px" : "20px",
flexDirection: "column",
gap: isMobile ? "25px" : "20px",
}}
return (
<>
<Box
sx={{
width: isTablet ? "auto" : "100%",
maxWidth: "720.8px",
display: "flex",
pl: "20px",
pr: isMobile ? "13px" : "20px",
pb: isMobile ? "30px" : "20px",
flexDirection: "column",
gap: isMobile ? "25px" : "20px",
}}
>
<Box
sx={{
gap: isMobile ? "10px" : "14px",
mt: isMobile ? "25px" : "0px",
display: "flex",
flexDirection: "column",
marginRight: isMobile ? "10px" : "0px",
}}
>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
Выбор значения из диапазона
</Typography>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"0"}
min={0}
max={99999999999}
value={question.content.range.split("—")[0]}
onChange={({ target }) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
});
}}
onBlur={({ target }) => {
const start = question.content.start;
const min = Number(target.value);
const max = Number(question.content.range.split("—")[1]);
if (min >= max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
});
}
if (start < min) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.start = min;
});
}
}}
/>
<Typography>—</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"100"}
min={0}
max={100000000000}
value={question.content.range.split("—")[1]}
onChange={({ target }) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
});
}}
onBlur={({ target }) => {
const start = question.content.start;
const step = question.content.step;
const min = Number(question.content.range.split("—")[0]);
const max = Number(target.value);
const range = max - min;
if (max <= min) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
});
}
if (start > max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.start = max;
});
}
if (step > max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.step = min;
});
if (range % step) {
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
}
}}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexDirection: isMobile ? "column-reverse" : "",
gap: isMobile ? "15px" : "50px",
}}
>
<Box sx={{ width: "100%" }}>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
Начальное значение
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"50"}
min={Number(question.content.range.split("—")[0])}
max={Number(question.content.range.split("—")[1])}
value={String(question.content.start)}
onChange={({ target }) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.start = Number(target.value);
});
}}
/>
</Box>
<Box sx={{ width: "100%" }}>
<Typography
sx={{
fontWeight: "500",
fontSize: "18px",
color: "#4D4D4D",
mb: "10px",
}}
>
<Box
sx={{
gap: isMobile ? "10px" : "14px",
mt: isMobile ? "25px" : "0px",
display: "flex",
flexDirection: "column",
marginRight: isMobile ? "10px" : "0px",
}}
>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
Выбор значения из диапазона
</Typography>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"0"}
min={0}
max={99}
value={question.content.range.split("—")[0]}
onChange={({ target }) => {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
Шаг
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
min={0}
max={100}
placeholder={"1"}
error={stepError}
value={String(question.content.step)}
onChange={({ target }) => {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
});
}}
onBlur={({ target }) => {
const start = question.content.start;
const min = Number(target.value);
const max = Number(question.content.range.split("—")[1]);
question.content.step = Number(target.value);
});
}}
onBlur={({ target }) => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]);
const range = max - min;
const step = Number(target.value);
if (min >= max) {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
if (step > max) {
updateQuestion(question.id, (question) => {
if (question.type !== "number") return;
question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
});
}
question.content.step = max;
});
}
if (start < min) {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.start = min;
});
}
}}
/>
<Typography>—</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"100"}
min={0}
max={100}
value={question.content.range.split("—")[1]}
onChange={({ target }) => {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
});
}}
onBlur={({ target }) => {
const start = question.content.start;
const step = question.content.step;
const min = Number(question.content.range.split("—")[0]);
const max = Number(target.value);
const range = max - min;
if (max <= min) {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
});
}
if (start > max) {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.start = max;
});
}
if (step > max) {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.step = min;
});
if (range % step) {
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
}
}}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexDirection: isMobile ? "column-reverse" : "",
gap: isMobile ? "15px" : "50px",
}}
>
<Box sx={{ width: "100%" }}>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
Начальное значение
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"50"}
min={Number(question.content.range.split("—")[0])}
max={Number(question.content.range.split("—")[1])}
value={String(question.content.start)}
onChange={({ target }) => {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.start = Number(target.value);
});
}}
/>
</Box>
<Box sx={{ width: "100%" }}>
<Typography
sx={{
fontWeight: "500",
fontSize: "18px",
color: "#4D4D4D",
mb: "10px",
}}
>
Шаг
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
min={0}
max={100}
placeholder={"1"}
error={stepError}
value={String(question.content.step)}
onChange={({ target }) => {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.step = Number(target.value);
});
}}
onBlur={({ target }) => {
const min = Number(question.content.range.split("—")[0]);
const max = Number(question.content.range.split("—")[1]);
const range = max - min;
const step = Number(target.value);
if (step > max) {
updateQuestion(question.id, question => {
if (question.type !== "number") return;
question.content.step = max;
});
}
if (range % step) {
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
}}
/>
</Box>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
<SwitchSlider switchState={switchState} question={question} />
</>
);
if (range % step) {
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
}}
/>
</Box>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
<SwitchSlider switchState={switchState} question={question} />
</>
);
}

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

@ -12,48 +12,46 @@ import UploadFile from "./UploadFile/UploadFile";
import AnswerOptions from "./answerOptions/AnswerOptions";
import { notReachable } from "../../utils/notReachable";
interface Props {
question: AnyTypedQuizQuestion;
question: AnyTypedQuizQuestion;
}
export default function SwitchQuestionsPage({ question }: Props) {
switch (question.type) {
case "variant":
return <AnswerOptions question={question} />;
switch (question.type) {
case "variant":
return <AnswerOptions question={question} />;
case "images":
return <OptionsPicture question={question} />;
case "images":
return <OptionsPicture question={question} />;
case "varimg":
return <OptionsAndPicture question={question} />;
case "varimg":
return <OptionsAndPicture question={question} />;
case "emoji":
return <Emoji question={question} />;
case "emoji":
return <Emoji question={question} />;
case "text":
return <OwnTextField question={question} />;
case "text":
return <OwnTextField question={question} />;
case "select":
return <DropDown question={question} />;
case "select":
return <DropDown question={question} />;
case "date":
return <DataOptions question={question} />;
case "date":
return <DataOptions question={question} />;
case "number":
return <SliderOptions question={question} />;
case "number":
return <SliderOptions question={question} />;
case "file":
return <UploadFile question={question} />;
case "file":
return <UploadFile question={question} />;
case "page":
return <PageOptions question={question} />;
case "page":
return <PageOptions question={question} />;
case "rating":
return <RatingOptions question={question} />;
case "rating":
return <RatingOptions question={question} />;
default:
notReachable(question)
}
default:
notReachable(question);
}
}

298
src/pages/Questions/UploadImage/UploadImageModal.tsx
View File

@ -1,172 +1,168 @@
import {
Typography,
Box,
useTheme,
ButtonBase,
Modal,
TextField,
InputAdornment,
} from "@mui/material";
import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } from "@mui/material";
import UploadIcon from "../../../assets/icons/UploadIcon";
import SearchIcon from "../../../assets/icons/SearchIcon";
import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
import { useRef, useState, type DragEvent } from "react";
type ImageFormat = "jpg" | "jpeg" | "png" | "gif";
interface ModalkaProps {
isOpen: boolean;
onClose: () => void;
handleImageChange: (file: File) => void;
isOpen: boolean;
onClose: () => void;
handleImageChange: (file: File) => void;
description?: string;
accept?: ImageFormat[];
}
export const UploadImageModal: React.FC<ModalkaProps> = ({
handleImageChange,
isOpen,
onClose,
handleImageChange,
isOpen,
onClose,
accept,
description,
}) => {
const theme = useTheme();
const dropZone = useRef<HTMLDivElement>(null);
const [ready, setReady] = useState(false);
const theme = useTheme();
const dropZone = useRef<HTMLDivElement>(null);
const [ready, setReady] = useState(false);
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(true);
};
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(true);
};
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
const file = event.dataTransfer.files[0];
if (!file) return;
const file = event.dataTransfer.files[0];
if (!file) return;
handleImageChange(file);
};
handleImageChange(file);
};
return (
<Modal
open={isOpen}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : "";
console.log(acceptedFormats);
return (
<Modal
open={isOpen}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "690px",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
overflow: "hidden",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: "20px",
background: theme.palette.background.default,
}}
>
<Typography sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}>
Добавьте изображение
</Typography>
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
hidden
accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
multiple
type="file"
data-cy="upload-image-input"
/>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "690px",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
overflow: "hidden",
}}
onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
onDrop={handleDrop}
ref={dropZone}
sx={{
width: "580px",
padding: "33px 10px 33px 55px",
display: "flex",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
gap: "55px",
}}
onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
>
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: "20px",
background: theme.palette.background.default,
}}
>
<Typography
sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
>
Добавьте изображение
</Typography>
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
hidden
accept="image/*"
multiple
type="file"
data-cy="upload-image-input"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>
event.preventDefault()
}
onDrop={handleDrop}
ref={dropZone}
sx={{
width: "580px",
padding: "33px 10px 33px 55px",
display: "flex",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
gap: "55px",
}}
onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
>
<UploadIcon />
<Box>
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
Загрузите или перетяните сюда файл
</Typography>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
Принимает JPG, PNG, и GIF формат — максимум 5mb
</Typography>
</Box>
</Box>
</ButtonBase>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
margin: "20px 0",
}}
>
<Typography
sx={{
fontWeight: "bold",
color: "#4D4D4D",
}}
>
Или выберите на фотостоке
</Typography>
<img src={UnsplashIcon} alt="" />
</Box>
<TextField
id="search-in-unsplash"
placeholder="Ищите изображения на английском языка"
sx={{
"& .MuiInputBase-input": {
height: "48px",
padding: "0 10px 0 0",
},
"& .MuiOutlinedInput-notchedOutline": {
borderRadius: "8px",
},
"& .Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "1px solid rgba(0, 0, 0, 0.23)",
},
"& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":
{
borderColor: "rgba(0, 0, 0, 0.23)",
},
}}
InputProps={{
startAdornment: (
<InputAdornment
position="start"
sx={{
outline: "none",
"& svg > path": { stroke: "#9A9AAF" },
}}
>
<SearchIcon />
</InputAdornment>
),
}}
/>
</Box>
<UploadIcon />
<Box>
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
Загрузите или перетяните сюда файл
</Typography>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
{description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
</Typography>
</Box>
</Box>
</Modal>
);
</ButtonBase>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
margin: "20px 0",
}}
>
<Typography
sx={{
fontWeight: "bold",
color: "#4D4D4D",
}}
>
Или выберите на фотостоке
</Typography>
<img src={UnsplashIcon} alt="" />
</Box>
<TextField
id="search-in-unsplash"
placeholder="Ищите изображения на английском языка"
sx={{
"& .MuiInputBase-input": {
height: "48px",
padding: "0 10px 0 0",
},
"& .MuiOutlinedInput-notchedOutline": {
borderRadius: "8px",
},
"& .Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "1px solid rgba(0, 0, 0, 0.23)",
},
"& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
}}
InputProps={{
startAdornment: (
<InputAdornment
position="start"
sx={{
outline: "none",
"& svg > path": { stroke: "#9A9AAF" },
}}
>
<SearchIcon />
</InputAdornment>
),
}}
/>
</Box>
</Box>
</Modal>
);
};

78
src/pages/ResultPage/FirstEntry.tsx
View File

@ -1,5 +1,4 @@
import { ResultSettings } from "./ResultSettings"
import { ResultSettings } from "./ResultSettings";
import { createFrontResult } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -7,6 +6,8 @@ import { Box, Typography, useTheme, useMediaQuery, Button } from "@mui/material"
import image from "../../assets/Rectangle 110.png";
import { enqueueSnackbar } from "notistack";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { decrementCurrentStep } from "@root/quizes/actions";
export const FirstEntry = () => {
const theme = useTheme();
@ -17,16 +18,20 @@ export const FirstEntry = () => {
const create = () => {
if (quiz?.config.haveRoot) {
questions
.filter((question:AnyTypedQuizQuestion) => {
return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
})
.forEach(question => {
createFrontResult(quiz.id, question.content.id)
})
.filter((question: AnyTypedQuizQuestion) => {
return (
question.type !== null &&
question.content.rule.parentId.length !== 0 &&
question.content.rule.children.length === 0
);
})
.forEach((question) => {
createFrontResult(quiz.backendId, question.content.id);
});
} else {
createFrontResult(quiz.id, "line")
createFrontResult(quiz.backendId, "line");
}
}
};
return (
<>
@ -53,7 +58,7 @@ export const FirstEntry = () => {
mr: !isSmallMonitor ? "104px" : 0,
marginBottom: isSmallMonitor ? "20px" : 0,
position: "relative",
height: "100%"
height: "100%",
}}
>
<Typography variant="h5" sx={{ marginBottom: "20px" }}>
@ -69,7 +74,10 @@ export const FirstEntry = () => {
}}
>
<Typography sx={{ color: "#4D4D4D", width: "95%" }}>
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным
пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально
индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте
пользователя по нужной ссылке.
</Typography>
<Typography
sx={{
@ -91,21 +99,35 @@ export const FirstEntry = () => {
}}
/>
</Box>
<Button
onClick={create}
variant="contained"
sx={{
backgroundColor: "#7E2AEA",
fontSize: "18px",
lineHeight: "18px",
width: "216px",
height: "44px",
mt: "30px",
p: "10px 20px"
}}
>
Создать результаты
</Button>
<Box sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center", gap: "8px", mt: "30px" }}>
<Button
variant="outlined"
sx={{
padding: "10px 20px",
borderRadius: "8px",
height: "44px",
}}
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>
<Button
onClick={create}
variant="contained"
sx={{
backgroundColor: "#7E2AEA",
fontSize: "18px",
lineHeight: "18px",
width: "216px",
height: "44px",
p: "10px 20px",
}}
>
Создать результаты
</Button>
</Box>
</>
);
}
};

33
src/pages/ViewPublicationPage/ContactForm.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Box, Typography, Button } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
type ContactFormProps = {
showResultForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
};
export const ContactForm = ({
showResultForm,
setShowContactForm,
setShowResultForm,
}: ContactFormProps) => {
const quiz = useCurrentQuiz();
const followNextForm = () => {
setShowContactForm(false);
setShowResultForm(true);
};
return (
<Box>
<Typography>Форма контактов</Typography>
{!showResultForm && quiz?.config.resultInfo.when === "after" && (
<Button variant="contained" onClick={followNextForm}>
Показать результат
</Button>
)}
</Box>
);
};

71
src/pages/ViewPublicationPage/Footer.tsx
View File

@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
import { Box, Button, useTheme } from "@mui/material";
import { useQuizViewStore } from "@root/quizView";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import type {
AnyTypedQuizQuestion,
@ -11,20 +13,26 @@ import { getQuestionByContentId } from "@root/questions/actions";
import { enqueueSnackbar } from "notistack";
type FooterProps = {
questions: AnyTypedQuizQuestion[];
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
question: AnyTypedQuizQuestion;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
setResultQuestion: (id: string) => void;
};
export const Footer = ({
setCurrentQuestion,
questions,
question,
setShowContactForm,
setShowResultForm,
setResultQuestion,
}: FooterProps) => {
const [disablePreviousButton, setDisablePreviousButton] =
useState<boolean>(false);
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
const quiz = useCurrentQuiz();
const { answers } = useQuizViewStore();
const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[];
const theme = useTheme();
const linear = !questions.find(
({ content }) => content.rule.parentId === "root"
@ -72,32 +80,42 @@ export const Footer = ({
}
if (linear) {
const questionIndex = questions.findIndex(({ id }) => id === question.id);
return;
}
const nextQuestion = questions[questionIndex + 1];
if (nextQuestion) {
setDisableNextButton(false);
} else {
setDisableNextButton(true);
}
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
setDisableNextButton(false);
} else {
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion?.type) {
setDisableNextButton(false);
} else {
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion?.type) {
setDisableNextButton(false);
} else {
setDisableNextButton(true);
}
}
}
}, [question, answers]);
const showResult = () => {
const resultQuestion = questions.find(
({ type, content }) =>
type === "result" && content.rule.parentId === question.content.id
);
if (resultQuestion) {
setResultQuestion(resultQuestion.id);
return;
}
if (quiz?.config.resultInfo.when === "after") {
setShowContactForm(true);
} else {
setShowResultForm(true);
}
};
const getNextQuestionId = () => {
if (answers.length) {
const answer = answers.find(
@ -171,11 +189,12 @@ export const Footer = ({
const followNextStep = () => {
if (linear) {
const questionIndex = questions.findIndex(({ id }) => id === question.id);
const nextQuestion = questions[questionIndex + 1];
if (nextQuestion) {
if (nextQuestion && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
} else {
showResult();
}
return;
@ -186,7 +205,7 @@ export const Footer = ({
if (nextQuestionId) {
const nextQuestion = getQuestionByContentId(nextQuestionId);
if (nextQuestion?.type) {
if (nextQuestion?.type && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
return;
} else {
@ -196,10 +215,10 @@ export const Footer = ({
const nextQuestion = getQuestionByContentId(
question.content.rule.default
);
if (nextQuestion?.type) {
if (nextQuestion?.type && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
} else {
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
showResult();
}
}
};

53
src/pages/ViewPublicationPage/Question.tsx
View File

@ -1,5 +1,9 @@
import { useState, useEffect } from "react";
import { Box } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { getQuestionByContentId } from "@root/questions/actions";
import { Variant } from "./questions/Variant";
import { Images } from "./questions/Images";
import { Varimg } from "./questions/Varimg";
@ -12,12 +16,12 @@ import { File } from "./questions/File";
import { Page } from "./questions/Page";
import { Rating } from "./questions/Rating";
import { Footer } from "./Footer";
import { ContactForm } from "./ContactForm";
import { ResultForm } from "./ResultForm";
import { ResultQuestion } from "./ResultQuestion";
import { useState, type FC, useEffect } from "react";
import type { QuestionType } from "../../model/question/question";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { getQuestionByContentId } from "@root/questions/actions";
type QuestionProps = {
questions: AnyTypedQuizQuestion[];
@ -41,6 +45,9 @@ export const Question = ({ questions }: QuestionProps) => {
const quiz = useCurrentQuiz();
const [currentQuestion, setCurrentQuestion] =
useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false);
const [resultQuestion, setResultQuestion] = useState<string>("");
useEffect(() => {
const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
@ -70,13 +77,41 @@ export const Question = ({ questions }: QuestionProps) => {
margin: "0 auto",
}}
>
<QuestionComponent currentQuestion={currentQuestion} />
{!showContactForm && !showResultForm && !resultQuestion && (
<QuestionComponent currentQuestion={currentQuestion} />
)}
{resultQuestion && (
<ResultQuestion
resultQuestion={resultQuestion}
setResultQuestion={setResultQuestion}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
{showContactForm && (
<ContactForm
showResultForm={showResultForm}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
{showResultForm && (
<ResultForm
showContactForm={showContactForm}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
</Box>
<Footer
questions={questions}
question={currentQuestion}
setCurrentQuestion={setCurrentQuestion}
/>
{!showContactForm && !showResultForm && !resultQuestion && (
<Footer
question={currentQuestion}
setCurrentQuestion={setCurrentQuestion}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
setResultQuestion={setResultQuestion}
/>
)}
</Box>
);
};

33
src/pages/ViewPublicationPage/ResultForm.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Box, Typography, Button } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
type ResultFormProps = {
showContactForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
};
export const ResultForm = ({
showContactForm,
setShowContactForm,
setShowResultForm,
}: ResultFormProps) => {
const quiz = useCurrentQuiz();
const followNextForm = () => {
setShowResultForm(false);
setShowContactForm(true);
};
return (
<Box>
<Typography>Форма результатов</Typography>
{!showContactForm && quiz?.config.resultInfo.when !== "after" && (
<Button variant="contained" onClick={followNextForm}>
Показать форму контактов
</Button>
)}
</Box>
);
};

43
src/pages/ViewPublicationPage/ResultQuestion.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Box, Typography, Button } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
type ResultQuestionProps = {
resultQuestion: string;
setResultQuestion: (id: string) => void;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
};
export const ResultQuestion = ({
resultQuestion,
setResultQuestion,
setShowContactForm,
setShowResultForm,
}: ResultQuestionProps) => {
const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore();
const followNextForm = () => {
setResultQuestion("");
if (quiz?.config.resultInfo.when === "after") {
setShowContactForm(true);
} else {
setShowResultForm(true);
}
};
return (
<Box>
<Typography>Вопрос результат</Typography>
<Typography>
{JSON.stringify(questions.find(({ id }) => id === resultQuestion))}
</Typography>
<Button variant="contained" onClick={followNextForm}>
Далее
</Button>
</Box>
);
};

23
src/pages/ViewPublicationPage/index.tsx
View File

@ -25,18 +25,17 @@ export const ViewPage = () => {
useEffect(() => {
const getData = async () => {
const quizes = await quizApi.getList()
setQuizes(quizes)
const quizes = await quizApi.getList();
setQuizes(quizes);
const questions = await questionApi.getList({ quiz_id: editQuizId })
setQuestions(questions)
}
getData()
}, [])
const questions = await questionApi.getList({ quiz_id: editQuizId });
setQuestions(questions);
};
getData();
}, []);
useEffect(() => {
setVisualStartPage(quiz?.config.noStartPage)
}, [questions])
setVisualStartPage(quiz?.config.noStartPage);
}, [questions]);
const [visualStartPage, setVisualStartPage] = useState<boolean>();
@ -52,8 +51,8 @@ export const ViewPage = () => {
questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
).sort((previousItem, item) => previousItem.page - item.page);
console.log("visualStartPage ", visualStartPage)
if (visualStartPage === undefined) return <></>
console.log("visualStartPage ", visualStartPage);
if (visualStartPage === undefined) return <></>;
return (
<Box>
{!visualStartPage ? (

36
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -15,32 +15,24 @@ type NumberProps = {
export const Number = ({ currentQuestion }: NumberProps) => {
const [minRange, setMinRange] = useState<string>("0");
const [maxRange, setMaxRange] = useState<string>("100");
const [maxRange, setMaxRange] = useState<string>("100000000000");
const theme = useTheme();
const { answers } = useQuizViewStore();
const updateMinRangeDebounced = useDebouncedCallback(
(value, crowded = false) => {
if (crowded) {
setMinRange(maxRange);
}
const updateMinRangeDebounced = useDebouncedCallback((value, crowded = false) => {
if (crowded) {
setMinRange(maxRange);
}
updateAnswer(currentQuestion.content.id, value);
},
1000
);
const updateMaxRangeDebounced = useDebouncedCallback(
(value, crowded = false) => {
if (crowded) {
setMaxRange(minRange);
}
updateAnswer(currentQuestion.content.id, value);
}, 1000);
const updateMaxRangeDebounced = useDebouncedCallback((value, crowded = false) => {
if (crowded) {
setMaxRange(minRange);
}
updateAnswer(currentQuestion.content.id, value);
},
1000
);
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
updateAnswer(currentQuestion.content.id, value);
}, 1000);
const answer = answers.find(({ questionId }) => questionId === currentQuestion.content.id)?.answer as string;
const min = window.Number(currentQuestion.content.range.split("—")[0]);
const max = window.Number(currentQuestion.content.range.split("—")[1]);

128
src/pages/createQuize/MyQuizzesFull.tsx
View File

@ -1,12 +1,4 @@
import {
Box,
Button,
SxProps,
Theme,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import { createQuiz } from "@root/quizes/actions";
import { useQuizes } from "@root/quizes/hooks";
import SectionWrapper from "@ui_kit/SectionWrapper";
@ -16,72 +8,62 @@ import ComplexNavText from "./ComplexNavText";
import FirstQuiz from "./FirstQuiz";
import QuizCard from "./QuizCard";
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
}
export default function MyQuizzesFull({
outerContainerSx: sx,
children,
}: Props) {
const { quizes } = useQuizes();
const navigate = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(500));
export default function MyQuizzesFull({ outerContainerSx: sx, children }: Props) {
const { quizes } = useQuizes();
const navigate = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(500));
return (
<>
{quizes.length === 0 ? (
<FirstQuiz />
) : (
<SectionWrapper maxWidth="lg">
<ComplexNavText text1="Кабинет квизов" />
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mt: "20px",
mb: "30px",
}}
>
<Typography variant="h4">Мои квизы</Typography>
<Button
variant="contained"
sx={{
padding: isMobile ? "10px" : "10px 47px",
minWidth: "44px",
}}
onClick={() => createQuiz(navigate)}
data-cy="create-quiz"
>
{isMobile ? "+" : "Создать +"}
</Button>
</Box>
<Box
sx={{
py: "10px",
display: "flex",
flexWrap: "wrap",
gap: "40px",
mb: "60px",
}}
>
{quizes.map(quiz => (
<QuizCard
key={quiz.id}
quiz={quiz}
openCount={0}
applicationCount={0}
conversionPercent={0}
/>
))}
</Box>
{children}
</SectionWrapper>
)}
</>
);
return (
<>
{quizes.length === 0 ? (
<FirstQuiz />
) : (
<SectionWrapper maxWidth="lg">
<ComplexNavText text1="Кабинет квизов" />
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mt: "20px",
mb: "30px",
}}
>
<Typography variant="h4">Мои квизы</Typography>
<Button
variant="contained"
sx={{
padding: isMobile ? "10px" : "10px 47px",
minWidth: "44px",
}}
onClick={() => createQuiz(navigate)}
data-cy="create-quiz"
>
{isMobile ? "+" : "Создать +"}
</Button>
</Box>
<Box
sx={{
py: "10px",
display: "flex",
flexWrap: "wrap",
gap: "40px",
mb: "60px",
}}
>
{quizes.map((quiz) => (
<QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
))}
</Box>
{children}
</SectionWrapper>
)}
</>
);
}

30
src/pages/startPage/EditPage.tsx
View File

@ -29,10 +29,9 @@ import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import { cleanQuestions } from "@root/questions/actions";
import { cleanQuestions, setQuestions } from "@root/questions/actions";
import { updateOpenBranchingPanel } from "@root/uiTools/actions";
import { BranchingPanel } from "../Questions/BranchingPanel";
import { setQuestions } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { useQuizes } from "@root/quizes/hooks";
import { questionApi } from "@api/question";
@ -52,6 +51,7 @@ export default function EditPage() {
const questions = await questionApi.getList({ quiz_id: editQuizId })
setQuestions(questions)
}
getData()
}, [])
@ -245,7 +245,7 @@ export default function EditPage() {
left: 0,
bottom: 0,
width: "100%",
padding: "20px 40px",
padding: isMobile ? "20px 16px" : "20px 40px",
display: "flex",
justifyContent: "flex-end",
gap: "15px",
@ -320,16 +320,20 @@ export default function EditPage() {
</Box>
</Box>
)}
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
}}
>
Опубликовать
</Button>
<a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
minWidth: "130px"
}}
>
Опубликовать
</Button>
</a>
</Box>
}

210
src/pages/startPage/FaviconDropZone.tsx
View File

@ -6,120 +6,126 @@ import { useState } from "react";
import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
import { useDisclosure } from "../../utils/useDisclosure";
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
interface Props {
imageUrl: string | null;
onImageUploadClick: (image: Blob) => void;
onDeleteClick: () => void;
imageUrl: string | null;
onImageUploadClick: (image: Blob) => void;
onDeleteClick: () => void;
}
export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) {
const theme = useTheme();
const quiz = useCurrentQuiz();
const [isDropReady, setIsDropReady] = useState<boolean>(false);
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
const theme = useTheme();
const quiz = useCurrentQuiz();
const [isDropReady, setIsDropReady] = useState<boolean>(false);
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
if (!quiz) return null;
if (!quiz) return null;
async function handleImageUpload(file: File) {
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
async function handleImageUpload(file: File) {
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
onImageUploadClick(file);
closeImageUploadModal();
}
onImageUploadClick(file);
closeImageUploadModal();
}
const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setIsDropReady(false);
const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setIsDropReady(false);
const file = event.dataTransfer.files[0];
if (!file || imageUrl) return;
const file = event.dataTransfer.files[0];
if (!file || imageUrl) return;
handleImageUpload(file);
};
handleImageUpload(file);
};
return (
<Box sx={{
return (
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
<UploadImageModal
isOpen={isImageUploadOpen}
onClose={closeImageUploadModal}
handleImageChange={handleImageUpload}
description="Принимает JPG, PNG — максимум 5mb"
accept={["jpeg", "jpg", "png"]}
/>
<Box
onDragEnter={() => !imageUrl && setIsDropReady(true)}
onDragExit={() => setIsDropReady(false)}
onDragOver={(e) => e.preventDefault()}
onDrop={onDrop}
sx={{
width: "48px",
height: "48px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
}}
>
<ButtonBase
onClick={imageUrl ? undefined : openImageUploadModal}
sx={{
width: "100%",
height: "100%",
display: "flex",
gap: "10px",
}}>
<UploadImageModal
isOpen={isImageUploadOpen}
onClose={closeImageUploadModal}
handleImageChange={handleImageUpload}
justifyContent: "center",
alignItems: "center",
borderRadius: "8px",
overflow: "hidden",
}}
>
{imageUrl ? (
<img
src={imageUrl}
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
}}
/>
<Box
onDragEnter={() => !imageUrl && setIsDropReady(true)}
onDragExit={() => setIsDropReady(false)}
onDragOver={e => e.preventDefault()}
onDrop={onDrop}
sx={{
width: "48px",
height: "48px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
}}>
<ButtonBase
onClick={imageUrl ? undefined : openImageUploadModal}
sx={{
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "8px",
overflow: "hidden",
}}
>
{imageUrl ?
<img
src={imageUrl}
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
}}
/>
:
<UploadIcon />
}
</ButtonBase>
</Box>
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
}}>
{imageUrl &&
<ButtonBase onClick={onDeleteClick}>
<Typography
sx={{
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
}}
>
Удалить
</Typography>
</ButtonBase>
}
<Typography
sx={{
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
mt: "auto",
}}
>
5 MB максимум
</Typography>
</Box>
</Box>
);
};
) : (
<UploadIcon />
)}
</ButtonBase>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
}}
>
{imageUrl && (
<ButtonBase onClick={onDeleteClick}>
<Typography
sx={{
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
}}
>
Удалить
</Typography>
</ButtonBase>
)}
<Typography
sx={{
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
mt: "auto",
}}
>
5 MB максимум
</Typography>
</Box>
</Box>
);
}

9
src/pages/startPage/StartPageSettings.tsx
View File

@ -2,6 +2,7 @@ import AlignCenterIcon from "@icons/AlignCenterIcon";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import ArrowLeft from "@icons/ArrowLeftSP";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
@ -652,7 +653,7 @@ export default function StartPageSettings() {
<Button
onClick={() => setFormState("design")}
sx={{
display: "block",
display: "flex",
marginTop: "20px",
padding: "0",
fontWeight: "bold",
@ -662,14 +663,14 @@ export default function StartPageSettings() {
textUnderlineOffset: "2px",
}}
>
🡰 Вернуться к дизайну
<ArrowLeft right={false}/> Вернуться к дизайну
</Button>
)}
{formState === "design" && (
<Button
onClick={() => setFormState("content")}
sx={{
display: "block",
display: "flex",
marginLeft: "auto",
marginTop: "20px",
padding: "0",
@ -680,7 +681,7 @@ export default function StartPageSettings() {
textUnderlineOffset: "2px",
}}
>
Далее заполнить контент 🡲
Далее заполнить контент <ArrowLeft right={true}/>
</Button>
)}
</Box>

2
src/stores/questions/actions.ts
View File

@ -297,6 +297,7 @@ export const uploadQuestionImage = async (
if (!question || !quizQid) return;
try {
console.log(question.quizId)
const response = await quizApi.addImages(question.quizId, blob);
const values = Object.values(response);
@ -553,3 +554,4 @@ export const createBackResult = async (
enqueueSnackbar("Не удалось создать вопрос");
}
});

135
src/ui_kit/CustomSlider.tsx
View File

@ -1,74 +1,77 @@
import {Slider, useTheme} from "@mui/material";
import { Slider, useTheme } from "@mui/material";
type CustomSliderProps = {
defaultValue?: number;
value?: number | number[];
min?: number;
max?: number;
step?: number;
onChange?: (_: Event, value: number | number[]) => void;
onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
defaultValue?: number;
value?: number | number[];
min?: number;
max?: number;
step?: number;
onChange?: (_: Event, value: number | number[]) => void;
onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
};
export const CustomSlider = ({
defaultValue,
value,
min = 0,
max = 100,
step,
onChange,
onChangeCommitted
defaultValue,
value,
min = 0,
max = 100,
step,
onChange,
onChangeCommitted,
}: CustomSliderProps) => {
// const handleChange = ({ type }: Event, newValue: number | number[]) => {
// // Для корректной работы слайдера в FireFox
// if (type !== "change") {
// onChange?.(e, newValue);
// }
// };
const theme = useTheme();
// const handleChange = ({ type }: Event, newValue: number | number[]) => {
// // Для корректной работы слайдера в FireFox
// if (type !== "change") {
// onChange?.(e, newValue);
// }
// };
const theme = useTheme();
return (
<Slider
value={value}
defaultValue={defaultValue}
min={min}
max={max}
step={step}
onChange={onChange}
valueLabelDisplay="on"
onChangeCommitted={onChangeCommitted}
onMouseDown={(e) => e.stopPropagation()}
data-cy="slider"
sx={{
color: theme.palette.brightPurple.main,
padding: "0",
marginTop: "75px",
"& .MuiSlider-valueLabel":{
background: theme.palette.brightPurple.main,
borderRadius: "8px",
width: "60px",
height: "36px"
},
"& .MuiSlider-valueLabel::before": {
width: "6px",
height: "2px",
transform: "translate(-50%, 50%) rotate(90deg)",
bottom: "-5px"
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
height: "12px"
},
"& .MuiSlider-thumb": {
border: "3px #f2f3f7 solid",
height: "23px",
width: "23px"
},
"& .MuiSlider-track": {
height: "12px"
}
}}
/>
);
return (
<Slider
value={value}
defaultValue={defaultValue}
min={min}
max={max}
step={step}
onChange={onChange}
valueLabelDisplay="on"
onChangeCommitted={onChangeCommitted}
onMouseDown={(e) => e.stopPropagation()}
data-cy="slider"
sx={{
color: theme.palette.brightPurple.main,
padding: "0",
marginTop: "75px",
"& .MuiSlider-valueLabel": {
background: theme.palette.brightPurple.main,
borderRadius: "8px",
minWidth: "60px",
width: "auto",
whiteSpace: "nowrap",
textAlign: "center",
height: "36px",
},
"& .MuiSlider-valueLabel::before": {
width: "6px",
height: "2px",
transform: "translate(-50%, 50%) rotate(90deg)",
bottom: "-5px",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
height: "12px",
},
"& .MuiSlider-thumb": {
border: "3px #f2f3f7 solid",
height: "23px",
width: "23px",
},
"& .MuiSlider-track": {
height: "12px",
},
}}
/>
);
};

8
src/ui_kit/CustomTextField.tsx
View File

@ -1,10 +1,4 @@
import {
FormControl,
TextField,
useTheme,
SxProps,
Theme,
} from "@mui/material";
import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
import type { InputProps } from "@mui/material";

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

@ -5,6 +5,7 @@ import { decrementCurrentStep } from "@root/quizes/actions";
import PenaLogo from "../PenaLogo";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import { Link } from "react-router-dom";
export default function Header() {
const theme = useTheme();
@ -25,7 +26,9 @@ export default function Header() {
zIndex: theme.zIndex.drawer + 1,
}}
>
<PenaLogo width={124} />
<Link to="/">
<PenaLogo width={124} />
</Link>
<Box
sx={{
display: "flex",

34
src/ui_kit/Header/HeaderFull.tsx
View File

@ -1,11 +1,4 @@
import {
Box,
Container,
IconButton,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";
import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import WalletIcon from "@icons/WalletIcon";
@ -13,7 +6,7 @@ import CustomAvatar from "./Avatar";
import { Burger } from "@icons/Burger";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { useNavigate } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
import { clearUserData } from "@root/user";
import { LogoutButton } from "@ui_kit/LogoutButton";
@ -59,7 +52,9 @@ export default function HeaderFull() {
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
/>
)}
<PenaLogo width={124} />
<Link to="/">
<PenaLogo width={124} />
</Link>
{!isTablet && (
<Box
sx={{
@ -93,10 +88,7 @@ export default function HeaderFull() {
>
Мой баланс
</Typography>
<Typography
variant="body2"
color={theme.palette.brightPurple.main}
>
<Typography variant="body2" color={theme.palette.brightPurple.main}>
00.00 руб.
</Typography>
</Box>
@ -111,13 +103,13 @@ export default function HeaderFull() {
height: "36px",
width: "36px",
}}
/>
<LogoutButton
onClick={handleLogoutClick}
sx={{
ml: "20px",
}}
/>
/>
<LogoutButton
onClick={handleLogoutClick}
sx={{
ml: "20px",
}}
/>
</>
)}
</Box>

598
src/ui_kit/Modal/CropModal.tsx
View File

@ -1,330 +1,344 @@
import { CropIcon } from "@icons/CropIcon";
import { ResetIcon } from "@icons/ResetIcon";
import {
Box,
Button,
IconButton,
Modal,
Slider,
SxProps,
Theme,
Typography,
useMediaQuery,
useTheme,
Box,
Button,
IconButton,
Modal,
Slider,
SxProps,
Theme,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { FC, useMemo, useRef, useState } from "react";
import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
import { canvasPreview } from "./utils/canvasPreview";
const styleSlider: SxProps<Theme> = {
color: "#7E2AEA",
height: "12px",
"& .MuiSlider-track": {
border: "none",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
},
"& .MuiSlider-thumb": {
height: 26,
width: 26,
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
color: "#7E2AEA",
height: "12px",
"& .MuiSlider-track": {
border: "none",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
},
"& .MuiSlider-thumb": {
height: 26,
width: 26,
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
},
},
},
};
interface Props {
isOpen: boolean;
imageBlob: Blob | null;
originalImageUrl: string | null;
setCropModalImageBlob: (imageBlob: Blob) => void;
onClose: () => void;
onSaveImageClick: (imageBlob: Blob) => void;
isOpen: boolean;
imageBlob: Blob | null;
originalImageUrl: string | null;
setCropModalImageBlob: (imageBlob: Blob) => void;
onClose: () => void;
onSaveImageClick: (imageBlob: Blob) => void;
}
export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
const theme = useTheme();
const [crop, setCrop] = useState<Crop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
const [darken, setDarken] = useState(0);
const [rotate, setRotate] = useState(0);
const [width, setWidth] = useState<number>(240);
const cropImageElementRef = useRef<HTMLImageElement>(null);
const isMobile = useMediaQuery(theme.breakpoints.down(786));
export const CropModal: FC<Props> = ({
isOpen,
imageBlob,
originalImageUrl,
setCropModalImageBlob,
onSaveImageClick,
onClose,
}) => {
const theme = useTheme();
const [crop, setCrop] = useState<Crop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
const [darken, setDarken] = useState(0);
const [rotate, setRotate] = useState(0);
const [width, setWidth] = useState<number>(240);
const cropImageElementRef = useRef<HTMLImageElement>(null);
const isMobile = useMediaQuery(theme.breakpoints.down(786));
const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
const handleCropClick = async () => {
if (!completedCrop) throw new Error("No completed crop");
if (!cropImageElementRef.current) throw new Error("No image");
const handleCropClick = async () => {
if (!completedCrop) throw new Error("No completed crop");
if (!cropImageElementRef.current) throw new Error("No image");
const canvasCopy = document.createElement("canvas");
const ctx = canvasCopy.getContext("2d");
if (!ctx) throw new Error("No 2d context");
const canvasCopy = document.createElement("canvas");
const ctx = canvasCopy.getContext("2d");
if (!ctx) throw new Error("No 2d context");
canvasCopy.width = completedCrop.width;
canvasCopy.height = completedCrop.height;
ctx.filter = `brightness(${100 - darken}%)`;
canvasCopy.width = completedCrop.width;
canvasCopy.height = completedCrop.height;
ctx.filter = `brightness(${100 - darken}%)`;
await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
canvasCopy.toBlob((blob) => {
if (!blob) throw new Error("Failed to create blob");
canvasCopy.toBlob((blob) => {
if (!blob) throw new Error("Failed to create blob");
setCropModalImageBlob(blob);
setCrop(undefined);
setCompletedCrop(undefined);
});
};
setCropModalImageBlob(blob);
setCrop(undefined);
setCompletedCrop(undefined);
});
};
function handleSaveClick() {
if (imageBlob) onSaveImageClick?.(imageBlob);
setCrop(undefined);
setCompletedCrop(undefined);
onClose();
function handleSaveClick() {
if (imageBlob) onSaveImageClick?.(imageBlob);
setCrop(undefined);
setCompletedCrop(undefined);
onClose();
}
async function handleLoadOriginalImage() {
if (!originalImageUrl) return;
const response = await fetch(originalImageUrl);
const blob = await response.blob();
setCropModalImageBlob(blob);
setCrop(undefined);
setCompletedCrop(undefined);
}
const getImageSize = () => {
if (cropImageElementRef.current) {
const imageWidth = cropImageElementRef.current.naturalWidth;
const imageHeight = cropImageElementRef.current.naturalHeight;
const aspect = imageWidth / imageHeight;
if (aspect <= 1.333) {
setWidth(240);
}
if (aspect >= 1.5) {
setWidth(580);
}
if (aspect >= 1.778) {
setWidth(580);
}
}
};
async function handleLoadOriginalImage() {
if (!originalImageUrl) return;
const response = await fetch(originalImageUrl);
const blob = await response.blob();
setCropModalImageBlob(blob);
setCrop(undefined);
setCompletedCrop(undefined);
}
const getImageSize = () => {
if (cropImageElementRef.current) {
const imageWidth = cropImageElementRef.current.naturalWidth;
const imageHeight = cropImageElementRef.current.naturalHeight;
const aspect = imageWidth / imageHeight;
if (aspect <= 1.333) {
setWidth(240);
}
if (aspect >= 1.5) {
setWidth(580);
}
if (aspect >= 1.778) {
setWidth(580);
}
}
};
return (
<Modal
open={isOpen}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
return (
<Modal
open={isOpen}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
bgcolor: "background.paper",
boxShadow: 24,
padding: "20px",
borderRadius: "8px",
width: isMobile ? "343px" : "620px",
}}
>
<Box
sx={{
height: "320px",
padding: "10px",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Box sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
bgcolor: "background.paper",
boxShadow: 24,
padding: "20px",
borderRadius: "8px",
width: isMobile ? "343px" : "620px",
}}>
<Box
sx={{
height: "320px",
padding: "10px",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{imageUrl && (
<ReactCrop
crop={crop}
onChange={(_, percentCrop) => setCrop(percentCrop)}
onComplete={(c) => setCompletedCrop(c)}
maxWidth={500}
minWidth={50}
maxHeight={320}
minHeight={50}
>
<img
onLoad={getImageSize}
ref={cropImageElementRef}
alt="Crop me"
src={imageUrl}
style={{
filter: `brightness(${100 - darken}%)`,
transform: ` rotate(${rotate}deg)`,
maxWidth: "580px",
maxHeight: "320px",
}}
width={width}
/>
</ReactCrop>
)}
</Box>
<Box
sx={{
color: "#7E2AEA",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "16xp",
fontWeight: "600",
marginBottom: "50px",
}}
>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.width ? Math.round(crop.width) + "px" : ""}
</Typography>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.height ? Math.round(crop.height) + "px" : ""}
</Typography>
</Box>
{imageUrl && (
<ReactCrop
crop={crop}
onChange={(_, percentCrop) => setCrop(percentCrop)}
onComplete={(c) => setCompletedCrop(c)}
maxWidth={500}
minWidth={50}
maxHeight={320}
minHeight={50}
>
<img
onLoad={getImageSize}
ref={cropImageElementRef}
alt="Crop me"
src={imageUrl}
style={{
filter: `brightness(${100 - darken}%)`,
transform: ` rotate(${rotate}deg)`,
maxWidth: "580px",
maxHeight: "320px",
}}
width={width}
/>
</ReactCrop>
)}
</Box>
<Box
sx={{
color: "#7E2AEA",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "16xp",
fontWeight: "600",
marginBottom: "50px",
}}
>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.width ? Math.round(crop.width) + "px" : ""}
</Typography>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.height ? Math.round(crop.height) + "px" : ""}
</Typography>
</Box>
<Box
sx={{
display: isMobile ? "block" : "flex",
alignItems: "end",
justifyContent: "space-between",
}}
>
<IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
<ResetIcon />
</IconButton>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
Размер
</Typography>
<Slider
sx={[styleSlider, {
width: isMobile ? "350px" : "250px",
}]}
value={width}
min={50}
max={580}
step={1}
onChange={(_, newValue) => {
setWidth(newValue as number);
}}
/>
</Box>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
Затемнение
</Typography>
<Slider
sx={[styleSlider, {
width: isMobile ? "350px" : "250px",
}]}
value={darken}
min={0}
max={100}
step={1}
onChange={(_, newValue) => setDarken(newValue as number)}
/>
</Box>
</Box>
<Box
sx={{
marginTop: "40px",
width: "100%",
display: "flex",
}}
>
<Button
onClick={handleSaveClick}
disableRipple
data-cy="crop-modal-save-button"
sx={{
height: "48px",
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
px: "20px",
}}
>Сохранить</Button>
<Button
onClick={handleLoadOriginalImage}
disableRipple
disabled={!originalImageUrl}
sx={{
width: "215px",
height: "48px",
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
ml: "auto",
}}
>
Загрузить оригинал
</Button>
<Button
onClick={handleCropClick}
disableRipple
variant="contained"
disabled={!completedCrop}
sx={{
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
>
<CropIcon />
Обрезать
</Button>
</Box>
</Box>
</Modal>
);
<Box
sx={{
display: isMobile ? "block" : "flex",
alignItems: "end",
justifyContent: "space-between",
}}
>
<IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
<ResetIcon />
</IconButton>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
<Slider
sx={[
styleSlider,
{
width: isMobile ? "350px" : "250px",
},
]}
value={width}
min={50}
max={580}
step={1}
onChange={(_, newValue) => {
setWidth(newValue as number);
}}
/>
</Box>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
<Slider
sx={[
styleSlider,
{
width: isMobile ? "350px" : "250px",
},
]}
value={darken}
min={0}
max={100}
step={1}
onChange={(_, newValue) => setDarken(newValue as number)}
/>
</Box>
</Box>
<Box
sx={{
marginTop: "40px",
width: "100%",
display: "flex",
gap: "10px",
}}
>
<Button
onClick={handleCropClick}
disableRipple
disabled={!completedCrop}
sx={{
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
color: "#7E2AEA",
border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
backgroundColor: "transparent",
}}
>
<CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
Обрезать
</Button>
<Button
onClick={handleLoadOriginalImage}
disableRipple
disabled={!originalImageUrl}
sx={{
width: "215px",
height: "48px",
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
}}
>
Загрузить оригинал
</Button>
<Button
onClick={handleSaveClick}
disableRipple
variant="contained"
data-cy="crop-modal-save-button"
sx={{
height: "48px",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
px: "20px",
ml: "auto",
}}
>
Сохранить
</Button>
</Box>
</Box>
</Modal>
);
};
export function useCropModalState(initialOpenState = false) {
const [isCropModalOpen, setOpened] = useState(initialOpenState);
const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
const [isCropModalOpen, setOpened] = useState(initialOpenState);
const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
const closeCropModal = () => {
setOpened(false);
setCropModalImageBlob(null);
setOriginalImageUrl(null);
};
const closeCropModal = () => {
setOpened(false);
setCropModalImageBlob(null);
setOriginalImageUrl(null);
};
async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
if (typeof image === "string") {
const response = await fetch(image);
image = await response.blob();
}
setCropModalImageBlob(image);
setOriginalImageUrl(originalImageUrl);
setOpened(true);
async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
if (typeof image === "string") {
const response = await fetch(image);
image = await response.blob();
}
return {
isCropModalOpen,
openCropModal,
closeCropModal,
imageBlob,
setCropModalImageBlob,
originalImageUrl,
} as const;
setCropModalImageBlob(image);
setOriginalImageUrl(originalImageUrl);
setOpened(true);
}
return {
isCropModalOpen,
openCropModal,
closeCropModal,
imageBlob,
setCropModalImageBlob,
originalImageUrl,
} as const;
}

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
View File

@ -32,7 +32,9 @@ export default function Number({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<Typography variant="h6" data-cy="question-title">
{question.title}
</Typography>
<Box
sx={{
px: 2,

2
src/ui_kit/switchStepPages.tsx
View File

@ -32,7 +32,7 @@ export default function SwitchStepPages({
}
case 1: return quizType === "form" ? <FormQuestionsPage /> : <QuestionsPage />;
case 2: return <ResultPage />;
case 3: return <QuestionsMap />;
case 3: return <ContactFormPage />;
case 4: return <ContactFormPage />;
case 5: return <InstallQuiz />;
case 6: return <>Реклама</>;

13
yarn.lock
View File

@ -4114,10 +4114,15 @@ csstype@^3.0.2, csstype@^3.1.2:
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
cypress@^13.4.0:
version "13.4.0"
resolved "https://registry.npmjs.org/cypress/-/cypress-13.4.0.tgz"
integrity sha512-KeWNC9xSHG/ewZURVbaQsBQg2mOKw4XhjJZFKjWbEjgZCdxpPXLpJnfq5Jns1Gvnjp6AlnIfpZfWFlDgVKXdWQ==
cypress-file-upload@^5.0.8:
version "5.0.8"
resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
cypress@^13.6.1:
version "13.6.1"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.1.tgz#c5f714f08551666ed3ac1fa95718eabb23a416df"
integrity sha512-k1Wl5PQcA/4UoTffYKKaxA0FJKwg8yenYNYRzLt11CUR0Kln+h7Udne6mdU1cUIdXBDTVZWtmiUjzqGs7/pEpw==
dependencies:
"@cypress/request" "^3.0.0"
"@cypress/xvfb" "^1.2.4"