выполнен функционал первых страниц квизов, плюс поправила визуал
This commit is contained in:
Tamara
parent
d6570ccae9
commit
4adfc5e3f5
@ -1,8 +1,17 @@
|
||||
import {Button, Typography, useTheme} from "@mui/material";
|
||||
import ComplexNavText from "./ComplexNavText";
|
||||
import SectionWrapper from "@ui_kit/SectionWrapper";
|
||||
import {quizStore} from "@root/quizes";
|
||||
|
||||
function getRandom(min: number, max:number) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
export default function FirstQuiz() {
|
||||
const {listQuizes, updateQuizesList, removeQuiz} = quizStore()
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
@ -22,7 +31,38 @@ export default function FirstQuiz() {
|
||||
Создайте свой первый квиз
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained">
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
updateQuizesList({
|
||||
"id": getRandom(10000, 100000),
|
||||
"qid": "string",
|
||||
"deleted": false,
|
||||
"archived": true,
|
||||
"fingerprinting": true,
|
||||
"repeatable": true,
|
||||
"note_prevented": true,
|
||||
"mail_notifications": true,
|
||||
"unique_answers": true,
|
||||
"name": "string",
|
||||
"description": "string",
|
||||
"config": "string",
|
||||
"status": "string",
|
||||
"limit": 0,
|
||||
"due_to": 0,
|
||||
"time_of_passing": 0,
|
||||
"pausable": true,
|
||||
"version": 0,
|
||||
"version_comment": "string",
|
||||
"created_at": "string",
|
||||
"updated_at": "string",
|
||||
"question_cnt": 0,
|
||||
"passed_count": 0,
|
||||
"average_time": 0,
|
||||
"super": true,
|
||||
"group_id": 0
|
||||
})
|
||||
}}
|
||||
>
|
||||
Создать +
|
||||
</Button>
|
||||
</SectionWrapper>
|
||||
|
||||
@ -4,90 +4,102 @@ import QuizCard from "./QuizCard";
|
||||
import SectionWrapper from "@ui_kit/SectionWrapper";
|
||||
import React from "react";
|
||||
import {quizStore} from "@root/quizes";
|
||||
import FirstQuiz from "./FirstQuiz";
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
function getRandom(min: number, max:number) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
|
||||
const {listQuizes, updateQuizesList, removeQuiz} = quizStore()
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: "25px",
|
||||
mb: "70px",
|
||||
}}
|
||||
>
|
||||
<Button onClick={() => {
|
||||
removeQuiz(2)
|
||||
console.log(Object.values(listQuizes))
|
||||
}}>УДАЛИ МЕНЯ</Button>
|
||||
<Button onClick={() => {
|
||||
console.log(Object.values(listQuizes))
|
||||
}}>Узнай МЕНЯ</Button>
|
||||
<Button onClick={() => {
|
||||
updateQuizesList({
|
||||
"id": 2,
|
||||
"qid": "string",
|
||||
"deleted": false,
|
||||
"archived": true,
|
||||
"fingerprinting": true,
|
||||
"repeatable": true,
|
||||
"note_prevented": true,
|
||||
"mail_notifications": true,
|
||||
"unique_answers": true,
|
||||
"name": "string",
|
||||
"description": "string",
|
||||
"config": "string",
|
||||
"status": "string",
|
||||
"limit": 0,
|
||||
"due_to": 0,
|
||||
"time_of_passing": 0,
|
||||
"pausable": true,
|
||||
"version": 0,
|
||||
"version_comment": "string",
|
||||
"created_at": "string",
|
||||
"updated_at": "string",
|
||||
"question_cnt": 0,
|
||||
"passed_count": 0,
|
||||
"average_time": 0,
|
||||
"super": true,
|
||||
"group_id": 0
|
||||
})
|
||||
}}>добавь МЕНЯ</Button>
|
||||
<ComplexNavText text1="Кабинет квизов"/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mt: "20px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Мои квизы</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
>Создать +</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
py: "10px",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "40px",
|
||||
mb: "60px",
|
||||
}}
|
||||
>
|
||||
{Object.values(listQuizes).map((e, i) =>(
|
||||
<QuizCard name={e.name} openCount={0} applicationCount={0} conversionPercent={0}/>
|
||||
)
|
||||
)}
|
||||
<>
|
||||
{Object.keys(listQuizes).length === 0 ?
|
||||
<FirstQuiz/> :
|
||||
|
||||
</Box>
|
||||
{children}
|
||||
</SectionWrapper>
|
||||
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
>
|
||||
<ComplexNavText text1="Кабинет квизов"/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mt: "20px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Мои квизы</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{padding: "10px 47px"}}
|
||||
onClick={() => {
|
||||
updateQuizesList({
|
||||
"id": getRandom(10000, 100000),
|
||||
"qid": "string",
|
||||
"deleted": false,
|
||||
"archived": true,
|
||||
"fingerprinting": true,
|
||||
"repeatable": true,
|
||||
"note_prevented": true,
|
||||
"mail_notifications": true,
|
||||
"unique_answers": true,
|
||||
"name": "string",
|
||||
"description": "string",
|
||||
"config": "string",
|
||||
"status": "string",
|
||||
"limit": 0,
|
||||
"due_to": 0,
|
||||
"time_of_passing": 0,
|
||||
"pausable": true,
|
||||
"version": 0,
|
||||
"version_comment": "string",
|
||||
"created_at": "string",
|
||||
"updated_at": "string",
|
||||
"question_cnt": 0,
|
||||
"passed_count": 0,
|
||||
"average_time": 0,
|
||||
"super": true,
|
||||
"group_id": 0
|
||||
})
|
||||
}}
|
||||
>Создать +</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
py: "10px",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "40px",
|
||||
mb: "60px",
|
||||
}}
|
||||
>
|
||||
{Object.values(listQuizes).map((e, i) =>(
|
||||
<QuizCard name={e.name}
|
||||
openCount={0}
|
||||
applicationCount={0}
|
||||
conversionPercent={0}
|
||||
onClickDelete={() => {
|
||||
removeQuiz(e.id)
|
||||
}}/>
|
||||
)
|
||||
)}
|
||||
|
||||
</Box>
|
||||
{children}
|
||||
</SectionWrapper>
|
||||
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,9 +10,10 @@ interface Props {
|
||||
openCount?: number;
|
||||
applicationCount?: number;
|
||||
conversionPercent?: number;
|
||||
onClickDelete?: () => void;
|
||||
}
|
||||
|
||||
export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0 }: Props) {
|
||||
export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0, onClickDelete }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
@ -25,6 +26,7 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
|
||||
height: "280px",
|
||||
p: "20px",
|
||||
borderRadius: "12px",
|
||||
boxSizing: "border-box",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
@ -75,7 +77,7 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
width: "140px",
|
||||
padding: "10px 39px"
|
||||
}}
|
||||
>
|
||||
Заявки
|
||||
@ -96,6 +98,8 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
|
||||
variant="outlined"
|
||||
startIcon={<ChartIcon />}
|
||||
sx={{
|
||||
minWidth: "46px",
|
||||
padding: "10px 10px",
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: 0,
|
||||
ml: 0,
|
||||
@ -107,6 +111,7 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
|
||||
color: theme.palette.brightPurple.main,
|
||||
ml: "auto",
|
||||
}}
|
||||
onClick={onClickDelete}
|
||||
>
|
||||
<MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
|
||||
</IconButton>
|
||||
|
||||
@ -40,34 +40,34 @@ export const quizStore = create<QuizStore>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
listQuizes: {
|
||||
1: {
|
||||
"id": 0,
|
||||
"qid": "string",
|
||||
"deleted": false,
|
||||
"archived": true,
|
||||
"fingerprinting": true,
|
||||
"repeatable": true,
|
||||
"note_prevented": true,
|
||||
"mail_notifications": true,
|
||||
"unique_answers": true,
|
||||
"name": "string",
|
||||
"description": "string",
|
||||
"config": "string",
|
||||
"status": "string",
|
||||
"limit": 0,
|
||||
"due_to": 0,
|
||||
"time_of_passing": 0,
|
||||
"pausable": true,
|
||||
"version": 0,
|
||||
"version_comment": "string",
|
||||
"created_at": "string",
|
||||
"updated_at": "string",
|
||||
"question_cnt": 0,
|
||||
"passed_count": 0,
|
||||
"average_time": 0,
|
||||
"super": true,
|
||||
"group_id": 0
|
||||
}
|
||||
// 1: {
|
||||
// "id": 0,
|
||||
// "qid": "string",
|
||||
// "deleted": false,
|
||||
// "archived": true,
|
||||
// "fingerprinting": true,
|
||||
// "repeatable": true,
|
||||
// "note_prevented": true,
|
||||
// "mail_notifications": true,
|
||||
// "unique_answers": true,
|
||||
// "name": "string",
|
||||
// "description": "string",
|
||||
// "config": "string",
|
||||
// "status": "string",
|
||||
// "limit": 0,
|
||||
// "due_to": 0,
|
||||
// "time_of_passing": 0,
|
||||
// "pausable": true,
|
||||
// "version": 0,
|
||||
// "version_comment": "string",
|
||||
// "created_at": "string",
|
||||
// "updated_at": "string",
|
||||
// "question_cnt": 0,
|
||||
// "passed_count": 0,
|
||||
// "average_time": 0,
|
||||
// "super": true,
|
||||
// "group_id": 0
|
||||
// }
|
||||
},
|
||||
updateQuizesList: (newQuiz) => {
|
||||
const state = get()["listQuizes"] || {};
|
||||
@ -93,4 +93,5 @@ export const quizStore = create<QuizStore>()(
|
||||
name: "quizes",
|
||||
}
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user