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

fix: drag & drop

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-12 18:51:39 +03:00
parent dd7f2621ac
commit 79b6442377
8 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/Questions/ButtonsOptions.tsx
View File

@ -23,6 +23,7 @@ import {
updateQuestionsList,
removeQuestion,
} from "@root/questions";
import { quizStore } from "@root/quizes";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
@ -36,23 +37,19 @@ interface Props {
SSHC: (data: string) => void;
totalIndex: number;
sx?: SxProps;
disableSettings?: boolean;
disableBranching?: boolean;
disableMiniButtons?: boolean;
}
export default function ButtonsOptions({
SSHC,
switchState,
totalIndex,
disableSettings = false,
disableBranching = false,
disableMiniButtons = false,
}: Props) {
const quizId = Number(useParams().quizId);
const { openedModalSettings, listQuestions } = questionStore();
const { listQuizes } = quizStore();
const [openedReallyChangingModal, setOpenedReallyChangingModal] =
useState<boolean>(false);
const quize = listQuizes[quizId];
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
useEffect(() => {
@ -132,7 +129,7 @@ export default function ButtonsOptions({
{buttonSetting.map(({ icon, title, value, myFunc }) => (
<Box key={value}>
{value === "branching" ? (
!disableBranching && (
quize.config.type === "quize" && (
<Tooltip
arrow
placement="right"
@ -196,8 +193,7 @@ export default function ButtonsOptions({
)
) : (
<>
{(value !== "setting" ||
(value === "setting" && !disableSettings)) && (
{value !== "setting" && quize.config.type === "quize" && (
<MiniButtonSetting
key={title}
onClick={() => {
@ -229,7 +225,7 @@ export default function ButtonsOptions({
)}
</Box>
))}
{!disableMiniButtons && (
{quize.config.type === "quize" && (
<>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}

10
src/pages/Questions/ButtonsOptionsAndPict.css
View File

@ -1,10 +0,0 @@
.MuiTooltip-popper > .MuiTooltip-tooltip {
background: #fff;
border-radius: 6px;
color: #9A9AAF;
box-shadow: 0px 8px 24px rgba(210, 208, 225, 0.4);
}
.MuiTooltip-popper > .MuiTooltip-tooltip .MuiTooltip-arrow::before {
background: #fff;
}

15
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -29,8 +29,6 @@ import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import "./ButtonsOptionsAndPict.css";
import type { QuizQuestionBase } from "../../model/questionTypes/shared";
interface Props {
@ -151,6 +149,19 @@ export default function ButtonsOptionsAndPict({
<Tooltip
arrow
placement="right"
componentsProps={{
tooltip: {
sx: {
background: "#fff",
borderRadius: "6px",
color: "#9A9AAF",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
"& .MuiTooltip-arrow": {
color: "#FFF",
},
},
},
}}
title={
<Box>
<Typography

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

@ -38,7 +38,7 @@ export default memo(
maxWidth: "800px",
display: "flex",
justifyContent: "center",
marginBottom: "40px",
marginTop: "30px",
gap: "5px",
}}
>

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

@ -14,6 +14,7 @@ import {
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce";
import CustomTextField from "@ui_kit/CustomTextField";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import FormTypeQuestions from "../FormTypeQuestions";
import SwitchQuestionsPage from "../../SwitchQuestionsPage";
@ -181,6 +182,10 @@ export default function QuestionsPageCard({
backgroundColor: "white",
border: "none",
boxShadow: "none",
marginBottom: "20px",
borderRadius: "0",
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
}}
>
<Box
@ -188,9 +193,25 @@ export default function QuestionsPageCard({
display: "flex",
flexDirection: "column",
padding: 0,
borderRadius: "12px",
}}
>
<CustomTextField
placeholder={`Заголовок ${totalIndex + 1} вопроса`}
text={question.title}
onChange={({ target }) => debounced(target.value)}
sx={{ margin: "20px", width: "auto" }}
InputProps={{
endAdornment: (
<>
<InputAdornment {...draggableProps} position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
</>
),
}}
/>
{question.type.length === 0 ? (
<FormTypeQuestions totalIndex={totalIndex} />
) : (

4
src/pages/Questions/Form/FormQuestionsPage.tsx
View File

@ -70,7 +70,9 @@ export default function FormQuestionsPage() {
boxShadow: "0px 10px 30px #e7e7e7",
borderRadius: "12px",
marginBottom: "40px",
border: "1px solid transparent",
borderTop: "1px solid transparent",
borderBottom: "1px solid transparent",
background: "#FFFFFF",
}}
>
<FormDraggableList />

19
src/pages/Questions/Form/FormTypeQuestions.tsx
View File

@ -1,10 +1,12 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import { useDebouncedCallback } from "use-debounce";
import { Box } from "@mui/material";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import CustomTextField from "@ui_kit/CustomTextField";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
import Answer from "../../../assets/icons/questionsPage/answer";
import OptionsPict from "../../../assets/icons/questionsPage/options_pict";
@ -99,22 +101,25 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
];
export default function FormTypeQuestions({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState("setting");
const [switchState, setSwitchState] = useState("");
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
const debounced = useDebouncedCallback((title) => {
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
}, 1000);
console.log("listQuestions[quizId]", listQuestions[quizId]);
return (
<Box sx={{ paddingTop: "20px" }}>
<Box>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: "20px",
margin: "0 20px 20px",
margin: "20px",
}}
>
<CustomTextField placeholder="Заголовок 1 вопроса" text={""} />
{BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
<QuestionsMiniButton
key={title}
@ -137,10 +142,8 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
switchState={switchState}
SSHC={setSwitchState}
totalIndex={totalIndex}
disableSettings
disableBranching
disableMiniButtons
/>
<SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
</Box>
);
}

4
src/ui_kit/CustomTextField.tsx
View File

@ -7,6 +7,7 @@ import {
} from "@mui/material";
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
import type { InputProps } from "@mui/material";
interface CustomTextFieldProps {
placeholder: string;
@ -17,6 +18,7 @@ interface CustomTextFieldProps {
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
text?: string;
sx?: SxProps<Theme>;
InputProps?: Partial<InputProps>;
}
export default function CustomTextField({
@ -28,6 +30,7 @@ export default function CustomTextField({
onChange,
onKeyDown,
onBlur,
InputProps,
}: CustomTextFieldProps) {
const theme = useTheme();
@ -55,6 +58,7 @@ export default function CustomTextField({
},
...sx,
}}
InputProps={InputProps}
inputProps={{
sx: {
borderRadius: "10px",