frontPanel/src/create.tsx

import React from 'react';
import moment from 'moment';
import {
    Input, Select, Stack, Checkbox, Box, Text, Divider, Button, NumberInput,
    NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, 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";

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>
        })
    ), []);

    const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
        useNumberInput({
            min: 0,
        })
    const input = getInputProps()
    return(
        <Box
            padding="20px"
        >
            <Formik
                initialValues={{
                    name: "",
                    description: "",
                    config: "",
                    status: "draft",
                    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,

                    };
                    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 }) => {
                    return (
                        <Form>
                            <label htmlFor="firstName">First Name</label>

                            <Stack
                                backgroundColor="lightgray"
                                padding="20px"
                            >
                                <Text>Название опроса (максимум 280 символов)</Text>
                                <Field as={Input} placeholder='name' name="name" />
                                <Text>Описание опроса</Text>
                                <Field as={Input} placeholder='description'  name="description"/>
                                <Field as={Input} type="hidden" placeholder='config' name="config"/>
                                <Text>Статус опроса</Text>
                                <Field as={Select} name="status">
                                    {
                                       <Options/>
                                    }
                                </Field>
                                <Text>Количество перепрохождений</Text>
                                <Field
                                    as={Input}
                                    {...input}
                                    name="limit"
                                    value={values.limit}
                                    onChange={(e:any) => {
                                        setFieldValue("limit", Number(e.target.value))
                                    }}
                                />

                            </Stack>
                            <Stack padding="20px">
                                <Text>Сохранить устройство</Text>
                                <Field as={Checkbox} name="fingerprinting" isChecked={values.fingerprinting}/>
                                <Divider/>
                                <Text>Разрешить пользователям перепроходить опрос</Text>
                                <Field as={Checkbox} name="repeatable" isChecked={values.repeatable}/>
                                <Divider/>
                                <Text>Сохранять статистику неполных прохождений</Text>
                                <Field as={Checkbox} name="note_prevented" isChecked={values.note_prevented}/>
                                <Divider/>
                                <Text>Уведомлять по почте при каждом прохождении опроса</Text>
                                <Field as={Checkbox} name="mail_notifications" isChecked={values.mail_notifications}/>
                                <Divider/>
                                <Text>Сохранять статистику только для уникального прохождения опроса</Text>
                                <Field as={Checkbox} name="unique_answers" isChecked={values.unique_answers}/>
                                <Divider/>
                            </Stack>
                            <Stack
                                backgroundColor="lightgray"
                                padding="20px"
                            >
                                <Text>Время прохождения опроса</Text>
                                <Field
                                    as={TimePicker}
                                    name="time_of_passing"
                                    format="HH : mm"
                                    disableClock={true}
                                    amPmAriaLabel={"am"}
                                    onChange={(e:any) => {
                                        if (e !== null) {
                                            setFieldValue("time_of_passing", e)
                                        } else {
                                            //При стирании значения пользователем затирается и последнее значение
                                            setFieldValue("time_of_passing", "")
                                        }
                                    }}
                                    value={values.time_of_passing}
                                />
                                <Text>Разрешить ставить на паузу</Text>
                                <Field as={Checkbox} name="pausable" isDisabled={values.time_of_passing.length === 0 ? true : false}/>
                                <Text>Дата проведения опроса</Text>
                                <Field
                                    as={DatePicker}
                                    name="due_to"
                                    selected={values.due_to}
                                    dateFormat="MM/dd/yyyy"
                                    onChange={(e:any) => {
                                        setFieldValue("due_to", e)
                                    }}
                                    minDate={new Date()}
                                />
                            </Stack>
                            <Button
                                type="submit"
                                isLoading={isSend}
                                isDisabled={isSaved}
                                loadingText='запрос в процессе обработки'
                            >
                                {isSaved ? "Сохранено" : "Сохранить"}
                            </Button>
                        </Form>
                    )
                }}
            </Formik>
        </Box>
    )
}