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

стор для вопросов+ настройка создания плашек с вопросами

Browse Source
This commit is contained in:
Tamara 2023-06-29 02:32:43 +03:00
parent 9ded351c1d
commit ab76d2e9f0
8 changed files with 167 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/Questions/QuestionPageCard.tsx Normal file
View File

@ -0,0 +1,39 @@
import {Box, IconButton, Paper} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import OneIcon from "@icons/questionsPage/OneIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import TypeQuestions from "./TypeQuestions";
import SwitchQuestionsPage from "./SwitchQuestionsPage";
import React from "react";
interface Props {
switchState: string;
SSHC: (data: string) => void;
}
export default function QuestionsPageCard({ SSHC, switchState }: Props) {
return (
<Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
<Box
sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
>
<CustomTextField placeholder="Заголовок вопроса" text={""} />
<IconButton>
{" "}
<ExpandMoreIcon />{" "}
</IconButton>
<OneIcon />
<PointsIcon />
</Box>
<Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
{switchState.length === 0 ?
<TypeQuestions switchState={switchState} SSHC={SSHC}/>
:
<SwitchQuestionsPage switchState={switchState}/>}
</Box>
</Paper>
)
}

73
src/pages/Questions/QuestionsPage.tsx
View File

@ -1,36 +1,28 @@
import React from "react";
import Stepper from "@ui_kit/Stepper";
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../assets/icons/questionsPage/OneIcon";
import PointsIcon from "../../assets/icons/questionsPage/PointsIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
import Emoji from "./Emoji/Emoji";
import OwnTextField from "./OwnTextField/OwnTextField";
import DropDown from "./DropDown/DropDown";
import DataOptions from "./DataOptions/DataOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import UploadFile from "./UploadFile/UploadFile";
import PageOptions from "./PageOptions/PageOptions";
import RatingOptions from "./RatingOptions/RatingOptions";
import SwitchQuestionsPage from "./SwitchQuestionsPage";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import QuestionsPageCard from "./QuestionPageCard";
import {questionStore} from "@root/questions";
import QuizCard from "../createQuize/QuizCard";
export default function QuestionsPage() {
const [activeStep, setActiveStep] = React.useState(1);
const {listQuizes, updateQuizesList} = quizStore();
const params = Number(useParams().quizId);
const {listQuestions, updateQuestionsList, removeQuestion, createBlankQuestions} = questionStore()
const activeStep = listQuizes[params].step
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1})
}
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleBack = () => {
let result = listQuizes[params].step - 1
updateQuizesList(params, {step: result ? result : 1})
};
const [switchState, setSwitchState] = React.useState('');
const SSHC = (data: string) => {
@ -51,32 +43,19 @@ export default function QuestionsPage() {
}}>Свернуть всё</Link>
</Box>
<Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
<Box
sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
>
<CustomTextField placeholder="Заголовок вопроса" text={""} />
<IconButton>
{" "}
<ExpandMoreIcon />{" "}
</IconButton>
<OneIcon />
<PointsIcon />
</Box>
{Object.values(listQuestions).map((e, i) => (
<QuestionsPageCard switchState={switchState} SSHC={SSHC}/>
)
)}
<Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
{switchState.length === 0 ?
<TypeQuestions switchState={switchState} SSHC={SSHC}/>
:
<SwitchQuestionsPage switchState={switchState}/>}
</Box>
</Paper>
{/*<Paper sx={{maxWidth: "796px", width: "100%", display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px", marginBottom: "20px" }}>*/}
{/* */}
{/*</Paper>*/}
<Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
<IconButton>
<IconButton
onClick={() => {createBlankQuestions()
console.log(listQuestions)
}}
>
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px" }}>

2
src/pages/startPage/StartPage.tsx
View File

@ -24,7 +24,7 @@ export default function StartPage() {
const handleBack = () => {
let result = listQuizes[params].step - 1
updateQuizesList(params, {step: result ? result : 0})
updateQuizesList(params, {step: result ? result : 1})
};
return (

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

@ -4,7 +4,6 @@ import {
ButtonBase,
Checkbox,
FormControl, FormControlLabel,
Link,
MenuItem,
Select,
Typography,
@ -34,6 +33,10 @@ import Extra from "./extra";
import AlignCenterIcon from "@icons/AlignCenterIcon";
import DropFav from "./dropfavicon";
interface HandleNext {
handleNext: () => void;
}
const designTypes = [
["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
@ -44,7 +47,7 @@ const designTypes = [
type BackgroundType = "image" | "video";
type AlignType = "left" | "right" | "center";
export default function StartPageSettings() {
export default function StartPageSettings({ handleNext }: HandleNext) {
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
const params = Number(useParams().quizId);
const navigate = useNavigate()
@ -439,6 +442,7 @@ export default function StartPageSettings() {
SPageClone.startpage.background.mobile = "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png"
SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ"
updateQuizesList(params, {config: SPageClone })
handleNext()
navigate(`/questions/${params}`)
}}
>Настроить вопросы</Button>

8
src/pages/startPage/switchStepPages.tsx
View File

@ -11,14 +11,14 @@ interface Props {
export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
switch (activeStep) {
case 0:
case 1:
return (<StepOne handleNext={handleNext}/>);
break;
case 1:
case 2:
return (<Steptwo handleNext={handleNext}/>);
break
case 2:
return (<StartPageSettings/>);
case 3:
return (<StartPageSettings handleNext={handleNext}/>);
break;
default:
return (<></>)

72
src/stores/questions.ts Normal file
View File

@ -0,0 +1,72 @@
import {create} from "zustand";
import {persist} from "zustand/middleware";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
interface QuestionStore {
listQuestions: { [key: number]: any};
updateQuestionsList: (id: number, values: unknown) => void;
removeQuestion: (id: number) => void;
createBlankQuestions: () => void;
}
export const questionStore = create<QuestionStore>()(
persist(
(set, get) => ({
listQuestions: {
},
updateQuestionsList: (id: number, values: any) => {
const state = get()["listQuestions"] || {};
state[id] = {
...state[id],
...values
};
set({listQuestions: state});
},
removeQuestion: (id) => {
const state = get()["listQuestions"] || {};
const newState = Object.entries(state).reduce<any>((accumulator, [key, value], index, array) => {
if (key !== id.toString()) {
accumulator[key] = value;
}
return accumulator;
}, {});
set({listQuestions: newState});
},
createBlankQuestions: () => {
const newListQuestions = get()["listQuestions"] || {};
const id = getRandom(1000000, 10000000)
newListQuestions[id] = {
"id": id,
//"quiz_id": listQuizes.id, // id опроса, к которому вопрос принадлежит
"title": "", // заголовок вопроса
"description": "", // развёрнутое описание вопроса
"type": "", // button, text, select, checkbox, file, none
"required": true,
"deleted": true,
"page": 0,
"content": "",
"version": 0,
"parent_ids": [
0
],
"created_at": "",
"updated_at": ""
};
set({listQuestions: newListQuestions});
return id;
}
}),
{
name: "question",
}
)
);
function getRandom(min: number, max: number) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}

18
src/ui_kit/Header/Header.tsx
View File

@ -4,11 +4,25 @@ import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
export default function Header() {
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
const params = Number(useParams().quizId);
const activeStep = listQuizes[params].step
const theme = useTheme();
const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1})
}
const handleBack = () => {
let result = listQuizes[params].step - 1
updateQuizesList(params, {step: result ? result : 0})
};
return (
<Container
component="nav"
@ -32,7 +46,9 @@ export default function Header() {
ml: "37px",
}}
>
<IconButton sx={{ p: "6px" }}>
<IconButton sx={{ p: "6px" }}
onClick={() => handleBack()}
>
<BackArrowIcon />
</IconButton>
<FormControl

4
src/ui_kit/Stepper.tsx
View File

@ -7,7 +7,7 @@ interface Props {
steps?: number;
}
export default function ProgressMobileStepper({desc, activeStep = 0, steps = 6}:Props) {
export default function ProgressMobileStepper({desc, activeStep = 1, steps = 7}:Props) {
return (
<Box
@ -47,7 +47,7 @@ export default function ProgressMobileStepper({desc, activeStep = 0, steps = 6}:
<Box sx={{padding: '3px 3px 3px 20px'}}>
<Typography sx={{fontWeight:400,
fontSize: '12px',
lineHeight: '14.22px'}}> Шаг {activeStep + 1} из {steps}</Typography>
lineHeight: '14.22px'}}> Шаг {activeStep} из {steps-1}</Typography>
<Typography>{desc}</Typography>
</Box>
</Box>