feat: ResultCard title

src/pages/ResultPage/cards/ResultCard.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 
-import { getQuestionByContentId, updateQuestion } from "@root/questions/actions";
+import {
+  getQuestionByContentId,
+  updateQuestion,
+} from "@root/questions/actions";
 
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -31,7 +34,11 @@ interface Props {
   resultData: QuizQuestionResult;
 }
 
-export const checkEmptyData = ({ resultData }: { resultData: QuizQuestionResult }) => {
+export const checkEmptyData = ({
+  resultData,
+}: {
+  resultData: QuizQuestionResult;
+}) => {
   let check = true;
   if (
     resultData.title.length > 0 ||
@@ -50,7 +57,9 @@ export const checkEmptyData = ({ resultData }: { resultData: QuizQuestionResult
 const InfoView = ({ resultData }: { resultData: QuizQuestionResult }) => {
   const checkEmpty = checkEmptyData({ resultData });
   const question = getQuestionByContentId(resultData.content.rule.parentId);
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
+    null
+  );
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -96,9 +105,15 @@ const InfoView = ({ resultData }: { resultData: QuizQuestionResult }) => {
           <Typography>
             {resultData?.content.rule.parentId === "line"
               ? "Единый результат в конце прохождения опросника без ветвления"
-              : `Заголовок вопроса, после которого появится результат: "${question?.title || "нет заголовка"}"`}
+              : `Заголовок вопроса, после которого появится результат: "${
+                  question?.title || "нет заголовка"
+                }"`}
           </Typography>
-          {checkEmpty && <Typography color="red">Вы не заполнили этот результат никакими данными</Typography>}
+          {checkEmpty && (
+            <Typography color="red">
+              Вы не заполнили этот результат никакими данными
+            </Typography>
+          )}
         </Paper>
       </Popover>
     </>
@@ -114,6 +129,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
   const [expand, setExpand] = React.useState(true);
   const [resultCardSettings, setResultCardSettings] = React.useState(false);
   const [buttonPlus, setButtonPlus] = React.useState(true);
+  const question = getQuestionByContentId(resultData.content.rule.parentId);
 
   React.useEffect(() => {
     setExpand(true);
@@ -132,11 +148,18 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
         m: "20px 0",
       }}
     >
+      <Typography sx={{ color: theme.palette.grey2.main, padding: "5px 20px" }}>
+        {resultData?.content.rule.parentId === "line"
+          ? "Единый результат в конце прохождения опросника без ветвления"
+          : `Заголовок вопроса, после которого появится результат: "${
+              question?.title || "нет заголовка"
+            }"`}
+      </Typography>
       <Box
         sx={{
           display: expand ? "none" : "flex",
           alignItems: "center",
-          padding: isMobile ? "10px" : "20px",
+          padding: isMobile ? "10px" : "0 20px 20px",
           flexDirection: isMobile ? "column" : null,
           justifyContent: "space-between",
           minHeight: "40px",
@@ -155,13 +178,18 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
             value={resultData.title}
             placeholder={"Заголовок результата"}
             onChange={({ target }: { target: HTMLInputElement }) =>
-              updateQuestion(resultData.id, (question) => (question.title = target.value))
+              updateQuestion(
+                resultData.id,
+                (question) => (question.title = target.value)
+              )
             }
             sx={{
               margin: isMobile ? "10px 0" : 0,
               "& .MuiInputBase-root": {
                 color: "#000000",
-                backgroundColor: expand ? theme.palette.background.default : "transparent",
+                backgroundColor: expand
+                  ? theme.palette.background.default
+                  : "transparent",
                 height: "48px",
                 borderRadius: "10px",
                 ".MuiOutlinedInput-notchedOutline": {
@@ -228,7 +256,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
               boxShadow: "0px 10px 30px #e7e7e7",
             }}
           >
-            <Box sx={{ p: "0 20px", pt: "30px" }}>
+            <Box sx={{ p: "0 20px", pt: "10px" }}>
               <Box
                 sx={{
                   width: "100%",
@@ -243,7 +271,10 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                   value={resultData.title}
                   placeholder={"Заголовок результата"}
                   onChange={({ target }: { target: HTMLInputElement }) =>
-                    updateQuestion(resultData.id, (question) => (question.title = target.value))
+                    updateQuestion(
+                      resultData.id,
+                      (question) => (question.title = target.value)
+                    )
                   }
                 />
                 <IconButton
@@ -265,7 +296,10 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                 <CustomTextField
                   value={resultData.description}
                   onChange={({ target }: { target: HTMLInputElement }) =>
-                    updateQuestion(resultData.id, (question) => (question.description = target.value))
+                    updateQuestion(
+                      resultData.id,
+                      (question) => (question.description = target.value)
+                    )
                   }
                   placeholder={"Заголовок пожирнее"}
                   sx={{
@@ -279,7 +313,10 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
               <TextField
                 value={resultData.content.text}
                 onChange={({ target }: { target: HTMLInputElement }) =>
-                  updateQuestion(resultData.id, (question) => (question.content.text = target.value))
+                  updateQuestion(
+                    resultData.id,
+                    (question) => (question.content.text = target.value)
+                  )
                 }
                 fullWidth
                 placeholder="Описание"
@@ -335,13 +372,19 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                   }}
                 >
                   <Box>
-                    <Typography component={"span"} sx={{ weight: "500", fontSize: "18px", mb: "10px" }}>
+                    <Typography
+                      component={"span"}
+                      sx={{ weight: "500", fontSize: "18px", mb: "10px" }}
+                    >
                       Призыв к действию
                     </Typography>
                     <IconButton
                       onClick={() => {
                         setButtonPlus(true);
-                        updateQuestion(resultData.id, (q) => (q.content.hint.text = ""));
+                        updateQuestion(
+                          resultData.id,
+                          (q) => (q.content.hint.text = "")
+                        );
                       }}
                     >
                       <Trash />
@@ -351,7 +394,11 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                   <TextField
                     value={resultData.content.hint.text}
                     onChange={({ target }: { target: HTMLInputElement }) =>
-                      updateQuestion(resultData.id, (question) => (question.content.hint.text = target.value))
+                      updateQuestion(
+                        resultData.id,
+                        (question) =>
+                          (question.content.hint.text = target.value)
+                      )
                     }
                     fullWidth
                     placeholder="Например: узнать подробнее"
@@ -397,15 +444,25 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                     setResultCardSettings(!resultCardSettings);
                   }}
                   sx={{
-                    backgroundColor: resultCardSettings ? theme.palette.brightPurple.main : "transparent",
+                    backgroundColor: resultCardSettings
-                    color: resultCardSettings ? "#ffffff" : theme.palette.grey3.main,
+                      ? theme.palette.brightPurple.main
+                      : "transparent",
+                    color: resultCardSettings
+                      ? "#ffffff"
+                      : theme.palette.grey3.main,
                     "&:hover": {
-                      backgroundColor: resultCardSettings ? "#581CA7" : "#7E2AEA",
+                      backgroundColor: resultCardSettings
+                        ? "#581CA7"
+                        : "#7E2AEA",
                       color: "white",
                     },
                   }}
                 >
-                  <SettingIcon color={resultCardSettings ? "#ffffff" : theme.palette.grey3.main} />
+                  <SettingIcon
+                    color={
+                      resultCardSettings ? "#ffffff" : theme.palette.grey3.main
+                    }
+                  />
                   {!isTablet && "Настройки"}
                 </MiniButtonSetting>
               </Box>
@@ -423,7 +480,10 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                 placeholder={"Внутреннее описание вопроса"}
                 value={resultData.innerName}
                 onChange={({ target }: { target: HTMLInputElement }) =>
-                  updateQuestion(resultData.id, (question) => (question.content.innerName = target.value))
+                  updateQuestion(
+                    resultData.id,
+                    (question) => (question.content.innerName = target.value)
+                  )
                 }
               />
             </Box>