diff --git a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx index 9195bfc..b03de56 100644 --- a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx +++ b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx @@ -1,7 +1,16 @@ import { useQuizSettings } from "@contexts/QuizDataContext"; import { CheckboxIcon } from "@icons/Checkbox"; import type { QuestionVariant } from "@model/questionTypes/shared"; -import { Checkbox, FormControlLabel, TextField as MuiTextField, Radio, TextFieldProps, useTheme } from "@mui/material"; +import { + Checkbox, + FormControlLabel, + Input, + TextField as MuiTextField, + Radio, + TextFieldProps, + TextareaAutosize, + useTheme, +} from "@mui/material"; import { useQuizViewStore } from "@stores/quizView"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; @@ -10,6 +19,55 @@ import type { FC, MouseEvent } from "react"; const TextField = MuiTextField as unknown as FC; +interface OwnInputProps { + questionId: string; + variant: QuestionVariant; + largeCheck: boolean; + ownPlaceholder: string; +} +const OwnInput = ({ questionId, variant, largeCheck }: OwnInputProps) => { + const theme = useTheme(); + const ownVariants = useQuizViewStore((state) => state.ownVariants); + const { updateOwnVariant } = useQuizViewStore((state) => state); + + const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || ""; + + return largeCheck ? ( + ) => e.stopPropagation()} + onChange={(e: React.ChangeEvent) => { + updateOwnVariant(variant.id, e.target.value); + }} + /> + ) : ( + ) => e.stopPropagation()} + onChange={(e: React.ChangeEvent) => { + updateOwnVariant(variant.id, e.target.value); + }} + /> + ); +}; + export const VariantItem = ({ questionId, isMulti, @@ -17,6 +75,8 @@ export const VariantItem = ({ answer, index, own = false, + questionLargeCheck, + ownPlaceholder, }: { isMulti: boolean; questionId: string; @@ -24,6 +84,8 @@ export const VariantItem = ({ answer: string | string[] | undefined; index: number; own?: boolean; + questionLargeCheck: boolean; + ownPlaceholder: string; }) => { const { settings } = useQuizSettings(); const theme = useTheme(); @@ -78,6 +140,7 @@ export const VariantItem = ({ "&:hover": { borderColor: theme.palette.primary.main }, "&.MuiFormControl-root": { width: "100%" }, "& .MuiFormControlLabel-label": { + width: "100%", wordBreak: "break-word", height: variant.answer.length <= 60 ? undefined : "60px", overflow: "auto", @@ -105,7 +168,18 @@ export const VariantItem = ({ /> ) } - label={own ? : variant.answer} + label={ + own ? ( + + ) : ( + variant.answer + ) + } onClick={sendVariant} /> ); diff --git a/lib/components/ViewPublicationPage/questions/Variant/index.tsx b/lib/components/ViewPublicationPage/questions/Variant/index.tsx index 68cd397..4f506be 100644 --- a/lib/components/ViewPublicationPage/questions/Variant/index.tsx +++ b/lib/components/ViewPublicationPage/questions/Variant/index.tsx @@ -73,26 +73,24 @@ export const Variant = ({ currentQuestion }: VariantProps) => { gap: "20px", }} > - {currentQuestion.content.variants.map((variant, index) => ( - - ))} - {currentQuestion.content.own && ownVariant && ( - - )} + {currentQuestion.content.variants + .filter((v) => { + if (!v.isOwn) return true; + return v.isOwn && currentQuestion.content.own; + }) + .map((variant, index) => ( + + ))} {currentQuestion.content.back && currentQuestion.content.back !== " " && ( diff --git a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx index 8557bc3..cb804dc 100644 --- a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx +++ b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx @@ -14,23 +14,24 @@ type VarimgVariantProps = { index: number; isSending: boolean; setIsSending: (isSending: boolean) => void; - questionOwn: boolean; questionLargeCheck: boolean; isMulti: boolean; answer: string | string[] | undefined; + ownPlaceholder: string; }; interface OwnInputProps { questionId: string; variant: QuestionVariant; largeCheck: boolean; + ownPlaceholder: string; } const OwnInput = ({ questionId, variant, largeCheck }: OwnInputProps) => { const theme = useTheme(); const ownVariants = useQuizViewStore((state) => state.ownVariants); const { updateOwnVariant } = useQuizViewStore((state) => state); - const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)].variant.answer || ""; + const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || ""; return largeCheck ? ( { const { settings } = useQuizSettings(); @@ -137,6 +138,7 @@ export const VarimgVariant = ({ questionId={questionId} variant={variant} largeCheck={questionLargeCheck} + ownPlaceholder={ownPlaceholder} /> ) : ( variant.answer diff --git a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx b/lib/components/ViewPublicationPage/questions/Varimg/index.tsx index eb3473c..718623e 100644 --- a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx +++ b/lib/components/ViewPublicationPage/questions/Varimg/index.tsx @@ -28,6 +28,8 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { const ownVariant = ownVariants.find((variant) => variant.id === currentQuestion.id); const variant = currentQuestion.content.variants.find(({ id }) => answer === id); + console.log(variant); + useEffect(() => { if (!ownVariant) { updateOwnVariant(currentQuestion.id, ""); @@ -77,20 +79,25 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { "&:active": { color: theme.palette.text.primary }, }} > - {currentQuestion.content.variants.map((variant, index) => ( - - ))} + {currentQuestion.content.variants + .filter((v) => { + if (!v.isOwn) return true; + return v.isOwn && currentQuestion.content.own; + }) + .map((variant, index) => ( + + ))} answer.some((a: string) => a === variant.id))]?.variant + ?.answer || "" + : ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)]?.variant?.answer || + ""; + if (!Array.isArray(answer)) throw new Error("Cannot send answer in select question"); //Оставляем только выбранные варианты @@ -132,8 +140,12 @@ export function sendQuestionAnswer( let answerString = ``; selectedVariants.forEach((e) => { - answerString += `\`${e.answer}\`,`; + if (!e.isOwn) answerString += `\`${e.answer}\`,`; }); + + if (question.content.own && selectedVariants.some((v) => v.isOwn)) { + answerString += `\`${ownAnswer}\`,`; + } answerString = answerString.slice(0, -1); return sendAnswer({ @@ -155,7 +167,7 @@ export function sendQuestionAnswer( case "varimg": { const variant = question.content.variants.find((v) => v.id === questionAnswer.answer); const ownAnswer = - ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)].variant.answer || ""; + ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)]?.variant?.answer || ""; if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`); const body = {