SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

отображение новых вариантов нарезки

Browse Source
This commit is contained in:
Nastya 2024-11-15 00:29:28 +03:00
parent 5332f87bb4
commit c4084c3428
12 changed files with 106 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
import { useQuizViewStore } from "@/stores/quizView";
@ -76,6 +76,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
})();
}, []);
const choiceImgUrlQuestion = useMemo(() => {
if (resultQuestion.content.editedUrlImagesList !== undefined) {
return resultQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
} else {
return resultQuestion.content.back;
}
}, [resultQuestion]);
return (
<Box
sx={{
@ -166,7 +173,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
}}
/>
)}
{resultQuestion?.content.useImage && resultQuestion.content.back && (
{resultQuestion?.content.useImage && choiceImgUrlQuestion && (
<Box
sx={{
width: "100%",
@ -176,7 +183,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
>
<img
alt="resultImage"
src={resultQuestion.content.back}
src={choiceImgUrlQuestion}
style={{
width: "100%",
height: spec ? "auto" : isMobile ? "236px" : "306px",

19
lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
View File

@ -1,16 +1,17 @@
import { CheckboxIcon } from "@/assets/icons/Checkbox";
import type { QuestionVariant } from "@/model/questionTypes/shared";
import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { Box, Checkbox, FormControlLabel, Input, Radio, TextareaAutosize, Typography, useTheme } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { MouseEvent } from "react";
import { useMemo, type MouseEvent } from "react";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
type ImagesProps = {
questionId: string;
variant: QuestionVariant;
variant: QuestionVariantWithEditedImages;
index: number;
answer: string | string[] | undefined;
isMulti: boolean;
@ -95,6 +96,8 @@ export const ImageVariant = ({
const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme();
const answers = useQuizViewStore((state) => state.answers);
const isMobile = useRootContainerSize() < 450;
const isTablet = useRootContainerSize() < 850;
const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
event.preventDefault();
@ -119,6 +122,14 @@ export const ImageVariant = ({
}
};
const choiceImgUrl = useMemo(() => {
if (variant.editedUrlImagesList !== undefined) {
return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
} else {
return variant.extendedText;
}
}, []);
return (
<Box
sx={{
@ -141,7 +152,7 @@ export const ImageVariant = ({
<Box sx={{ width: "100%", height: "300px" }}>
{variant.extendedText && (
<img
src={variant.extendedText}
src={choiceImgUrl}
alt=""
style={{
display: "block",

15
lib/components/ViewPublicationPage/questions/Text/TextNormal.tsx
View File

@ -8,7 +8,7 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { ChangeEvent } from "react";
import { useMemo, type ChangeEvent } from "react";
import type { QuizQuestionText } from "@model/questionTypes/text";
interface TextNormalProps {
@ -21,12 +21,19 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
const { settings } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state);
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 850;
const theme = useTheme();
const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
updateAnswer(currentQuestion.id, target.value, 0);
};
const choiceImgUrlQuestion = useMemo(() => {
if (currentQuestion.content.editedUrlImagesList !== undefined) {
return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
} else {
return currentQuestion.content.back;
}
}, [currentQuestion]);
return (
<Box>
<Typography
@ -61,7 +68,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
"&:focus-visible": { borderColor: theme.palette.primary.main },
}}
/>
{currentQuestion.content.back && currentQuestion.content.back !== " " && (
{choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
<Box
sx={{
maxWidth: "400px",
@ -72,7 +79,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
src={choiceImgUrlQuestion}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>

14
lib/components/ViewPublicationPage/questions/Variant/index.tsx
View File

@ -1,5 +1,5 @@
import { Box, FormGroup, RadioGroup, Typography, useTheme } from "@mui/material";
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { VariantItem } from "./VariantItem";
@ -16,6 +16,7 @@ type VariantProps = {
export const Variant = ({ currentQuestion }: VariantProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 850;
const answers = useQuizViewStore((state) => state.answers);
const ownVariants = useQuizViewStore((state) => state.ownVariants);
const updateOwnVariant = useQuizViewStore((state) => state.updateOwnVariant);
@ -32,6 +33,13 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const choiceImgUrlQuestion = useMemo(() => {
if (currentQuestion.content.editedUrlImagesList !== undefined) {
return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
} else {
return currentQuestion.content.back;
}
}, [currentQuestion]);
if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
return (
@ -93,11 +101,11 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
))}
</Box>
</Group>
{currentQuestion.content.back && currentQuestion.content.back !== " " && (
{choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
src={choiceImgUrlQuestion}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>

10
lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
View File

@ -1,4 +1,4 @@
import type { QuestionVariant } from "@/model/questionTypes/shared";
import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
import { useQuizSettings } from "@contexts/QuizDataContext";
import {
FormControlLabel,
@ -15,12 +15,12 @@ import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { MouseEvent } from "react";
import { type MouseEvent } from "react";
import { useDebouncedCallback } from "use-debounce";
type VarimgVariantProps = {
questionId: string;
variant: QuestionVariant;
variant: QuestionVariantWithEditedImages;
index: number;
isSending: boolean;
setIsSending: (isSending: boolean) => void;
@ -102,11 +102,11 @@ export const VarimgVariant = ({
ownPlaceholder,
answer,
}: VarimgVariantProps) => {
const theme = useTheme();
const { settings } = useQuizSettings();
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
const theme = useTheme();
const sendVariant = async (event: MouseEvent<HTMLLabelElement>) => {
event.preventDefault();

32
lib/components/ViewPublicationPage/questions/Varimg/index.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { Box, RadioGroup, Typography, useTheme } from "@mui/material";
import { VarimgVariant } from "./VarimgVariant";
@ -23,6 +23,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 850;
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const ownVariant = ownVariants.find((variant) => variant.id === currentQuestion.id);
@ -35,6 +36,23 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const choiceImgUrlAnswer = useMemo(() => {
if (variant !== undefined) {
if (variant.editedUrlImagesList !== undefined) {
return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
} else {
return variant.extendedText;
}
}
}, [variant]);
const choiceImgUrlQuestion = useMemo(() => {
if (currentQuestion.content.editedUrlImagesList !== undefined) {
return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
} else {
return currentQuestion.content.back;
}
}, [variant]);
if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
return (
@ -115,21 +133,19 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
}}
>
{answer ? (
variant?.extendedText ? (
choiceImgUrlAnswer ? (
<img
key={variant.extendedText}
src={variant.extendedText}
key={choiceImgUrlAnswer}
src={choiceImgUrlAnswer}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
) : (
<BlankImage />
)
) : currentQuestion.content.back !== " " &&
currentQuestion.content.back !== null &&
currentQuestion.content.back.length > 0 ? (
) : choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && choiceImgUrlQuestion.length > 0 ? (
<img
src={currentQuestion.content.back}
src={choiceImgUrlQuestion}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>

4
lib/model/questionTypes/images.ts
View File

@ -1,4 +1,4 @@
import type { QuestionHint, QuestionVariant, QuizQuestionBase, QuestionBranchingRule } from "./shared";
import type { QuestionHint, QuestionVariantWithEditedImages, QuizQuestionBase, QuestionBranchingRule } from "./shared";
export interface QuizQuestionImages extends QuizQuestionBase {
type: "images";
@ -21,7 +21,7 @@ export interface QuizQuestionImages extends QuizQuestionBase {
/** Чекбокс "Необязательный вопрос" */
required: boolean;
/** Варианты (картинки) */
variants: QuestionVariant[];
variants: QuestionVariantWithEditedImages[];
hint: QuestionHint;
rule: QuestionBranchingRule;
back: string | null;

3
lib/model/questionTypes/result.ts
View File

@ -1,4 +1,4 @@
import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint } from "./shared";
import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint, EditedUrlImagesList } from "./shared";
interface ResultQuestionBranchingRule extends QuestionBranchingRule {
minScore?: number;
@ -15,6 +15,7 @@ export interface QuizQuestionResult extends QuizQuestionBase {
price: [number] | [number, number];
useImage: boolean;
rule: ResultQuestionBranchingRule;
editedUrlImagesList: EditedUrlImagesList;
hint: QuestionHint;
autofill: boolean;
usage: boolean;

7
lib/model/questionTypes/shared.ts
View File

@ -1,3 +1,4 @@
import { type } from "os";
import type { QuizQuestionDate } from "./date";
import type { QuizQuestionEmoji } from "./emoji";
import type { QuizQuestionFile } from "./file";
@ -20,6 +21,9 @@ export interface QuestionBranchingRuleMain {
}[];
}
export type EditedImagesScreens = "desktop" | "tablet" | "mobile" | "small";
export type EditedUrlImagesList = Record<EditedImagesScreens, string>;
export interface QuestionBranchingRule {
children: string[];
//список условий
@ -49,6 +53,9 @@ export type QuestionVariant = {
originalImageUrl: string;
points?: number;
};
export interface QuestionVariantWithEditedImages extends QuestionVariant {
editedUrlImagesList?: EditedUrlImagesList;
}
export type QuestionType =
| "variant"

3
lib/model/questionTypes/text.ts
View File

@ -1,4 +1,4 @@
import type { QuizQuestionBase, QuestionHint, QuestionBranchingRule } from "./shared";
import type { QuizQuestionBase, QuestionHint, QuestionBranchingRule, EditedUrlImagesList } from "./shared";
export interface QuizQuestionText extends QuizQuestionBase {
type: "text";
@ -14,6 +14,7 @@ export interface QuizQuestionText extends QuizQuestionBase {
/** Чекбокс "Автозаполнение адреса" */
autofill: boolean;
answerType: "single" | "multi" | "numberOnly";
editedUrlImagesList: EditedUrlImagesList;
hint: QuestionHint;
rule: QuestionBranchingRule;
back: string | null;

9
lib/model/questionTypes/variant.ts
View File

@ -1,4 +1,10 @@
import type { QuizQuestionBase, QuestionVariant, QuestionHint, QuestionBranchingRule } from "./shared";
import type {
QuizQuestionBase,
QuestionVariant,
QuestionHint,
QuestionBranchingRule,
EditedUrlImagesList,
} from "./shared";
export interface QuizQuestionVariant extends QuizQuestionBase {
type: "variant";
@ -14,6 +20,7 @@ export interface QuizQuestionVariant extends QuizQuestionBase {
innerNameCheck: boolean;
/** Чекбокс "Необязательный вопрос" */
required: boolean;
editedUrlImagesList: EditedUrlImagesList;
/** Поле "Внутреннее название вопроса" */
innerName: string;
/** Варианты ответов */

11
lib/model/questionTypes/varimg.ts
View File

@ -1,4 +1,10 @@
import type { QuestionHint, QuestionVariant, QuizQuestionBase, QuestionBranchingRule } from "./shared";
import type {
QuestionHint,
QuestionVariantWithEditedImages,
EditedUrlImagesList,
QuizQuestionBase,
QuestionBranchingRule,
} from "./shared";
export interface QuizQuestionVarImg extends QuizQuestionBase {
type: "varimg";
@ -12,7 +18,8 @@ export interface QuizQuestionVarImg extends QuizQuestionBase {
innerName: string;
/** Чекбокс "Необязательный вопрос" */
required: boolean;
variants: QuestionVariant[];
variants: QuestionVariantWithEditedImages[];
editedUrlImagesList: EditedUrlImagesList;
hint: QuestionHint;
rule: QuestionBranchingRule;
back: string | null;