import React, { useState, useEffect } from 'react' import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator' import { Button, Grid } from '@material-ui/core' import { createPackageFunction } from 'app/apis/Functions/landingpage' import { showLoading, hideLoading } from 'app/redux/actions/loadingAction' import { toast } from 'react-toastify' import { Breadcrumb, SimpleCard } from 'app/components' import { Link, useHistory, useLocation } from 'react-router-dom' import { trimObject } from 'app/config/Function' import { connect } from 'react-redux' import { useTranslation } from 'react-i18next' const SimpleForm = (props) => { const [state, setState] = useState({}) const { t } = useTranslation() const history = useHistory() const handleSubmit = async (event) => { const newValue = trimObject(state) props.showLoading() const res = await createPackageFunction({ ...newValue, status: 1, }) props.hideLoading() if (res.data.code == 200) { history.push('/package-function') if (res.data.code == 200) { toast.success('Tạo chức năng gói thành công!', { theme: 'colored', }) } } else { toast.error(t(res.data.error), { theme: 'colored', }) } } const handleChange = (event) => { event.persist() setState({ ...state, [event.target.name]: event.target.value, }) } const handleDateChange = (date) => { setState({ ...state, date }) } const { description, func_name } = state return ( <div className="m-sm-30"> <div className="mb-sm-30"> <div className="mb-sm-30"> <Breadcrumb routeSegments={[ { name: 'Danh sách chức năng gói', path: '/package-function', }, { name: 'Thêm mới' }, ]} /> </div> <SimpleCard> <ValidatorForm onSubmit={handleSubmit} onError={() => null}> <Grid container spacing={3}> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tên chức năng *" onChange={handleChange} type="text" name="func_name" value={func_name || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mô tả" onChange={handleChange} type="text" name="description" value={description || ''} // validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> </Grid> <Grid container justify={'flex-end'}> <Button style={{ marginRight: 20, }} color="inherit" variant="contained" onClick={() => { history.goBack() }} > <span className="capitalize">Quay lại</span> </Button> <Button color="primary" variant="contained" type="submit" > <span className="capitalize">Thêm mới</span> </Button> </Grid> </ValidatorForm> </SimpleCard> </div> </div> ) } const mapStateToProps = (state) => { return {} } export default connect(mapStateToProps, { showLoading, hideLoading })( SimpleForm )