import React, { useState, useEffect } from 'react' import { ValidatorForm, TextValidator, SelectValidator, } from 'react-material-ui-form-validator' import { Button, Icon, Grid, Radio, RadioGroup, FormControlLabel, Checkbox, TextField, Typography, MenuItem, Select, InputLabel, } from '@material-ui/core' import { MuiPickersUtilsProvider, KeyboardDatePicker, } from '@material-ui/pickers' import 'date-fns' import DateFnsUtils from '@date-io/date-fns' import { Breadcrumb, SimpleCard } from 'app/components' import { getDropFunction } from 'app/apis/Functions/dropdown' import { Link, useHistory, useLocation } from 'react-router-dom' import { toast } from 'react-toastify' import { trimObject } from 'app/config/Function' import { connect } from 'react-redux' import { showLoading, hideLoading } from 'app/redux/actions/loadingAction' import { createAction } from 'app/apis/Functions/action' const SimpleForm = (props) => { const [state, setState] = useState({}) const [listDrop, setListDrop] = useState([]) const history = useHistory() useEffect(() => { getData() }, []) const getData = async () => { props.showLoading() const res = await getDropFunction({}) props.hideLoading() if (res.data.code == 200 && res.data.data) { setListDrop(res.data.data) } else if (res.data.code == 401) { setTimeout(() => { history.push('/') }, 100) } else { toast.error('Lấy giữ liệu thất bại !', { theme: 'colored', }) } } const handleSubmit = async (event) => { const newValue = trimObject(state) props.showLoading() const res = await createAction({ ...newValue, status: 1, is_default: true, }) props.hideLoading() if (res.data.code == 200) { history.push('/role') if (res.data.code == 200) { toast.success('Tạo hành động thành công!', { theme: 'colored', }) } } else { toast.error('Tạo hành động thất bại!', { theme: 'colored', }) } } const handleChange = (event) => { event.persist() setState({ ...state, [event.target.name]: event.target.value, }) } const handleDateChange = (date) => { setState({ ...state, date }) } const { description, name, code, url, function_id } = state return ( <div className="m-sm-30"> <div className="mb-sm-30"> <div className="mb-sm-30"> <Breadcrumb routeSegments={[ { name: 'Danh sách hành động', path: '/role', }, { name: 'Thêm mới hành động' }, ]} /> </div> <SimpleCard> <ValidatorForm onSubmit={handleSubmit} onError={() => null}> <Grid container spacing={3}> <Grid xs={6} sm={6} item> <SelectValidator variant={'outlined'} label={'Thuộc chức năng *'} className="mb-4 w-full" value={function_id || ''} displayEmpty name="function_id" onChange={handleChange} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} > {listDrop.map((e) => ( <MenuItem value={e.id}> {e.name} </MenuItem> ))} </SelectValidator> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tên *" onChange={handleChange} type="text" name="name" value={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ã code *" onChange={handleChange} type="text" name="code" value={code || ''} 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="Đường dẫn *" onChange={handleChange} type="text" name="url" value={url || ''} 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'}> <Link to="/role"> <Button style={{ marginRight: 20, }} color="inherit" variant="contained" onClick={() => {}} > <span className="capitalize">Quay lại</span> </Button> </Link> <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 )