WIP
This commit is contained in:
nflnkr
parent
a57de5fe4d
commit
dd46a3833f
@ -1,6 +1,6 @@
|
||||
import { makeRequest } from "@frontend/kitui";
|
||||
import { CreateQuestionRequest } from "model/question/create";
|
||||
import { Question } from "model/question/question";
|
||||
import { RawQuestion } from "model/question/question";
|
||||
import { GetQuestionListRequest, GetQuestionListResponse } from "model/question/getList";
|
||||
import { EditQuestionRequest, EditQuestionResponse } from "model/question/edit";
|
||||
import { DeleteQuestionRequest, DeleteQuestionResponse } from "model/question/delete";
|
||||
@ -9,32 +9,27 @@ import { CopyQuestionRequest, CopyQuestionResponse } from "model/question/copy";
|
||||
|
||||
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital/squiz";
|
||||
|
||||
export function createQuestion(body: CreateQuestionRequest = defaultCreateQuestionBody) {
|
||||
return makeRequest<CreateQuestionRequest, Question>({
|
||||
function createQuestion(body?: Partial<CreateQuestionRequest>) {
|
||||
return makeRequest<CreateQuestionRequest, RawQuestion>({
|
||||
url: `${baseUrl}/question/create`,
|
||||
body,
|
||||
body: { ...defaultCreateQuestionBody, ...body },
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
|
||||
export function getQuestionList(body: GetQuestionListRequest = defaultGetQuestionListBody) {
|
||||
return makeRequest<GetQuestionListRequest, GetQuestionListResponse>({
|
||||
async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
|
||||
if (!body?.quiz_id) return null;
|
||||
|
||||
const response = await makeRequest<GetQuestionListRequest, GetQuestionListResponse>({
|
||||
url: `${baseUrl}/question/getList`,
|
||||
body,
|
||||
method: "GET",
|
||||
body: { ...defaultGetQuestionListBody, ...body },
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
return response.items;
|
||||
}
|
||||
|
||||
export function editQuestion(updatedQuestion: Question, signal?: AbortSignal) {
|
||||
const body: EditQuestionRequest = {
|
||||
id: updatedQuestion.id,
|
||||
title: updatedQuestion.title,
|
||||
desc: updatedQuestion.description,
|
||||
type: updatedQuestion.type,
|
||||
required: updatedQuestion.required,
|
||||
page: updatedQuestion.page,
|
||||
};
|
||||
|
||||
function editQuestion(body: EditQuestionRequest, signal?: AbortSignal) {
|
||||
return makeRequest<EditQuestionRequest, EditQuestionResponse>({
|
||||
url: `${baseUrl}/question/edit`,
|
||||
body,
|
||||
@ -43,7 +38,7 @@ export function editQuestion(updatedQuestion: Question, signal?: AbortSignal) {
|
||||
});
|
||||
}
|
||||
|
||||
export function copyQuestion(copyQuestionBody: CopyQuestionRequest) {
|
||||
function copyQuestion(copyQuestionBody: CopyQuestionRequest) {
|
||||
return makeRequest<CopyQuestionRequest, CopyQuestionResponse>({
|
||||
url: `${baseUrl}/question/copy`,
|
||||
body: copyQuestionBody,
|
||||
@ -51,7 +46,7 @@ export function copyQuestion(copyQuestionBody: CopyQuestionRequest) {
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteQuestion(id: number) {
|
||||
function deleteQuestion(id: number) {
|
||||
return makeRequest<DeleteQuestionRequest, DeleteQuestionResponse>({
|
||||
url: `${baseUrl}/question/delete`,
|
||||
body: { id },
|
||||
@ -72,7 +67,7 @@ const defaultCreateQuestionBody: CreateQuestionRequest = {
|
||||
"quiz_id": 0,
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"type": "string",
|
||||
"type": "variant",
|
||||
"required": true,
|
||||
"page": 0,
|
||||
"content": "string",
|
||||
@ -87,14 +82,4 @@ const defaultGetQuestionListBody: GetQuestionListRequest = {
|
||||
"type": "string",
|
||||
"deleted": true,
|
||||
"required": true,
|
||||
"quiz_id": 0
|
||||
};
|
||||
|
||||
const defaultEditQuestionBody: EditQuestionRequest = {
|
||||
"id": 0,
|
||||
"title": "string",
|
||||
"desc": "string",
|
||||
"type": "",
|
||||
"required": true,
|
||||
"page": 0
|
||||
};
|
||||
|
||||
@ -38,7 +38,6 @@ function getQuiz(body?: Partial<GetQuizRequest>) {
|
||||
}
|
||||
|
||||
async function editQuiz(body: EditQuizRequest, signal?: AbortSignal) {
|
||||
// await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
return makeRequest<EditQuizRequest, EditQuizResponse>({
|
||||
url: `${baseUrl}/quiz/edit`,
|
||||
body,
|
||||
@ -106,26 +105,6 @@ const defaultCreateQuizBody: CreateQuizRequest = {
|
||||
"group_id": 0,
|
||||
};
|
||||
|
||||
const defaultEditQuizBody: EditQuizRequest = {
|
||||
"id": 0,
|
||||
"fp": true,
|
||||
"rep": true,
|
||||
"note_prevented": true,
|
||||
"mailing": true,
|
||||
"uniq": true,
|
||||
"name": "string",
|
||||
"desc": "string",
|
||||
"conf": "string",
|
||||
"status": "string",
|
||||
"limit": 0,
|
||||
"due_to": 0,
|
||||
"time_of_passing": 0,
|
||||
"pausable": true,
|
||||
"question_cnt": 0,
|
||||
"super": true,
|
||||
"group_id": 0,
|
||||
};
|
||||
|
||||
const defaultGetQuizBody: GetQuizRequest = {
|
||||
"quiz_id": "string",
|
||||
"limit": 0,
|
||||
|
||||
@ -1,31 +1,34 @@
|
||||
import type { QuizQuestionInitial } from "../model/questionTypes/shared";
|
||||
import type { QuizQuestionBase } from "../model/questionTypes/shared";
|
||||
|
||||
export const QUIZ_QUESTION_BASE: Omit<QuizQuestionInitial, "id"> = {
|
||||
title: "",
|
||||
type: "nonselected",
|
||||
expanded: true,
|
||||
openedModalSettings: false,
|
||||
required: false,
|
||||
deleted: false,
|
||||
deleteTimeoutId: 0,
|
||||
content: {
|
||||
hint: {
|
||||
text: "",
|
||||
video: "",
|
||||
},
|
||||
rule: {
|
||||
or: true,
|
||||
show: true,
|
||||
title: "",
|
||||
reqs: [
|
||||
{
|
||||
id: "",
|
||||
vars: [],
|
||||
|
||||
export const QUIZ_QUESTION_BASE: Omit<QuizQuestionBase, "id"> = {
|
||||
quizId: 0,
|
||||
description: "",
|
||||
page: 0,
|
||||
title: "",
|
||||
expanded: true,
|
||||
openedModalSettings: false,
|
||||
required: false,
|
||||
deleted: false,
|
||||
deleteTimeoutId: 0,
|
||||
content: {
|
||||
hint: {
|
||||
text: "",
|
||||
video: "",
|
||||
},
|
||||
],
|
||||
rule: {
|
||||
or: true,
|
||||
show: true,
|
||||
title: "",
|
||||
reqs: [
|
||||
{
|
||||
id: "",
|
||||
vars: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
back: "",
|
||||
originalBack: "",
|
||||
autofill: false,
|
||||
},
|
||||
back: "",
|
||||
originalBack: "",
|
||||
autofill: false,
|
||||
},
|
||||
};
|
||||
|
||||
28
src/constants/default.ts
Normal file
28
src/constants/default.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { QuestionType } from "@model/question/question";
|
||||
import { QUIZ_QUESTION_DATE } from "./date";
|
||||
import { QUIZ_QUESTION_EMOJI } from "./emoji";
|
||||
import { QUIZ_QUESTION_FILE } from "./file";
|
||||
import { QUIZ_QUESTION_IMAGES } from "./images";
|
||||
import { QUIZ_QUESTION_NUMBER } from "./number";
|
||||
import { QUIZ_QUESTION_PAGE } from "./page";
|
||||
import { QUIZ_QUESTION_RATING } from "./rating";
|
||||
import { QUIZ_QUESTION_SELECT } from "./select";
|
||||
import { QUIZ_QUESTION_TEXT } from "./text";
|
||||
import { QUIZ_QUESTION_VARIANT } from "./variant";
|
||||
import { QUIZ_QUESTION_VARIMG } from "./varimg";
|
||||
import { AnyQuestionContent } from "@model/questionTypes/shared";
|
||||
|
||||
|
||||
export const defaultQuestionContentByType: Record<QuestionType, AnyQuestionContent> = {
|
||||
"date": QUIZ_QUESTION_DATE.content,
|
||||
"emoji": QUIZ_QUESTION_EMOJI.content,
|
||||
"file": QUIZ_QUESTION_FILE.content,
|
||||
"images": QUIZ_QUESTION_IMAGES.content,
|
||||
"number": QUIZ_QUESTION_NUMBER.content,
|
||||
"page": QUIZ_QUESTION_PAGE.content,
|
||||
"rating": QUIZ_QUESTION_RATING.content,
|
||||
"select": QUIZ_QUESTION_SELECT.content,
|
||||
"text": QUIZ_QUESTION_TEXT.content,
|
||||
"variant": QUIZ_QUESTION_VARIANT.content,
|
||||
"varimg": QUIZ_QUESTION_VARIMG.content,
|
||||
} as const;
|
||||
@ -1,12 +1,26 @@
|
||||
import { AnyQuizQuestion, DefiniteQuestionType } from "@model/questionTypes/shared";
|
||||
|
||||
|
||||
export interface EditQuestionRequest {
|
||||
id: number;
|
||||
title: string;
|
||||
desc: string;
|
||||
type: "test" | "button" | "file" | "checkbox" | "select" | "none" | "";
|
||||
required: boolean;
|
||||
page: number;
|
||||
title?: string;
|
||||
desc?: string;
|
||||
type?: DefiniteQuestionType;
|
||||
required?: boolean;
|
||||
page?: number;
|
||||
}
|
||||
|
||||
export interface EditQuestionResponse {
|
||||
updated: number;
|
||||
}
|
||||
|
||||
export function questionToEditQuestionRequest(question: AnyQuizQuestion): EditQuestionRequest {
|
||||
return {
|
||||
id: question.id,
|
||||
title: question.title,
|
||||
desc: question.description,
|
||||
type: question.type,
|
||||
required: question.required,
|
||||
page: question.page,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Question } from "./question";
|
||||
import { RawQuestion } from "./question";
|
||||
|
||||
|
||||
export interface GetQuestionListRequest {
|
||||
@ -24,5 +24,5 @@ export interface GetQuestionListRequest {
|
||||
|
||||
export interface GetQuestionListResponse {
|
||||
count: number;
|
||||
items: Question[];
|
||||
items: RawQuestion[];
|
||||
}
|
||||
|
||||
@ -1,15 +1,69 @@
|
||||
export interface Question {
|
||||
import { AnyQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { defaultQuestionContentByType } from "../../constants/default";
|
||||
|
||||
|
||||
export type QuestionType =
|
||||
| "variant"
|
||||
| "images"
|
||||
| "varimg"
|
||||
| "emoji"
|
||||
| "text"
|
||||
| "select"
|
||||
| "date"
|
||||
| "number"
|
||||
| "file"
|
||||
| "page"
|
||||
| "rating";
|
||||
|
||||
/** Type that comes from server */
|
||||
export interface RawQuestion {
|
||||
/** Id of created question */
|
||||
id: number;
|
||||
/** relation to quiz */
|
||||
quiz_id: number;
|
||||
/** title of question. max 512 length */
|
||||
title: string;
|
||||
/** description of question */
|
||||
description: string;
|
||||
type: "test" | "button" | "file" | "checkbox" | "select" | "none" | "";
|
||||
/** status of question. allow only text, select, file, variant, images, varimg, emoji, date, number, page, rating */
|
||||
type: QuestionType;
|
||||
/** user must pass this question */
|
||||
required: boolean;
|
||||
/** true if question is deleted */
|
||||
deleted: boolean;
|
||||
/** page if question */
|
||||
page: number;
|
||||
/** serialized json of created question */
|
||||
content: string;
|
||||
/** version of quiz */
|
||||
version: number;
|
||||
/** array of previous versions of quiz */
|
||||
parent_ids: number[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export function rawQuestionToQuestion(rawQuestion: RawQuestion): AnyQuizQuestion {
|
||||
let content = defaultQuestionContentByType[rawQuestion.type];
|
||||
|
||||
try {
|
||||
content = JSON.parse(rawQuestion.content);
|
||||
} catch (error) {
|
||||
console.warn("Cannot parse question content from string, using default content", error);
|
||||
}
|
||||
|
||||
return {
|
||||
id: rawQuestion.id,
|
||||
description: rawQuestion.description,
|
||||
page: rawQuestion.page,
|
||||
quizId: rawQuestion.quiz_id,
|
||||
required: rawQuestion.required,
|
||||
title: rawQuestion.title,
|
||||
type: rawQuestion.type,
|
||||
expanded: true,
|
||||
openedModalSettings: false,
|
||||
deleted: false,
|
||||
deleteTimeoutId: 0,
|
||||
content,
|
||||
} as AnyQuizQuestion;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { QuestionType } from "@model/question/question";
|
||||
import type { QuizQuestionDate } from "./date";
|
||||
import type { QuizQuestionEmoji } from "./emoji";
|
||||
import type { QuizQuestionFile } from "./file";
|
||||
@ -10,6 +11,7 @@ import type { QuizQuestionText } from "./text";
|
||||
import type { QuizQuestionVariant } from "./variant";
|
||||
import type { QuizQuestionVarImg } from "./varimg";
|
||||
|
||||
|
||||
export interface QuestionBranchingRule {
|
||||
/** Радиокнопка "Все условия обязательны" */
|
||||
or: boolean;
|
||||
@ -45,8 +47,11 @@ export interface ImageQuestionVariant extends QuestionVariant {
|
||||
|
||||
export interface QuizQuestionBase {
|
||||
id: number;
|
||||
quizId: number;
|
||||
title: string;
|
||||
type: string;
|
||||
description: string;
|
||||
page: number;
|
||||
type?: QuestionType;
|
||||
expanded: boolean;
|
||||
openedModalSettings: boolean;
|
||||
required: boolean;
|
||||
@ -61,9 +66,9 @@ export interface QuizQuestionBase {
|
||||
};
|
||||
}
|
||||
|
||||
export interface QuizQuestionInitial extends QuizQuestionBase {
|
||||
type: "nonselected";
|
||||
}
|
||||
// export interface QuizQuestionInitial extends QuizQuestionBase {
|
||||
// type: "nonselected";
|
||||
// }
|
||||
|
||||
export type AnyQuizQuestion =
|
||||
| QuizQuestionVariant
|
||||
@ -76,9 +81,11 @@ export type AnyQuizQuestion =
|
||||
| QuizQuestionNumber
|
||||
| QuizQuestionFile
|
||||
| QuizQuestionPage
|
||||
| QuizQuestionRating
|
||||
| QuizQuestionInitial;
|
||||
| QuizQuestionRating;
|
||||
// | QuizQuestionInitial;
|
||||
|
||||
export type QuizQuestionType = AnyQuizQuestion["type"];
|
||||
|
||||
export type AnyQuestionContent = AnyQuizQuestion["content"];
|
||||
|
||||
export type DefiniteQuestionType = Exclude<QuizQuestionType, "nonselected">;
|
||||
|
||||
@ -1,149 +1,146 @@
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Popper,
|
||||
Grow,
|
||||
Paper,
|
||||
MenuList,
|
||||
MenuItem,
|
||||
ClickAwayListener,
|
||||
Modal,
|
||||
Button,
|
||||
useTheme,
|
||||
Box,
|
||||
Typography,
|
||||
Popper,
|
||||
Grow,
|
||||
Paper,
|
||||
MenuList,
|
||||
MenuItem,
|
||||
ClickAwayListener,
|
||||
Modal,
|
||||
Button,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
|
||||
import {
|
||||
questionStore,
|
||||
updateQuestionsList,
|
||||
removeQuestionForce,
|
||||
createQuestion,
|
||||
updateQuestionsList,
|
||||
removeQuestionForce,
|
||||
createQuestion,
|
||||
} from "@root/questions";
|
||||
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
|
||||
|
||||
import type { RefObject } from "react";
|
||||
import type {
|
||||
QuizQuestionType,
|
||||
QuizQuestionBase,
|
||||
QuizQuestionType,
|
||||
QuizQuestionBase,
|
||||
AnyQuizQuestion,
|
||||
} from "../../../model/questionTypes/shared";
|
||||
|
||||
type ChooseAnswerModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
anchorRef: RefObject<HTMLDivElement>;
|
||||
totalIndex: number;
|
||||
switchState: string;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
anchorRef: RefObject<HTMLDivElement>;
|
||||
question: AnyQuizQuestion;
|
||||
switchState: string;
|
||||
};
|
||||
|
||||
export const ChooseAnswerModal = ({
|
||||
open,
|
||||
onClose,
|
||||
anchorRef,
|
||||
totalIndex,
|
||||
switchState,
|
||||
open,
|
||||
onClose,
|
||||
anchorRef,
|
||||
question,
|
||||
switchState,
|
||||
}: ChooseAnswerModalProps) => {
|
||||
const [openModal, setOpenModal] = useState<boolean>(false);
|
||||
const [selectedValue, setSelectedValue] = useState<QuizQuestionType>("text");
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const theme = useTheme();
|
||||
const [openModal, setOpenModal] = useState<boolean>(false);
|
||||
const [selectedValue, setSelectedValue] = useState<QuizQuestionType>("text");
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popper
|
||||
placement="right-start"
|
||||
open={open}
|
||||
anchorEl={anchorRef.current}
|
||||
transition
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
<Grow {...TransitionProps}>
|
||||
<Paper>
|
||||
<ClickAwayListener onClickAway={onClose}>
|
||||
<MenuList autoFocusItem={open}>
|
||||
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
|
||||
<MenuItem
|
||||
key={value}
|
||||
sx={{ display: "flex", gap: "10px" }}
|
||||
{...(value !== switchState && {
|
||||
onClick: () => {
|
||||
onClose();
|
||||
setOpenModal(true);
|
||||
setSelectedValue(value);
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Box>{icon}</Box>
|
||||
<Typography
|
||||
return (
|
||||
<>
|
||||
<Popper
|
||||
placement="right-start"
|
||||
open={open}
|
||||
anchorEl={anchorRef.current}
|
||||
transition
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
<Grow {...TransitionProps}>
|
||||
<Paper>
|
||||
<ClickAwayListener onClickAway={onClose}>
|
||||
<MenuList autoFocusItem={open}>
|
||||
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
|
||||
<MenuItem
|
||||
key={value}
|
||||
sx={{ display: "flex", gap: "10px" }}
|
||||
{...(value !== switchState && {
|
||||
onClick: () => {
|
||||
onClose();
|
||||
setOpenModal(true);
|
||||
setSelectedValue(value);
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Box>{icon}</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
color:
|
||||
value === switchState
|
||||
? theme.palette.brightPurple.main
|
||||
: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuList>
|
||||
</ClickAwayListener>
|
||||
</Paper>
|
||||
</Grow>
|
||||
)}
|
||||
</Popper>
|
||||
<Modal open={openModal} onClose={() => setOpenModal(false)}>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
padding: "30px",
|
||||
borderRadius: "10px",
|
||||
background: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">
|
||||
Все настройки, кроме заголовка вопроса будут сброшены
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
color:
|
||||
value === switchState
|
||||
? theme.palette.brightPurple.main
|
||||
: theme.palette.grey2.main,
|
||||
marginTop: "30px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuList>
|
||||
</ClickAwayListener>
|
||||
</Paper>
|
||||
</Grow>
|
||||
)}
|
||||
</Popper>
|
||||
<Modal open={openModal} onClose={() => setOpenModal(false)}>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
padding: "30px",
|
||||
borderRadius: "10px",
|
||||
background: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">
|
||||
Все настройки, кроме заголовка вопроса будут сброшены
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "30px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ minWidth: "150px" }}
|
||||
onClick={() => setOpenModal(false)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ minWidth: "150px" }}
|
||||
onClick={() => {
|
||||
setOpenModal(false);
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ minWidth: "150px" }}
|
||||
onClick={() => setOpenModal(false)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ minWidth: "150px" }}
|
||||
onClick={() => { // TODO
|
||||
// setOpenModal(false);
|
||||
|
||||
const question = { ...listQuestions[quizId][totalIndex] };
|
||||
// const question = { ...listQuestions[quizId][totalIndex] };
|
||||
|
||||
removeQuestionForce(quizId, question.id);
|
||||
createQuestion(quizId, selectedValue, totalIndex);
|
||||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||||
title: question.title,
|
||||
expanded: question.expanded,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Подтвердить
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
// removeQuestionForce(quizId, question.id);
|
||||
// createQuestion(quizId, selectedValue, totalIndex);
|
||||
// updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||||
// title: question.title,
|
||||
// expanded: question.expanded,
|
||||
// });
|
||||
}}
|
||||
>
|
||||
Подтвердить
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,84 +1,80 @@
|
||||
import { memo } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Draggable } from "react-beautiful-dnd";
|
||||
import { Box, ListItem, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import { memo } from "react";
|
||||
import { Draggable } from "react-beautiful-dnd";
|
||||
import QuestionsPageCard from "./QuestionPageCard";
|
||||
import { AnyQuizQuestion } from "@model/questionTypes/shared";
|
||||
|
||||
import { updateQuestionsList } from "@root/questions";
|
||||
|
||||
import { QuizQuestionBase } from "../../../model/questionTypes/shared";
|
||||
|
||||
type DraggableListItemProps = {
|
||||
index: number;
|
||||
isDragging: boolean;
|
||||
questionData: QuizQuestionBase;
|
||||
type Props = {
|
||||
question: AnyQuizQuestion;
|
||||
isDragging: boolean;
|
||||
index: number;
|
||||
};
|
||||
|
||||
export default memo(
|
||||
({ index, isDragging, questionData }: DraggableListItemProps) => {
|
||||
const quizId = Number(useParams().quizId);
|
||||
function DraggableListItem({ question, isDragging, index }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Draggable draggableId={String(index)} index={index}>
|
||||
{(provided) => (
|
||||
<ListItem
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
sx={{ userSelect: "none", padding: 0 }}
|
||||
>
|
||||
{questionData.deleted ? (
|
||||
<Box
|
||||
{...provided.dragHandleProps}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "40px",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
<Draggable draggableId={question.id.toString()} index={index}>
|
||||
{(provided) => (
|
||||
<ListItem
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
sx={{ userSelect: "none", padding: 0 }}
|
||||
>
|
||||
Вопрос удалён.
|
||||
</Typography>
|
||||
<Typography
|
||||
onClick={() => {
|
||||
updateQuestionsList<QuizQuestionBase>(quizId, index, {
|
||||
...questionData,
|
||||
deleted: false,
|
||||
});
|
||||
}}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
fontSize: "16px",
|
||||
textDecoration: "underline",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
Восстановить?
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ width: "100%", position: "relative" }}>
|
||||
<QuestionsPageCard
|
||||
key={index}
|
||||
totalIndex={index}
|
||||
draggableProps={provided.dragHandleProps}
|
||||
isDragging={isDragging}
|
||||
/>
|
||||
</Box>
|
||||
{/* questionData.deleted TODO */ true ? (
|
||||
<Box
|
||||
{...provided.dragHandleProps}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "40px",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Вопрос удалён.
|
||||
</Typography>
|
||||
<Typography
|
||||
onClick={() => { // TODO
|
||||
// updateQuestionsList<QuizQuestionBase>(quizId, index, {
|
||||
// ...questionData,
|
||||
// deleted: false,
|
||||
// });
|
||||
}}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
fontSize: "16px",
|
||||
textDecoration: "underline",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
Восстановить?
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ width: "100%", position: "relative" }}>
|
||||
<QuestionsPageCard
|
||||
question={question}
|
||||
draggableProps={provided.dragHandleProps}
|
||||
isDragging={isDragging}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</ListItem>
|
||||
)}
|
||||
</ListItem>
|
||||
)}
|
||||
</Draggable>
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const DraggableListItemMemo = memo(DraggableListItem);
|
||||
|
||||
export default DraggableListItemMemo;
|
||||
|
||||
@ -1,449 +1,433 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {
|
||||
Box,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
Paper,
|
||||
TextField,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Box,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
Paper,
|
||||
TextField,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { useRef, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
|
||||
import { ChooseAnswerModal } from "./ChooseAnswerModal";
|
||||
import TypeQuestions from "../TypeQuestions";
|
||||
import SwitchQuestionsPage from "../SwitchQuestionsPage";
|
||||
import TypeQuestions from "../TypeQuestions";
|
||||
import { ChooseAnswerModal } from "./ChooseAnswerModal";
|
||||
|
||||
import {
|
||||
questionStore,
|
||||
updateQuestionsList,
|
||||
createQuestion,
|
||||
copyQuestion,
|
||||
removeQuestion,
|
||||
removeQuestionForce,
|
||||
copyQuestion,
|
||||
createQuestion,
|
||||
removeQuestion,
|
||||
removeQuestionForce,
|
||||
updateQuestionsList
|
||||
} from "@root/questions";
|
||||
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||||
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
|
||||
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
|
||||
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
|
||||
import { OneIcon } from "@icons/questionsPage/OneIcon";
|
||||
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
||||
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
|
||||
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
|
||||
import { HideIcon } from "@icons/questionsPage/hideIcon";
|
||||
import Answer from "@icons/questionsPage/answer";
|
||||
import OptionsPict from "@icons/questionsPage/options_pict";
|
||||
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
|
||||
import Emoji from "@icons/questionsPage/emoji";
|
||||
import Input from "@icons/questionsPage/input";
|
||||
import DropDown from "@icons/questionsPage/drop_down";
|
||||
import Date from "@icons/questionsPage/date";
|
||||
import Slider from "@icons/questionsPage/slider";
|
||||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||||
import Download from "@icons/questionsPage/download";
|
||||
import DropDown from "@icons/questionsPage/drop_down";
|
||||
import Emoji from "@icons/questionsPage/emoji";
|
||||
import { HideIcon } from "@icons/questionsPage/hideIcon";
|
||||
import Input from "@icons/questionsPage/input";
|
||||
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
|
||||
import OptionsPict from "@icons/questionsPage/options_pict";
|
||||
import Page from "@icons/questionsPage/page";
|
||||
import RatingIcon from "@icons/questionsPage/rating";
|
||||
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
|
||||
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
|
||||
|
||||
import Slider from "@icons/questionsPage/slider";
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
|
||||
import type {
|
||||
AnyQuizQuestion,
|
||||
QuizQuestionInitial,
|
||||
} from "../../../model/questionTypes/shared";
|
||||
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
|
||||
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";
|
||||
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
|
||||
isDragging: boolean;
|
||||
question: AnyQuizQuestion;
|
||||
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
|
||||
isDragging: boolean;
|
||||
}
|
||||
|
||||
export default function QuestionsPageCard({ question, draggableProps, isDragging }: Props) {
|
||||
const [plusVisible, setPlusVisible] = useState<boolean>(false);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const quizId = Number(useParams().quizId);
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const anchorRef = useRef(null);
|
||||
const debounced = useDebouncedCallback((title) => { // TODO update title
|
||||
// updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, { title });
|
||||
}, 200);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
data-cy="quiz-question-card"
|
||||
sx={{
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
borderRadius: "12px",
|
||||
backgroundColor: question.expanded ? "white" : "#EEE4FC",
|
||||
border: question.expanded ? "none" : "1px solid #9A9AAF",
|
||||
boxShadow: "0px 10px 30px #e7e7e7",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: isMobile ? "10px" : "20px 10px 20px 20px",
|
||||
flexDirection: isMobile ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<FormControl
|
||||
variant="standard"
|
||||
sx={{
|
||||
p: 0,
|
||||
maxWidth: isTablet ? "549px" : "640px",
|
||||
width: "100%",
|
||||
marginRight: isMobile ? "0px" : "16.1px",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
defaultValue={question.title}
|
||||
placeholder={"Заголовок вопроса"}
|
||||
onChange={({ target }) => debounced(target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<Box>
|
||||
<InputAdornment
|
||||
ref={anchorRef}
|
||||
position="start"
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => setOpen((isOpened) => !isOpened)}
|
||||
>
|
||||
{IconAndrom(question.expanded, question.type)}
|
||||
</InputAdornment>
|
||||
<ChooseAnswerModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
anchorRef={anchorRef}
|
||||
question={question}
|
||||
switchState={question.type}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
margin: isMobile ? "10px 0" : 0,
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#000000",
|
||||
backgroundColor: question.expanded
|
||||
? theme.palette.background.default
|
||||
: "transparent",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
".MuiOutlinedInput-notchedOutline": {
|
||||
borderWidth: "1px !important",
|
||||
border: !question.expanded ? "none" : null,
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder": {
|
||||
color: "#4D4D4D",
|
||||
opacity: 0.8,
|
||||
},
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
paddingLeft: question.type.length === 0 ? 0 : "18px",
|
||||
},
|
||||
"data-cy": "quiz-question-title",
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
width: isMobile ? "100%" : "auto",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{ padding: "0", margin: "5px" }}
|
||||
disableRipple
|
||||
data-cy="expand-question"
|
||||
onClick={() =>
|
||||
updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, {
|
||||
expanded: !question.expanded,
|
||||
})
|
||||
}
|
||||
>
|
||||
{question.expanded ? (
|
||||
<ArrowDownIcon
|
||||
style={{
|
||||
width: "18px",
|
||||
color: "#4D4D4D",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ExpandLessIcon
|
||||
sx={{
|
||||
boxSizing: "border-box",
|
||||
fill: theme.palette.brightPurple.main,
|
||||
background: "#FFF",
|
||||
borderRadius: "6px",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
{question.expanded ? (
|
||||
<></>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: "30px",
|
||||
borderRight: "solid 1px #4D4D4D",
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
icon={
|
||||
<HideIcon
|
||||
style={{
|
||||
boxSizing: "border-box",
|
||||
color: "#7E2AEA",
|
||||
background: "#FFF",
|
||||
borderRadius: "6px",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
padding: "3px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
checkedIcon={<CrossedEyeIcon />}
|
||||
/>
|
||||
}
|
||||
label={""}
|
||||
sx={{
|
||||
color: theme.palette.grey2.main,
|
||||
ml: "-9px",
|
||||
mr: 0,
|
||||
userSelect: "none",
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{ padding: "0" }}
|
||||
onClick={() => copyQuestion(quizId, totalIndex)}
|
||||
>
|
||||
<CopyIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
borderRadius: "6px",
|
||||
padding: "0",
|
||||
margin: "0 5px 0 10px",
|
||||
}}
|
||||
onClick={() => {
|
||||
const removedId = question.id;
|
||||
if (question.deleteTimeoutId) {
|
||||
clearTimeout(question.deleteTimeoutId);
|
||||
}
|
||||
|
||||
removeQuestion(quizId, totalIndex);
|
||||
|
||||
const newTimeoutId = window.setTimeout(() => {
|
||||
removeQuestionForce(quizId, removedId);
|
||||
}, 5000);
|
||||
|
||||
updateQuestionsList<AnyQuizQuestion>(quizId, totalIndex, {
|
||||
...question,
|
||||
deleteTimeoutId: newTimeoutId,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<DeleteIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<OneIcon
|
||||
style={{
|
||||
fontSize: "30px",
|
||||
marginLeft: "3px",
|
||||
color: !question.expanded ? "#FFF" : "",
|
||||
fill: question.expanded
|
||||
? "#EEE4FC"
|
||||
: theme.palette.brightPurple.main,
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
disableRipple
|
||||
sx={{
|
||||
padding: isMobile ? "0" : "0 5px",
|
||||
right: isMobile ? "0" : null,
|
||||
bottom: isMobile ? "0" : null,
|
||||
}}
|
||||
{...draggableProps}
|
||||
>
|
||||
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
{question.expanded && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 0,
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
{question.type === "nonselected" ? (
|
||||
<TypeQuestions question={question} />
|
||||
) : (
|
||||
<SwitchQuestionsPage question={question} />
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
<Box
|
||||
onMouseEnter={() => setPlusVisible(true)}
|
||||
onMouseLeave={() => setPlusVisible(false)}
|
||||
sx={{
|
||||
maxWidth: "825px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "40px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => createQuestion(quizId, "nonselected", totalIndex + 1)}
|
||||
sx={{
|
||||
display: plusVisible && !isDragging ? "flex" : "none",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
columnGap: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
boxSizing: "border-box",
|
||||
width: "100%",
|
||||
height: "1px",
|
||||
backgroundPosition: "bottom",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: "20px 1px",
|
||||
backgroundImage:
|
||||
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
|
||||
}}
|
||||
/>
|
||||
<PlusIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const IconAndrom = (isExpanded: boolean, switchState: string) => {
|
||||
switch (switchState) {
|
||||
case "variant":
|
||||
return (
|
||||
<Answer
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "images":
|
||||
return (
|
||||
<OptionsPict
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "varimg":
|
||||
return (
|
||||
<OptionsAndPict
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "emoji":
|
||||
return (
|
||||
<Emoji
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "text":
|
||||
return (
|
||||
<Input
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "select":
|
||||
return (
|
||||
<DropDown
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "date":
|
||||
return (
|
||||
<Date
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
return (
|
||||
<Slider
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "file":
|
||||
return (
|
||||
<Download
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "page":
|
||||
return (
|
||||
<Page
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "rating":
|
||||
return (
|
||||
<RatingIcon
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
};
|
||||
export default function QuestionsPageCard({
|
||||
totalIndex,
|
||||
draggableProps,
|
||||
isDragging,
|
||||
}: Props) {
|
||||
const [plusVisible, setPlusVisible] = useState<boolean>(false);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const quizId = Number(useParams().quizId);
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const { listQuestions } = questionStore();
|
||||
const question = listQuestions[quizId][totalIndex];
|
||||
const anchorRef = useRef(null);
|
||||
const debounced = useDebouncedCallback((title) => {
|
||||
updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, { title });
|
||||
}, 200);
|
||||
|
||||
useEffect(() => {
|
||||
if (question.deleteTimeoutId) {
|
||||
clearTimeout(question.deleteTimeoutId);
|
||||
switch (switchState) {
|
||||
case "variant":
|
||||
return (
|
||||
<Answer
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "images":
|
||||
return (
|
||||
<OptionsPict
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "varimg":
|
||||
return (
|
||||
<OptionsAndPict
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "emoji":
|
||||
return (
|
||||
<Emoji
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "text":
|
||||
return (
|
||||
<Input
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "select":
|
||||
return (
|
||||
<DropDown
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "date":
|
||||
return (
|
||||
<Date
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
return (
|
||||
<Slider
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "file":
|
||||
return (
|
||||
<Download
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "page":
|
||||
return (
|
||||
<Page
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
case "rating":
|
||||
return (
|
||||
<RatingIcon
|
||||
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
|
||||
sx={{ height: "22px", width: "20px" }}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
}, [question]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
id={String(totalIndex)}
|
||||
data-cy="quiz-question-card"
|
||||
sx={{
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
borderRadius: "12px",
|
||||
backgroundColor: question.expanded ? "white" : "#EEE4FC",
|
||||
border: question.expanded ? "none" : "1px solid #9A9AAF",
|
||||
boxShadow: "0px 10px 30px #e7e7e7",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: isMobile ? "10px" : "20px 10px 20px 20px",
|
||||
flexDirection: isMobile ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<FormControl
|
||||
variant="standard"
|
||||
sx={{
|
||||
p: 0,
|
||||
maxWidth: isTablet ? "549px" : "640px",
|
||||
width: "100%",
|
||||
marginRight: isMobile ? "0px" : "16.1px",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
defaultValue={question.title}
|
||||
placeholder={"Заголовок вопроса"}
|
||||
onChange={({ target }) => debounced(target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<Box>
|
||||
<InputAdornment
|
||||
ref={anchorRef}
|
||||
position="start"
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => setOpen((isOpened) => !isOpened)}
|
||||
>
|
||||
{IconAndrom(question.expanded, question.type)}
|
||||
</InputAdornment>
|
||||
<ChooseAnswerModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
anchorRef={anchorRef}
|
||||
totalIndex={totalIndex}
|
||||
switchState={question.type}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
margin: isMobile ? "10px 0" : 0,
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#000000",
|
||||
backgroundColor: question.expanded
|
||||
? theme.palette.background.default
|
||||
: "transparent",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
".MuiOutlinedInput-notchedOutline": {
|
||||
borderWidth: "1px !important",
|
||||
border: !question.expanded ? "none" : null,
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder": {
|
||||
color: "#4D4D4D",
|
||||
opacity: 0.8,
|
||||
},
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
paddingLeft: question.type.length === 0 ? 0 : "18px",
|
||||
},
|
||||
"data-cy": "quiz-question-title",
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
width: isMobile ? "100%" : "auto",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{ padding: "0", margin: "5px" }}
|
||||
disableRipple
|
||||
data-cy="expand-question"
|
||||
onClick={() =>
|
||||
updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, {
|
||||
expanded: !question.expanded,
|
||||
})
|
||||
}
|
||||
>
|
||||
{question.expanded ? (
|
||||
<ArrowDownIcon
|
||||
style={{
|
||||
width: "18px",
|
||||
color: "#4D4D4D",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ExpandLessIcon
|
||||
sx={{
|
||||
boxSizing: "border-box",
|
||||
fill: theme.palette.brightPurple.main,
|
||||
background: "#FFF",
|
||||
borderRadius: "6px",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
{question.expanded ? (
|
||||
<></>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: "30px",
|
||||
borderRight: "solid 1px #4D4D4D",
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
icon={
|
||||
<HideIcon
|
||||
style={{
|
||||
boxSizing: "border-box",
|
||||
color: "#7E2AEA",
|
||||
background: "#FFF",
|
||||
borderRadius: "6px",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
padding: "3px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
checkedIcon={<CrossedEyeIcon />}
|
||||
/>
|
||||
}
|
||||
label={""}
|
||||
sx={{
|
||||
color: theme.palette.grey2.main,
|
||||
ml: "-9px",
|
||||
mr: 0,
|
||||
userSelect: "none",
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{ padding: "0" }}
|
||||
onClick={() => copyQuestion(quizId, totalIndex)}
|
||||
>
|
||||
<CopyIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
borderRadius: "6px",
|
||||
padding: "0",
|
||||
margin: "0 5px 0 10px",
|
||||
}}
|
||||
onClick={() => {
|
||||
const removedId = question.id;
|
||||
if (question.deleteTimeoutId) {
|
||||
clearTimeout(question.deleteTimeoutId);
|
||||
}
|
||||
|
||||
removeQuestion(quizId, totalIndex);
|
||||
|
||||
const newTimeoutId = window.setTimeout(() => {
|
||||
removeQuestionForce(quizId, removedId);
|
||||
}, 5000);
|
||||
|
||||
updateQuestionsList<AnyQuizQuestion>(quizId, totalIndex, {
|
||||
...question,
|
||||
deleteTimeoutId: newTimeoutId,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<DeleteIcon
|
||||
style={{ color: theme.palette.brightPurple.main }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<OneIcon
|
||||
style={{
|
||||
fontSize: "30px",
|
||||
marginLeft: "3px",
|
||||
color: !question.expanded ? "#FFF" : "",
|
||||
fill: question.expanded
|
||||
? "#EEE4FC"
|
||||
: theme.palette.brightPurple.main,
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
disableRipple
|
||||
sx={{
|
||||
padding: isMobile ? "0" : "0 5px",
|
||||
right: isMobile ? "0" : null,
|
||||
bottom: isMobile ? "0" : null,
|
||||
}}
|
||||
{...draggableProps}
|
||||
>
|
||||
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
{question.expanded && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 0,
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
{question.type === "nonselected" ? (
|
||||
<TypeQuestions totalIndex={totalIndex} />
|
||||
) : (
|
||||
<SwitchQuestionsPage totalIndex={totalIndex} />
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
<Box
|
||||
onMouseEnter={() => setPlusVisible(true)}
|
||||
onMouseLeave={() => setPlusVisible(false)}
|
||||
sx={{
|
||||
maxWidth: "825px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "40px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => createQuestion(quizId, "nonselected", totalIndex + 1)}
|
||||
sx={{
|
||||
display: plusVisible && !isDragging ? "flex" : "none",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
columnGap: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
boxSizing: "border-box",
|
||||
width: "100%",
|
||||
height: "1px",
|
||||
backgroundPosition: "bottom",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: "20px 1px",
|
||||
backgroundImage:
|
||||
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
|
||||
}}
|
||||
/>
|
||||
<PlusIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,48 +1,59 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box } from "@mui/material";
|
||||
import { DragDropContext, Droppable } from "react-beautiful-dnd";
|
||||
|
||||
import DraggableListItem from "./DraggableListItem";
|
||||
|
||||
import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
|
||||
|
||||
import { reorder } from "./helper";
|
||||
|
||||
import type { DropResult } from "react-beautiful-dnd";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { useQuestionArray } from "@root/questions/hooks";
|
||||
import useSWR from "swr";
|
||||
import { questionApi } from "@api/question";
|
||||
import { setQuestions } from "@root/questions/actions";
|
||||
import { isAxiosError } from "axios";
|
||||
import { devlog } from "@frontend/kitui";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
|
||||
|
||||
export const DraggableList = () => {
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const { quiz } = useCurrentQuiz();
|
||||
useSWR(["questions", quiz?.id], ([, id]) => questionApi.getList({ quiz_id: id }), {
|
||||
onSuccess: setQuestions,
|
||||
onError: error => {
|
||||
const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
|
||||
|
||||
const onDragEnd = ({ destination, source }: DropResult) => {
|
||||
if (destination) {
|
||||
const newItems = reorder(
|
||||
listQuestions[quizId],
|
||||
source.index,
|
||||
destination.index
|
||||
);
|
||||
devlog("Error getting question list", error);
|
||||
enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
|
||||
}
|
||||
});
|
||||
const questions = useQuestionArray();
|
||||
|
||||
updateQuestionsListDragAndDrop(quizId, newItems);
|
||||
}
|
||||
};
|
||||
const onDragEnd = ({ destination, source }: DropResult) => { // TODO
|
||||
// if (destination) {
|
||||
// const newItems = reorder(
|
||||
// listQuestions[quizId],
|
||||
// source.index,
|
||||
// destination.index
|
||||
// );
|
||||
|
||||
return (
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="droppable-list">
|
||||
{(provided, snapshot) => (
|
||||
<Box ref={provided.innerRef} {...provided.droppableProps}>
|
||||
{listQuestions[quizId]?.map((_, index) => (
|
||||
<DraggableListItem
|
||||
key={index}
|
||||
index={index}
|
||||
isDragging={snapshot.isDraggingOver}
|
||||
questionData={_}
|
||||
/>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</Box>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
// updateQuestionsListDragAndDrop(quizId, newItems);
|
||||
// }
|
||||
};
|
||||
|
||||
return (
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="droppable-list">
|
||||
{(provided, snapshot) => (
|
||||
<Box ref={provided.innerRef} {...provided.droppableProps}>
|
||||
{questions.map((question, index) => (
|
||||
<DraggableListItem
|
||||
key={question.id}
|
||||
question={question}
|
||||
isDragging={snapshot.isDraggingOver}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</Box>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,120 +1,106 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import AddPlus from "../../assets/icons/questionsPage/addPlus";
|
||||
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||||
import { quizStore } from "@root/quizes";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {
|
||||
questionStore,
|
||||
createQuestion,
|
||||
updateQuestionsList,
|
||||
} from "@root/questions";
|
||||
import { DraggableList } from "./DraggableList";
|
||||
|
||||
import type { AnyQuizQuestion } from "../../model/questionTypes/shared";
|
||||
import { createQuestion } from "@root/questions/actions";
|
||||
import { incrementCurrentStep } from "@root/quizes/actions";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
|
||||
import { createPortal } from "react-dom";
|
||||
import AddPlus from "../../assets/icons/questionsPage/addPlus";
|
||||
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||||
import { DraggableList } from "./DraggableList";
|
||||
|
||||
|
||||
export default function QuestionsPage() {
|
||||
const { listQuizes, updateQuizesList } = quizStore();
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const handleNext = () => {
|
||||
updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 });
|
||||
};
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||||
const { quiz } = useCurrentQuiz();
|
||||
|
||||
const handleBack = () => {
|
||||
let result = listQuizes[quizId].step - 1;
|
||||
updateQuizesList(quizId, { step: result ? result : 1 });
|
||||
};
|
||||
const collapseEverything = () => { // TODO
|
||||
// listQuestions[quizId].forEach((item, index) => {
|
||||
// updateQuestionsList<AnyQuizQuestion>(quizId, index, {
|
||||
// ...item,
|
||||
// expanded: false,
|
||||
// });
|
||||
// });
|
||||
};
|
||||
|
||||
const collapseEverything = () => {
|
||||
listQuestions[quizId].forEach((item, index) => {
|
||||
updateQuestionsList<AnyQuizQuestion>(quizId, index, {
|
||||
...item,
|
||||
expanded: false,
|
||||
});
|
||||
});
|
||||
};
|
||||
if (!quiz) return null;
|
||||
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
margin: "60px 0 40px 0",
|
||||
}}
|
||||
>
|
||||
<Typography variant={"h5"}>Заголовок квиза</Typography>
|
||||
<Button
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
padding: 0,
|
||||
textDecoration: "underline",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
onClick={collapseEverything}
|
||||
>
|
||||
Свернуть всё
|
||||
</Button>
|
||||
</Box>
|
||||
<DraggableList />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
maxWidth: "796px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
createQuestion(quizId);
|
||||
}}
|
||||
sx={{
|
||||
position: "fixed",
|
||||
left: isMobile ? "20px" : "250px",
|
||||
bottom: "20px",
|
||||
}}
|
||||
>
|
||||
<AddPlus />
|
||||
</IconButton>
|
||||
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
height: "44px",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
background: theme.palette.brightPurple.main,
|
||||
fontSize: "18px",
|
||||
}}
|
||||
onClick={handleNext}
|
||||
>
|
||||
Следующий шаг
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
{createPortal(<QuizPreview />, document.body)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
margin: "60px 0 40px 0",
|
||||
}}
|
||||
>
|
||||
<Typography variant={"h5"}>Заголовок квиза</Typography>
|
||||
<Button
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
padding: 0,
|
||||
textDecoration: "underline",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
onClick={collapseEverything}
|
||||
>
|
||||
Свернуть всё
|
||||
</Button>
|
||||
</Box>
|
||||
<DraggableList />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
maxWidth: "796px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
createQuestion(quiz.id);
|
||||
}}
|
||||
sx={{
|
||||
position: "fixed",
|
||||
left: isMobile ? "20px" : "250px",
|
||||
bottom: "20px",
|
||||
}}
|
||||
>
|
||||
<AddPlus />
|
||||
</IconButton>
|
||||
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
height: "44px",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
background: theme.palette.brightPurple.main,
|
||||
fontSize: "18px",
|
||||
}}
|
||||
onClick={incrementCurrentStep}
|
||||
>
|
||||
Следующий шаг
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
{createPortal(<QuizPreview />, document.body)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,33 +1,24 @@
|
||||
import { Box } from "@mui/material";
|
||||
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
|
||||
import Answer from "../../assets/icons/questionsPage/answer";
|
||||
import OptionsPict from "../../assets/icons/questionsPage/options_pict";
|
||||
import OptionsAndPict from "../../assets/icons/questionsPage/options_and_pict";
|
||||
import Date from "../../assets/icons/questionsPage/date";
|
||||
import Download from "../../assets/icons/questionsPage/download";
|
||||
import DropDown from "../../assets/icons/questionsPage/drop_down";
|
||||
import Emoji from "../../assets/icons/questionsPage/emoji";
|
||||
import Input from "../../assets/icons/questionsPage/input";
|
||||
import DropDown from "../../assets/icons/questionsPage/drop_down";
|
||||
import Date from "../../assets/icons/questionsPage/date";
|
||||
import Slider from "../../assets/icons/questionsPage/slider";
|
||||
import Download from "../../assets/icons/questionsPage/download";
|
||||
import OptionsAndPict from "../../assets/icons/questionsPage/options_and_pict";
|
||||
import OptionsPict from "../../assets/icons/questionsPage/options_pict";
|
||||
import Page from "../../assets/icons/questionsPage/page";
|
||||
import RatingIcon from "../../assets/icons/questionsPage/rating";
|
||||
import { Box } from "@mui/material";
|
||||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
questionStore,
|
||||
updateQuestionsList,
|
||||
createQuestion,
|
||||
removeQuestionForce,
|
||||
} from "@root/questions";
|
||||
|
||||
import Slider from "../../assets/icons/questionsPage/slider";
|
||||
import { setQuestionFieldOptimistic } from "@root/questions/actions";
|
||||
import type {
|
||||
QuizQuestionType,
|
||||
QuizQuestionBase,
|
||||
AnyQuizQuestion,
|
||||
QuizQuestionType
|
||||
} from "../../model/questionTypes/shared";
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
question: AnyQuizQuestion;
|
||||
}
|
||||
|
||||
type ButtonTypeQuestion = {
|
||||
@ -36,6 +27,30 @@ type ButtonTypeQuestion = {
|
||||
value: QuizQuestionType;
|
||||
};
|
||||
|
||||
export default function TypeQuestions({ question }: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "20px",
|
||||
padding: "8px 20px 20px",
|
||||
}}
|
||||
>
|
||||
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
|
||||
<QuestionsMiniButton
|
||||
key={title}
|
||||
dataCy={`select-questiontype-${value}`}
|
||||
onClick={() => setQuestionFieldOptimistic(question.id, "type", value)}
|
||||
icon={icon}
|
||||
text={title}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
|
||||
{
|
||||
icon: <Answer color="#9A9AAF" />,
|
||||
@ -93,38 +108,3 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
|
||||
value: "rating",
|
||||
},
|
||||
];
|
||||
|
||||
export default function TypeQuestions({ totalIndex }: Props) {
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "20px",
|
||||
padding: "8px 20px 20px",
|
||||
}}
|
||||
>
|
||||
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
|
||||
<QuestionsMiniButton
|
||||
key={title}
|
||||
dataCy={`select-questiontype-${value}`}
|
||||
onClick={() => {
|
||||
const question = { ...listQuestions[quizId][totalIndex] };
|
||||
|
||||
removeQuestionForce(quizId, question.id);
|
||||
createQuestion(quizId, value, totalIndex);
|
||||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||||
expanded: question.expanded,
|
||||
type: value,
|
||||
});
|
||||
}}
|
||||
icon={icon}
|
||||
text={title}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,33 +1,35 @@
|
||||
import { questionApi } from "@api/question";
|
||||
import { devlog } from "@frontend/kitui";
|
||||
import { Question } from "@model/question/question";
|
||||
import { RawQuestion, rawQuestionToQuestion } from "@model/question/question";
|
||||
import { produce } from "immer";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
|
||||
import { QuestionsStore, useQuestionsStore } from "./store";
|
||||
import { questionToEditQuestionRequest } from "@model/question/edit";
|
||||
import { AnyQuizQuestion } from "@model/questionTypes/shared";
|
||||
|
||||
|
||||
export const setQuestions = (quizes: Question[] | null) => setProducedState(state => {
|
||||
export const setQuestions = (questions: RawQuestion[] | null) => setProducedState(state => {
|
||||
state.questionsById = {};
|
||||
if (quizes === null) return;
|
||||
if (questions === null) return;
|
||||
|
||||
quizes.forEach(question => state.questionsById[question.id] = question);
|
||||
questions.forEach(question => state.questionsById[question.id] = rawQuestionToQuestion(question));
|
||||
}, {
|
||||
type: "setQuizes",
|
||||
quizes,
|
||||
type: "setQuestions",
|
||||
questions,
|
||||
});
|
||||
|
||||
export const setQuestion = (question: Question) => setProducedState(state => {
|
||||
export const setQuestion = (question: AnyQuizQuestion) => setProducedState(state => {
|
||||
state.questionsById[question.id] = question;
|
||||
}, {
|
||||
type: "setQuestion",
|
||||
question,
|
||||
});
|
||||
|
||||
export const setQuestionField = <T extends keyof Question>(
|
||||
export const setQuestionField = <T extends keyof AnyQuizQuestion>(
|
||||
questionId: number,
|
||||
field: T,
|
||||
value: Question[T],
|
||||
value: AnyQuizQuestion[T],
|
||||
) => setProducedState(state => {
|
||||
const question = state.questionsById[questionId];
|
||||
if (!question) return;
|
||||
@ -40,13 +42,13 @@ export const setQuestionField = <T extends keyof Question>(
|
||||
value,
|
||||
});
|
||||
|
||||
let savedOriginalQuestion: Question | null = null;
|
||||
let savedOriginalQuestion: AnyQuizQuestion | null = null;
|
||||
let controller: AbortController | null = null;
|
||||
|
||||
export const setQuestionFieldOptimistic = async <T extends keyof Question>(
|
||||
export const setQuestionFieldOptimistic = async <T extends keyof AnyQuizQuestion>(
|
||||
questionId: number,
|
||||
field: T,
|
||||
value: Question[T],
|
||||
value: AnyQuizQuestion[T],
|
||||
) => {
|
||||
const question = useQuestionsStore.getState().questionsById[questionId] ?? null;
|
||||
if (!question) return;
|
||||
@ -60,9 +62,12 @@ export const setQuestionFieldOptimistic = async <T extends keyof Question>(
|
||||
|
||||
setQuestion(currentUpdatedQuestion);
|
||||
try {
|
||||
const { updated } = await questionApi.edit(currentUpdatedQuestion, controller.signal);
|
||||
const { updated } = await questionApi.edit(
|
||||
questionToEditQuestionRequest(currentUpdatedQuestion),
|
||||
controller.signal,
|
||||
);
|
||||
|
||||
setQuestionField(question.id, "version", updated);
|
||||
setQuestionField(question.id, "id", updated);
|
||||
controller = null;
|
||||
savedOriginalQuestion = null;
|
||||
} catch (error) {
|
||||
@ -83,7 +88,7 @@ export const setQuestionFieldOptimistic = async <T extends keyof Question>(
|
||||
|
||||
export const updateQuestionWithFn = (
|
||||
questionId: number,
|
||||
updateFn: (question: Question) => void,
|
||||
updateFn: (question: AnyQuizQuestion) => void,
|
||||
) => setProducedState(state => {
|
||||
const question = state.questionsById[questionId];
|
||||
if (!question) return;
|
||||
@ -101,7 +106,7 @@ export const createQuestion = async (quizId: number) => {
|
||||
quiz_id: quizId,
|
||||
});
|
||||
|
||||
setQuestion(question);
|
||||
setQuestion(rawQuestionToQuestion(question));
|
||||
} catch (error) {
|
||||
devlog("Error creating question", error);
|
||||
enqueueSnackbar("Не удалось создать вопрос");
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Question } from "@model/question/question";
|
||||
import { AnyQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { create } from "zustand";
|
||||
import { devtools } from "zustand/middleware";
|
||||
|
||||
|
||||
export type QuestionsStore = {
|
||||
questionsById: Record<number, Question | undefined>;
|
||||
questionsById: Record<number, AnyQuizQuestion | undefined>;
|
||||
};
|
||||
|
||||
const initialState: QuestionsStore = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user