реквест на бэк create
This commit is contained in:
parent
223ec77178
commit
b2920ddce7
2970
package-lock.json
generated
2970
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -20,6 +20,7 @@
|
||||
"framer-motion": "^6.3.3",
|
||||
"moment": "^2.29.3",
|
||||
"notistack": "^2.0.5",
|
||||
"puppeteer": "^14.2.1",
|
||||
"react": "^18.1.0",
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-dom": "^18.1.0",
|
||||
@ -56,7 +57,13 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.18.2",
|
||||
"@babel/preset-react": "^7.17.12",
|
||||
"@types/react-datepicker": "^4.4.1",
|
||||
"@types/react-time-picker": "^4.0.2"
|
||||
"@types/react-time-picker": "^4.0.2",
|
||||
"babel-jest": "^28.1.0",
|
||||
"jest": "^28.1.0",
|
||||
"jest-puppeteer": "^6.1.0",
|
||||
"react-test-renderer": "^18.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
124
src/create.tsx
124
src/create.tsx
@ -1,15 +1,38 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import {Input, Select, Stack, Checkbox, Box, Text, Divider, Button} from '@chakra-ui/react'
|
||||
import {
|
||||
Input, Select, Stack, Checkbox, Box, Text, Divider, Button, NumberInput,
|
||||
NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper,} 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";
|
||||
|
||||
interface a {
|
||||
name?: string,
|
||||
description?: string,
|
||||
config?: string,
|
||||
status?: string,
|
||||
fingerprinting?: boolean,
|
||||
repeatable?: boolean,
|
||||
note_prevented?: boolean,
|
||||
mail_notifications?: boolean,
|
||||
unique_answers?: boolean,
|
||||
pausable?: boolean,
|
||||
time_of_passing?: number,
|
||||
due_to?: number,
|
||||
limit?: number,
|
||||
question_cnt?: number
|
||||
}
|
||||
|
||||
const statusValues: any = ['draft', 'template', 'stop', 'start']
|
||||
|
||||
export default () => {
|
||||
|
||||
const [isSaved, setSaved] = React.useState(false)
|
||||
const [isSend, setSend] = React.useState(false)
|
||||
|
||||
const Options = React.useMemo(() => () => (
|
||||
statusValues.map((e:string,i:number)=> {
|
||||
return <option key={i} value={e}>{e}</option>
|
||||
@ -26,17 +49,53 @@ export default () => {
|
||||
description: "",
|
||||
config: "",
|
||||
status: "draft",
|
||||
save: true,
|
||||
resquiz: true,
|
||||
incomplete: true,
|
||||
notification: true,
|
||||
unique: true,
|
||||
time: "",
|
||||
pause: false,
|
||||
date: null
|
||||
fingerprinting: false,
|
||||
repeatable: false,
|
||||
note_prevented: false,
|
||||
mail_notifications: false,
|
||||
unique_answers: false,
|
||||
time_of_passing: "",
|
||||
pausable: false,
|
||||
due_to: null,
|
||||
limit: 0
|
||||
}}
|
||||
onSubmit={(values) => {
|
||||
console.log(values)
|
||||
setSend(true)
|
||||
let inputBody:a = {
|
||||
"status": values.status,
|
||||
"question_cnt": 0,
|
||||
|
||||
};
|
||||
if (values.name.length !== 0) {inputBody.name = values.name}
|
||||
if (values.description.length !== 0) {inputBody.description = values.description}
|
||||
if (values.due_to !== null) {inputBody.due_to = Number(moment(values.due_to).format("x"))}
|
||||
if (values.due_to !== null) {console.log(moment(values.due_to).format("x"))}
|
||||
if (values.time_of_passing.length !== 0) {inputBody.time_of_passing = moment.duration(values.time_of_passing).asSeconds()}
|
||||
if (values.time_of_passing.length !== 0) {console.log(moment.duration(values.time_of_passing).asSeconds())}
|
||||
if (values.limit !== 0) {inputBody.limit = values.limit}
|
||||
|
||||
if (values.fingerprinting) {inputBody.fingerprinting = true}
|
||||
if (values.repeatable) {inputBody.repeatable = true}
|
||||
if (values.note_prevented) {inputBody.note_prevented = true}
|
||||
if (values.mail_notifications) {inputBody.mail_notifications = true}
|
||||
if (values.unique_answers) {inputBody.unique_answers = true}
|
||||
if (values.pausable) {inputBody.pausable = true}
|
||||
|
||||
console.log(inputBody)
|
||||
|
||||
create.request({body: inputBody})
|
||||
.then((e: any) => {
|
||||
console.log(e)
|
||||
console.log(e.message)
|
||||
setSaved(true)
|
||||
setSend(false)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log(e)
|
||||
console.log(e.message)
|
||||
setSaved(false)
|
||||
setSend(false)
|
||||
})
|
||||
}}
|
||||
>
|
||||
{({ values, setFieldValue }) => {
|
||||
@ -59,22 +118,34 @@ export default () => {
|
||||
<Options/>
|
||||
}
|
||||
</Field>
|
||||
<Text>Количество перепрохождений</Text>
|
||||
<Field
|
||||
as={NumberInput}
|
||||
name="limit"
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</Field>
|
||||
|
||||
</Stack>
|
||||
<Stack padding="20px">
|
||||
<Text>Сохранить устройство</Text>
|
||||
<Field as={Checkbox} name="save" isChecked={values.save}/>
|
||||
<Field as={Checkbox} name="fingerprinting" isChecked={values.fingerprinting}/>
|
||||
<Divider/>
|
||||
<Text>Разрешить пользователям перепроходить опрос</Text>
|
||||
<Field as={Checkbox} name="resquiz" isChecked={values.resquiz}/>
|
||||
<Field as={Checkbox} name="repeatable" isChecked={values.repeatable}/>
|
||||
<Divider/>
|
||||
<Text>Сохранять статистику неполных прохождений</Text>
|
||||
<Field as={Checkbox} name="incomplete" isChecked={values.incomplete}/>
|
||||
<Field as={Checkbox} name="note_prevented" isChecked={values.note_prevented}/>
|
||||
<Divider/>
|
||||
<Text>Уведомлять по почте при каждом прохождении опроса</Text>
|
||||
<Field as={Checkbox} name="notification" isChecked={values.notification}/>
|
||||
<Field as={Checkbox} name="mail_notifications" isChecked={values.mail_notifications}/>
|
||||
<Divider/>
|
||||
<Text>Сохранять статистику только для уникального прохождения опроса</Text>
|
||||
<Field as={Checkbox} name="unique" isChecked={values.unique}/>
|
||||
<Field as={Checkbox} name="unique_answers" isChecked={values.unique_answers}/>
|
||||
<Divider/>
|
||||
</Stack>
|
||||
<Stack
|
||||
@ -84,7 +155,7 @@ export default () => {
|
||||
<Text>Время прохождения опроса</Text>
|
||||
<Field
|
||||
as={TimePicker}
|
||||
name="time"
|
||||
name="time_of_passing"
|
||||
format="HH : mm"
|
||||
disableClock={true}
|
||||
amPmAriaLabel={"am"}
|
||||
@ -93,26 +164,33 @@ export default () => {
|
||||
setFieldValue("time", e)
|
||||
} else {
|
||||
//При стирании значения пользователем затирается и последнее значение
|
||||
setFieldValue("time", "")
|
||||
setFieldValue("time_of_passing", "")
|
||||
}
|
||||
}}
|
||||
value={values.time}
|
||||
value={values.time_of_passing}
|
||||
/>
|
||||
<Text>Разрешить ставить на паузу</Text>
|
||||
<Field as={Checkbox} name="pause" isDisabled={values.time.length === 0 ? true : false}/>
|
||||
<Field as={Checkbox} name="pausable" isDisabled={values.time_of_passing.length === 0 ? true : false}/>
|
||||
<Text>Дата проведения опроса</Text>
|
||||
<Field
|
||||
as={DatePicker}
|
||||
name="date"
|
||||
selected={values.date}
|
||||
name="due_to"
|
||||
selected={values.due_to}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
onChange={(e:any) => {
|
||||
setFieldValue("date", e)
|
||||
setFieldValue("due_to", e)
|
||||
}}
|
||||
minDate={new Date()}
|
||||
/>
|
||||
</Stack>
|
||||
<Button type="submit">Сохранить</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
isLoading={isSend}
|
||||
isDisabled={isSaved}
|
||||
loadingText='запрос в процессе обработки'
|
||||
>
|
||||
{isSaved ? "Сохранено" : "Сохранить"}
|
||||
</Button>
|
||||
</Form>
|
||||
)
|
||||
}}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
URL = "localhost:1488"
|
||||
Loading…
Reference in New Issue
Block a user