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

feat: ConfirmLeaveModal

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-26 15:57:44 +03:00
parent 78ddb2e746
commit f44950333b
6 changed files with 433 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/ResultPage/ResultSettings.tsx
View File

@ -1,14 +1,18 @@
import IconPlus from "@icons/IconPlus";
import Info from "@icons/Info";
import Plus from "@icons/Plus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { Box, Button, Typography, Paper, Modal, TextField } from "@mui/material";
import { useEffect, useRef, useState } from "react";
// import { useBlocker } from "react-router-dom";
import {
Box,
Button,
Typography,
Paper,
Modal,
TextField,
} from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import CustomWrapper from "@ui_kit/CustomWrapper";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm";
import { SettingForm } from "./SettingForm";
import { useEffect, useRef, useState } from "react";
import { WhenCard } from "./cards/WhenCard";
import { ResultCard, checkEmptyData } from "./cards/ResultCard";
import { EmailSettingsCard } from "./cards/EmailSettingsCard";
@ -17,15 +21,27 @@ import { useQuestionsStore } from "@root/questions/store";
import { deleteQuestion } from "@root/questions/actions";
import { QuizQuestionResult } from "@model/questionTypes/result";
import IconPlus from "@icons/IconPlus";
import Info from "@icons/Info";
import Plus from "@icons/Plus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
export const ResultSettings = () => {
const { questions } = useQuestionsStore();
const quiz = useCurrentQuiz();
const results = useQuestionsStore().questions.filter((q): q is QuizQuestionResult => q.type === "result");
const results = useQuestionsStore().questions.filter(
(q): q is QuizQuestionResult => q.type === "result"
);
const [quizExpand, setQuizExpand] = useState(true);
const [resultContract, setResultContract] = useState(true);
const [triggerExit, setTriggerExit] = useState<{
follow: boolean;
path: string;
}>({ follow: false, path: "" });
const [openNotificationModal, setOpenNotificationModal] =
useState<boolean>(true);
const isReadyToLeaveRef = useRef(true);
console.log('quiz ', quiz)
// const blocker = useBlocker(false);
useEffect(
function calcIsReadyToLeave() {
@ -42,11 +58,29 @@ console.log('quiz ', quiz)
useEffect(() => {
return () => {
if (isReadyToLeaveRef.current === false) alert("Пожалуйста, проверьте, что вы заполнили все результаты");
if (!isReadyToLeaveRef.current && window.location.pathname !== "/edit") {
setOpenNotificationModal(true);
}
};
}, []);
const cnsl = results.filter(q=> q.content.usage)
const cnsl = results.filter((q) => q.content.usage);
const shouldBlock = true; // Replace this
// useEffect(() => {
// if (shouldBlock) {
// blocker.proceed?.()
// }
// }, [shouldBlock]);
const leavePage = (leave: boolean) => {
if (leave) {
console.log("ливаем");
}
setOpenNotificationModal(false);
};
return (
<Box sx={{ maxWidth: "796px" }}>
@ -81,9 +115,13 @@ console.log('quiz ', quiz)
</Box>
<WhenCard quizExpand={quizExpand} />
{quiz.config.resultInfo.when === "email" && <EmailSettingsCard quizExpand={quizExpand} />}
{quiz.config.resultInfo.when === "email" && (
<EmailSettingsCard quizExpand={quizExpand} />
)}
<Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
<Box
sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
>
<Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
Создайте результат
</Typography>
@ -109,7 +147,11 @@ console.log('quiz ', quiz)
</Box>
{cnsl.map((resultQuestion) => (
<ResultCard resultContract={resultContract} resultData={resultQuestion} key={resultQuestion.id} />
<ResultCard
resultContract={resultContract}
resultData={resultQuestion}
key={resultQuestion.id}
/>
))}
<Modal
open={false}

72
src/pages/startPage/ConfirmLeaveModal/index.tsx Normal file
View File

@ -0,0 +1,72 @@
import { Box, Button, Modal, Typography } from "@mui/material";
import { useUiTools } from "@root/uiTools/store";
type ConfirmLeaveModalProps = {
open: boolean;
follow: () => void;
cancel: () => void;
};
export const ConfirmLeaveModal = ({
open,
follow,
cancel,
}: ConfirmLeaveModalProps) => (
<Modal open={open} onClose={cancel}>
<Box
sx={{
outline: "none",
position: "absolute",
overflow: "hidden",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "620px",
width: "100%",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
}}
>
<Box
sx={{
boxSizing: "border-box",
background: "#F2F3F7",
height: "70px",
padding: "0 25px",
display: "flex",
alignItems: "center",
}}
>
<Typography component="span">
Пожалуйста, проверьте, что вы заполнили все результаты
</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "end",
gap: "10px",
margin: "20px",
}}
>
<Button
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={cancel}
>
Остаться
</Button>
<Button
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={follow}
>
Покинуть
</Button>
</Box>
</Box>
</Modal>
);

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

@ -16,7 +16,13 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz } from "@root/quizes/actions";
import {
decrementCurrentStep,
resetEditConfig,
setQuizes,
updateQuiz,
setCurrentStep,
} from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import CustomAvatar from "@ui_kit/Header/Avatar";
@ -32,8 +38,17 @@ import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { useDebouncedCallback } from "use-debounce";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import { cleanQuestions, createResult, setQuestions } from "@root/questions/actions";
import { updateOpenBranchingPanel, updateCanCreatePublic, updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import {
cleanQuestions,
createResult,
setQuestions,
} from "@root/questions/actions";
import {
updateOpenBranchingPanel,
updateCanCreatePublic,
updateModalInfoWhyCantCreate,
setShowConfirmLeaveModal,
} from "@root/uiTools/actions";
import { BranchingPanel } from "../Questions/BranchingPanel";
import { useQuestionsStore } from "@root/questions/store";
import { useQuizes } from "@root/quizes/hooks";
@ -46,41 +61,55 @@ import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
import { ConfirmLeaveModal } from "./ConfirmLeaveModal";
import { checkQuestionHint } from "@utils/checkQuestionHint";
import { type } from "os";
export default function EditPage() {
const quiz = useCurrentQuiz();
const { editQuizId } = useQuizStore();
const { questions } = useQuestionsStore();
console.log(quiz)
console.log(quiz);
useEffect(() => {
const getData = async () => {
const quizes = await quizApi.getList();
setQuizes(quizes);
if (editQuizId) {
const questions = await questionApi.getList({ quiz_id: editQuizId });
setQuestions(questions);
}
//Всегда должен существовать хоть 1 резулт - "line"
console.log(questions)
if (!questions?.find(q=>q.type === "result" && q.content.includes(':"line"') || q.content.includes(":'line'"))) createResult(quiz?.backendId, "line")
console.log(questions);
if (
!questions?.find(
(q) =>
(q.type === "result" && q.content.includes(':"line"')) ||
q.content.includes(":'line'")
)
)
createResult(quiz?.backendId, "line");
};
getData();
}, []);
const { openBranchingPanel, whyCantCreatePublic, canCreatePublic } = useUiTools();
const {
openBranchingPanel,
whyCantCreatePublic,
canCreatePublic,
showConfirmLeaveModal,
} = useUiTools();
const theme = useTheme();
const navigate = useNavigate();
const currentStep = useQuizStore((state) => state.currentStep);
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
const [nextStep, setNextStep] = useState<number>(0);
const quizConfig = quiz?.config;
const disableTest = quiz === undefined ? true : (quiz.config.type === null)
const disableTest = quiz === undefined ? true : quiz.config.type === null;
useEffect(() => {
if (editQuizId === null) navigate("/list");
@ -95,27 +124,26 @@ export default function EditPage() {
[]
);
const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
const problems = checkQuestionHint(questions)
useUiTools.setState({ whyCantCreatePublic: problems })
const updateQuestionHint = useDebouncedCallback(
(questions: AnyTypedQuizQuestion[]) => {
const problems = checkQuestionHint(questions);
useUiTools.setState({ whyCantCreatePublic: problems });
if (Object.keys(problems).length > 0) {
updateQuiz(quiz?.id, (state) => { state.status = "stop" })
updateCanCreatePublic(false)
updateQuiz(quiz?.id, (state) => {
state.status = "stop";
});
updateCanCreatePublic(false);
} else {
updateCanCreatePublic(true)
updateCanCreatePublic(true);
}
}, 600);
},
600
);
useEffect(() => {
updateQuestionHint(questions)
updateQuestionHint(questions);
}, [questions]);
async function handleLogoutClick() {
const [, logoutError] = await logout();
@ -127,7 +155,11 @@ export default function EditPage() {
clearUserData();
navigate("/");
}
console.log(questions)
const followNewPage = () => {
setShowConfirmLeaveModal(false);
setCurrentStep(nextStep);
};
if (!quizConfig) return <></>;
return (
@ -258,7 +290,7 @@ export default function EditPage() {
display: isMobile ? "block" : "flex",
}}
>
{isMobile ? <SidebarMobile open={mobileSidebar} /> : <Sidebar />}
{isMobile ? <SidebarMobile open={mobileSidebar} /> : <Sidebar setNextStep={setNextStep} />}
<Box
sx={{
background: theme.palette.background.default,
@ -297,7 +329,9 @@ export default function EditPage() {
background: "#FFF",
}}
>
{[1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form" && (
{[1].includes(currentStep) &&
!openBranchingPanel &&
quizConfig.type !== "form" && (
<Box
sx={{
display: "flex",
@ -331,7 +365,10 @@ export default function EditPage() {
"&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
},
"&.Mui-disabled .MuiSwitch-thumb": {
color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600],
color:
theme.palette.mode === "light"
? theme.palette.grey[100]
: theme.palette.grey[600],
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
@ -344,21 +381,27 @@ export default function EditPage() {
},
"& .MuiSwitch-track": {
borderRadius: 13,
backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
backgroundColor:
theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
opacity: 1,
transition: theme.transitions.create(["background-color"], {
transition: theme.transitions.create(
["background-color"],
{
duration: 500,
}),
}
),
},
}}
/>
<Box>
<Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>Логика ветвления</Typography>
<Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
Логика ветвления
</Typography>
</Box>
</Box>
)}
{!canCreatePublic && quiz.config.type !== "form" ?
{!canCreatePublic && quiz.config.type !== "form" ? (
<Button
variant="contained"
// disabled
@ -368,12 +411,21 @@ export default function EditPage() {
height: "34px",
minWidth: "130px",
}}
onClick={() => Object.keys(whyCantCreatePublic).length === 0 ? () => { } : updateModalInfoWhyCantCreate(true)}
onClick={() =>
Object.keys(whyCantCreatePublic).length === 0
? () => {}
: updateModalInfoWhyCantCreate(true)
}
>
Тестовый просмотр
</Button>
:
<a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
) : (
<a
href={`/view`}
target="_blank"
rel="noreferrer"
style={{ textDecoration: "none" }}
>
<Button
variant="contained"
sx={{
@ -386,7 +438,7 @@ export default function EditPage() {
Тестовый просмотр
</Button>
</a>
}
)}
<Button
variant="outlined"
@ -395,31 +447,48 @@ export default function EditPage() {
lineHeight: "18px",
height: "34px",
border: `1px solid ${theme.palette.brightPurple.main}`,
backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
backgroundColor:
quiz?.status === "start"
? theme.palette.brightPurple.main
: "transparent",
color:
quiz?.status === "start"
? "#FFFFFF"
: theme.palette.brightPurple.main,
}}
onClick={
Object.keys(whyCantCreatePublic).length === 0 ?
() => updateQuiz(quiz?.id, (state) => {
state.status = quiz?.status === "start" ? "stop" : "start";
Object.keys(whyCantCreatePublic).length === 0
? () =>
updateQuiz(quiz?.id, (state) => {
state.status =
quiz?.status === "start" ? "stop" : "start";
})
:
() => updateModalInfoWhyCantCreate(true)
: () => updateModalInfoWhyCantCreate(true)
}
>
{quiz?.status === "start" ? "Стоп" : "Старт"}
</Button>
{quiz?.status === "start" && <Box
{quiz?.status === "start" && (
<Box
component={Link}
sx={{
color: "#7e2aea",
fontSize: "14px"
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>
<ModalInfoWhyCantCreate />
<ConfirmLeaveModal
open={showConfirmLeaveModal}
follow={followNewPage}
cancel={() => setShowConfirmLeaveModal(false)}
/>
</>
);
}

1
src/stores/uiTools/actions.ts
View File

@ -38,3 +38,4 @@ export const updateCanCreatePublic = (can: boolean) => useUiTools.setState({ can
export const updateModalInfoWhyCantCreate = (can: boolean) => useUiTools.setState({ openModalInfoWhyCantCreate: can });
export const updateDeleteId = (deleteNodeId: string | null = null) => useUiTools.setState({ deleteNodeId });
export const setShowConfirmLeaveModal = (showConfirmLeaveModal: boolean) => useUiTools.setState({ showConfirmLeaveModal });

3
src/stores/uiTools/store.ts
View File

@ -11,7 +11,9 @@ export type UiTools = {
whyCantCreatePublic: Record<string, WhyCantCreatePublic>//ид вопроса и список претензий к нему
openModalInfoWhyCantCreate: boolean;
deleteNodeId: string | null;
showConfirmLeaveModal: boolean;
};
export type WhyCantCreatePublic = {
name: string;
problems: string[]
@ -28,6 +30,7 @@ const initialState: UiTools = {
whyCantCreatePublic: {},
openModalInfoWhyCantCreate: false,
deleteNodeId: null,
showConfirmLeaveModal: false,
};
export const useUiTools = create<UiTools>()(

42
src/ui_kit/Sidebar.tsx
View File

@ -4,19 +4,13 @@ import PencilCircleIcon from "@icons/PencilCircleIcon";
import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
import TagIcon from "@icons/TagIcon";
import { quizSetupSteps } from "@model/quizSettings";
import {
Box,
IconButton,
List,
Typography,
useTheme
} from "@mui/material";
import { Box, IconButton, List, Typography, useTheme } from "@mui/material";
import { setCurrentStep } from "@root/quizes/actions";
import { useQuizStore } from "@root/quizes/store";
import { useState } from "react";
import MenuItem from "./MenuItem";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { setShowConfirmLeaveModal } from "@root/uiTools/actions";
const quizSettingsMenuItems = [
[TagIcon, "Дополнения"],
@ -25,15 +19,29 @@ const quizSettingsMenuItems = [
[GearIcon, "Настройки"],
] as const;
export default function Sidebar() {
type SidebarProps = {
setNextStep: (step: number) => void;
};
export default function Sidebar({ setNextStep }: SidebarProps) {
const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const currentStep = useQuizStore(state => state.currentStep);
const currentStep = useQuizStore((state) => state.currentStep);
const quiz = useCurrentQuiz();
const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev);
const changePage = (index: number) => {
if (currentStep === 2) {
setNextStep(index);
setShowConfirmLeaveModal(true);
return;
}
setCurrentStep(index);
};
return (
<Box
sx={{
@ -49,7 +57,7 @@ export default function Sidebar() {
overflow: "hidden",
whiteSpace: "nowrap",
boxSizing: "border-box",
zIndex: 1
zIndex: 1,
}}
>
<Box
@ -92,12 +100,18 @@ export default function Sidebar() {
return (
<MenuItem
onClick={() => setCurrentStep(index)}
onClick={() => changePage(index)}
key={index}
text={menuItem.sidebarText}
isCollapsed={isMenuCollapsed}
isActive={currentStep === index}
disabled={index===0 ? false : quiz===undefined ? true : (quiz?.config.type === null)}
disabled={
index === 0
? false
: quiz === undefined
? true
: quiz?.config.type === null
}
icon={
<Icon
color={