варианты и варианты и картинка умеют в фичи

2024-09-12 14:14:54 +03:00 · 2024-09-12 14:14:54 +03:00 · 2fc986c88e
commit 2fc986c88e
parent 949364e100
5 changed files with 134 additions and 41 deletions
--- 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<TextFieldProps>;

+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 ? (
+    <TextareaAutosize
+      placeholder=""
+      style={{
+        resize: "none",
+        width: "100%",
+        fontSize: "16px",
+        color: theme.palette.text.primary,
+        letterSpacing: "-0.4px",
+        wordSpacing: "-3px",
+        border: "none",
+        outline: "0px none",
+      }}
+      value={ownAnswer}
+      onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        updateOwnVariant(variant.id, e.target.value);
+      }}
+    />
+  ) : (
+    <Input
+      sx={{
+        width: "100%",
+        fontSize: "18px",
+        color: theme.palette.text.primary,
+      }}
+      value={ownAnswer}
+      disableUnderline
+      onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        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 ? <TextField label="Другое..." /> : variant.answer}
+      label={
+        own ? (
+          <OwnInput
+            questionId={questionId}
+            variant={variant}
+            largeCheck={questionLargeCheck}
+            ownPlaceholder={ownPlaceholder}
+          />
+        ) : (
+          variant.answer
+        )
+      }
      onClick={sendVariant}
    />
  );
--- a/lib/components/ViewPublicationPage/questions/Variant/index.tsx
+++ b/lib/components/ViewPublicationPage/questions/Variant/index.tsx
@ -73,7 +73,12 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
              gap: "20px",
            }}
          >
-            {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) => (
                <VariantItem
                  key={variant.id}
                  questionId={currentQuestion.id}
@ -81,18 +86,11 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
                  variant={variant}
                  answer={answer}
                  index={index}
+                  own={variant.isOwn}
+                  questionLargeCheck={currentQuestion.content.largeCheck}
+                  ownPlaceholder={currentQuestion.content?.ownPlaceholder || ""}
                />
              ))}
-            {currentQuestion.content.own && ownVariant && (
-              <VariantItem
-                own
-                questionId={currentQuestion.id}
-                isMulti={currentQuestion.content.multi}
-                variant={ownVariant.variant}
-                answer={answer}
-                index={currentQuestion.content.variants.length + 2}
-              />
-            )}
          </Box>
        </Group>
        {currentQuestion.content.back && currentQuestion.content.back !== " " && (
--- 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 ? (
    <TextareaAutosize
@ -74,8 +75,8 @@ export const VarimgVariant = ({
  index,
  isSending,
  setIsSending,
-  questionOwn,
  questionLargeCheck,
+  ownPlaceholder,
  answer,
 }: VarimgVariantProps) => {
  const { settings } = useQuizSettings();
@ -137,6 +138,7 @@ export const VarimgVariant = ({
            questionId={questionId}
            variant={variant}
            largeCheck={questionLargeCheck}
+            ownPlaceholder={ownPlaceholder}
          />
        ) : (
          variant.answer
--- 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,7 +79,12 @@ 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) => (
                <VarimgVariant
                  key={variant.id}
                  questionId={currentQuestion.id}
@ -85,9 +92,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                  isSending={isSending}
                  setIsSending={setIsSending}
                  index={index}
-                questionOwn={currentQuestion.content.own}
                  questionLargeCheck={currentQuestion.content.largeCheck}
-                isMulti={Boolean(currentQuestion.content.multi)}
+                  ownPlaceholder={currentQuestion.content?.ownPlaceholder || ""}
+                  isMulti={Boolean(currentQuestion.content?.multi)}
                  answer={answer}
                />
              ))}
--- a/lib/utils/sendQuestionAnswer.ts
+++ b/lib/utils/sendQuestionAnswer.ts
@ -125,6 +125,14 @@ export function sendQuestionAnswer(
    case "variant": {
      if (question.content.multi) {
        const answer = questionAnswer.answer;
+        if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
+
+        const ownAnswer = Array.isArray(answer)
+          ? ownVariants[ownVariants.findIndex((variant) => 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 = {