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

18
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 */

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

@ -43,7 +43,7 @@ export const AnswerItem = ({
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
setQuestionVariantField(questionId, variant.id,"answer", value);
setQuestionVariantField(questionId, variant.id, "answer", value);
}, 1000);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {

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>

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

@ -1,38 +1,29 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import {
Box,
Typography,
Popper,
Grow,
Paper,
MenuList,
MenuItem,
ClickAwayListener,
Modal,
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;
question: AnyQuizQuestion;
switchState: string;
};
@ -40,13 +31,11 @@ export const ChooseAnswerModal = ({
open,
onClose,
anchorRef,
totalIndex,
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();
return (
@ -129,12 +118,8 @@ export const ChooseAnswerModal = ({
onClick={() => {
setOpenModal(false);
const question = { ...listQuestions[quizId][totalIndex] };
removeQuestionForce(quizId, question.id);
createQuestion(quizId, selectedValue, totalIndex);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: question.expanded,
updateQuestionWithFnOptimistic(question.id, question => {
question.type = selectedValue;
});
}}
>

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

@ -2,30 +2,28 @@ 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;
question: AnyQuizQuestion;
questionIndex: number;
questionData: QuizQuestionBase;
};
export default memo(
({ index, isDragging, questionData }: FormDraggableListItemProps) => {
({ question, questionIndex, questionData }: FormDraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const theme = useTheme();
return (
<Draggable draggableId={String(index)} index={index}>
<Draggable draggableId={String(questionIndex)} index={questionIndex}>
{(provided) => (
<ListItem
ref={provided.innerRef}
{...(index !== 0 ? provided.draggableProps : {})}
{...(questionIndex !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{questionData.deleted ? (
@ -50,7 +48,7 @@ export default memo(
</Typography>
<Typography
onClick={() => {
updateQuestionsList<QuizQuestionBase>(quizId, index, {
updateQuestionsList<QuizQuestionBase>(quizId, questionIndex, {
...questionData,
deleted: false,
});
@ -75,8 +73,9 @@ export default memo(
}}
>
<QuestionsPageCard
key={index}
key={questionIndex}
question={question}
questionIndex={questionIndex}
draggableProps={provided.dragHandleProps}
/>
</Box>

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 => {