к кнопке назад добавлена возможность делать это, и вохранять шаг степера в стор
This commit is contained in:
Tamara
parent
3334a26244
commit
3d478b042a
@ -26,7 +26,6 @@ const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: bo
|
||||
{path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
|
||||
{path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
|
||||
{path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
|
||||
{path: "/create-quize/:quizId", page: <StartPage/>, header: true, sidebar: true},
|
||||
{path: "/questions", page: <QuestionsPage/>, header: true, sidebar: true},
|
||||
{path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
|
||||
{path: "/result", page: <Result/>, header: true, sidebar: true},
|
||||
@ -42,6 +41,7 @@ root.render(
|
||||
{routeslink.map((e,i) =>(
|
||||
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} />
|
||||
))}
|
||||
<Route path="/create-quize/:quizId" element={<StartPage/>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -6,7 +6,7 @@ import HeaderFull from "@ui_kit/Header/HeaderFull";
|
||||
|
||||
interface Props{
|
||||
sidebar: boolean,
|
||||
header: boolean,
|
||||
header?: boolean,
|
||||
page: JSX.Element
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,159 @@
|
||||
import Stepper from '@ui_kit/Stepper';
|
||||
import SwitchStepPages from "./switchStepPages";
|
||||
import React from "react";
|
||||
import PenaLogo from "@ui_kit/PenaLogo";
|
||||
import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material";
|
||||
import BackArrowIcon from "@icons/BackArrowIcon";
|
||||
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
|
||||
import EyeIcon from "@icons/EyeIcon";
|
||||
import CustomAvatar from "@ui_kit/Header/Avatar";
|
||||
import Sidebar from "@ui_kit/Sidebar";
|
||||
import {quizStore} from "@root/quizes";
|
||||
import {useParams} from "react-router-dom";
|
||||
|
||||
|
||||
export default function StartPage() {
|
||||
|
||||
const [activeStep, setActiveStep] = React.useState(1);
|
||||
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
|
||||
const params = Number(useParams().quizId);
|
||||
const activeStep = listQuizes[params].step
|
||||
const theme = useTheme();
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
};
|
||||
updateQuizesList(params, {step: listQuizes[params].step + 1})
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
let result = listQuizes[params].step - 1
|
||||
updateQuizesList(params, {step: result ? result : 1})
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/*хедер*/}
|
||||
<Container
|
||||
component="nav"
|
||||
maxWidth={false}
|
||||
disableGutters
|
||||
sx={{
|
||||
px: "16px",
|
||||
display: "flex",
|
||||
height: "80px",
|
||||
alignItems: "center",
|
||||
bgcolor: "white",
|
||||
borderBottom: "1px solid #E3E3E3",
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
}}
|
||||
>
|
||||
<PenaLogo width={124} />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
ml: "37px",
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ p: "6px" }}
|
||||
onClick={() => handleBack()}
|
||||
>
|
||||
<BackArrowIcon />
|
||||
</IconButton>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="project-name"
|
||||
placeholder="Название проекта окно"
|
||||
sx={{
|
||||
width: "270px",
|
||||
"& .MuiInputBase-root": {
|
||||
height: "34px",
|
||||
borderRadius: "8px",
|
||||
p: 0,
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
height: "20px",
|
||||
borderRadius: "8px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "20px",
|
||||
p: "7px",
|
||||
color: "black",
|
||||
"&::placeholder": {
|
||||
opacity: 1,
|
||||
},
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "30px",
|
||||
overflow: "hidden",
|
||||
ml: "20px",
|
||||
}}
|
||||
>
|
||||
<NavMenuItem text="Редактировать" isActive />
|
||||
<NavMenuItem text="Заявки" />
|
||||
<NavMenuItem text="Аналитика" />
|
||||
<NavMenuItem text="История" />
|
||||
<NavMenuItem text="Помощь" />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
ml: "auto",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<EyeIcon />}
|
||||
sx={{
|
||||
color: theme.palette.brightPurple.main,
|
||||
fontSize: "14px",
|
||||
lineHeight: "18px",
|
||||
height: "34px",
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: "3px",
|
||||
}
|
||||
}}
|
||||
>Предпросмотр</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
lineHeight: "18px",
|
||||
height: "34px",
|
||||
}}
|
||||
>Опубликовать</Button>
|
||||
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex'
|
||||
}}
|
||||
>
|
||||
<Sidebar/>
|
||||
<Box
|
||||
sx={{
|
||||
background: theme.palette.background.default,
|
||||
width: '100%',
|
||||
padding: '25px',
|
||||
height: 'calc(100vh - 80px)',
|
||||
overflow: 'auto',
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"}/>
|
||||
<SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -11,9 +11,11 @@ interface HandleNext {
|
||||
|
||||
export default function StepOne({ handleNext }: HandleNext) {
|
||||
const theme = useTheme();
|
||||
|
||||
const params = Number(useParams().quizId);
|
||||
console.log(params)
|
||||
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
|
||||
|
||||
const {listQuizes, updateQuizesList,} = quizStore()
|
||||
console.log(listQuizes)
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -3,12 +3,16 @@ import CardWithImage from "./CardWithImage";
|
||||
import cardImage1 from "../../assets/card-1.png";
|
||||
import cardImage2 from "../../assets/card-2.png";
|
||||
import cardImage3 from "../../assets/card-3.png";
|
||||
import {quizStore} from "@root/quizes";
|
||||
import {useParams} from "react-router-dom";
|
||||
|
||||
interface HandleNext {
|
||||
handleNext: () => void
|
||||
}
|
||||
|
||||
export default function Steptwo ({handleNext}:HandleNext) {
|
||||
const params = Number(useParams().quizId);
|
||||
const {listQuizes, updateQuizesList} = quizStore()
|
||||
return (
|
||||
<Box sx={{
|
||||
mt: "60px",
|
||||
@ -21,17 +25,23 @@ export default function Steptwo ({handleNext}:HandleNext) {
|
||||
mt: "40px",
|
||||
}}>
|
||||
<Button variant='text'
|
||||
onClick={() => handleNext()}
|
||||
onClick={() => {
|
||||
handleNext()
|
||||
}}
|
||||
>
|
||||
<CardWithImage image={cardImage1} text="Standart" />
|
||||
</Button>
|
||||
<Button variant='text'
|
||||
onClick={() => handleNext()}
|
||||
onClick={() => {
|
||||
handleNext()
|
||||
}}
|
||||
>
|
||||
<CardWithImage image={cardImage2} text="Expanded" />
|
||||
</Button>
|
||||
<Button variant='text'
|
||||
onClick={() => handleNext()}
|
||||
onClick={() => {
|
||||
handleNext()
|
||||
}}
|
||||
>
|
||||
<CardWithImage image={cardImage3} text="Centered" />
|
||||
</Button>
|
||||
|
||||
@ -34,7 +34,8 @@ interface Quizes {
|
||||
passed_count: number,
|
||||
average_time: number,
|
||||
super: true,
|
||||
group_id: number
|
||||
group_id: number,
|
||||
step: number
|
||||
}
|
||||
|
||||
export const quizStore = create<QuizStore>()(
|
||||
@ -118,7 +119,8 @@ export const quizStore = create<QuizStore>()(
|
||||
"passed_count": 0,
|
||||
"average_time": 0,
|
||||
"super": true,
|
||||
"group_id": 0
|
||||
"group_id": 0,
|
||||
"step": 1
|
||||
};
|
||||
set({listQuizes: newListQuizes});
|
||||
return id;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user