diff --git a/src/constants/date.ts b/src/constants/date.ts new file mode 100644 index 00000000..245add21 --- /dev/null +++ b/src/constants/date.ts @@ -0,0 +1,28 @@ +import type { QuizQuestionDate } from "../model/questionTypes/date"; + +export const QuizQuestionDateEmpty: Omit = { + title: "", + type: "date", + content: { + required: false, + innerNameCheck: false, + innerName: "", + type: "calendar", + dateRange: false, + time: false, + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/emoji.ts b/src/constants/emoji.ts new file mode 100644 index 00000000..cc5bf678 --- /dev/null +++ b/src/constants/emoji.ts @@ -0,0 +1,34 @@ +import type { QuizQuestionEmoji } from "../model/questionTypes/emoji"; + +export const QuizQuestionEmojiEmpty: Omit = { + title: "", + type: "emoji", + content: { + multi: false, + own: false, + innerNameCheck: false, + innerName: "", + required: false, + variants: [ + { + answer: "", + hints: "", + emoji: "", + }, + ], + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/file.ts b/src/constants/file.ts new file mode 100644 index 00000000..815f5eb2 --- /dev/null +++ b/src/constants/file.ts @@ -0,0 +1,27 @@ +import type { QuizQuestionFile } from "../model/questionTypes/file"; + +export const QuizQuestionFileEmpty: Omit = { + title: "", + type: "file", + content: { + required: false, + innerNameCheck: false, + innerName: "", + autofill: false, + type: "all", + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/images.ts b/src/constants/images.ts new file mode 100644 index 00000000..77cf47e0 --- /dev/null +++ b/src/constants/images.ts @@ -0,0 +1,36 @@ +import type { QuizQuestionImages } from "../model/questionTypes/images"; + +export const QuizQuestionImagesEmpty: Omit = { + title: "", + type: "images", + content: { + own: false, + multi: false, + xy: "1:1", + innerNameCheck: false, + innerName: "", + large: false, + format: "carousel", + required: false, + variants: [ + { + answer: "", + hints: "", + }, + ], + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/number.ts b/src/constants/number.ts new file mode 100644 index 00000000..307b22ea --- /dev/null +++ b/src/constants/number.ts @@ -0,0 +1,29 @@ +import type { QuizQuestionNumber } from "../model/questionTypes/number"; + +export const QuizQuestionNumberEmpty: Omit = { + title: "", + type: "number", + content: { + required: false, + innerNameCheck: false, + innerName: "", + range: [0, 1], + defaultValue: 0, + step: 1, + chooseRange: false, + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/page.ts b/src/constants/page.ts new file mode 100644 index 00000000..2fa08a13 --- /dev/null +++ b/src/constants/page.ts @@ -0,0 +1,26 @@ +import type { QuizQuestionPage } from "../model/questionTypes/page"; + +export const QuizQuestionPageEmpty: Omit = { + title: "", + type: "page", + content: { + innerNameCheck: false, + innerName: "", + text: "", + video: "", + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/rating.ts b/src/constants/rating.ts new file mode 100644 index 00000000..779d8853 --- /dev/null +++ b/src/constants/rating.ts @@ -0,0 +1,29 @@ +import type { QuizQuestionRating } from "../model/questionTypes/rating"; + +export const QuizQuestionRatingEmpty: Omit = { + title: "", + type: "rating", + content: { + required: false, + innerNameCheck: false, + innerName: "", + steps: 5, + ratingExpanded: false, + ratingDescription: "", + form: "", + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/select.ts b/src/constants/select.ts new file mode 100644 index 00000000..29c9a99e --- /dev/null +++ b/src/constants/select.ts @@ -0,0 +1,27 @@ +import type { QuizQuestionSelect } from "../model/questionTypes/select"; + +export const QuizQuestionSelectEmpty: Omit = { + title: "", + type: "select", + content: { + multi: false, + required: false, + innerNameCheck: false, + innerName: "", + default: "", + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/text.ts b/src/constants/text.ts new file mode 100644 index 00000000..342bb9d9 --- /dev/null +++ b/src/constants/text.ts @@ -0,0 +1,28 @@ +import type { QuizQuestionText } from "../model/questionTypes/text"; + +export const QuizQuestionTextEmpty: Omit = { + title: "", + type: "text", + content: { + placeholder: "", + innerNameCheck: false, + innerName: "", + required: false, + autofill: false, + answerType: "single", + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/variant.ts b/src/constants/variant.ts new file mode 100644 index 00000000..f22b4f76 --- /dev/null +++ b/src/constants/variant.ts @@ -0,0 +1,34 @@ +import type { QuizQuestionVariant } from "../model/questionTypes/variant"; + +export const QuizQuestionVariantEmpty: Omit = { + title: "", + type: "variant", + content: { + largeCheck: false, + multi: false, + own: false, + innerNameCheck: false, + required: false, + innerName: "", + variants: [ + { + answer: "", + hints: "", + }, + ], + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/constants/varimg.ts b/src/constants/varimg.ts new file mode 100644 index 00000000..27e5b9a7 --- /dev/null +++ b/src/constants/varimg.ts @@ -0,0 +1,32 @@ +import type { QuizQuestionVarImg } from "../model/questionTypes/varimg"; + +export const QuizQuestionVarImgEmpty: Omit = { + title: "", + type: "varimg", + content: { + own: false, + innerNameCheck: false, + innerName: "", + required: false, + variants: [ + { + answer: "", + hints: "", + }, + ], + hint: { + text: "", + video: "", + }, + rule: { + or: true, + show: true, + reqs: [ + { + id: "", + vars: [], + }, + ], + }, + }, +}; diff --git a/src/model/questionTypes/images.ts b/src/model/questionTypes/images.ts index 12f02b5e..7a036d72 100644 --- a/src/model/questionTypes/images.ts +++ b/src/model/questionTypes/images.ts @@ -21,7 +21,10 @@ export interface QuizQuestionImages extends QuizQuestionBase { /** Чекбокс "Необязательный вопрос" */ required: boolean; /** Варианты (картинки) */ - variants: unknown; + variants: { + answer: string; + hints: string; + }[]; hint: QuizQuestionHint; rule: QuizQuestionBranchingRules; }; diff --git a/src/model/questionTypes/shared.ts b/src/model/questionTypes/shared.ts index 51b68baa..d8b6e935 100644 --- a/src/model/questionTypes/shared.ts +++ b/src/model/questionTypes/shared.ts @@ -1,14 +1,14 @@ -import { QuizQuestionDate } from "./date"; -import { QuizQuestionEmoji } from "./emoji"; -import { QuizQuestionFile } from "./file"; -import { QuizQuestionImages } from "./images"; -import { QuizQuestionNumber } from "./number"; -import { QuizQuestionPage } from "./page"; -import { QuizQuestionRating } from "./rating"; -import { QuizQuestionSelect } from "./select"; -import { QuizQuestionText } from "./text"; -import { QuizQuestionVariant } from "./variant"; -import { QuizQuestionVarImg } from "./varimg"; +import type { QuizQuestionDate } from "./date"; +import type { QuizQuestionEmoji } from "./emoji"; +import type { QuizQuestionFile } from "./file"; +import type { QuizQuestionImages } from "./images"; +import type { QuizQuestionNumber } from "./number"; +import type { QuizQuestionPage } from "./page"; +import type { QuizQuestionRating } from "./rating"; +import type { QuizQuestionSelect } from "./select"; +import type { QuizQuestionText } from "./text"; +import type { QuizQuestionVariant } from "./variant"; +import type { QuizQuestionVarImg } from "./varimg"; export interface QuizQuestionBranchingRules { diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index a546df2f..94f278e7 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -7,15 +7,19 @@ import SwitchEmoji from "./switchEmoji"; import { AnswerDraggableList } from "../AnswerDraggableList"; import { questionStore, updateQuestionsList } from "@root/questions"; +import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji"; + interface Props { totalIndex: number; } + export default function Emoji({ totalIndex }: Props) { const [switchState, setSwitchState] = useState("setting"); const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const question = listQuestions[quizId][totalIndex] as QuizQuestionEmoji; const SSHC = (data: string) => { setSwitchState(data); @@ -25,7 +29,7 @@ export default function Emoji({ totalIndex }: Props) { <> @@ -35,8 +39,7 @@ export default function Emoji({ totalIndex }: Props) { variant="body2" sx={{ color: theme.palette.brightPurple.main }} onClick={() => { - const answerNew = - listQuestions[quizId][totalIndex].content.variants.slice(); + const answerNew = question.content.variants.slice(); answerNew.push({ answer: "", hints: "", emoji: "" }); updateQuestionsList(quizId, totalIndex, { diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 1f63663f..f3cd44b9 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -1,6 +1,27 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; +import { QuizQuestionEmoji } from "../model/questionTypes/emoji"; +import { QuizQuestionImages } from "../model/questionTypes/images"; +import { QuizQuestionVariant } from "../model/questionTypes/variant"; +import { QuizQuestionVarImg } from "../model/questionTypes/varimg"; + +import type { + AnyQuizQuestion, + QuizQuestionType, +} from "../model/questionTypes/shared"; +import { QuizQuestionDateEmpty } from "../constants/date"; +import { QuizQuestionEmojiEmpty } from "../constants/emoji"; +import { QuizQuestionFileEmpty } from "../constants/file"; +import { QuizQuestionImagesEmpty } from "../constants/images"; +import { QuizQuestionNumberEmpty } from "../constants/number"; +import { QuizQuestionPageEmpty } from "../constants/page"; +import { QuizQuestionRatingEmpty } from "../constants/rating"; +import { QuizQuestionSelectEmpty } from "../constants/select"; +import { QuizQuestionTextEmpty } from "../constants/text"; +import { QuizQuestionVariantEmpty } from "../constants/variant"; +import { QuizQuestionVarImgEmpty } from "../constants/varimg"; + export type Variants = { answer: string; hints: string; @@ -75,7 +96,7 @@ export interface Question { } interface QuestionStore { - listQuestions: Record; + listQuestions: Record; openedModalSettings: string; } @@ -159,10 +180,10 @@ export const questionStore = create()( } ) ); -export const updateQuestionsList = ( +export const updateQuestionsList = ( quizId: number, index: number, - data: Partial + data: Partial ) => { const questionListClone = { ...questionStore.getState()["listQuestions"] }; questionListClone[quizId][index] = { @@ -188,12 +209,35 @@ export const updateVariants = ( variants: Variants[] ) => { const listQuestions = { ...questionStore.getState()["listQuestions"] }; - listQuestions[quizId][index].content.variants = variants; - questionStore.setState({ listQuestions }); + switch (listQuestions[quizId][index].type) { + case "emoji": + const emojiState = listQuestions[quizId][index] as QuizQuestionEmoji; + emojiState.content.variants = variants; + return questionStore.setState({ listQuestions }); + + case "images": + const imagesState = listQuestions[quizId][index] as QuizQuestionImages; + imagesState.content.variants = variants; + return questionStore.setState({ listQuestions }); + + case "variant": + const variantState = listQuestions[quizId][index] as QuizQuestionVariant; + variantState.content.variants = variants; + return questionStore.setState({ listQuestions }); + + case "varimg": + const varImgState = listQuestions[quizId][index] as QuizQuestionVarImg; + varImgState.content.variants = variants; + return questionStore.setState({ listQuestions }); + } }; -export const createQuestion = (quizId: number, placeIndex = -1) => { +export const createQuestion = ( + quizId: number, + questionType: QuizQuestionType, + placeIndex = -1 +) => { const id = getRandom(1000000, 10000000); const newData = { ...questionStore.getState()["listQuestions"] }; @@ -201,13 +245,29 @@ export const createQuestion = (quizId: number, placeIndex = -1) => { newData[quizId] = []; } - newData[quizId].splice( - placeIndex < 0 ? newData[quizId].length : placeIndex, - 0, - { ...DEFAULT_QUESTION, id } - ); + const defaultObject = [ + QuizQuestionDateEmpty, + QuizQuestionEmojiEmpty, + QuizQuestionFileEmpty, + QuizQuestionImagesEmpty, + QuizQuestionNumberEmpty, + QuizQuestionPageEmpty, + QuizQuestionRatingEmpty, + QuizQuestionSelectEmpty, + QuizQuestionTextEmpty, + QuizQuestionVariantEmpty, + QuizQuestionVarImgEmpty, + ].find((defaultObjectItem) => defaultObjectItem.type === questionType); - questionStore.setState({ listQuestions: newData }); + if (defaultObject) { + newData[quizId].splice( + placeIndex < 0 ? newData[quizId].length : placeIndex, + 0, + { ...defaultObject, id } + ); + + questionStore.setState({ listQuestions: newData }); + } }; export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => { @@ -238,7 +298,7 @@ export const findQuestionById = (quizId: number) => { let found = null; questionStore .getState() - ["listQuestions"][quizId].some((quiz: Question, index: number) => { + ["listQuestions"][quizId].some((quiz: AnyQuizQuestion, index: number) => { if (quiz.id === quizId) { found = { quiz, index }; return true;