SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

fix conflicts

Browse Source
This commit is contained in:
nflnkr 2023-11-17 18:42:49 +03:00
parent f463270a9b
commit bf8a41a3bc
18 changed files with 415 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/question.ts
View File

@ -1,10 +1,11 @@
import { makeRequest } from "@frontend/kitui";
import { CreateQuestionRequest } from "model/question/create";
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";
import { CopyQuestionRequest, CopyQuestionResponse } from "model/question/copy";
import { GetQuestionListRequest, GetQuestionListResponse } from "@model/question/getList";
import { EditQuestionRequest, EditQuestionResponse } from "@model/question/edit";
import { DeleteQuestionRequest, DeleteQuestionResponse } from "@model/question/delete";
import { CopyQuestionRequest, CopyQuestionResponse } from "@model/question/copy";
import { QUIZ_QUESTION_VARIANT } from "../constants/variant";
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital/squiz";
@ -70,16 +71,11 @@ const defaultCreateQuestionBody: CreateQuestionRequest = {
"type": "variant",
"required": true,
"page": 0,
"content": "string",
"content": JSON.stringify(QUIZ_QUESTION_VARIANT.content),
};
const defaultGetQuestionListBody: GetQuestionListRequest = {
"limit": 0,
"offset": 0,
"from": 0,
"to": 0,
"search": "string",
"type": "string",
"deleted": true,
"required": true,
};
"type": "",
};

2
src/constants/emoji.ts
View File

@ -1,6 +1,7 @@
import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionEmoji } from "../model/questionTypes/emoji";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id"> = {
...QUIZ_QUESTION_BASE,
@ -14,6 +15,7 @@ export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id"> = {
required: false,
variants: [
{
id: nanoid(),
answer: "",
extendedText: "",
hints: ""

2
src/constants/images.ts
View File

@ -1,6 +1,7 @@
import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionImages } from "../model/questionTypes/images";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
...QUIZ_QUESTION_BASE,
@ -17,6 +18,7 @@ export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
required: false,
variants: [
{
id: nanoid(),
answer: "",
extendedText: "",
originalImageUrl: "",

3
src/constants/select.ts
View File

@ -1,6 +1,7 @@
import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionSelect } from "../model/questionTypes/select";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id"> = {
...QUIZ_QUESTION_BASE,
@ -12,6 +13,6 @@ export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id"> = {
innerNameCheck: false,
innerName: "",
default: "",
variants: [{ answer: "", extendedText: "", hints: "" }],
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "" }],
},
};

3
src/constants/variant.ts
View File

@ -1,6 +1,7 @@
import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionVariant } from "../model/questionTypes/variant";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id"> = {
...QUIZ_QUESTION_BASE,
@ -13,6 +14,6 @@ export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id"> = {
innerNameCheck: false,
required: false,
innerName: "",
variants: [{ answer: "", extendedText: "", hints: "" }],
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "" }],
},
};

3
src/constants/varimg.ts
View File

@ -1,6 +1,7 @@
import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionVarImg } from "../model/questionTypes/varimg";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
...QUIZ_QUESTION_BASE,
@ -11,7 +12,7 @@ export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
innerNameCheck: false,
innerName: "",
required: false,
variants: [{ answer: "", hints: "", extendedText: "", originalImageUrl: "" }],
variants: [{ id: nanoid(), answer: "", hints: "", extendedText: "", originalImageUrl: "" }],
largeCheck: false,
replText: "",
},

2
src/model/question/edit.ts
View File

@ -9,6 +9,7 @@ export interface EditQuestionRequest {
type?: QuestionType;
required?: boolean;
page?: number;
content: AnyQuizQuestion["content"];
}
export interface EditQuestionResponse {
@ -23,5 +24,6 @@ export function questionToEditQuestionRequest(question: AnyQuizQuestion): EditQu
type: question.type,
required: question.required,
page: question.page,
content: question.content,
};
}

4
src/model/question/getList.ts
View File

@ -1,4 +1,4 @@
import { RawQuestion } from "./question";
import { QuestionType, RawQuestion } from "./question";
export interface GetQuestionListRequest {
@ -13,7 +13,7 @@ export interface GetQuestionListRequest {
/** string for fulltext search in titles of questions */
search?: string;
/** allow only - text, select, file, variant, images, varimg, emoji, date, number, page, rating or empty string */
type?: string;
type: "" | QuestionType;
/** get deleted quizes */
deleted?: boolean;
/** get only require questions */

280
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -21,153 +21,153 @@ import type { ImageQuestionVariant, QuestionVariant } from "../../../model/quest
type AnswerItemProps = {
index: number;
questionId: number;
variant: QuestionVariant | ImageQuestionVariant;
largeCheck: boolean;
additionalContent?: ReactNode;
additionalMobile?: ReactNode;
index: number;
questionId: number;
variant: QuestionVariant | ImageQuestionVariant;
largeCheck: boolean;
additionalContent?: ReactNode;
additionalMobile?: ReactNode;
};
export const AnswerItem = ({
index,
variant,
questionId,
largeCheck,
additionalContent,
additionalMobile,
index,
variant,
questionId,
largeCheck,
additionalContent,
additionalMobile,
}: AnswerItemProps) => {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(790));
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(790));
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
setQuestionVariantField(questionId, variant.id,"answer", value);
}, 1000);
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
setQuestionVariantField(questionId, variant.id, "answer", value);
}, 1000);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
setIsOpen(true);
};
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
setIsOpen(true);
};
const handleClose = () => {
setIsOpen(false);
};
const handleClose = () => {
setIsOpen(false);
};
return (
<Draggable draggableId={String(index)} index={index}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.draggableProps}>
<FormControl
key={index}
fullWidth
variant="standard"
sx={{
margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0",
borderRadius: "10px",
border: "1px solid rgba(0, 0, 0, 0.23)",
background: "white",
}}
>
<TextField
defaultValue={variant.answer}
fullWidth
focused={false}
placeholder={"Добавьте ответ"}
multiline={largeCheck}
onChange={({ target }) => setQuestionVariantAnswer(target.value)}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (event.code === "Enter" && !largeCheck) {
addQuestionVariant(questionId);
}
}}
InputProps={{
startAdornment: (
<>
<InputAdornment
{...provided.dragHandleProps}
position="start"
>
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
{additionalContent}
</>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
sx={{ padding: "0" }}
aria-describedby="my-popover-id"
onClick={handleClick}
>
<MessageIcon
style={{
color: "#9A9AAF",
fontSize: "30px",
marginRight: "6.5px",
}}
/>
</IconButton>
<Popover
id="my-popover-id"
open={isOpen}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={e => setQuestionVariantField(questionId, variant.id, "hints", e.target.value)}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
/>
</Popover>
<IconButton
sx={{ padding: "0" }}
onClick={() => deleteQuestionVariant(questionId, variant.id)}
>
<DeleteIcon
style={{
color: theme.palette.grey2.main,
marginRight: "-1px",
}}
/>
</IconButton>
</InputAdornment>
),
}}
sx={{
"& .MuiInputBase-root": {
padding: additionalContent ? "5px 13px" : "13px",
borderRadius: "10px",
background: "#ffffff",
"& input.MuiInputBase-input": {
height: "22px",
},
"& textarea.MuiInputBase-input": {
marginTop: "1px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
},
}}
inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
"data-cy": "quiz-variant-question-answer",
}}
/>
{additionalMobile}
</FormControl>
</Box>
)}
</Draggable>
return (
<Draggable draggableId={String(index)} index={index}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.draggableProps}>
<FormControl
key={index}
fullWidth
variant="standard"
sx={{
margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0",
borderRadius: "10px",
border: "1px solid rgba(0, 0, 0, 0.23)",
background: "white",
}}
>
<TextField
defaultValue={variant.answer}
fullWidth
focused={false}
placeholder={"Добавьте ответ"}
multiline={largeCheck}
onChange={({ target }) => setQuestionVariantAnswer(target.value)}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (event.code === "Enter" && !largeCheck) {
addQuestionVariant(questionId);
}
}}
InputProps={{
startAdornment: (
<>
<InputAdornment
{...provided.dragHandleProps}
position="start"
>
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
{additionalContent}
</>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
sx={{ padding: "0" }}
aria-describedby="my-popover-id"
onClick={handleClick}
>
<MessageIcon
style={{
color: "#9A9AAF",
fontSize: "30px",
marginRight: "6.5px",
}}
/>
</IconButton>
<Popover
id="my-popover-id"
open={isOpen}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={e => setQuestionVariantField(questionId, variant.id, "hints", e.target.value)}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
/>
</Popover>
<IconButton
sx={{ padding: "0" }}
onClick={() => deleteQuestionVariant(questionId, variant.id)}
>
<DeleteIcon
style={{
color: theme.palette.grey2.main,
marginRight: "-1px",
}}
/>
</IconButton>
</InputAdornment>
),
}}
sx={{
"& .MuiInputBase-root": {
padding: additionalContent ? "5px 13px" : "13px",
borderRadius: "10px",
background: "#ffffff",
"& input.MuiInputBase-input": {
height: "22px",
},
"& textarea.MuiInputBase-input": {
marginTop: "1px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
},
}}
inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
"data-cy": "quiz-variant-question-answer",
}}
/>
{additionalMobile}
</FormControl>
</Box>
)}
</Draggable>
);
);
};

4
src/pages/Questions/DraggableList/DraggableListItem.tsx
View File

@ -1,8 +1,8 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
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";
type Props = {
@ -22,7 +22,7 @@ function DraggableListItem({ question, isDragging, index }: Props) {
{...provided.draggableProps}
sx={{ userSelect: "none", padding: 0 }}
>
{/* questionData.deleted TODO */ true ? (
{question.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{

41
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -1,17 +1,3 @@
import {
Box,
Checkbox,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
Paper,
TextField,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useRef, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
@ -31,8 +17,22 @@ import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { copyQuestion, createQuestion, deleteQuestion, toggleExpandQuestion } from "@root/questions/actions";
import {
Box,
Checkbox,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
Paper,
TextField,
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, createQuestion, deleteQuestion, toggleExpandQuestion, updateQuestionWithFnOptimistic } from "@root/questions/actions";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { useDebouncedCallback } from "use-debounce";
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";
import SwitchQuestionsPage from "../SwitchQuestionsPage";
@ -52,8 +52,11 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
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 });
const setTitle = useDebouncedCallback((title) => {
updateQuestionWithFnOptimistic(question.id, question => {
question.title = title;
});
}, 200);
return (
@ -88,8 +91,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
>
<TextField
defaultValue={question.title}
placeholder={"Заголовок вопроса"}
onChange={({ target }) => debounced(target.value)}
placeholder={"Заголовок вопроса2"}
onChange={({ target }) => setTitle(target.value)}
InputProps={{
startAdornment: (
<Box>

251
src/pages/Questions/Form/FormDraggableList/ChooseAnswerModal.tsx
View File

@ -1,148 +1,133 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import {
Box,
Typography,
Popper,
Grow,
Paper,
MenuList,
MenuItem,
ClickAwayListener,
Modal,
Button,
useTheme,
Box,
Button,
ClickAwayListener,
Grow,
MenuItem,
MenuList,
Modal,
Paper,
Popper,
Typography,
useTheme,
} from "@mui/material";
import {
questionStore,
updateQuestionsList,
removeQuestionForce,
createQuestion,
} from "@root/questions";
import { useState } from "react";
import { BUTTON_TYPE_QUESTIONS } from "../../TypeQuestions";
import type { RefObject } from "react";
import type {
QuizQuestionBase,
} from "../../../../model/questionTypes/shared";
import { QuestionType } from "@model/question/question";
import { updateQuestionWithFnOptimistic } from "@root/questions/actions";
import type { RefObject } from "react";
import type { 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<QuestionType>("text");
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const [openModal, setOpenModal] = useState<boolean>(false);
const [selectedValue, setSelectedValue] = useState<QuestionType>("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={() => {
setOpenModal(false);
const question = { ...listQuestions[quizId][totalIndex] };
removeQuestionForce(quizId, question.id);
createQuestion(quizId, selectedValue, totalIndex);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: question.expanded,
});
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
</>
);
updateQuestionWithFnOptimistic(question.id, question => {
question.type = selectedValue;
});
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
</>
);
};

149
src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
View File

@ -2,88 +2,87 @@ 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 QuestionsPageCard from "./QuestionPageCard";
import { updateQuestionsList } from "@root/questions";
import { AnyQuizQuestion, QuizQuestionBase } from "../../../../model/questionTypes/shared";
import { QuizQuestionBase } from "../../../../model/questionTypes/shared";
type FormDraggableListItemProps = {
index: number;
isDragging: boolean;
questionData: QuizQuestionBase;
question: AnyQuizQuestion;
questionIndex: number;
questionData: QuizQuestionBase;
};
export default memo(
({ index, isDragging, questionData }: FormDraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const theme = useTheme();
({ question, questionIndex, questionData }: FormDraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const theme = useTheme();
return (
<Draggable draggableId={String(index)} index={index}>
{(provided) => (
<ListItem
ref={provided.innerRef}
{...(index !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{questionData.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{
width: "100%",
maxWidth: "800px",
display: "flex",
justifyContent: "center",
marginTop: "30px",
gap: "5px",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.grey2.main,
}}
>
Вопрос удалён.
</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",
borderBottom: "1px solid rgba(0, 0, 0, 0.23)",
}}
>
<QuestionsPageCard
key={index}
question={question}
draggableProps={provided.dragHandleProps}
/>
</Box>
)}
</ListItem>
)}
</Draggable>
);
}
return (
<Draggable draggableId={String(questionIndex)} index={questionIndex}>
{(provided) => (
<ListItem
ref={provided.innerRef}
{...(questionIndex !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{questionData.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{
width: "100%",
maxWidth: "800px",
display: "flex",
justifyContent: "center",
marginTop: "30px",
gap: "5px",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.grey2.main,
}}
>
Вопрос удалён.
</Typography>
<Typography
onClick={() => {
updateQuestionsList<QuizQuestionBase>(quizId, questionIndex, {
...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",
borderBottom: "1px solid rgba(0, 0, 0, 0.23)",
}}
>
<QuestionsPageCard
key={questionIndex}
question={question}
questionIndex={questionIndex}
draggableProps={provided.dragHandleProps}
/>
</Box>
)}
</ListItem>
)}
</Draggable>
);
}
);

6
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -24,11 +24,13 @@ import { ChooseAnswerModal } from "./ChooseAnswerModal";
interface Props {
question: AnyQuizQuestion;
questionIndex: number;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
}
export default function QuestionsPageCard({
question,
questionIndex,
draggableProps,
}: Props) {
const [open, setOpen] = useState<boolean>(false);
@ -64,7 +66,7 @@ export default function QuestionsPageCard({
}}
>
<CustomTextField
placeholder={`Заголовок ${totalIndex + 1} вопроса`}
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
text={question.title}
onChange={({ target }) => setTitle(target.value)}
sx={{ margin: "20px", width: "auto" }}
@ -90,7 +92,7 @@ export default function QuestionsPageCard({
),
endAdornment: (
<Box {...draggableProps}>
{totalIndex !== 0 && (
{questionIndex !== 0 && (
<InputAdornment position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}

26
src/pages/Questions/Form/FormDraggableList/index.tsx
View File

@ -3,10 +3,26 @@ import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import FormDraggableListItem from "./FormDraggableListItem";
import { useQuestionsStore } from "@root/questions/store";
import { reorderQuestions } from "@root/questions/actions";
import { reorderQuestions, setQuestions } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import useSWR from "swr";
import { questionApi } from "@api/question";
import { devlog } from "@frontend/kitui";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
export const FormDraggableList = () => {
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 ?? "") : "";
devlog("Error getting question list", error);
enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
}
});
const questions = useQuestionsStore(state => state.questions);
const onDragEnd = ({ destination, source }: DropResult) => {
@ -16,13 +32,13 @@ export const FormDraggableList = () => {
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable-list">
{(provided, snapshot) => (
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
{questions.map((question, index) => (
<FormDraggableListItem
key={index}
index={index}
isDragging={snapshot.isDraggingOver}
key={question.id}
question={question}
questionIndex={index}
questionData={question}
/>
))}

1
src/pages/startPage/StartPageSettings.tsx
View File

@ -839,7 +839,6 @@ export default function StartPageSettings() {
quiz.config.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ";
});
incrementCurrentStep();
// TODO create new question
}}
>
Настроить вопросы

11
src/stores/questions/actions.ts
View File

@ -5,7 +5,7 @@ import { QuestionType, RawQuestion, rawQuestionToQuestion } from "@model/questio
import { AnyQuizQuestion, ImageQuestionVariant, QuestionVariant, createQuestionImageVariant, createQuestionVariant } from "@model/questionTypes/shared";
import { produce } from "immer";
import { enqueueSnackbar } from "notistack";
import { notReachable } from "utils/notReachable";
import { notReachable } from "../../utils/notReachable";
import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
import { QuestionsStore, useQuestionsStore } from "./store";
@ -25,6 +25,13 @@ const setQuestion = (question: AnyQuizQuestion) => setProducedState(state => {
question,
});
const addQuestion = (question: AnyQuizQuestion) => setProducedState(state => {
state.questions.push(question);
}, {
type: "addQuestion",
question,
});
const removeQuestion = (questionId: number) => setProducedState(state => {
const index = state.questions.findIndex(q => q.id === questionId);
state.questions.splice(index, 1);
@ -322,7 +329,7 @@ export const createQuestion = async (quizId: number, type: QuestionType = "varia
type,
});
setQuestion(rawQuestionToQuestion(question));
addQuestion(rawQuestionToQuestion(question));
} catch (error) {
devlog("Error creating question", error);
enqueueSnackbar("Не удалось создать вопрос");

3
src/stores/quizes/actions.ts
View File

@ -13,6 +13,9 @@ import { createQuestion } from "@root/questions/actions";
export const setEditQuizId = (quizId: number | null) => setProducedState(state => {
state.editQuizId = quizId;
}, {
type: "setEditQuizId",
quizId,
});
export const resetEditConfig = () => setProducedState(state => {