mirror changes from parallel branches

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -8,11 +8,11 @@ import {
 import { NameplateLogo } from "@icons/NameplateLogo";
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
-import { setCurrentQuizStep } from "@stores/quizView";
 import { useQuizData } from "@utils/hooks/useQuizData";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 import type { QuizQuestionResult } from "../../model/questionTypes/result";
+import { setCurrentQuizStep } from "@stores/quizView";
 
 
 type ResultFormProps = {
@@ -132,6 +132,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                             mt: "15px",
                             gap: "10px",
                             textDecoration: "none",
+                                mb: "5px"
                         }}
                     >
                         <NameplateLogo
@@ -160,14 +161,19 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
-                            p: settings.cfg.resultInfo.showResultForm === "before" ||
+                            p: 
+                            (
+                                settings.cfg.resultInfo.showResultForm === "before" &&
+                                !Boolean(settings.cfg.score)
+                            ) ||
                             (
                                 settings.cfg.resultInfo.showResultForm === "after" &&
                                 resultQuestion.content.redirect
-                            ) ? "20px" : "0",
+                            ) 
+                            ? "20px" : "0",
                         }}
                     >
-                        {settings.cfg.resultInfo.showResultForm === "before" && (
+                        {settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
                             <Button
                                 onClick={() => setCurrentQuizStep("contactform")}
                                 variant="contained"

lib/components/ViewPublicationPage/questions/Number.tsx

@@ -5,7 +5,7 @@ import { useDebouncedCallback } from "use-debounce";
 import { CustomSlider } from "@ui_kit/CustomSlider";
 import CustomTextField from "@ui_kit/CustomTextField";
 
-import { updateAnswer, useQuizViewStore } from "@stores/quizView";
+import { updateAnswer, useQuizViewStore } from "@stores/quizView/store";
 
 import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
@@ -26,14 +26,22 @@ export const Number = ({ currentQuestion }: NumberProps) => {
   const [inputValue, setInputValue] = useState<string>("0");
   const [minRange, setMinRange] = useState<string>("0");
   const [maxRange, setMaxRange] = useState<string>("100000000000");
+  const [reversedInputValue, setReversedInputValue] = useState<string>("0");
+  const [reversedMinRange, setReversedMinRange] = useState<string>("0");
+  const [reversedMaxRange, setReversedMaxRange] =
+    useState<string>("100000000000");
   const theme = useTheme();
   const { answers } = useQuizViewStore();
 
   const isMobile = useRootContainerSize() < 650;
-    const min = window.Number(currentQuestion.content.range.split("—")[0]);
+  const [minBorder, maxBorder] = currentQuestion.content.range
-    const max = window.Number(currentQuestion.content.range.split("—")[1]);
+    .split("—")
+    .map(window.Number);
+  const min = minBorder < maxBorder ? minBorder : maxBorder;
+  const max = minBorder < maxBorder ? maxBorder : minBorder;
+  const reversed = minBorder > maxBorder;
 
-    const sendAnswerToBackend = async (value: string) => {
+  const sendAnswerToBackend = async (value: string, noUpdate = false) => {
     try {
       await sendAnswer({
         questionId: currentQuestion.id,
@@ -41,7 +49,9 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         qid,
       });
 
+      if (!noUpdate) {
         updateAnswer(currentQuestion.id, value, 0);
+      }
     } catch (e) {
       enqueueSnackbar("ответ не был засчитан");
     }
@@ -107,6 +117,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
     }
   }, []);
 
+  console.log(1111111111, reversedMinRange, reversedMaxRange);
+
   return (
     <Box>
       <Typography variant="h5" color={theme.palette.text.primary}>
@@ -142,6 +154,22 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           }}
           onChangeCommitted={async (_, value) => {
             if (currentQuestion.content.chooseRange && Array.isArray(value)) {
+              if (reversed) {
+                const newMinReversedValue = String(max + min - value[0]);
+                const newMaxReversedValue = String(max + min - value[1]);
+
+                setMinRange(String(value[0]));
+                setMaxRange(String(value[1]));
+                setReversedMinRange(newMinReversedValue);
+                setReversedMaxRange(newMaxReversedValue);
+                await sendAnswerToBackend(
+                  `${newMinReversedValue}—${newMaxReversedValue}`,
+                  true
+                );
+
+                return;
+              }
+
               setMinRange(String(value[0]));
               setMaxRange(String(value[1]));
               await sendAnswerToBackend(`${value[0]}—${value[1]}`);
@@ -152,6 +180,21 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             setInputValue(String(value));
             await sendAnswerToBackend(String(value));
           }}
+          valueLabelFormat={(value) => {
+            if (!reversed) {
+              return value;
+            }
+
+            const [minSliderBorder, maxSliderBorder] = sliderValue
+              .split("—")
+              .map(window.Number);
+
+            if (value === minSliderBorder) {
+              return max + min - minSliderBorder;
+            }
+
+            return max + min - maxSliderBorder;
+          }}
           //@ts-ignore
           sx={{
             color: theme.palette.primary.main,
@@ -194,7 +237,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           >
             <CustomTextField
               placeholder="0"
-                            value={minRange}
+              value={reversed ? String(reversedMinRange) : minRange}
               onChange={({ target }) => {
                 const newValue = target.value.replace(/\D/g, "");
                 setMinRange(newValue);
@@ -221,7 +264,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             <Typography color={theme.palette.text.primary}>до</Typography>
             <CustomTextField
               placeholder="0"
-                            value={maxRange}
+              value={reversed ? String(reversedMaxRange) : maxRange}
               onChange={({ target }) => {
                 const newValue = target.value.replace(/\D/g, "");
                 setMaxRange(newValue);

lib/ui_kit/CustomSlider.tsx

@@ -1,5 +1,7 @@
 import { Slider, SxProps, Theme, useTheme } from "@mui/material";
 
+import type { ReactNode } from "react";
+
 type CustomSliderProps = {
   defaultValue?: number;
   value?: number | number[];
@@ -8,7 +10,11 @@ type CustomSliderProps = {
   step?: number;
   sx?: SxProps<Theme>;
   onChange?: (_: Event, value: number | number[]) => void;
-  onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
+  onChangeCommitted?: (
+    _: React.SyntheticEvent | Event,
+    value: number | number[]
+  ) => void;
+  valueLabelFormat?: (value: number, index: number) => ReactNode;
 };
 
 export const CustomSlider = ({
@@ -19,6 +25,7 @@ export const CustomSlider = ({
   step,
   onChange,
   onChangeCommitted,
+  valueLabelFormat,
   sx,
 }: CustomSliderProps) => {
   // const handleChange = ({ type }: Event, newValue: number | number[]) => {
@@ -39,6 +46,7 @@ export const CustomSlider = ({
       onChange={onChange}
       valueLabelDisplay="on"
       onChangeCommitted={onChangeCommitted}
+      valueLabelFormat={valueLabelFormat}
       onMouseDown={(e) => e.stopPropagation()}
       data-cy="slider"
       sx={{
@@ -73,7 +81,7 @@ export const CustomSlider = ({
         "& .MuiSlider-track": {
           height: "12px",
         },
-          ...sx
+        ...sx,
       }}
     />
   );