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

feat: own field store logic

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-25 11:29:42 +03:00
parent edcdd2a9eb
commit 99bce26b52
4 changed files with 100 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Questions/OwnTextField/OwnTextField.tsx
View File

@ -1,19 +1,28 @@
import { useState } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { ChangeEvent } from "react";
interface Props {
totalIndex: number;
}
export default function OwnTextField({ 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);
};
return (
<>
<Box
@ -26,7 +35,15 @@ export default function OwnTextField({ totalIndex }: Props) {
gap: "20px",
}}
>
<CustomTextField placeholder={"Пример ответа"} text={""} />
<CustomTextField
placeholder={"Пример ответа"}
text={listQuestions[totalIndex].content.placeholder}
onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.placeholder = target.value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography
sx={{

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

@ -1,38 +1,76 @@
import {Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, useTheme} from "@mui/material";
import {
Box,
FormControl,
FormControlLabel,
Radio,
RadioGroup,
Typography,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { questionStore, updateQuestionsList } from "@root/questions";
import InfoIcon from "../../../assets/icons/InfoIcon";
import * as React from "react";
import type { QuestionType } from "@root/questions";
export default function SettingEmoji() {
const [value, setValue] = React.useState('1');
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value);
};
const theme = useTheme()
return (
<Box sx={{display: 'flex'}}>
<Box sx={{padding: '20px'}}>
<Typography>Настройки ответов</Typography>
<FormControl>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={value}
onChange={handleChangeRadio}
>
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio />} label="Односточное" />
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio />} label="Многострочное" />
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="3" control={<Radio />} label="Только числа" />
</RadioGroup>
</FormControl>
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Автозаполнение адреса'}/>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
);
};
type SettingTextFieldProps = {
totalIndex: number;
};
type Answer = {
name: string;
value: QuestionType;
};
const ANSWER_TYPES: Answer[] = [
{ name: "Односточное", value: "single" },
{ name: "Многострочное", value: "multi" },
{ name: "Только числа", value: "number" },
];
export default function SettingTextField({
totalIndex,
}: SettingTextFieldProps) {
const { listQuestions } = questionStore();
const theme = useTheme();
return (
<Box sx={{ display: "flex" }}>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки ответов</Typography>
<FormControl>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex(
({ value }) => value === listQuestions[totalIndex].content.type
)}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = listQuestions[totalIndex].content;
clonContent.type = ANSWER_TYPES[Number(target.value)].value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
>
{ANSWER_TYPES.map(({ name }, index) => (
<FormControlLabel
key={index}
sx={{ color: theme.palette.grey2.main }}
value={index}
control={<Radio />}
label={name}
/>
))}
</RadioGroup>
</FormControl>
</Box>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={"Автозаполнение адреса"} />
<CustomCheckbox label={"Необязательный вопрос"} />
<CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
</Box>
</Box>
);
}

2
src/pages/Questions/OwnTextField/switchTextField.tsx
View File

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

6
src/stores/questions.ts
View File

@ -7,6 +7,8 @@ export type Variants = {
hints: string;
};
export type QuestionType = "single" | "multi" | "number";
type Hint = {
text: string;
video: string;
@ -40,6 +42,8 @@ export interface Question {
own: boolean;
innerName: string;
back: string;
placeholder: string;
type: QuestionType;
};
version: number;
parent_ids: number[];
@ -102,6 +106,8 @@ export const createQuestion = (id: number) => {
own: false,
innerName: "",
back: "",
placeholder: "",
type: "single",
variants: [
{
answer: "",