import React, { useState, useEffect } from 'react' import { Button, FormControl, Grid, InputLabel, Select, TextField, Typography, Radio, FormControlLabel, DialogActions, Dialog, DialogContent, DialogContentText, DialogTitle, IconButton, Icon, Tooltip, RadioGroup, MenuItem,Checkbox } from '@material-ui/core' import { toast } from 'react-toastify' import { useTranslation } from 'react-i18next' import { KeyboardDatePicker } from '@material-ui/pickers' import { convertDate, toPriceVndInput, convertViToEn, } from 'app/config/Function' import { TextValidator, ValidatorForm, SelectValidator, } from 'react-material-ui-form-validator' import {dropdownProductType,dropdownProcutByType} from 'app/apis/Functions/dropdown' export default function FormDialog( props) { const { t } = useTranslation() const { open, handleClose, data, onAgree } = props const [state, setState] = useState({}) const [listType, setListType] = useState([]) const [listProduct, setListProduct] = useState([]) const [product,setProduct]=useState() const [type, setType] = useState() const [is_api,setIsApi]=useState(false) useEffect(()=>{ if(data){ setState({...data}) if(data.type){ setType(data.type) }else{ setType(data.product_type_id) } setProduct(data.product_id) } },[data,open]) useEffect(()=>{ setState({...state}) if(type){ getDropdownProduct(type) } },[type]) useEffect(() => { getData() }, []) const getData = async () => { const res = await dropdownProductType({}) if (res.data.code == 200 && res.data.data) { const newList = res.data.data.map((e) => { return { ...e,name: e.type_name, value: e.id} }) setListType(newList) } else { toast.error('Lấy giữ liệu thất bại !', { theme: 'colored', }) } } const getDropdownProduct= async (type) => { const res = await dropdownProcutByType(type) if (res.data.code == 200 && res.data.data) { const newList = res.data.data.map((e) => { return { ...e,name: e.product_name, value: e.id} }) setListProduct(newList) } else { toast.error('Lấy giữ liệu thất bại !', { theme: 'colored', }) } } const handleSubmit = async (value) => { if(state?.product_id && state?.name?.trim() && state?.code?.trim()){ let index=listProduct.findIndex(e=>e.id==state.product_id) if(index!=-1){ console.log(listProduct[index]) console.log("listProduct",listProduct) console.log('state', state) onAgree({...state,type,type_name:listProduct[index].type_name, product_name: listProduct[index].product_name,code:state.code,is_api})} }else{ toast.warning('Bạn chưa nhập đầy đủ thông tin', { theme: 'colored', }) } } const handleChange = (event) => { event.persist() setState({ ...state, [event.target.name]: event.target.value, }) } const { product_id, name, code ,domain,client_id,client_secret ,supplier_main} = state console.log("listType",listType) return ( <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title" > <DialogTitle id="form-dialog-title"> Cập nhật vòi xăng </DialogTitle> <DialogContent> <Grid container spacing={2}> <Grid item lg={12} md={12} sm={12} xs={12}> <TextValidator className="mb-4 w-full" defaultValue={true} label="Mã vòi xăng *" onChange={handleChange} variant="outlined" type="text" name="code" value={code || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={12} md={12} sm={12} xs={12}> <TextValidator className="mb-4 w-full" label="Tên vòi xăng *" onChange={handleChange} variant="outlined" type="text" name="name" value={name || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> {type && <Grid item lg={12} md={12} sm={12} xs={12}> <SelectValidator variant={'outlined'} label={'Loại nguyên liệu *'} className="mb-4 w-full" value={type || ''} displayEmpty name="merchan_id" onChange={(event) => { setType(event.target.value) }} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} > {listType.map((e) => ( <MenuItem value={e.id}> {e.name} </MenuItem> ))} </SelectValidator> </Grid>} {product_id && <Grid item lg={12} md={12} sm={12} xs={12}> <SelectValidator variant={'outlined'} label={'Loại xăng *'} className="mb-4 w-full" value={product_id || ''} displayEmpty name="product_id" onChange={handleChange} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} > {listProduct.map((e) => ( <MenuItem value={e.id}> {e.name} </MenuItem> ))} </SelectValidator> </Grid>} {/* <Grid item lg={12} md={12} sm={12} xs={12}> <TextValidator className="mb-4 w-full" label="Base url *" onChange={handleChange} variant="outlined" type="text" name="domain" value={domain || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={12} md={12} sm={12} xs={12}> <TextValidator className="mb-4 w-full" label="Mã khách hàng *" onChange={handleChange} variant="outlined" type="text" name="client_id" value={client_id || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={12} md={12} sm={12} xs={12}> <TextValidator className="mb-4 w-full" label="Mật khẩu*" onChange={handleChange} variant="outlined" type="text" name="client_secret" value={client_secret || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={12} md={12} sm={12} xs={12}> <TextValidator className="mb-4 w-full" label="Nhà cung cấp bo mạch *" onChange={handleChange} variant="outlined" type="text" name="supplier_main" value={supplier_main || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid lg={12} md={12} sm={12} xs={12} item> <FormControlLabel className="min-w-288" control={ <Checkbox size="small" color="primary" onChange={(event) => { setIsApi( event.target.checked ) }} value={is_api} /> } label="Sử dụng api truyền nhận" /> </Grid> */} </Grid> </DialogContent> <DialogActions> <Button color="secondary" onClick={handleClose}> Thoát </Button> <Button onClick={handleSubmit} color="primary"> Đồng ý </Button> </DialogActions> </Dialog> ) }