import React, { useState, useEffect } from 'react' import { ValidatorForm, TextValidator, SelectValidator, } from 'react-material-ui-form-validator' import { Button, Grid, MenuItem, FormControlLabel, Checkbox, Typography, } from '@material-ui/core' import { createFunction } from 'app/apis/Functions/function' 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, encryString } from 'app/config/Function' import { connect } from 'react-redux' import { dropdownDepartment, dropdownUserGroup, getDropDownGroup, } from 'app/apis/Functions/dropdown' import PickerImage from 'app/components/Input/PickerImage' import { actionByGroup, createEmployee, detailEmployee, updateEmployee, } from 'app/apis/Functions/Employee' import { useTranslation } from 'react-i18next' const SimpleForm = (props) => { const [state, setState] = useState({}) const [listDepartment, setListDepartment] = useState([]) const [listDrop, setListDrop] = useState([]) const [listAction, setListAction] = useState([]) const [image, setImage] = useState() const [listChecked, setListChecked] = useState([]) const [role, setRole] = useState() const [listGroup, setGroup] = useState([]) const [checkAll, setCheckAll] = useState(true) const location = useLocation() const [defaultAction, setDefaultAction] = useState([]) const { t } = useTranslation() useEffect(() => { getUserGroup() getData() }, []) useEffect(() => { getListDefault() }, [defaultAction]) useEffect(() => { getListAction() setListChecked([]) }, [role]) const history = useHistory() const getListDefault = () => { const newList = defaultAction.map((e) => { return e.action_id }) setListChecked(newList) } const getData = async () => { props.showLoading() Promise.all([ detailEmployee(location.state, {}), getDropDownGroup({}), ]).then((values) => { setState(values[0].data.data) setImage(values[0].data.data.avatar) setRole(values[0].data.data.user_group_id) // setBirdth(convertTimeApi(values[0].data.data.birth_day)) // setGender(values[0].data.data.gender == 6 ? '6' : '7') setGroup(values[1].data.data) setDefaultAction(values[0].data.data.userPermissions) }) props.hideLoading() } const getListAction = async () => { if (role) { const res = await actionByGroup(role, {}) console.log('res.data.data', res.data.data) if (res.data.code == 200 && res.data.data) { let newList = res.data.data.userGroupPermissions newList.sort((a, b) => a.function_name.localeCompare(b.function_name) ) setListAction(newList) } else if (res.data.code == 401) { setTimeout(() => { history.push('/') }, 100) } else { toast.error(t(res.data.error), { theme: 'colored', }) } } } const getUserGroup = async () => { const res = await dropdownUserGroup({}) if (res.data.code == 200 && res.data.data) { setGroup(res.data.data) } else if (res.data.code == 401) { setTimeout(() => { history.push('/') }, 100) } else { toast.error(t(res.data.error), { theme: 'colored', }) } } const handleSubmit = async (event) => { const newValue = trimObject(state) if (listChecked.length > 0) { if (image) { const newList = listChecked.map((e) => { return { action_id: e } }) props.showLoading() const res = await updateEmployee({ ...newValue, user_group_id: role, userPermissions: newList, avatar: image, }) console.log(res) props.hideLoading() if (res.data.code == 200) { history.push('/employee') if (res.data.code == 200) { toast.success('Cập nhật nhân viên thành công!', { theme: 'colored', }) } } else { toast.error(t(res.data.error), { theme: 'colored', }) } } else { toast.warning('Bạn chưa chọn ảnh đại diện cho nhân viên!', { theme: 'colored', }) } } else { toast.warning('Bạn chưa thêm quyền cho nhân viên!', { theme: 'colored', }) } } const handleChange = (event) => { event.persist() setState({ ...state, [event.target.name]: event.target.value, }) } const onFileChange = (url) => { console.log(url) setImage(url) } const onPicker = (value) => { if (value.target.checked) { const newList = listChecked.concat(value.target.name) setListChecked(newList) } else { const newList = listChecked.filter((e) => { return e != value.target.name }) setListChecked(newList) } } const handleCheckAllRole = (event) => { setCheckAll(!checkAll) if (checkAll == true) { const newList = listAction.map((e) => e.action_id) setListChecked(newList) } else { setListChecked([]) } } console.log('role', role) const { username, password, phone, email, address, full_name } = state return ( <div className="m-sm-30"> <div className="mb-sm-30"> <div className="mb-sm-30"> <Breadcrumb routeSegments={[ { name: 'Danh sách nhân viên', path: '/employee', }, { name: 'Thêm mới nhân viên' }, ]} /> </div> <SimpleCard> <ValidatorForm onSubmit={handleSubmit} onError={() => null}> <Grid container spacing={3}> <Grid item lg={12} md={12} sm={12} xs={12}> <PickerImage images={image} onFileChange={onFileChange} title={'Ảnh đại diện'} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tên nhân viên *" onChange={handleChange} type="text" name="full_name" value={full_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="Số điện thoại *" onChange={handleChange} type="text" name="phone" value={phone || ''} validators={[ 'required', 'isNumber', 'minStringLength:10', 'maxStringLength:12', ]} errorMessages={[ 'Không được để trống trường này', 'Trường này phải nhập số ', 'Số điện thoại phải có ít nhất 10 chữ số', 'Số điện thoại nhiều nhất chỉ có 12 chữ số', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Email *" onChange={handleChange} type="text" name="email" value={email || ''} validators={['required', 'isEmail']} errorMessages={[ 'Không được để trống trường này', 'Email không hợp lệ', ]} /> </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 đăng nhập *" onChange={handleChange} disabled type="text" name="username" value={username || ''} 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 khẩu *" onChange={handleChange} type="password" name="password" value={password || ''} validators={[ 'required', 'minStringLength:8', ]} errorMessages={[ 'Không được để trống trường này', 'Mật khẩu phải có ít nhất 8 ký tự', ]} /> </Grid> */} {role && ( <Grid lg={6} md={6} sm={12} xs={12} item> <SelectValidator variant={'outlined'} label={'Nhóm quyền *'} className="w-full" value={role} displayEmpty onChange={(e) => setRole(e.target.value) } validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} > {listGroup.map((e) => ( <MenuItem value={e.id}> {e.name} </MenuItem> ))} </SelectValidator> </Grid> )} <Grid item xs={12} sm={12}> <Typography variant={'h6'}> Danh sách hành động </Typography> {listAction.length > 0 ? ( <Grid lg={12} md={12} sm={12} xs={12} item> <FormControlLabel className="min-w-288" control={ <Checkbox size="small" color="primary" name="is_customer_data_manager" onChange={ handleCheckAllRole } value={checkAll} /> } label="Chọn tất cả các quyền" /> </Grid> ) : null} <Grid row container item xs={12} sm={12}> {listAction.map((e) => ( <Grid item xs={3}> <FormControlLabel label={e.action_name} control={ <Checkbox size="small" color="primary" onChange={onPicker} name={e.action_id} checked={listChecked.includes( e.action_id )} /> } /> </Grid> ))} </Grid> </Grid> </Grid> <Grid container justify={'flex-end'}> <Link to="/employee"> <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">Cập nhật</span> </Button> </Grid> </ValidatorForm> </SimpleCard> </div> </div> ) } const mapStateToProps = (state) => { return {} } export default connect(mapStateToProps, { showLoading, hideLoading })( SimpleForm )