import React, { useState, useEffect } from 'react' import { ValidatorForm, TextValidator, SelectValidator, } from 'react-material-ui-form-validator' import { Button, Grid, MenuItem, Typography, IconButton, Icon, Tooltip, } from '@material-ui/core' import _ from 'lodash' import { createGasStation, detailGasStation, deleteGasField, deleteGasOnline, } from 'app/apis/Functions/merchant' 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 { dropdownMerchant } from 'app/apis/Functions/dropdown' import Table from '@material-ui/core/Table' import TableBody from '@material-ui/core/TableBody' import TableCell from '@material-ui/core/TableCell' import TableContainer from '@material-ui/core/TableContainer' import TableHead from '@material-ui/core/TableHead' import TableRow from '@material-ui/core/TableRow' import Paper from '@material-ui/core/Paper' import CreateField from 'app/components/dialog/CreateField' import CreateFountain from 'app/components/dialog/CreateFountain' import UpdateFountain from 'app/components/dialog/UpdateFountain' import { useTranslation } from 'react-i18next' const SimpleForm = (props) => { const [state, setState] = useState({}) const history = useHistory() const [listDrop, setListDrop] = useState([]) const [openCreate, setOpenCreate] = useState(false) const [listField, setListField] = useState([]) const [fountainSelected, setFountainSelected] = useState() const [openUpdate, setOpenUpdate] = useState() const location = useLocation() const { t } = useTranslation() useEffect(() => { getDateDetail() getData() }, []) const getDateDetail = async () => { props.showLoading() const res = await detailGasStation(location.state, {}) props.hideLoading() if (res.data.code == 200 && res.data.data) { console.log(res.data.data.gas_fields) if (res.data.data.gas_fields) { setListField(res.data.data?.gas_fields) } setState(res.data.data) } else if (res.data.code == 401) { setTimeout(() => { history.push('/') }, 100) } else { toast.error(t(res.data.error), { theme: 'colored', }) } } const getData = async () => { props.showLoading() const res = await dropdownMerchant({}) props.hideLoading() if (res.data.code == 200 && res.data.data) { const newList = res.data.data.map((e) => { return { ...e, name: e.merchant_name } }) setListDrop(newList) } 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) console.log('newValue', newValue) console.log('listField', listField) props.showLoading() const res = await createGasStation({ id: newValue?.id, merchant_id: newValue?.merchant_id, store_name: newValue?.store_name, address: newValue?.address, gas_fields: listField, store_code: newValue?.store_code, }) props.hideLoading() if (res.data.code == 200) { history.push('/gas-station') if (res.data.code == 200) { toast.success('Cập nhật cây xăng 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 onCreateField = (value) => { if (value) { console.log('value', value) if (listField.findIndex((e) => e.field_name == value) == -1) { setListField( [ { field_name: value, gas_olines: [], }, ].concat(listField) ) setOpenCreate(false) toast.success('Thêm trụ thành công!', { theme: 'colored', }) } else { toast.warning('Tên trụ xăng đã tồn tại', { theme: 'colored', }) } } else { toast.warning('Bạn chưa nhập đầy đủ thông tin', { theme: 'colored', }) } } const deletePillar = (index) => { let arr = [...listField] console.log('arr', arr) if (arr[index].id) { callApiDeletePillar(arr[index].id) } arr.splice(index, 1) setListField(arr) toast.success('Xoá trụ thành công!', { theme: 'colored', }) } const createFountain = (data, index) => { let arr = [...listField] //check ma voi let flag = true arr.map((e, i) => { if (e.gas_olines) { if ( e.gas_olines.findIndex( (e) => e.name.toUpperCase() == data.name.toUpperCase() ) != -1 ) { toast.warning('Tên vòi xăng đã tồn tại', { theme: 'colored', }) flag = false } if ( e.gas_olines.findIndex( (e) => e.code.toUpperCase() == data.code.toUpperCase() ) != -1 ) { toast.warning('Mã vòi xăng đã tồn tại', { theme: 'colored', }) flag = false } } }) if (flag) { let newList = arr.map((e, i) => { if (i == index) { if (e.gas_olines) { console.log('data', data) console.log('e.gas_olines', e.gas_olines) if ( e.gas_olines.findIndex( (e) => e.name == data.name ) == -1 && e.gas_olines.findIndex( (e) => e.code == data.code ) == -1 ) { return { ...e, gas_olines: [ { ...data, }, ].concat(e.gas_olines), } } else { // toast.warning('Mã vòi xăng đã tồn tại', { // theme: 'colored', // }) return { ...e, gas_olines: e.gas_olines, } } } else { return { ...e, gas_olines: [ { ...data, }, ], } } } else return { ...e } }) console.log('newList', newList) setListField(newList) } } const deleteFountain = (item, index) => { console.log('item', item) let arr = [...listField] console.log('index', index) let newList = arr.map((e, i) => { if (item?.field_name == e?.field_name) { let temp = [...e?.gas_olines] console.log('temp', temp) console.log('index', index) if (temp[index].id) { callApiDeleteFountain(temp[index].id) } temp.splice(index, 1) console.log('temp', temp) return { ...e, gas_olines: temp, } } else return { ...e } }) console.log('newList', newList) setListField(newList) toast.success('Xoá vòi thành công!', { theme: 'colored', }) } const handleCloseCreate = () => { setOpenCreate(false) } const handleCloseUpdate = () => { setOpenUpdate(false) } const onUpdateField = (data) => { console.log('hehe', data) console.log('fountainSelected', fountainSelected) let arr = [...listField] let newList = arr.map((e, i) => { console.log('data', data) console.log('e.gas_olines', e.gas_olines) if (e.gas_olines.findIndex((e) => e.code == data.code) != -1) { const temp = e.gas_olines.map((item) => { console.log('Run item', item) console.log('Run data', data) if (item.code == data.code) return { ...data } return { ...item } }) return { ...e, gas_olines: temp, } } else { return { ...e, gas_olines: e.gas_olines, } } }) console.log('newList', newList) setListField(newList) setOpenUpdate(false) } const countFountain = () => { let temp = 0 listField.map((e) => { if (e.gas_olines) { temp += e.gas_olines.length } }) return temp } const callApiDeleteFountain = async (id) => { props.showLoading() const res = await deleteGasOnline({ idGuid: id }) props.hideLoading() if (res.data.code == 200) { return true } else { toast.error(t(res.data.error), { theme: 'colored', }) return false } } const callApiDeletePillar = async (id) => { props.showLoading() const res = await deleteGasField({ idGuid: id }) props.hideLoading() if (res.data.code == 200) { return true } else { toast.error(t(res.data.error), { theme: 'colored', }) return false } } const { store_name, address, merchant_id, store_code } = state return ( <div className="m-sm-30"> <div className="mb-sm-30"> <div className="mb-sm-30"> <Breadcrumb routeSegments={[ { name: 'Danh sách cây xăng', path: '/gas-station', }, { name: 'Cập nhật cây xăng' }, ]} /> </div> <SimpleCard> <ValidatorForm id="form-create" onSubmit={handleSubmit} onError={() => null} > <Grid container spacing={3}> {merchant_id && ( <Grid xs={6} sm={6} item> <SelectValidator variant={'outlined'} label={'Thuộc pháp nhân *'} disabled={true} className="mb-4 w-full" value={merchant_id || ''} displayEmpty name="merchant_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 cây xăng *" onChange={handleChange} type="text" name="store_name" value={store_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ã cây xăng *" onChange={handleChange} type="text" name="store_code" value={store_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="Địa chỉ *" onChange={handleChange} type="text" name="address" value={address || ''} 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="Tên cây xăng *" onChange={handleChange} type="text" name="store_name" value={store_name || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> */} <Grid item container lg={12} md={12} sm={12} xs={12} justify="space-between" style={{ padding: 10, borderRadius: 5, }} > <Typography variant="h6"> Thông tin trụ xăng </Typography> <Grid item container lg={12} md={12} sm={12} xs={12} justify="space-between" > <div> <Typography variant="subtitle1"> Số lượng trụ: {listField.length} </Typography> <Typography variant="subtitle1"> Số lượng vòi: {countFountain()} </Typography> </div> <Button style={{ width: 140, }} onClick={() => { setOpenCreate(true) }} variant="contained" className={'bg-light-primary'} > <span className={'text-primary'}> Thêm mới trụ </span> </Button> </Grid> {listField.map((item, index) => ( <Grid style={{ border: '1px solid #B9B9B9', borderRadius: 5, padding: 10, marginTop: 20, }} lg={12} md={12} sm={12} xs={12} > <Grid lg={12} md={12} sm={12} xs={12}> <div style={{ alignItems: 'center', justifyContent: 'space-between', display: 'flex', marginBottom: 10, }} > <Typography variant="h6"> {item.field_name} </Typography> <Button onClick={() => { deletePillar(index) }} variant="contained" style={{ backgroundColor: '#FC2B05', color: 'white', }} > <span>Xoá trụ</span> </Button> </div> <TableContainer component={Paper}> <Table aria-label="simple table"> <TableHead> <TableRow style={{ backgroundColor: '#F3F3F3', }} > <TableCell style={{ borderRight: '0.05px solid #e0e0e0', width: 100, }} align="center" > STT </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="center" > Mã vòi </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="center" > Vòi </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="center" > Loại nhiên liệu </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="center" > Sản phẩm </TableCell> {/* <TableCell align="center"> Trạng thái hoạt động </TableCell> */} <TableCell style={{ textAlign: 'center', width: 120, }} align="center" > Hành động </TableCell> </TableRow> </TableHead> <TableBody> {item?.gas_olines.map( (row, index) => ( <TableRow key={ row.name } > <TableCell component="th" scope="row" style={{ borderRight: '0.05px solid #e0e0e0', }} align="center" > {index + 1} </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="right" > { row?.code } </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="right" > { row?.name } </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="right" > { row?.type_name } </TableCell> <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="right" > { row?.product_name } </TableCell> {/* <TableCell style={{ borderRight: '0.05px solid #e0e0e0', }} align="right" > { row?.status } </TableCell> */} <TableCell> <Tooltip title="Cập nhật"> <IconButton onClick={() => { setOpenUpdate( true ) setFountainSelected( { ...row, index, } ) console.log( 'heelo', index ) }} //className={classes.button} aria-label="Delete" > <Icon color="primary"> edit </Icon> </IconButton> </Tooltip> <Tooltip title="Xoá"> <IconButton onClick={() => { deleteFountain( item, index ) console.log( 'heelo', index ) }} //className={classes.button} aria-label="Delete" > <Icon color="error"> delete </Icon> </IconButton> </Tooltip> </TableCell> </TableRow> ) )} </TableBody> </Table> </TableContainer> <CreateFountain onCreate={(data) => { createFountain(data, index) }} /> </Grid> </Grid> ))} </Grid> </Grid> <Grid style={{ marginTop: 40, }} container justify={'flex-end'} > <Link to="gas-station"> <Button style={{ marginRight: 20, }} color="inherit" variant="contained" onClick={() => { history.goBack() }} > <span className="capitalize">Quay lại</span> </Button> </Link> <Button color="primary" variant="contained" type="submit" > <span className="capitalize">Cập nhật</span> </Button> </Grid> <CreateField open={openCreate} handleClose={handleCloseCreate} onAgree={onCreateField} /> <UpdateFountain open={openUpdate} handleClose={handleCloseUpdate} onAgree={onUpdateField} data={fountainSelected} /> </ValidatorForm> </SimpleCard> </div> </div> ) } const mapStateToProps = (state) => { return {} } export default connect(mapStateToProps, { showLoading, hideLoading })( SimpleForm )