у линейной публикации показываются шаги

2023-12-23 18:29:33 +03:00 · 2023-12-23 18:29:33 +03:00 · 1ca17853e9
commit 1ca17853e9
parent 1a430a338d
3 changed files with 78 additions and 43 deletions
--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -12,6 +12,7 @@ import { useState } from "react";
 import { useQuestionsStore } from "@root/questions/store";

 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
+import { enqueueSnackbar } from "notistack";

 type ContactFormProps = {
  currentQuestion: AnyTypedQuizQuestion;
@ -155,28 +156,53 @@ export const ContactForm = ({
  );
 };

-const Inputs = () => {
+const Inputs = (currentQuestion: any) => {
  const quiz = useCurrentQuiz();
+  const { questions } = useQuestionsStore()

-  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} />
-  })
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [phone, setPhone] = useState("")
+  const [text, setText] = useState("")
+  const [adress, setAdress] = useState("")

-  if (someUsed.length) {
-    return <>{someUsed}</>
+  //@ts-ignore
+  const FC: any = quiz?.config.formContact.fields
+  console.log(FC)
+
+  //@ts-ignore
+  const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
+  //@ts-ignore
+  const Email = <CustomInput onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
+  //@ts-ignore
+  const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
+  //@ts-ignore
+  const Text = <CustomInput onChange={({ target }) => setText(target.value)} id={text} title={FC["text"].innerText || "Введите фамилию"} desc={FC["text"].text || "фамилию"} Icon={TextIcon} />
+  //@ts-ignore
+  const Adress = <CustomInput onChange={({ target }) => setAdress(target.value)} id={adress} title={FC["address"].innerText || "Введите адрес"} desc={FC["address"].text || "адрес"} Icon={AddressIcon} />
+
+
+
+  //@ts-ignore
+  if (questions.some((data) => data.used)) {
+    return <>
+      {FC["name"].used ? Name : <></>}
+      {FC["email"].used ? Email : <></>}
+      {FC["phone"].used ? Phone : <></>}
+      {FC["text"].used ? Text : <></>}
+      {FC["address"].used ? Adress : <></>}
+    </>
  } else {
    return <>
-      {Icons[0]}
-      {Icons[1]}
-      {Icons[2]}
+      {Name}
+      {Email}
+      {Phone}
    </>
  }
 }

+
 const CustomInput = ({ title, desc, Icon }: any) => {
  return <Box m="15px 0">
    <Typography mb="7px">{title}</Typography>
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@ -20,6 +20,7 @@ type FooterProps = {
 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 { answers } = useQuizViewStore();
  const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[];
@ -123,6 +124,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh

  const followPreviousStep = () => {
    if (linear) {
+      setStepNumber(q=>q-1)
      const questionIndex = questions.findIndex(({ id }) => id === question.id);

      const previousQuestion = questions[questionIndex - 1];
@ -150,6 +152,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh


    if (linear) {
+      setStepNumber(q=>q+1)
      const questionIndex = questions.findIndex(({ id }) => id === question.id);
      const nextQuestion = questions[questionIndex + 1];

@ -205,37 +208,41 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
          gap: "10px",
        }}
      >
-        <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />
-        <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>
+        <NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
+        {linear &&
+          <>
+            <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.filter(q=>q.type !== "result").length}
+              </Typography>
+            </Box>
+          </>
+        }
        <Button
          disabled={disablePreviousButton}
          variant="contained"
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@ -24,6 +24,8 @@ export const ViewPage = () => {
  const { editQuizId } = useQuizStore();
  const { questions } = useQuestionsStore();

+  console.log("quiz ", quiz)
+
  useEffect(() => {
    const getData = async () => {
      const quizes = await quizApi.getList();