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 
Dev

See merge request frontend/squiz!77
This commit is contained in:
Nastya 2023-12-16 21:30:25 +00:00
commit 94a7ab70ee
26 changed files with 1720 additions and 20098 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19013
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

101
src/App.tsx
View File

@ -5,7 +5,7 @@ import "dayjs/locale/ru";
import SigninDialog from "./pages/auth/Signin"; import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup"; import SignupDialog from "./pages/auth/Signup";
import { ViewPage } from "./pages/ViewPublicationPage"; import { ViewPage } from "./pages/ViewPublicationPage";
import { BrowserRouter, Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom"; import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
import "./index.css"; import "./index.css";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage"; import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz"; import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
@ -21,61 +21,64 @@ import { clearUserData, setUser, useUserStore } from "@root/user";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import PrivateRoute from "@ui_kit/PrivateRoute"; import PrivateRoute from "@ui_kit/PrivateRoute";
import { Restore } from "./pages/startPage/Restore";
dayjs.locale("ru"); dayjs.locale("ru");
const routeslink = [ const routeslink = [
{ path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false }, { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
{ path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true, }, { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
{ path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true }, { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
{ path: "/result", page: <Result />, header: true, sidebar: true }, { path: "/result", page: <Result />, header: true, sidebar: true },
{ path: "/settings", page: <ResultSettings />, header: true, sidebar: true }, { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
{ path: "/install", page: <InstallQuiz />, header: true, sidebar: true },
] as const; ] as const;
export default function App() { export default function App() {
const userId = useUserStore((state) => state.userId); const userId = useUserStore((state) => state.userId);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
useUserFetcher({ useUserFetcher({
url: `https://hub.pena.digital/user/${userId}`, url: `https://hub.pena.digital/user/${userId}`,
userId, userId,
onNewUser: setUser, onNewUser: setUser,
onError: (error) => { onError: (error) => {
const errorMessage = getMessageFromFetchError(error); const errorMessage = getMessageFromFetchError(error);
if (errorMessage) { if (errorMessage) {
enqueueSnackbar(errorMessage); enqueueSnackbar(errorMessage);
clearUserData(); clearUserData();
clearAuthToken(); clearAuthToken();
} }
}, },
}); });
if (location.state?.redirectTo) if (location.state?.redirectTo)
return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />; return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;
return ( return (
<> <>
<ContactFormModal /> <ContactFormModal />
{location.state?.backgroundLocation && ( {location.state?.backgroundLocation && (
<Routes> <Routes>
<Route path="/signin" element={<SigninDialog />} /> <Route path="/signin" element={<SigninDialog />} />
<Route path="/signup" element={<SignupDialog />} /> <Route path="/signup" element={<SignupDialog />} />
</Routes> <Route path="/restore" element={<Restore />} />
)} </Routes>
<Routes location={location.state?.backgroundLocation || location}> )}
<Route path="/" element={<Landing />} /> <Routes location={location.state?.backgroundLocation || location}>
<Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} /> <Route path="/" element={<Landing />} />
<Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} /> <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
<Route element={<PrivateRoute />}> <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
{routeslink.map((e, i) => ( <Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} /> <Route element={<PrivateRoute />}>
))} {routeslink.map((e, i) => (
<Route path="edit" element={<EditPage />} /> <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
<Route path="crop" element={<ImageCrop />} /> ))}
<Route path="/view" element={<ViewPage />} />
</Route> <Route path="edit" element={<EditPage />} />
</Routes> <Route path="crop" element={<ImageCrop />} />
</> <Route path="/view" element={<ViewPage />} />
); </Route>
</Routes>
</>
);
} }

2
src/model/quizSettings.ts
View File

@ -14,7 +14,7 @@ export const quizSetupSteps = [
// { stepperText: "Оценка графа карты вопросов", sidebarText: "Карта вопросов", sidebarIcon: QuestionsMapIcon }, // { stepperText: "Оценка графа карты вопросов", sidebarText: "Карта вопросов", sidebarIcon: QuestionsMapIcon },
{ stepperText: "Настройте форму контактов", sidebarText: "Форма контактов", sidebarIcon: ContactBookIcon }, { stepperText: "Настройте форму контактов", sidebarText: "Форма контактов", sidebarIcon: ContactBookIcon },
{ stepperText: "Установите квиз", sidebarText: "Установка квиза", sidebarIcon: FlowArrowIcon }, { stepperText: "Установите квиз", sidebarText: "Установка квиза", sidebarIcon: FlowArrowIcon },
{ stepperText: "Запустите рекламу", sidebarText: "Запуск рекламы", sidebarIcon: MegaphoneIcon }, // { stepperText: "Запустите рекламу", sidebarText: "Запуск рекламы", sidebarIcon: MegaphoneIcon },
] as const; ] as const;
export const maxQuizSetupSteps = quizSetupSteps.length; export const maxQuizSetupSteps = quizSetupSteps.length;

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

@ -27,7 +27,7 @@ const buttons = [
}, },
{ {
name: "Email", name: "Email",
desc: "mail@xample.ru", desc: "mail@example.ru",
key: "email" key: "email"
}, },
{ {
@ -297,7 +297,7 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
Добавить поле + Добавить поле +
</Button> </Button>
} }
<Link {/* <Link
component="button" component="button"
// onClick={() => drawerMessengerHC(true)} // onClick={() => drawerMessengerHC(true)}
sx={{ sx={{
@ -309,7 +309,7 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
}} }}
> >
Добавить мессенджеры Добавить мессенджеры
</Link> </Link> */}
<PseudoButton /> <PseudoButton />
</Box> </Box>
@ -350,12 +350,12 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
disableRestoreFocus disableRestoreFocus
> >
<Typography sx={{ m: "20px", textAlign: "center" }}> <Typography sx={{ m: "20px", textAlign: "center" }}>
Если вам не нужно собирать контакты, <br></br> отключите форму контактов Будут поля:<br></br> Имя, Email, Телефон
</Typography> </Typography>
</Popover> </Popover>
</Box> </Box>
<Link {/* <Link
sx={{ sx={{
mt: "20px", mt: "20px",
fontSize: "16px", fontSize: "16px",
@ -365,7 +365,7 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
}} }}
> >
Добавить мессенджеры Добавить мессенджеры
</Link> </Link> */}
<PseudoButton /> <PseudoButton />
</Box> </Box>
) )

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

@ -188,7 +188,8 @@ function CsComponent({
} }
]) ])
cy?.layout(lyopts).run() cy?.layout(lyopts).run()
cy?.fit(es, 200) console.log(es)
cy?.center(es)
} else { } else {
enqueueSnackbar("Добавляемый вопрос не найден") enqueueSnackbar("Добавляемый вопрос не найден")
} }

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

@ -4,8 +4,8 @@ import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import type { SxProps } from "@mui/material"; import type { SxProps } from "@mui/material";
import { import {
Box, Box, Button,
IconButton, IconButton, Modal,
Tooltip, Tooltip,
Typography, Typography,
useMediaQuery, useMediaQuery,
@ -26,6 +26,7 @@ import { useQuestionsStore } from "@root/questions/store";
import { updateOpenedModalSettingsId } from "@root/uiTools/actions"; import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
import { updateRootContentId } from "@root/quizes/actions"; import { updateRootContentId } from "@root/quizes/actions";
import { useUiTools } from "@root/uiTools/store"; import { useUiTools } from "@root/uiTools/store";
import {useState} from "react";
interface Props { interface Props {
switchState: string; switchState: string;
@ -44,12 +45,72 @@ export default function ButtonsOptions({
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920)); const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore.getState(); const { questions } = useQuestionsStore.getState();
const [openDelete, setOpenDelete] = useState<boolean>(false);
const openedModal = () => { const openedModal = () => {
updateOpenBranchingPanel(true); updateOpenBranchingPanel(true);
updateDesireToOpenABranchingModal(question.content.id); updateDesireToOpenABranchingModal(question.content.id);
}; };
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
deleteQuestion(question.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);
}
};
const buttonSetting: { const buttonSetting: {
icon: JSX.Element; icon: JSX.Element;
@ -275,71 +336,59 @@ export default function ButtonsOptions({
<IconButton <IconButton
sx={{ borderRadius: "6px", padding: "2px" }} sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => { onClick={() => {
const deleteFn = () => { if(question.content.rule.parentId.length !== 0) {
if (question.type !== null) { setOpenDelete(true)
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам } else {
updateRootContentId(quiz.id, ""); deleteQuestionWithTimeout(question.id, deleteFn);
clearRuleForAll(); }
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
deleteQuestion(question.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" data-cy="delete-question"
> >
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
<Modal open={openDelete} onClose={() => setOpenDelete(false)}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "30px",
borderRadius: "10px",
background: "#FFFFFF",
}}
>
<Typography variant="h6" sx={{textAlign: "center"}}>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
</Typography>
<Box
sx={{
marginTop: "30px",
display: "flex",
justifyContent: "center",
gap: "15px",
}}
>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => setOpenDelete(false)}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => {
deleteQuestionWithTimeout(question.id, deleteFn);
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
</Box> </Box>
</Box> </Box>
); );

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

@ -3,8 +3,8 @@ import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions"; import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { QuizQuestionVarImg } from "@model/questionTypes/varimg"; import { QuizQuestionVarImg } from "@model/questionTypes/varimg";
import { import {
Box, Box, Button,
IconButton, IconButton, Modal,
Tooltip, Tooltip,
Typography, Typography,
useMediaQuery, useMediaQuery,
@ -28,6 +28,7 @@ import { useQuestionsStore } from "@root/questions/store";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootContentId } from "@root/quizes/actions"; import { updateRootContentId } from "@root/quizes/actions";
import {AnyTypedQuizQuestion} from "@model/questionTypes/shared";
interface Props { interface Props {
@ -50,6 +51,67 @@ export default function ButtonsOptionsAndPict({
const { questions } = useQuestionsStore.getState(); const { questions } = useQuestionsStore.getState();
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const [openDelete, setOpenDelete] = useState<boolean>(false);
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
deleteQuestion(question.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);
}
};
useEffect(() => { useEffect(() => {
if (question.deleteTimeoutId) { if (question.deleteTimeoutId) {
clearTimeout(question.deleteTimeoutId); clearTimeout(question.deleteTimeoutId);
@ -310,71 +372,58 @@ export default function ButtonsOptionsAndPict({
<IconButton <IconButton
sx={{ borderRadius: "6px", padding: "2px" }} sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => { onClick={() => {
const deleteFn = () => { if(question.content.rule.parentId.length !== 0) {
if (question.type !== null) { setOpenDelete(true)
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам } else {
updateRootContentId(quiz.id, ""); deleteQuestionWithTimeout(question.id, deleteFn);
clearRuleForAll(); }
questions.forEach(q => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
deleteQuestion(question.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" data-cy="delete-question"
> >
<DeleteIcon style={{ color: "#4D4D4D" }} /> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<Modal open={openDelete} onClose={() => setOpenDelete(false)}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "30px",
borderRadius: "10px",
background: "#FFFFFF",
}}
>
<Typography variant="h6" sx={{textAlign: "center"}}>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
</Typography>
<Box
sx={{
marginTop: "30px",
display: "flex",
justifyContent: "center",
gap: "15px",
}}
>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => setOpenDelete(false)}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => {
deleteQuestionWithTimeout(question.id, deleteFn);
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
</Box> </Box>
<ReallyChangingModal <ReallyChangingModal
opened={openedReallyChangingModal} opened={openedReallyChangingModal}

5
src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
View File

@ -94,8 +94,9 @@ export const ChooseAnswerModal = ({
background: "#FFFFFF", background: "#FFFFFF",
}} }}
> >
<Typography variant="h6"> <Typography variant="h6" sx={{textAlign: "center"}}>
Все настройки, кроме заголовка вопроса будут сброшены Все настройки, кроме заголовка вопроса будут сброшены <br/>
(вопрос всё ещё будет участвовать в ветвлении, но его условия будут сброшены)
</Typography> </Typography>
<Box <Box
sx={{ sx={{

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

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

2
src/pages/ResultPage/cards/ResultCard.tsx
View File

@ -458,7 +458,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
placeholder="URL видео" placeholder="URL видео"
text={resultData.content.video ?? ""} text={resultData.content.video ?? ""}
onChange={e => updateQuestion(resultData.id, q => { onChange={e => updateQuestion(resultData.id, q => {
resultData.content.video = e.target.value; q.content.video = e.target.value;
})} })}
/> />
</Box> </Box>

4
src/pages/ResultPage/cards/WhenCard.tsx
View File

@ -159,7 +159,7 @@ export const WhenCard = ({ quizExpand }: Props) => {
</Box> </Box>
{ {/* {
(quiz?.config.resultInfo.when !== "email") && <SwitchSetting (quiz?.config.resultInfo.when !== "email") && <SwitchSetting
icon={ShareNetwork} icon={ShareNetwork}
text="Поделиться результатами" text="Поделиться результатами"
@ -174,7 +174,7 @@ export const WhenCard = ({ quizExpand }: Props) => {
onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.replay = event.target.checked)} onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.replay = event.target.checked)}
value={quiz?.config.resultInfo.replay} value={quiz?.config.resultInfo.replay}
/> />
} } */}

21
src/pages/ViewPublicationPage/ApologyPage.tsx Normal file
View File

@ -0,0 +1,21 @@
import { Box, Typography } from "@mui/material";
export const ApologyPage = (message: string) => {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<Typography
sx={{
textAlign: "center"
}}
>{message || "что-то пошло не так"}</Typography>
</Box>
)
}

169
src/pages/ViewPublicationPage/ContactForm.tsx
View File

@ -1,33 +1,184 @@
import { Box, Typography, Button } from "@mui/material"; import { Box, Typography, Button, Paper, TextField, Link, InputAdornment } from "@mui/material";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
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"; import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { useState } from "react";
import { useQuestionsStore } from "@root/questions/store";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
type ContactFormProps = { type ContactFormProps = {
currentQuestion: AnyTypedQuizQuestion;
showResultForm: boolean; showResultForm: boolean;
setShowContactForm: (show: boolean) => void; setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void; setShowResultForm: (show: boolean) => void;
}; };
const icons = [
{ type: "name", icon: NameIcon, defaultText: "Введите имя", defaultTitle: "имя" },
{ type: "email", icon: EmailIcon, defaultText: "Введите Email", defaultTitle: "Email" },
{ type: "phone", icon: PhoneIcon, defaultText: "Введите номер телефона", defaultTitle: "номер телефона" },
{ type: "text", icon: TextIcon, defaultText: "Введите фамилию", defaultTitle: "фамилию" },
{ type: "address", icon: AddressIcon, defaultText: "Введите адрес", defaultTitle: "адрес" },
]
export const ContactForm = ({ export const ContactForm = ({
currentQuestion,
showResultForm, showResultForm,
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
}: ContactFormProps) => { }: ContactFormProps) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore();
const [ready, setReady] = useState(false)
const followNextForm = () => { const followNextForm = () => {
setShowContactForm(false); setShowContactForm(false);
setShowResultForm(true); setShowResultForm(true);
}; };
const resultQuestion = questions.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
);
return ( return (
<Box> <Box
<Typography>Форма контактов</Typography> sx={{
{!showResultForm && quiz?.config.resultInfo.when === "after" && ( display: "flex",
<Button variant="contained" onClick={followNextForm}> alignItems: "center",
Показать результат justifyContent: "center",
</Button> height: "100vh"
)} }}
</Box> >
<Box
sx={{
width: "800px"
}}
>
<Box>
<Typography
sx={{
textAlign: "center",
m: "20px 0",
fontSize: "28px"
}}
>
{quiz?.config.formContact.title || "Заполните форму, чтобы получить результаты теста"}
</Typography>
{
quiz?.config.formContact.desc &&
<Typography
sx={{
textAlign: "center",
m: "20px 0",
fontSize: "18px"
}}
>
{quiz?.config.formContact.desc}
</Typography>
}
</Box>
<Paper
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
p: "30px"
}}>
<Box
sx={{
display: "flex",
flexDirection: "column",
my: "20px"
}}
>
<Inputs />
</Box>
{
// resultQuestion &&
// quiz?.config.resultInfo.when === "after" &&
(
<Button
disabled={!ready}
variant="contained" onClick={() => {
if (quiz?.config.resultInfo.when === "after") followNextForm()
}}>
Получить результаты
</Button>
)}
<Box
sx={{
display: "flex",
mt: "20px",
width: "450px",
}}
>
<CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} />
<Typography>
С
<Link> Положением об обработке персональных данных </Link>
и
<Link> Политикой конфиденциальности </Link>
ознакомлен
</Typography>
</Box>
</Paper>
</Box >
</Box >
); );
}; };
const Inputs = () => {
const quiz = useCurrentQuiz();
let someUsed = []
const Icons = icons.map((data) => {
const FC = quiz?.config.formContact[data.type]
if (FC.used) someUsed.push(<CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />)
return <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />
})
console.log(someUsed)
console.log(Icons)
if (someUsed.length) {
return <>{someUsed}</>
} else {
return <>
{Icons[0]}
{Icons[1]}
{Icons[2]}
</>
}
}
const CustomInput = ({ title, desc, Icon }: any) => {
return <Box m="15px 0">
<Typography mb="7px">{title}</Typography>
<TextField
sx={{
width: "350px",
}}
placeholder={desc}
InputProps={{
startAdornment: <InputAdornment position="start"><Icon color="gray" /></InputAdornment>,
}}
/>
</Box>
}

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

@ -17,7 +17,6 @@ type FooterProps = {
question: AnyTypedQuizQuestion; question: AnyTypedQuizQuestion;
setShowContactForm: (show: boolean) => void; setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void; setShowResultForm: (show: boolean) => void;
setResultQuestion: (id: string) => void;
}; };
export const Footer = ({ export const Footer = ({
@ -25,7 +24,6 @@ export const Footer = ({
question, question,
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
setResultQuestion,
}: FooterProps) => { }: FooterProps) => {
const [disablePreviousButton, setDisablePreviousButton] = const [disablePreviousButton, setDisablePreviousButton] =
useState<boolean>(false); useState<boolean>(false);
@ -97,22 +95,14 @@ export const Footer = ({
} }
}, [question, answers]); }, [question, answers]);
const showResult = () => { const showResult = nextQuestion => {
const resultQuestion = questions.find(
({ type, content }) =>
type === "result" && content.rule.parentId === question.content.id
);
if (resultQuestion) { console.log(nextQuestion)
setResultQuestion(resultQuestion.id);
return; if (nextQuestion && quiz?.config.resultInfo.when === "before") {
}
if (quiz?.config.resultInfo.when === "after") {
setShowContactForm(true);
} else {
setShowResultForm(true); setShowResultForm(true);
} else {
setShowContactForm(true);
} }
}; };
@ -191,10 +181,13 @@ export const Footer = ({
const questionIndex = questions.findIndex(({ id }) => id === question.id); const questionIndex = questions.findIndex(({ id }) => id === question.id);
const nextQuestion = questions[questionIndex + 1]; const nextQuestion = questions[questionIndex + 1];
console.log(nextQuestion)
if (nextQuestion && nextQuestion.type !== "result") { if (nextQuestion && nextQuestion.type !== "result") {
console.log("следующий вопрос результирующий ", (nextQuestion.type === "result"))
setCurrentQuestion(nextQuestion); setCurrentQuestion(nextQuestion);
} else { } else {
showResult(); console.log("следующий вопрос результирующий ", (nextQuestion.type === "result"))
showResult(nextQuestion);
} }
return; return;

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

@ -47,7 +47,6 @@ export const Question = ({ questions }: QuestionProps) => {
useState<AnyTypedQuizQuestion>(); useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false); const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false); const [showResultForm, setShowResultForm] = useState<boolean>(false);
const [resultQuestion, setResultQuestion] = useState<string>("");
useEffect(() => { useEffect(() => {
const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || ""); const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
@ -66,50 +65,52 @@ export const Question = ({ questions }: QuestionProps) => {
const QuestionComponent = const QuestionComponent =
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">]; QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
console.log("showResultForm " , showResultForm)
return ( return (
<Box> <Box>
<Box {!showContactForm && !showResultForm && (
sx={{ <Box
minHeight: "calc(100vh - 75px)", sx={{
width: "100%", minHeight: "calc(100vh - 75px)",
maxWidth: "1440px", width: "100%",
padding: "40px 25px 20px", maxWidth: "1440px",
margin: "0 auto", padding: "40px 25px 20px",
}} margin: "0 auto",
> }}
{!showContactForm && !showResultForm && !resultQuestion && ( >
<QuestionComponent currentQuestion={currentQuestion} /> <QuestionComponent currentQuestion={currentQuestion} />
)} </Box>
{resultQuestion && ( )}
<ResultQuestion {showResultForm && quiz?.config.resultInfo.when === "before" && (
resultQuestion={resultQuestion} <ResultForm
setResultQuestion={setResultQuestion} currentQuestion={currentQuestion}
setShowContactForm={setShowContactForm} showContactForm={showContactForm}
setShowResultForm={setShowResultForm} setShowContactForm={setShowContactForm}
/> setShowResultForm={setShowResultForm}
)} />
{showContactForm && ( )}
<ContactForm {showContactForm && (
showResultForm={showResultForm} <ContactForm
setShowContactForm={setShowContactForm} currentQuestion={currentQuestion}
setShowResultForm={setShowResultForm} showResultForm={showResultForm}
/> setShowContactForm={setShowContactForm}
)} setShowResultForm={setShowResultForm}
{showResultForm && ( />
<ResultForm )}
showContactForm={showContactForm} {showResultForm && quiz?.config.resultInfo.when === "after" && (
setShowContactForm={setShowContactForm} <ResultForm
setShowResultForm={setShowResultForm} currentQuestion={currentQuestion}
/> showContactForm={showContactForm}
)} setShowContactForm={setShowContactForm}
</Box> setShowResultForm={setShowResultForm}
{!showContactForm && !showResultForm && !resultQuestion && ( />
)}
{!showContactForm && !showResultForm && (
<Footer <Footer
question={currentQuestion} question={currentQuestion}
setCurrentQuestion={setCurrentQuestion} setCurrentQuestion={setCurrentQuestion}
setShowContactForm={setShowContactForm} setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm} setShowResultForm={setShowResultForm}
setResultQuestion={setResultQuestion}
/> />
)} )}
</Box> </Box>

115
src/pages/ViewPublicationPage/ResultForm.tsx
View File

@ -1,19 +1,41 @@
import { Box, Typography, Button } from "@mui/material"; import { Box, Typography, Button } from "@mui/material";
import { getQuestionByContentId } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx"
type ResultFormProps = { type ResultFormProps = {
currentQuestion: AnyTypedQuizQuestion;
showContactForm: boolean; showContactForm: boolean;
setShowContactForm: (show: boolean) => void; setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void; setShowResultForm: (show: boolean) => void;
}; };
export const ResultForm = ({ export const ResultForm = ({
currentQuestion,
showContactForm, showContactForm,
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
}: ResultFormProps) => { }: ResultFormProps) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore();
const resultQuestion = questions.find(
(question) =>
question.type === "result" &&
(question.content.rule.parentId === "line" || currentQuestion.content.id)
);
console.log(currentQuestion)
console.log(resultQuestion
)
console.log(questions)
console.log(quiz?.config.resultInfo.when)
const followNextForm = () => { const followNextForm = () => {
setShowResultForm(false); setShowResultForm(false);
@ -21,13 +43,92 @@ export const ResultForm = ({
}; };
return ( return (
<Box> <Box
<Typography>Форма результатов</Typography> sx={{
{!showContactForm && quiz?.config.resultInfo.when !== "after" && ( display: "flex",
<Button variant="contained" onClick={followNextForm}> flexDirection: "column",
Показать форму контактов alignItems: "center",
</Button> justifyContent: "space-between",
)} height: "100vh",
width: "100vw",
pt: "28px"
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
width: "490px",
}}
>
{
!resultQuestion?.content.useImage &&
resultQuestion.content.video &&
<YoutubeEmbedIframe
videoUrl={resultQuestion.content.video}
containerSX={{
width: "490px",
height: "280px"
}}
/>
}
{
resultQuestion?.content.useImage &&
resultQuestion.content.back &&
<Box
component='img'
src={resultQuestion.content.back}
sx={{
width: "490px",
height: "280px"
}}
>
</Box>
}
{resultQuestion.description !== "" && resultQuestion.description !== " " && <Typography
sx={{
fontSize: "23px",
fontWeight: 700,
m: "20px 0"
}}
>{resultQuestion.description}</Typography>}
<Typography
sx={{
m: "20px 0"
}}
>{resultQuestion.title || "Форма результатов"}
</Typography>
</Box>
{
quiz?.config.resultInfo.when === "before" &&
<Box
sx={{
height: "100px",
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<Button
onClick={followNextForm}
variant="contained"
sx={{
p: "10px 20px",
width: "210px",
height: "50px"
}}
>
{resultQuestion.content.hint.text || "Узнать подробнее"}
</Button>
</Box>
}
</Box> </Box>
); );
}; };

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

@ -1,43 +0,0 @@
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>
);
};

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

@ -17,6 +17,7 @@ import { enqueueSnackbar } from "notistack";
import { useQuestionsStore } from "@root/questions/store"; import { useQuestionsStore } from "@root/questions/store";
import { setQuestions } from "@root/questions/actions"; import { setQuestions } from "@root/questions/actions";
import { questionApi } from "@api/question"; import { questionApi } from "@api/question";
import { ApologyPage } from "./ApologyPage"
export const ViewPage = () => { export const ViewPage = () => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
@ -53,6 +54,7 @@ export const ViewPage = () => {
console.log("visualStartPage ", visualStartPage); console.log("visualStartPage ", visualStartPage);
if (visualStartPage === undefined) return <></>; if (visualStartPage === undefined) return <></>;
if (questions.length === 0) return <ApologyPage message="Нет созданных вопросов"/>
return ( return (
<Box> <Box>
{!visualStartPage ? ( {!visualStartPage ? (

39
src/pages/auth/Signin.tsx
View File

@ -1,18 +1,9 @@
import { login } from "@api/auth"; import { login } from "@api/auth";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import { import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Button,
Dialog,
IconButton,
Link,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setUserId, useUserStore } from "@root/user"; import { setUserId, useUserStore } from "@root/user";
import InputTextfield from "@ui_kit/InputTextfield"; import InputTextfield from "@ui_kit/InputTextfield";
import PenaLogo2 from "@ui_kit/PenaLogo2"; import Logotip from "../../pages/Landing/images/icons/QuizLogo";
import PasswordInput from "@ui_kit/passwordInput"; import PasswordInput from "@ui_kit/passwordInput";
import { useFormik } from "formik"; import { useFormik } from "formik";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
@ -31,9 +22,7 @@ const initialValues: Values = {
}; };
const validationSchema = object({ const validationSchema = object({
email: string() email: string().required("Поле обязательно").email("Введите корректный email"),
.required("Поле обязательно")
.email("Введите корректный email"),
password: string().required("Поле обязательно").min(8, "Минимум 8 символов"), password: string().required("Поле обязательно").min(8, "Минимум 8 символов"),
}); });
@ -49,10 +38,7 @@ export default function SigninDialog() {
initialValues, initialValues,
validationSchema, validationSchema,
onSubmit: async (values, formikHelpers) => { onSubmit: async (values, formikHelpers) => {
const [loginResponse, loginError] = await login( const [loginResponse, loginError] = await login(values.email.trim(), values.password.trim());
values.email.trim(),
values.password.trim()
);
formikHelpers.setSubmitting(false); formikHelpers.setSubmitting(false);
@ -111,8 +97,7 @@ export default function SigninDialog() {
gap: "15px", gap: "15px",
borderRadius: "12px", borderRadius: "12px",
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)", boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
{
position: "absolute", position: "absolute",
top: "46px", top: "46px",
margin: "0", margin: "0",
@ -130,7 +115,7 @@ export default function SigninDialog() {
<CloseIcon sx={{ transform: "scale(1.5)" }} /> <CloseIcon sx={{ transform: "scale(1.5)" }} />
</IconButton> </IconButton>
<Box> <Box>
<PenaLogo2 width={upMd ? 233 : 196} color="black" /> <Logotip width={upMd ? 233 : 196} />
</Box> </Box>
<Typography <Typography
sx={{ sx={{
@ -212,16 +197,8 @@ export default function SigninDialog() {
mt: "auto", mt: "auto",
}} }}
> >
<Typography <Typography sx={{ color: "#7E2AEA", textAlign: "center" }}>Вы еще не присоединились?</Typography>
sx={{ color: "#7E2AEA", textAlign: "center" }} <Link component={RouterLink} to="/signup" sx={{ color: "#7E2AEA" }}>
>
Вы еще не присоединились?
</Typography>
<Link
component={RouterLink}
to="/signup"
sx={{ color: "#7E2AEA" }}
>
Регистрация Регистрация
</Link> </Link>
</Box> </Box>

47
src/pages/auth/Signup.tsx
View File

@ -1,23 +1,14 @@
import { register } from "@api/auth"; import { register } from "@api/auth";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import { import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Button,
Dialog,
IconButton,
Link,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setUserId, useUserStore } from "@root/user"; import { setUserId, useUserStore } from "@root/user";
import InputTextfield from "@ui_kit/InputTextfield"; import InputTextfield from "@ui_kit/InputTextfield";
import PenaLogo2 from "@ui_kit/PenaLogo2"; import Logotip from "../../pages/Landing/images/icons/QuizLogo";
import PasswordInput from "@ui_kit/passwordInput"; import PasswordInput from "@ui_kit/passwordInput";
import { useFormik } from "formik"; import { useFormik } from "formik";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import {Link as RouterLink, useLocation, useNavigate} from "react-router-dom"; import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
import { object, ref, string } from "yup"; import { object, ref, string } from "yup";
interface Values { interface Values {
@ -33,9 +24,7 @@ const initialValues: Values = {
}; };
const validationSchema = object({ const validationSchema = object({
email: string() email: string().required("Поле обязательно").email("Введите корректный email"),
.required("Поле обязательно")
.email("Введите корректный email"),
password: string() password: string()
.min(8, "Минимум 8 символов") .min(8, "Минимум 8 символов")
.matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы") .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
@ -50,18 +39,14 @@ export default function SignupDialog() {
const user = useUserStore((state) => state.user); const user = useUserStore((state) => state.user);
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const location = useLocation() const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const formik = useFormik<Values>({ const formik = useFormik<Values>({
initialValues, initialValues,
validationSchema, validationSchema,
onSubmit: async (values, formikHelpers) => { onSubmit: async (values, formikHelpers) => {
const [registerResponse, registerError] = await register( const [registerResponse, registerError] = await register(values.email.trim(), values.password.trim(), "+7");
values.email.trim(),
values.password.trim(),
"+7"
);
formikHelpers.setSubmitting(false); formikHelpers.setSubmitting(false);
@ -120,12 +105,11 @@ export default function SignupDialog() {
gap: "15px", gap: "15px",
borderRadius: "12px", borderRadius: "12px",
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)", boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
{ position: "absolute",
position: "absolute", top: "46px",
top: "46px", margin: "0",
margin: "0", },
},
}} }}
> >
<IconButton <IconButton
@ -139,7 +123,7 @@ export default function SignupDialog() {
<CloseIcon sx={{ transform: "scale(1.5)" }} /> <CloseIcon sx={{ transform: "scale(1.5)" }} />
</IconButton> </IconButton>
<Box sx={{ mt: upMd ? undefined : "62px" }}> <Box sx={{ mt: upMd ? undefined : "62px" }}>
<PenaLogo2 width={upMd ? 233 : 196} color="black" /> <Logotip width={upMd ? 233 : 196} />
</Box> </Box>
<Typography <Typography
sx={{ sx={{
@ -186,11 +170,8 @@ export default function SignupDialog() {
value: formik.values.repeatPassword, value: formik.values.repeatPassword,
placeholder: "Не менее 8 символов", placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur, onBlur: formik.handleBlur,
error: error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
formik.touched.repeatPassword && helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
Boolean(formik.errors.repeatPassword),
helperText:
formik.touched.repeatPassword && formik.errors.repeatPassword,
autoComplete: "new-password", autoComplete: "new-password",
"data-cy": "repeat-password", "data-cy": "repeat-password",
}} }}

189
src/pages/startPage/Restore.tsx Normal file
View File

@ -0,0 +1,189 @@
import { FC, useState } from "react";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Button, Dialog, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import InputTextfield from "@ui_kit/InputTextfield";
import PasswordInput from "@ui_kit/passwordInput";
import { useFormik } from "formik";
import { object, ref, string } from "yup";
import Logotip from "../Landing/images/icons/QuizLogo";
import { useNavigate } from "react-router-dom";
interface Values {
email: string;
password: string;
repeatPassword: string;
}
const initialValues: Values = {
email: "",
password: "",
repeatPassword: "",
};
const validationSchema = object({
email: string().required("Поле обязательно").email("Введите корректный email"),
password: string()
.min(8, "Минимум 8 символов")
.matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
.required("Поле обязательно"),
repeatPassword: string()
.oneOf([ref("password"), undefined], "Пароли не совпадают")
.required("Повторите пароль"),
});
export const Restore: FC = () => {
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
const navigate = useNavigate();
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const formik = useFormik<Values>({
initialValues,
validationSchema,
onSubmit: (values) => {
console.log(values);
},
});
function handleClose() {
setIsDialogOpen(false);
setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
}
return (
<Box>
<Button sx={{ width: "200px", height: "200px", background: "red" }} onClick={() => setIsDialogOpen(true)}>
open
</Button>
<Dialog
open={isDialogOpen}
onClose={handleClose}
PaperProps={{
sx: {
width: "600px",
maxWidth: "600px",
},
}}
slotProps={{
backdrop: {
style: {
backgroundColor: "rgb(0 0 0 / 0.7)",
},
},
}}
>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
sx={{
position: "relative",
backgroundColor: "white",
display: "flex",
alignItems: "center",
flexDirection: "column",
p: upMd ? "50px" : "18px",
pb: upMd ? "40px" : "30px",
gap: "15px",
borderRadius: "12px",
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
position: "absolute",
top: "46px",
margin: "0",
},
}}
>
<IconButton
onClick={handleClose}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
>
<CloseIcon sx={{ transform: "scale(1.5)" }} />
</IconButton>
<Box sx={{ mt: upMd ? undefined : "62px" }}>
<Logotip width={upMd ? 233 : 196} />
</Box>
<Typography
sx={{
color: "#4D4D4D",
mt: "5px",
mb: upMd ? "30px" : "33px",
}}
>
Восстановление пароля
</Typography>
<InputTextfield
TextfieldProps={{
value: formik.values.email,
placeholder: "username",
onBlur: formik.handleBlur,
error: formik.touched.email && Boolean(formik.errors.email),
helperText: formik.touched.email && formik.errors.email,
"data-cy": "username",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="email"
label="Email"
gap={upMd ? "10px" : "10px"}
/>
<PasswordInput
TextfieldProps={{
value: formik.values.password,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.password && Boolean(formik.errors.password),
helperText: formik.touched.password && formik.errors.password,
autoComplete: "new-password",
"data-cy": "password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="password"
label="Пароль"
gap={upMd ? "10px" : "10px"}
/>
<PasswordInput
TextfieldProps={{
value: formik.values.repeatPassword,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
autoComplete: "new-password",
"data-cy": "repeat-password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="repeatPassword"
label="Повторить пароль"
gap={upMd ? "10px" : "10px"}
/>
<Button
variant="contained"
fullWidth
type="submit"
disabled={formik.isSubmitting}
sx={{
py: "12px",
"&:hover": {
backgroundColor: "#581CA7",
},
"&:active": {
color: "white",
backgroundColor: "black",
},
}}
data-cy="signup"
>
Восстановить
</Button>
</Box>
</Dialog>
</Box>
);
};

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

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

87
src/ui_kit/Modal/utils/imageManipulation.ts Normal file
View File

@ -0,0 +1,87 @@
import { PixelCrop } from "react-image-crop";
export function getRotatedImageBlob(image: HTMLImageElement) {
return new Promise<Blob>((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return reject(new Error("No 2d context"));
canvas.width = image.naturalHeight;
canvas.height = image.naturalWidth;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2);
canvas.toBlob((blob) => {
if (!blob) return reject(new Error("Failed to create blob"));
resolve(blob);
});
});
}
export function getCroppedImageBlob(image: HTMLImageElement, crop: PixelCrop) {
return new Promise<Blob>((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return reject(new Error("No 2d context"));
const scale = 1;
const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height;
const pixelRatio = window.devicePixelRatio;
canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
ctx.scale(pixelRatio, pixelRatio);
ctx.imageSmoothingQuality = "high";
const cropX = crop.x * scaleX;
const cropY = crop.y * scaleY;
const centerX = image.naturalWidth / 2;
const centerY = image.naturalHeight / 2;
ctx.translate(-cropX, -cropY);
ctx.translate(centerX, centerY);
ctx.scale(scale, scale);
ctx.translate(-centerX, -centerY);
ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight);
canvas.toBlob((blob) => {
if (!blob) return reject(new Error("Failed to create blob"));
resolve(blob);
});
});
}
export function getDarkenedAndResizedImageBlob(image: HTMLImageElement, scale: number, darken: number) {
return new Promise<Blob>((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return reject(new Error("No 2d context"));
const width = Math.floor(image.naturalWidth * scale);
const height = Math.floor(image.naturalHeight * scale);
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
if (darken > 0) {
ctx.fillStyle = `rgba(0, 0, 0, ${darken})`;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
canvas.toBlob((blob) => {
if (!blob) return reject(new Error("Failed to create blob"));
resolve(blob);
});
});
}

13
src/ui_kit/Modal/utils/useDebounceEffect.ts
View File

@ -1,13 +0,0 @@
import { useEffect, DependencyList } from "react";
export function useDebounceEffect(fn: () => void, waitTime: number, deps?: DependencyList) {
useEffect(() => {
const time = setTimeout(() => {
fn();
}, waitTime);
return () => {
clearTimeout(time);
};
}, [deps, fn, waitTime]);
}

8
src/ui_kit/Sidebar.tsx
View File

@ -111,7 +111,7 @@ export default function Sidebar() {
); );
})} })}
</List> </List>
{!isMenuCollapsed && ( {/* {!isMenuCollapsed && (
<Typography <Typography
sx={{ sx={{
px: "16px", px: "16px",
@ -125,9 +125,9 @@ export default function Sidebar() {
> >
Настройки квиза Настройки квиза
</Typography> </Typography>
)} )} */}
<List disablePadding> <List disablePadding>
{quizSettingsMenuItems.map((menuItem, index) => { {/* {quizSettingsMenuItems.map((menuItem, index) => {
const Icon = menuItem[0]; const Icon = menuItem[0];
const totalIndex = index + quizSetupSteps.length; const totalIndex = index + quizSetupSteps.length;
const isActive = currentStep === totalIndex + 1; const isActive = currentStep === totalIndex + 1;
@ -154,7 +154,7 @@ export default function Sidebar() {
} }
/> />
); );
})} })} */}
</List> </List>
</Box> </Box>
); );

6
src/ui_kit/switchStepPages.tsx
View File

@ -33,9 +33,9 @@ export default function SwitchStepPages({
case 1: return quizType === "form" ? <FormQuestionsPage /> : <QuestionsPage />; case 1: return quizType === "form" ? <FormQuestionsPage /> : <QuestionsPage />;
case 2: return <ResultPage />; case 2: return <ResultPage />;
case 3: return <ContactFormPage />; case 3: return <ContactFormPage />;
case 4: return <ContactFormPage />; case 4: return <InstallQuiz />;
case 5: return <InstallQuiz />; // case 5: return <InstallQuiz />;
case 6: return <>Реклама</>; // case 6: return <>Реклама</>;
default: throw new Error(`Invalid quiz setup step: ${activeStep}`); default: throw new Error(`Invalid quiz setup step: ${activeStep}`);
} }
} }