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

feat: updates from brunch dev

Browse Source
This commit is contained in:
IlyaDoronin 2023-09-05 09:52:05 +03:00
commit 2a8dda2670
20 changed files with 349 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx → src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

23
src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useState, useEffect } from "react";
import { Droppable } from "react-beautiful-dnd";
import type { DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
const [enabled, setEnabled] = useState(false);
useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
setEnabled(false);
cancelAnimationFrame(animation);
};
}, []);
if (!enabled) {
return null;
}
return <Droppable {...props}>{children}</Droppable>;
};

0
src/pages/Questions/answerOptions/AnswerDraggableList/helper.ts → src/pages/Questions/AnswerDraggableList/helper.ts
View File

0
src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx → src/pages/Questions/AnswerDraggableList/index.tsx
View File

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

@ -10,7 +10,6 @@ import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import { useParams } from "react-router-dom";
import { questionStore, removeQuestion, resetSomeField } from "@root/questions";
import { branchStore } from "@root/branches";
import "./ButtonsOptionsAndPict.css";
@ -27,7 +26,6 @@ export default function ButtonsOptionsAndPict({
}: Props) {
const params = Number(useParams().quizId);
const { openedModalSettings } = questionStore();
const { branch } = branchStore();
const theme = useTheme();
const openedModal = () => {

49
src/pages/Questions/DropDown/DropDown.tsx
View File

@ -1,5 +1,9 @@
import { useState } from "react";
import { Box, Typography, Link, useTheme } from "@mui/material";
import React from "react";
import { AnswerDraggableList } from "../AnswerDraggableList";
import { questionStore, updateQuestionsList } from "@root/questions";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchDropDown from "./switchDropDown";
import ButtonsOptions from "../ButtonsOptions";
@ -9,35 +13,48 @@ interface Props {
}
export default function DropDown({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState("setting");
const { listQuestions } = questionStore();
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const variants = listQuestions[totalIndex].content.variants;
const SSHC = (data: string) => {
setSwitchState(data);
};
const addNewAnswer = () => {
const answerNew = variants.slice();
answerNew.push({ answer: "", answerLong: "", hints: "" });
updateQuestionsList(totalIndex, {
content: { ...listQuestions[totalIndex].content, variants: answerNew },
});
};
return (
<>
<Box sx={{ padding: "20px" }}>
<Typography
sx={{
padding: "0 0 33px 80px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
{variants.length === 0 ? (
<Typography
sx={{
padding: "0 0 33px 80px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
) : (
<AnswerDraggableList variants={variants} totalIndex={totalIndex} />
)}
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
// onClick={() => {
// console.info("I'm a button.");
// }}
onClick={addNewAnswer}
>
Добавьте ответ
</Link>

64
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -1,25 +1,49 @@
import {Box, Typography} from "@mui/material";
import { Box, Typography } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
export default function SettingDropDown() {
return(
<>
<Box sx={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
<Box sx={{padding: '20px', width: '100%'}}>
<Typography sx={{marginBottom: '15px'}}>Настройки ответов</Typography>
<CustomCheckbox label={'Можно несколько'}/>
type SettingDropDownProps = {
totalIndex: number;
};
<Typography sx={{marginBottom: '15px'}}>Текст в выпадающем списке</Typography>
<CustomTextField placeholder={'Выберите вариант'} text={''}/>
</Box>
<Box sx={{padding: '20px'}}>
<Typography sx={{marginBottom: '15px'}}>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
</>
)
}
export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
const { listQuestions } = questionStore();
return (
<>
<Box
sx={{ display: "flex", width: "100%", justifyContent: "space-between" }}
>
<Box sx={{ padding: "20px", width: "100%" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки ответов
</Typography>
<CustomCheckbox label={"Можно несколько"} />
<Typography sx={{ marginBottom: "15px" }}>
Текст в выпадающем списке
</Typography>
<CustomTextField
placeholder={"Выберите вариант"}
text={listQuestions[totalIndex].content.default}
onChange={({ target }) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.default = target.value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
</Box>
<Box sx={{ padding: "20px" }}>
<Typography sx={{ marginBottom: "15px" }}>
Настройки вопросов
</Typography>
<CustomCheckbox label={"Необязательный вопрос"} />
<CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
</Box>
</Box>
</>
);
}

2
src/pages/Questions/DropDown/switchDropDown.tsx
View File

@ -14,7 +14,7 @@ export default function SwitchDropDown({
}: Props) {
switch (switchState) {
case "setting":
return <SettingDropDown />;
return <SettingDropDown totalIndex={totalIndex} />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;

42
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -1,36 +1,48 @@
import { Box, Link, Typography, useTheme } from "@mui/material";
import React from "react";
import { useState } from "react";
import { Box, Link, Typography, Button, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import { questionStore, updateQuestionsList } from "@root/questions";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import AddImage from "../../../assets/icons/questionsPage/addImage";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptionsPict from "./switchOptionsPict";
import type { ChangeEvent } from "react";
interface Props {
totalIndex: number;
}
export default function OptionsPicture({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
// const [addInput, setAddInput] = React.useState([
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
// ]);
const [switchState, setSwitchState] = useState("setting");
const { listQuestions } = questionStore();
const SSHC = (data: string) => {
setSwitchState(data);
};
// const createCondition = (name) => {
// addInput([...state, {name: name}])
// }
//
// const deleteCondition = (index) => {
//
// }
const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => {
if (target.files?.length) {
const clonContent = listQuestions[totalIndex].content;
clonContent.images.push(URL.createObjectURL(target.files[0]));
updateQuestionsList(totalIndex, { content: clonContent });
}
};
return (
<>
<Box sx={{ padding: "20px" }}>
<Box
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<AddImage />
<Button component="label" sx={{ padding: "0px" }}>
<AddImage />
<input type="file" hidden onChange={addImage} />
</Button>
<Typography
sx={{
padding: "0 0 0 20px",

137
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -1,7 +1,10 @@
import {Box, Button, Typography, useTheme} from "@mui/material";
import { useEffect } from "react";
import { Box, Button, Typography, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
import { useState } from "react";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
@ -14,18 +17,38 @@ interface Props {
onClick: () => void;
}
type SettingOpytionsPictProps = {
totalIndex: number;
};
const PROPORTIONS = [
{ value: "1:1", icon: ProportionsIcon11 },
{ value: "2:1", icon: ProportionsIcon21 },
{ value: "1:2", icon: ProportionsIcon12 },
];
export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
const theme = useTheme();
return (
<Button
onClick={onClick}
variant="outlined"
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
startIcon={
<Icon
color={
isActive
? theme.palette.navbarbg.main
: theme.palette.brightPurple.main
}
/>
}
sx={{
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
borderRadius: 0,
border: "none",
color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
color: isActive
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
p: "7px",
width: "auto",
minWidth: 0,
@ -35,19 +58,31 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
},
"&:hover": {
border: "none",
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
borderColor: isActive
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
},
}}
/>
);
}
type Proportions = "oneOne" | "twoOne" | "oneTwo";
type AlignType = "left" | "right";
export default function SettingOpytionsPict({
totalIndex,
}: SettingOpytionsPictProps) {
const { listQuestions } = questionStore();
export default function SettingOpytionsPict() {
const [proportions, setProportions] = useState<Proportions>("oneOne");
const [alignType, setAlignType] = useState<AlignType>("left");
useEffect(() => {
if (!listQuestions[totalIndex].content.xy) {
updateProportions("1:1");
}
}, []);
const updateProportions = (proportions: string) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.xy = proportions;
updateQuestionsList(totalIndex, { content: clonContent });
};
return (
<>
@ -61,25 +96,43 @@ export default function SettingOpytionsPict() {
marginBottom: "20px",
}}
>
<SelectIconButton
onClick={() => setProportions("oneOne")}
isActive={proportions === "oneOne"}
Icon={ProportionsIcon11}
/>
<SelectIconButton
onClick={() => setProportions("twoOne")}
isActive={proportions === "twoOne"}
Icon={ProportionsIcon21}
/>
<SelectIconButton
onClick={() => setProportions("oneTwo")}
isActive={proportions === "oneTwo"}
Icon={ProportionsIcon12}
/>
{PROPORTIONS.map(({ value, icon }, index) => (
<SelectIconButton
key={index}
onClick={() => updateProportions(value)}
isActive={listQuestions[totalIndex].content.xy === value}
Icon={icon}
/>
))}
</Box>
<Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
<CustomCheckbox label={"Можно несколько"} />
<CustomCheckbox label={"Большие картинки"} />
<Typography sx={{ marginBottom: "15px" }}>
Настройки ответов
</Typography>
<CustomCheckbox
label={"Можно несколько"}
checked={listQuestions[totalIndex].content.multi}
handleChange={() =>
updateQuestionsList(totalIndex, {
content: {
...listQuestions[totalIndex].content,
multi: !listQuestions[totalIndex].content.multi,
},
})
}
/>
<CustomCheckbox
label={"Большие картинки"}
checked={listQuestions[totalIndex].content.large}
handleChange={() =>
updateQuestionsList(totalIndex, {
content: {
...listQuestions[totalIndex].content,
large: !listQuestions[totalIndex].content.large,
},
})
}
/>
<CustomCheckbox label={'Вариант "свой ответ"'} />
</Box>
<Box sx={{ padding: "20px" }}>
@ -91,14 +144,34 @@ export default function SettingOpytionsPict() {
marginBottom: "20px",
}}
>
<SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
<SelectIconButton
onClick={() => setAlignType("right")}
isActive={alignType === "right"}
onClick={() =>
updateQuestionsList(totalIndex, {
content: {
...listQuestions[totalIndex].content,
format: "carousel",
},
})
}
isActive={listQuestions[totalIndex].content.format === "carousel"}
Icon={FormatIcon2}
/>
<SelectIconButton
onClick={() =>
updateQuestionsList(totalIndex, {
content: {
...listQuestions[totalIndex].content,
format: "masonry",
},
})
}
isActive={listQuestions[totalIndex].content.format === "masonry"}
Icon={FormatIcon1}
/>
</Box>
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
<Typography sx={{ marginBottom: "15px" }}>
Настройки вопросов
</Typography>
<CustomCheckbox label={"Необязательный вопрос"} />
<CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
</Box>

4
src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
View File

@ -14,13 +14,13 @@ export default function SwitchAnswerOptionsPict({
}: Props) {
switch (switchState) {
case "setting":
return <SettingOpytionsPict />;
return <SettingOpytionsPict totalIndex={totalIndex} />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions totalIndex={totalIndex}/>;
return <BranchingQuestions totalIndex={totalIndex} />;
break;
default:
return <></>;

16
src/pages/Questions/OwnTextField/settingTextField.tsx
View File

@ -13,15 +13,13 @@ import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuestionType } from "@root/questions";
type SettingTextFieldProps = {
totalIndex: number;
};
type Answer = {
name: string;
value: QuestionType;
value: "single" | "multi" | "number";
};
const ANSWER_TYPES: Answer[] = [
@ -45,11 +43,17 @@ export default function SettingTextField({
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex(
({ value }) => value === listQuestions[totalIndex].content.type
({ value }) => listQuestions[totalIndex].content[value]
)}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.type = ANSWER_TYPES[Number(target.value)].value;
const clonContent = {
...listQuestions[totalIndex].content,
single: false,
multi: false,
number: false,
[ANSWER_TYPES[Number(target.value)].value]: true,
};
updateQuestionsList(totalIndex, { content: clonContent });
}}
>

53
src/pages/Questions/UploadFile/UploadFile.tsx
View File

@ -1,3 +1,4 @@
import { useState, useEffect } from "react";
import {
Box,
FormControl,
@ -8,7 +9,9 @@ import {
useTheme,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React, { useState } from "react";
import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import SwitchUpload from "./switchUpload";
@ -17,25 +20,41 @@ interface Props {
totalIndex: number;
}
const DESIGN_TYPES = [
{ name: "Все типы файлов", value: "all" },
{ name: "Изображения", value: "picture" },
{ name: "Видео", value: "video" },
{ name: "Аудио", value: "audio" },
{ name: "Документ", value: "document" },
];
export default function UploadFile({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState("setting");
const { listQuestions } = questionStore();
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
const designTypes = [
["Все типы файлов"],
["Изображения"],
["Видео"],
["Аудио"],
["Документ"],
];
const [designType, setDesignType] = useState(designTypes[0][0]);
const handleChange = (event: SelectChangeEvent) => {
setDesignType(event.target.value);
const handleChange = ({ target }: SelectChangeEvent) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.type = target.value;
updateQuestionsList(totalIndex, { content: clonContent });
};
useEffect(() => {
const isTypeSetted = DESIGN_TYPES.find(
({ value }) => value === listQuestions[totalIndex].content.type
);
if (!isTypeSetted) {
const clonContent = listQuestions[totalIndex].content;
clonContent.type = DESIGN_TYPES[0].value;
updateQuestionsList(totalIndex, { content: clonContent });
}
}, []);
return (
<>
<Box
@ -61,7 +80,7 @@ export default function UploadFile({ totalIndex }: Props) {
<Select
id="category-select"
variant="outlined"
value={designType}
value={listQuestions[totalIndex].content.type}
displayEmpty
onChange={handleChange}
sx={{
@ -105,10 +124,10 @@ export default function UploadFile({ totalIndex }: Props) {
}}
IconComponent={(props) => <ArrowDown {...props} />}
>
{designTypes.map((type) => (
{DESIGN_TYPES.map(({ name, value }) => (
<MenuItem
key={type[0]}
value={type[0]}
key={value}
value={value}
sx={{
display: "flex",
alignItems: "center",
@ -118,7 +137,7 @@ export default function UploadFile({ totalIndex }: Props) {
color: theme.palette.grey2.main,
}}
>
{type[0]}
{name}
</MenuItem>
))}
</Select>

38
src/pages/Questions/UploadFile/settingUpload.tsx
View File

@ -1,15 +1,31 @@
import {Box, Typography} from "@mui/material";
import { Box, Typography } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
type SettingsUploadProps = {
totalIndex: number;
};
export default function SettingsUpload() {
return (
<Box sx={{display: 'flex', flexDirection: 'column', padding: '20px'}}>
<Typography>Настройки вопроса</Typography>
<CustomCheckbox label={'Автозаполнение адреса'}/>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
);
};
export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
const { listQuestions } = questionStore();
return (
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px" }}>
<Typography>Настройки вопроса</Typography>
<CustomCheckbox
label={"Автозаполнение адреса"}
checked={listQuestions[totalIndex].content.autofill}
handleChange={({ target }) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.autofill = target.checked;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
<CustomCheckbox label={"Необязательный вопрос"} />
<CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
</Box>
);
}

4
src/pages/Questions/UploadFile/switchUpload.tsx
View File

@ -14,13 +14,13 @@ export default function SwitchUpload({
}: Props) {
switch (switchState) {
case "setting":
return <SettingsUpload />;
return <SettingsUpload totalIndex={totalIndex} />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions totalIndex={totalIndex}/>;
return <BranchingQuestions totalIndex={totalIndex} />;
break;
default:
return <></>;

2
src/pages/Questions/answerOptions/AnswerOptions.tsx
View File

@ -2,7 +2,7 @@ import { useState } from "react";
import { Box, Typography, Link, useTheme } from "@mui/material";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions";
import { AnswerDraggableList } from "./AnswerDraggableList";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import { questionStore, updateQuestionsList } from "@root/questions";

28
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -1,23 +1,31 @@
import { useState, useEffect } from "react";
import { Box, Typography } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import * as React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import { useParams } from "react-router-dom";
import { questionStore, updateQuestionsList } from "@root/questions";
import type { ChangeEvent } from "react";
interface Props {
totalIndex: number;
}
export default function ResponseSettings({ totalIndex }: Props) {
const params = Number(useParams().quizId);
const [checked, setChecked] = useState(false);
const { listQuestions } = questionStore();
const [checked, setChecked] = React.useState([true, false]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked([checked[0], event.target.checked]);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
};
useEffect(() => {
if (listQuestions[totalIndex].content.innerName.length) {
setChecked(true);
}
}, []);
return (
<Box sx={{ display: "flex" }}>
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
@ -62,18 +70,18 @@ export default function ResponseSettings({ totalIndex }: Props) {
<Box sx={{ display: "flex" }}>
<CustomCheckbox
label={"Внутреннее название вопроса"}
checked={checked[1]}
checked={checked}
handleChange={handleChange}
/>{" "}
<InfoIcon />
</Box>
{checked[1] && (
{checked && (
<CustomTextField
placeholder={"Развёрнутое описание вопроса"}
text={listQuestions[totalIndex].description}
onChange={(e) => {
text={listQuestions[totalIndex].content.innerName}
onChange={({ target }) => {
let clonContent = listQuestions[totalIndex].content;
clonContent.innerName = e.target.value;
clonContent.innerName = target.value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>

26
src/pages/Questions/branchingQuestions.tsx
View File

@ -1,4 +1,3 @@
import { useEffect } from "react";
import {
Box,
Button,
@ -18,7 +17,6 @@ import {
resetSomeField,
updateQuestionsList,
} from "@root/questions";
import { branchStore, updateBranchState } from "@root/branches";
import { Select } from "./Select";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
@ -42,20 +40,8 @@ export default function BranchingQuestions({
totalIndex,
}: BranchingQuestionsProps) {
const { openedModalSettings, listQuestions } = questionStore();
const { branch } = branchStore();
const theme = useTheme();
useEffect(() => {
updateBranchState({
action: listQuestions[totalIndex].content.rule.show
? ACTIONS[0]
: ACTIONS[1],
condition: listQuestions[totalIndex].content.rule.or
? CONDITIONS[0]
: CONDITIONS[1],
});
}, []);
const handleClose = () => {
resetSomeField({ openedModalSettings: "" });
};
@ -120,7 +106,6 @@ export default function BranchingQuestions({
const clonContent = listQuestions[totalIndex].content;
clonContent.rule.show = action === ACTIONS[0];
updateQuestionsList(totalIndex, { content: clonContent });
updateBranchState({ action });
}}
/>
<Typography sx={{ color: theme.palette.grey2.main }}>
@ -165,7 +150,7 @@ export default function BranchingQuestions({
</Box>
<Select
empty
activeItemIndex={Number(request.id) || -1}
activeItemIndex={request.id ? Number(request.id) : -1}
items={STIPULATIONS}
onChange={(stipulation) => {
const clonContent = listQuestions[totalIndex].content;
@ -180,7 +165,6 @@ export default function BranchingQuestions({
};
updateQuestionsList(totalIndex, { content: clonContent });
updateBranchState({ stipulation });
}}
sx={{ marginBottom: "15px" }}
/>
@ -225,7 +209,6 @@ export default function BranchingQuestions({
updateQuestionsList(totalIndex, {
content: clonContent,
});
updateBranchState({ answer });
}}
sx={{
marginBottom: "10px",
@ -295,14 +278,13 @@ export default function BranchingQuestions({
<FormControl>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
defaultValue={branch.condition === CONDITIONS[0] ? 0 : 1}
defaultValue={
listQuestions[totalIndex].content.rule.or ? 0 : 1
}
onChange={({ target }) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.rule.or = target.value === CONDITIONS[0];
updateQuestionsList(totalIndex, { content: clonContent });
updateBranchState({
condition: CONDITIONS[Number(target.value)],
});
}}
>
{CONDITIONS.map((condition, index) => (

27
src/stores/branches.ts
View File

@ -1,27 +0,0 @@
import { create } from "zustand";
export type Branch = {
action: string;
stipulation: string;
answer: string;
condition: string;
};
interface BranchStore {
branch: Branch;
}
export const branchStore = create<BranchStore>()(() => ({
branch: {
action: "",
stipulation: "",
answer: "",
condition: "",
},
}));
export const updateBranchState = (data: Partial<Branch>) => {
const state = { ...branchStore.getState().branch };
branchStore.setState({ branch: { ...state, ...data } });
};

20
src/stores/questions.ts
View File

@ -7,8 +7,6 @@ export type Variants = {
hints: string;
};
export type QuestionType = "single" | "multi" | "number";
type Hint = {
text: string;
video: string;
@ -37,13 +35,20 @@ export interface Question {
variants: Variants[];
hint: Hint;
rule: Rule;
images: string[];
large: boolean;
multi: boolean;
own: boolean;
innerName: string;
back: string;
placeholder: string;
type: QuestionType;
type: string;
autofill: boolean;
default: string;
single: boolean;
number: boolean;
xy: string;
format: "carousel" | "masonry";
};
version: number;
parent_ids: number[];
@ -107,7 +112,14 @@ export const createQuestion = (id: number) => {
innerName: "",
back: "",
placeholder: "",
type: "single",
type: "all",
autofill: true,
default: "",
images: [],
number: false,
single: false,
xy: "",
format: "carousel",
variants: [
{
answer: "",