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

Компонент создания вопроса

Browse Source
This commit is contained in:
krokodilka 2022-07-04 15:59:17 +03:00
parent 4d5edbfafb
commit 85be16f551
9 changed files with 1281 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

946
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -6,6 +6,8 @@
"@babel/preset-typescript": "^7.17.12",
"@chakra-ui/icons": "^2.0.0",
"@chakra-ui/react": "^2.1.0",
"@ckeditor/ckeditor5-build-classic": "^34.1.0",
"@ckeditor/ckeditor5-react": "^5.0.2",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@testing-library/jest-dom": "^5.16.4",
@ -14,6 +16,7 @@
"@types/jest": "^27.5.1",
"@types/node": "^16.11.36",
"@types/react": "^18.0.9",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^18.0.4",
"axios": "^0.27.2",
"formik": "^2.2.9",
@ -22,11 +25,13 @@
"notistack": "^2.0.5",
"puppeteer": "^14.2.1",
"react": "^18.1.0",
"react-color": "^2.19.3",
"react-datepicker": "^4.8.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-time-picker": "^4.5.0",
"suneditor-react": "^3.4.0",
"ts-jest": "^28.0.3",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"

121
src/create/createQuestion.tsx Normal file
View File

@ -0,0 +1,121 @@
import React from 'react';
import { useField, Form, FormikProps, Formik } from 'formik';
import {
Input, Select, Textarea, VStack, Checkbox, Box, Text, Divider, Button, useNumberInput,
} from '@chakra-ui/react'
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
import Description from "./description";
import Settings from "./settings";
interface Values {
title: string;
lastName: string;
text: string;
desc: string;
}
const types = [
{desc:"текст", value:"text"},
{desc:"селект", value:"select"},
{desc:"чекбокс", value:"checkbox"},
{desc:"файл", value:"file"},
{desc:"кнопка", value:"button"},
{desc:"ничего", value:"none"}
]
const TextField = (props: any) => {
const [field, meta, helpers] = useField(props);
return (
<>
<Textarea resize="none" width="80%" {...field} {...props} />
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
);
};
export default () => {
const [type, setType] = React.useState<number>(0)
const [stockroom, setStockroom] = React.useState<any>([])
const stockroomHC = (value:Array<object>) => {
setStockroom([...value])
}
const typeHC = (value:number) => {
console.log(value)
setType(value)
setStockroom([])
}
return(
<>
<Formik
initialValues={{
text: '',
title: '',
lastName: '',
desc:'описание',
}}
onSubmit={(values, actions) => {
console.log(JSON.stringify(values))
}}
>
{(props: FormikProps<Values>) => (
<Form>
<VStack>
<TextField placeholder="Заголовок" name="title" type="text" />
<Description name="desc"/>
{
type === 0 ? //Тип вопроса - текст?
<TextField name="text" placeholder="текст" type="text" />
:
stockroom.length === 0 ? //В поле для юзерских данных есть что-то?
null //Ничего не внесено
:
type === 1 ? //Тип вопроса - селект?
<Select>
{
stockroom.map((e: any, i: number) => {
return <option key={i}>{e.text}</option>
})
}
</Select>
:
type === 2 ? //Тип вопроса - чекбокс?
stockroom.map((e:any, i:number) => {
return <Checkbox key={i}>{e.text}</Checkbox>
})
:
type === 3 ? //Тип вопроса - файл?
<input type="file"/>
:
type === 4 ? //Тип вопроса - кнопка?
stockroom.map((e:any, i:number) => {
return <Button key={i}>{e.text}</Button>
})
:
null //Тип вопроса - ничего
}
</VStack>
<Settings
types={types}
stockroomHC={stockroomHC}
stockroom={stockroom}
typeHC={typeHC}
type={type}
/>
</Form>
)}
</Formik>
</>
)
}

5
src/create.tsx → src/create/createScope.tsx
View File

@ -1,14 +1,13 @@
import React from 'react';
import moment from 'moment';
import {
Input, Select, Stack, Checkbox, Box, Text, Divider, Button, NumberInput,
NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, useNumberInput,
Input, Select, Stack, Checkbox, Box, Text, Divider, Button, useNumberInput,
} from '@chakra-ui/react'
import { Formik, Field, Form } from 'formik';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import TimePicker from 'react-time-picker';
import {create} from "./API/quiz";
import {create} from "../API/quiz";
interface a {
name?: string,

68
src/create/description.tsx Normal file
View File

@ -0,0 +1,68 @@
import React from 'react';
import SunEditor from 'suneditor-react';
import { useField, Formik, Form, Field } from 'formik';
import {Box} from "@chakra-ui/react";
// @ts-ignore
export default ({name}) => {
const visual = React.useRef<HTMLDivElement | null>(null);
const [field, meta, helpers] = useField(name);
const [focus, setFocus] = React.useState(false)
React.useEffect(() => {
if (!focus) {
if (visual.current !== null) {
visual.current.innerHTML = meta.value
}
}
},[focus])
return(
<>
{
focus ?
<Field
as={SunEditor}
name="description"
onChange={(e:any)=> {
helpers.setValue(e, false)
console.log(e)
}}
// imageUploadHandler={(e:any)=>console.log(e)}
// onImageUpload={(e:any)=>console.log(e)}
// showController={(e:any)=>console.log(e)}
// hideToolbar={false}
defaultValue={meta.value}
onBlur={(e:any) => {
setTimeout(() => setFocus(false), 1000);
}}
setOptions={{
buttonList: [
[
'undo', 'redo',
'font', 'fontSize', 'formatBlock',
'paragraphStyle', 'blockquote',
'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',
'fontColor', 'hiliteColor', 'textStyle',
'removeFormat',
'outdent', 'indent',
'align', 'horizontalRule', 'list', 'lineHeight',
'table', 'link', 'image', 'video',
'fullScreen', 'showBlocks', 'codeView',
'preview', 'print', 'save', 'template',
]
]
}}
/>
:
<Box
onClick={() => setFocus(true)}
border="solid 1px #d2d2d2"
padding="10px"
width="80%"
ref={visual}
/>
}
</>
)
}

64
src/create/settings.tsx Normal file
View File

@ -0,0 +1,64 @@
import React from 'react';
// import { useFormikContext, Formik, Form, Field } from 'formik';
import {Box, Button, Checkbox, Container, Select, Textarea} from "@chakra-ui/react";
import {ChromePicker} from 'react-color';
import Buttons from "./tools/buttons"
import List from "./tools/list"
export default (props: any) => {
// const [variant, setVariant] = React.useState(0)
// const [stockroom, setStockroom] = React.useState<Array<object>>([])
const stockroomHC = (value: object, index: number, isDelete: boolean) => {
if (isDelete) {
let newArr = props.stockroom
newArr.splice(index, 1)
props.stockroomHC([...newArr])
} else {
let newArr = props.stockroom
newArr.push(value)
props.stockroomHC([...newArr])
}
}
return (
<Container
bgColor="lightgray"
padding="10px"
minWidth="100%"
borderRadius="5px"
position="fixed"
bottom={0}
>
<Select
placeholder='тип вопроса'
value={props.type}
onChange={e => {
// setVariant(Number(e.target.value))
props.typeHC(Number(e.target.value))
}}
>
{
props.types.map((e: any, i: number) => (
<option key={i} value={i}>{e.desc}</option>
))
}
</Select>
<Box>
{
props.type === 1 ? //Тип вопроса - селект?
<List stockroom={props.stockroom} stockroomHC={stockroomHC} />
:
props.type === 2 ? //Тип вопроса - чекбокс?
<List stockroom={props.stockroom} stockroomHC={stockroomHC} />
:
props.type === 4 ? //Тип вопроса - кнопка?
<Buttons stockroom={props.stockroom} stockroomHC={stockroomHC}/>
:
null //Тип вопроса - ничего
}
</Box>
</Container>
)
}

34
src/create/tools/buttons.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { Button, VStack, HStack} from "@chakra-ui/react";
import {ChromePicker} from "react-color";
export default ({stockroom, stockroomHC}: {stockroom: any, stockroomHC:any}) => {
const [color, setColor] = React.useState("#fff")
return(
<HStack>
<ChromePicker
disableAlpha
color={color}
onChange={e => {
setColor(e.hex)
}}
/>
<Button
onClick={() => stockroomHC({text:"aaaa"},0 ,false)}
>Добавить</Button>
<VStack
border="1px solid gray"
>
{
stockroom.map((e:object, i:number) => {
})
}
</VStack>
</HStack>
)
}

37
src/create/tools/list.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
import {Button, VStack, HStack, Textarea, Container, Text, CloseButton} from "@chakra-ui/react";
export default ({stockroom, stockroomHC}: {stockroom: any, stockroomHC:any}) => {
const [color, setColor] = React.useState("#fff")
return(
<HStack>
<Button
onClick={() => stockroomHC({text:"aaaa"},0 ,false)}
>Добавить</Button>
<Textarea
placeholder="описание"
/>
<VStack
border="1px solid gray"
height="100px"
minWidth="30%"
overflow="auto"
>
{
stockroom.map((e:any, i:number) => {
return(
<Container border="1px solid lightgray" key={i} display="inline-flex" alignItems="center">
<Text>{e.text}</Text><CloseButton/>
</Container>
)
})
}
</VStack>
</HStack>
)
}

7
src/index.tsx
View File

@ -5,7 +5,8 @@ import { ChakraProvider } from '@chakra-ui/react';
import { SnackbarProvider } from 'notistack';
import Kit from "./kit";
import Create from "./create";
import CreateScope from "./create/createScope";
import CreateQuestion from "./create/createQuestion";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
@ -18,9 +19,9 @@ root.render(
<BrowserRouter>
<Routes>
<Route path="/">
<Route element={<Create/>} path="/create"/>
<Route element={<CreateScope/>} path="/createScope"/>
</Route>
<Route element={<Kit/>} path="kit"/>
<Route element={<CreateQuestion/>} path="kit"/>
</Routes>
</BrowserRouter>
</SnackbarProvider>