388 lines
12 KiB
TypeScript
388 lines
12 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import {
|
||
Box,
|
||
Button,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
|
||
import { useQuizViewStore } from "@root/quizView";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
|
||
import type {
|
||
AnyTypedQuizQuestion,
|
||
QuizQuestionBase,
|
||
} from "../../model/questionTypes/shared";
|
||
import { getQuestionByContentId } from "@root/questions/actions";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
||
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||
import { checkEmptyData } from "../ResultPage/cards/ResultCard";
|
||
|
||
type FooterProps = {
|
||
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
|
||
question: AnyTypedQuizQuestion;
|
||
setShowContactForm: (show: boolean) => void;
|
||
setShowResultForm: (show: boolean) => void;
|
||
};
|
||
|
||
export const Footer = ({
|
||
setCurrentQuestion,
|
||
question,
|
||
setShowContactForm,
|
||
setShowResultForm,
|
||
}: FooterProps) => {
|
||
const [disablePreviousButton, setDisablePreviousButton] =
|
||
useState<boolean>(false);
|
||
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
|
||
const [stepNumber, setStepNumber] = useState(1);
|
||
const quiz = useCurrentQuiz();
|
||
const mode = modes;
|
||
const { answers } = useQuizViewStore();
|
||
const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[];
|
||
const theme = useTheme();
|
||
const isMobileMini = useMediaQuery(theme.breakpoints.down(382));
|
||
const linear = !questions.find(
|
||
({ content }) => content.rule.parentId === "root",
|
||
);
|
||
|
||
useEffect(() => {
|
||
// Логика для аргумента disabled у кнопки "Назад"
|
||
if (linear) {
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
|
||
const previousQuestion = questions[questionIndex - 1];
|
||
|
||
if (previousQuestion) {
|
||
setDisablePreviousButton(false);
|
||
} else {
|
||
setDisablePreviousButton(true);
|
||
}
|
||
} else {
|
||
if (question?.content.rule.parentId === "root") {
|
||
setDisablePreviousButton(true);
|
||
} else {
|
||
setDisablePreviousButton(false);
|
||
}
|
||
}
|
||
|
||
// Логика для аргумента disabled у кнопки "Далее"
|
||
const answer = answers.find(
|
||
({ questionId }) => questionId === question.content.id,
|
||
);
|
||
|
||
if ("required" in question.content && question.content.required && answer) {
|
||
setDisableNextButton(false);
|
||
|
||
return;
|
||
}
|
||
|
||
if (
|
||
"required" in question.content &&
|
||
question.content.required &&
|
||
!answer
|
||
) {
|
||
setDisableNextButton(true);
|
||
|
||
return;
|
||
}
|
||
|
||
if (linear) {
|
||
return;
|
||
}
|
||
|
||
const nextQuestionId = getNextQuestionId();
|
||
if (nextQuestionId) {
|
||
setDisableNextButton(false);
|
||
} else {
|
||
const nextQuestion = getQuestionByContentId(
|
||
question.content.rule.default,
|
||
);
|
||
|
||
if (nextQuestion?.type) {
|
||
setDisableNextButton(false);
|
||
}
|
||
}
|
||
}, [question, answers]);
|
||
|
||
const showResult = (nextQuestion) => {
|
||
console.log("Следующий результат будет вот такой", nextQuestion);
|
||
if (nextQuestion && quiz?.config.resultInfo.when === "email") {
|
||
setShowContactForm(true);
|
||
return;
|
||
}
|
||
|
||
const isEmpty = checkEmptyData({ resultData: nextQuestion });
|
||
if (nextQuestion) {
|
||
if (nextQuestion && quiz?.config.resultInfo.when === "before") {
|
||
if (isEmpty) {
|
||
setShowContactForm(true); //до+пустая = кидать на ФК
|
||
} else {
|
||
setShowResultForm(true); //до+заполнена = показать
|
||
}
|
||
}
|
||
if (
|
||
nextQuestion &&
|
||
(quiz?.config.resultInfo.when === "after" ||
|
||
quiz?.config.resultInfo.when === "email")
|
||
) {
|
||
if (isEmpty) {
|
||
setShowContactForm(true); //после+пустая
|
||
} else {
|
||
setShowContactForm(true); //после+заполнена = показать ФК
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const getNextQuestionId = () => {
|
||
console.log("net");
|
||
console.log(question);
|
||
let readyBeNextQuestion = "";
|
||
|
||
//вопрос обязателен, анализируем ответ и условия ветвления
|
||
if (answers.length) {
|
||
const answer = answers.find(
|
||
({ questionId }) => questionId === question.content.id,
|
||
);
|
||
|
||
(question as QuizQuestionBase).content.rule.main.forEach(
|
||
({ next, rules }) => {
|
||
let longerArray = Math.max(
|
||
rules[0].answers.length,
|
||
answer?.answer && Array.isArray(answer?.answer)
|
||
? answer?.answer.length
|
||
: [answer?.answer].length,
|
||
);
|
||
|
||
for (
|
||
var i = 0;
|
||
i < longerArray;
|
||
i++ // Цикл по всем элементам бОльшего массива
|
||
) {
|
||
if (Array.isArray(answer?.answer)) {
|
||
if (
|
||
answer?.answer.find((item) =>
|
||
String(item === rules[0].answers[i]),
|
||
)
|
||
) {
|
||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
if (String(rules[0].answers[i]) === answer?.answer) {
|
||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||
}
|
||
}
|
||
},
|
||
);
|
||
|
||
if (readyBeNextQuestion) return readyBeNextQuestion;
|
||
}
|
||
|
||
if (!question.required) {
|
||
//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
|
||
console.log("вопрос не обязателен ищем дальше");
|
||
const defaultQ = question.content.rule.default;
|
||
if (defaultQ.length > 1 && defaultQ !== " ") return defaultQ;
|
||
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
|
||
//Кинуть на ребёнка надо даже если там нет дефолта
|
||
if (
|
||
(question?.type === "date" ||
|
||
question?.type === "text" ||
|
||
question?.type === "number" ||
|
||
question?.type === "page") &&
|
||
question.content.rule.children.length === 1
|
||
)
|
||
return question.content.rule.children[0];
|
||
}
|
||
//ничё не нашли, ищем резулт
|
||
console.log("ничё не нашли, ищем резулт ");
|
||
return questions.find((q) => {
|
||
console.log('q.type === "result"', q.type === "result");
|
||
console.log(
|
||
"q.content.rule.parentId === question.content.id",
|
||
q.content.rule.parentId === question.content.id,
|
||
);
|
||
return (
|
||
q.type === "result" && q.content.rule.parentId === question.content.id
|
||
);
|
||
})?.content.id;
|
||
};
|
||
|
||
const followPreviousStep = () => {
|
||
if (linear) {
|
||
setStepNumber((q) => q - 1);
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
|
||
const previousQuestion = questions[questionIndex - 1];
|
||
followPreviousStep
|
||
if (previousQuestion) {
|
||
setCurrentQuestion(previousQuestion);
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
if (question?.content.rule.parentId !== "root") {
|
||
const parent = getQuestionByContentId(question?.content.rule.parentId);
|
||
if (parent?.type) {
|
||
setCurrentQuestion(parent);
|
||
} else {
|
||
enqueueSnackbar("не могу получить предыдущий вопрос");
|
||
}
|
||
} else {
|
||
enqueueSnackbar("вы находитесь на первом вопросе");
|
||
}
|
||
};
|
||
|
||
const followNextStep = () => {
|
||
console.log(" Я понимаю что нахожусь в линейном опроснике" + linear);
|
||
if (linear) {
|
||
setStepNumber((q) => q + 1);
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
const nextQuestion = questions[questionIndex + 1];
|
||
|
||
if (nextQuestion && nextQuestion.type !== "result") {
|
||
setCurrentQuestion(nextQuestion);
|
||
} else {
|
||
showResult(nextQuestion);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const nextQuestionId = getNextQuestionId();
|
||
|
||
console.log(nextQuestionId);
|
||
if (nextQuestionId) {
|
||
const nextQuestion = getQuestionByContentId(nextQuestionId);
|
||
console.log(nextQuestion);
|
||
|
||
if (nextQuestion?.type && nextQuestion.type === "result") {
|
||
showResult(nextQuestion);
|
||
} else {
|
||
setCurrentQuestion(nextQuestion);
|
||
}
|
||
} else {
|
||
enqueueSnackbar("не могу получить последующий вопрос");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
position: "relative",
|
||
padding: "15px 0",
|
||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||
height: "75px",
|
||
|
||
display: "flex",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "1000px",
|
||
padding: "0 10px",
|
||
margin: "0 auto",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{/*{mode[quiz.config.theme] ? (*/}
|
||
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||
{/*):(*/}
|
||
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||
{/*)}*/}
|
||
{linear && (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
marginRight: "auto",
|
||
color: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
<Typography>Шаг</Typography>
|
||
<Typography
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
fontWeight: "bold",
|
||
borderRadius: "50%",
|
||
width: "30px",
|
||
height: "30px",
|
||
color: "#FFF",
|
||
background: theme.palette.primary.main,
|
||
}}
|
||
>
|
||
{stepNumber}
|
||
</Typography>
|
||
<Typography>Из</Typography>
|
||
<Typography sx={{ fontWeight: "bold" }}>
|
||
{questions.filter((q) => q.type !== "result").length}
|
||
</Typography>
|
||
</Box>
|
||
</>
|
||
)}
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
marginRight: "auto",
|
||
// color: theme.palette.grey1.main,
|
||
}}
|
||
>
|
||
{/* <Typography>Шаг</Typography>
|
||
<Typography
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
fontWeight: "bold",
|
||
borderRadius: "50%",
|
||
width: "30px",
|
||
height: "30px",
|
||
color: "#FFF",
|
||
background: theme.palette.brightPurple.main,
|
||
}}
|
||
>
|
||
{stepNumber} */}
|
||
{/* </Typography> */}
|
||
{/* <Typography>Из</Typography>
|
||
<Typography sx={{ fontWeight: "bold" }}>
|
||
{questions.length}
|
||
</Typography> */}
|
||
</Box>
|
||
<Button
|
||
disabled={disablePreviousButton}
|
||
variant="contained"
|
||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||
onClick={followPreviousStep}
|
||
>
|
||
{isMobileMini ? "←" : "← Назад"}
|
||
</Button>
|
||
<Button
|
||
disabled={disableNextButton}
|
||
variant="contained"
|
||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||
onClick={followNextStep}
|
||
>
|
||
Далее →
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|