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

modal fix

Browse Source
This commit is contained in:
ArtChaos189 2023-12-21 00:56:14 +03:00
parent 494d750534
commit 9bdf5bf678
4 changed files with 280 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
if (!quiz) return null; if (!quiz) return null;
console.log(quiz);
const handleCopyNumber = () => { const handleCopyNumber = () => {
navigator.clipboard.writeText(quiz.config.info.phonenumber); navigator.clipboard.writeText(quiz.config.info.phonenumber);
}; };

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

@ -17,7 +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" import { ApologyPage } from "./ApologyPage";
export const ViewPage = () => { export const ViewPage = () => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
@ -48,15 +48,15 @@ export const ViewPage = () => {
} }
}, [quiz?.config.startpage.favIcon]); }, [quiz?.config.startpage.favIcon]);
const filteredQuestions = ( const filteredQuestions = (questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]).sort(
questions.filter(({ type }) => type) as AnyTypedQuizQuestion[] (previousItem, item) => previousItem.page - item.page
).sort((previousItem, item) => previousItem.page - item.page); );
console.log(questions);
console.log(questions)
if (visualStartPage === undefined) return <></>; if (visualStartPage === undefined) return <></>;
if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return <ApologyPage message="Нет созданных вопросов"/> if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result"))
return <ApologyPage message="Нет созданных вопросов" />;
return ( return (
<Box> <Box>
{!visualStartPage ? ( {!visualStartPage ? (

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

@ -71,7 +71,7 @@ export default function EditPage() {
const isMobile = useMediaQuery(theme.breakpoints.down(660)); const isMobile = useMediaQuery(theme.breakpoints.down(660));
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false); const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
const quizConfig = quiz?.config; const quizConfig = quiz?.config;
const disableTest = quiz === undefined ? true : (quiz.config.type === null) const disableTest = quiz === undefined ? true : quiz.config.type === null;
useEffect(() => { useEffect(() => {
if (editQuizId === null) navigate("/list"); if (editQuizId === null) navigate("/list");
@ -81,49 +81,44 @@ export default function EditPage() {
() => () => { () => () => {
resetEditConfig(); resetEditConfig();
cleanQuestions(); cleanQuestions();
updateModalInfoWhyCantCreate(false) updateModalInfoWhyCantCreate(false);
}, },
[] []
); );
const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => { const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
const problems: any = {};
const problems: any = {}
questions.forEach((question) => { questions.forEach((question) => {
//Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен //Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен
if (question.type === null if (question.type === null || question.type === "result" || question.content.rule.parentId.length === 0) return;
|| question.type === "result"
|| question.content.rule.parentId.length === 0) return
//если есть дети, но нет дефолта - логическая ошибка. Так нельзя //если есть дети, но нет дефолта - логическая ошибка. Так нельзя
if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) { if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) {
problems[question.content.id] = { problems[question.content.id] = {
name: question.title, name: question.title,
problems: ["Не выбран дефолтный вопрос"] problems: ["Не выбран дефолтный вопрос"],
} };
} }
});
}) console.log(problems);
useUiTools.setState({ whyCantCreatePublic: problems });
useUiTools.setState({ whyCantCreatePublic: problems })
if (Object.keys(problems).length > 0) { if (Object.keys(problems).length > 0) {
updateQuiz(quiz?.id, (state) => { state.status = "stop" }) updateQuiz(quiz?.id, (state) => {
updateCanCreatePublic(false) state.status = "stop";
});
updateCanCreatePublic(false);
} else { } else {
updateCanCreatePublic(true) updateCanCreatePublic(true);
} }
}, 600); }, 600);
useEffect(() => { useEffect(() => {
updateQuestionHint(questions) updateQuestionHint(questions);
}, [questions]); }, [questions]);
async function handleLogoutClick() { async function handleLogoutClick() {
const [, logoutError] = await logout(); const [, logoutError] = await logout();
@ -137,7 +132,7 @@ export default function EditPage() {
navigate("/"); navigate("/");
} }
if (!quizConfig) return <></> if (!quizConfig) return <></>;
return ( return (
<> <>
{/*хедер*/} {/*хедер*/}
@ -366,7 +361,7 @@ export default function EditPage() {
</Box> </Box>
)} )}
{!canCreatePublic && quiz.config.type !== "form" ? {!canCreatePublic && quiz.config.type !== "form" ? (
<Button <Button
variant="contained" variant="contained"
// disabled // disabled
@ -376,11 +371,13 @@ export default function EditPage() {
height: "34px", height: "34px",
minWidth: "130px", minWidth: "130px",
}} }}
onClick={() => Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)} onClick={() =>
Object.keys(whyCantCreatePublic).length === 0 ? null : updateModalInfoWhyCantCreate(true)
}
> >
Тестовый просмотр Тестовый просмотр
</Button> </Button>
: ) : (
<a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}> <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
<Button <Button
variant="contained" variant="contained"
@ -394,7 +391,7 @@ export default function EditPage() {
Тестовый просмотр Тестовый просмотр
</Button> </Button>
</a> </a>
} )}
<Button <Button
variant="outlined" variant="outlined"
@ -407,26 +404,31 @@ export default function EditPage() {
color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main, color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
}} }}
onClick={ onClick={
Object.keys(whyCantCreatePublic).length === 0 ? Object.keys(whyCantCreatePublic).length === 0
() => updateQuiz(quiz?.id, (state) => { ? () =>
state.status = quiz?.status === "start" ? "stop" : "start"; updateQuiz(quiz?.id, (state) => {
}) state.status = quiz?.status === "start" ? "stop" : "start";
: })
() => updateModalInfoWhyCantCreate(true) : () => updateModalInfoWhyCantCreate(true)
} }
> >
{quiz?.status === "start" ? "Стоп" : "Старт"} {quiz?.status === "start" ? "Стоп" : "Старт"}
</Button> </Button>
{quiz?.status === "start" && <Box {quiz?.status === "start" && (
component={Link} <Box
sx={{ component={Link}
color: "#7e2aea", sx={{
fontSize: "14px" color: "#7e2aea",
}} fontSize: "14px",
target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid} }}
</Box>} target="_blank"
to={"https://hbpn.link/" + quiz.qid}
>
https://hbpn.link/{quiz.qid}
</Box>
)}
</Box>
</Box> </Box>
</Box >
<ModalInfoWhyCantCreate /> <ModalInfoWhyCantCreate />
</> </>
); );

443
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -1,240 +1,247 @@
import { import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Button,
ButtonBase,
Link,
Paper,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import YoutubeEmbedIframe from "./YoutubeEmbedIframe"; import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable"; import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice"; import { useUADevice } from "../../utils/hooks/useUADevice";
export default function QuizPreviewLayout() { export default function QuizPreviewLayout() {
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
if (!quiz) return null; if (!quiz) return null;
const handleCopyNumber = () => { const handleCopyNumber = () => {
navigator.clipboard.writeText(quiz.config.info.phonenumber); navigator.clipboard.writeText(quiz.config.info.phonenumber);
}; };
const background = quiz.config.startpage.background.type === "image" const background =
? quiz.config.startpage.background.desktop quiz.config.startpage.background.type === "image" ? (
? ( quiz.config.startpage.background.desktop ? (
<img
src={quiz.config.startpage.background.desktop}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
) : null
) : quiz.config.startpage.background.type === "video" ? (
quiz.config.startpage.background.video ? (
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
) : null
) : null;
return (
<Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
<QuizPreviewLayoutByType
quizHeaderBlock={
<>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
}}
>
{quiz.config.startpage.logo && (
<img <img
src={quiz.config.startpage.background.desktop} src={quiz.config.startpage.logo}
alt="" style={{
style={{ height: "30px",
width: "100%", maxWidth: "50px",
height: "100%", objectFit: "cover",
objectFit: "cover", }}
}} alt=""
/> />
) )}
: null <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.orgname}</Typography>
: quiz.config.startpage.background.type === "video" </Box>
? quiz.config.startpage.background.video </>
? ( }
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} /> quizMainBlock={
<>
<Box
sx={{
display: "flex",
gap: "10px",
flexDirection: "column",
justifyContent: "center",
alignItems:
quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center"
? "center"
: "start",
}}
>
<Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
<Typography sx={{ fontSize: "12px" }}>{quiz.config.startpage.description}</Typography>
<Box>
<Button
variant="contained"
sx={{
fontSize: "16px",
padding: "10px 15px",
}}
>
{quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</ButtonBase>
) )
: null ) : (
: null; <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
return ( </Typography>
<Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}> )}
<QuizPreviewLayoutByType <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.law}</Typography>
quizHeaderBlock={<> </Box>
<Box sx={{ </>
display: "flex", }
alignItems: "center", backgroundBlock={background}
gap: "20px", startpageType={quiz.config.startpageType}
}}> alignType={quiz.config.startpage.position}
{quiz.config.startpage.logo && ( />
<img </Paper>
src={quiz.config.startpage.logo} );
style={{
height: "30px",
maxWidth: "50px",
objectFit: "cover",
}}
alt=""
/>
)}
<Typography sx={{ fontSize: "12px" }}>
{quiz.config.info.orgname}
</Typography>
</Box>
</>}
quizMainBlock={<>
<Box sx={{
display: "flex",
gap: "10px",
flexDirection: "column",
justifyContent: "center",
alignItems: (quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center")
? "center"
: "start",
}}>
<Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
<Typography sx={{ fontSize: "12px" }}>
{quiz.config.startpage.description}
</Typography>
<Box>
<Button
variant="contained"
sx={{
fontSize: "16px",
padding: "10px 15px",
}}
>
{quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography sx={{ fontSize: "12px" }}>
{quiz.config.info.law}
</Typography>
</Box>
</>}
backgroundBlock={background}
startpageType={quiz.config.startpageType}
alignType={quiz.config.startpage.position}
/>
</Paper>
);
} }
function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: { function QuizPreviewLayoutByType({
quizHeaderBlock: JSX.Element; quizHeaderBlock,
quizMainBlock: JSX.Element; quizMainBlock,
backgroundBlock: JSX.Element | null; backgroundBlock,
startpageType: QuizStartpageType; startpageType,
alignType: QuizStartpageAlignType; alignType,
}: {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) { }) {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(630)); const isTablet = useMediaQuery(theme.breakpoints.down(630));
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {
return ( return (
<Box sx={{ <Box
display: "flex", sx={{
flexDirection: alignType === "left" ? "row" : "row-reverse", display: "flex",
flexGrow: 1, flexDirection: alignType === "left" ? "row" : "row-reverse",
height: "100%", flexGrow: 1,
"&::-webkit-scrollbar": { width: 0 }, height: "100%",
}}> "&::-webkit-scrollbar": { width: 0 },
<Box sx={{ }}
width: !isTablet ? "40%" : "100%", >
padding: "16px", <Box
display: "flex", sx={{
flexDirection: "column", width: !isTablet ? "40%" : "100%",
justifyContent: "space-between", padding: "16px",
alignItems: !isTablet ? "flex-start" : "center", display: "flex",
}}> flexDirection: "column",
{quizHeaderBlock} justifyContent: "space-between",
{quizMainBlock} alignItems: !isTablet ? "flex-start" : "center",
</Box> }}
<Box sx={{ >
width: "60%", {quizHeaderBlock}
}}> {quizMainBlock}
{backgroundBlock} </Box>
</Box> <Box
</Box> sx={{
); width: "60%",
} }}
case "expanded": { >
return ( {backgroundBlock}
<Box sx={{ </Box>
position: "relative", </Box>
display: "flex", );
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}>
<Box sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 2,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box sx={{
position: "absolute",
left: 0,
top: 0,
height: "100%",
width: "100%",
zIndex: 1,
}}>
{backgroundBlock}
</Box>
</Box>
);
}
case "centered": {
return (
<Box sx={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}>
{quizHeaderBlock}
{backgroundBlock &&
<Box>
{backgroundBlock}
</Box>
}
{quizMainBlock}
</Box>
);
}
default: notReachable(startpageType);
} }
case "expanded": {
return (
<Box
sx={{
position: "relative",
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 2,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
position: "absolute",
left: 0,
top: 0,
height: "100%",
width: "100%",
zIndex: 1,
}}
>
{backgroundBlock}
</Box>
</Box>
);
}
case "centered": {
return (
<Box
sx={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
{quizHeaderBlock}
{backgroundBlock && <Box>{backgroundBlock}</Box>}
{quizMainBlock}
</Box>
);
}
default:
notReachable(startpageType);
}
} }
const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = { const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
left: "start", left: "start",
center: "center", center: "center",
right: "end", right: "end",
}; };