feat: ResultCard title
This commit is contained in:
IlyaDoronin
parent
f44950333b
commit
ee87a5d7a8
@ -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",
|
||||
color: resultCardSettings ? "#ffffff" : theme.palette.grey3.main,
|
||||
backgroundColor: resultCardSettings
|
||||
? 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user