update man hinh user
This commit is contained in:
298
app/src/components/Modal/ModalUser.js
Normal file
298
app/src/components/Modal/ModalUser.js
Normal file
@@ -0,0 +1,298 @@
|
||||
import { UploadOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Button as ButtonAntd, DatePicker, Form, Input, Radio, Upload, Select,Switch } from 'antd';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import viVN from 'antd/lib/locale/vi_VN';
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/vi';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
import swal from 'sweetalert';
|
||||
import { HOST } from '../../config/index';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
|
||||
const ModalUser = (props) => {
|
||||
const { show, onHide, data } = props;
|
||||
const [crrImages, setCrrImages] = useState([]);
|
||||
|
||||
const [form] = Form.useForm()
|
||||
|
||||
|
||||
const [birthday, setBirthday] = useState(moment())
|
||||
const [crrData, setCrrData] = useState(null);
|
||||
|
||||
const [selectedRole, setSelectedRole] = useState([])
|
||||
const [active, setActive] = useState(false)
|
||||
|
||||
const [checkDeleteMulti, setCheckDeleteMulti] = useState(false);
|
||||
const [crrIdx, setCrrIdx] = useState(0)
|
||||
const [listChecked, setListChecked] = useState({ url: [] });
|
||||
|
||||
const [disableBtn, setDisableBtn] = useState(true);
|
||||
|
||||
const [dateImage, setDateImg] = useState("")
|
||||
|
||||
const [dataUpload, setDataUpload] = useState([])
|
||||
|
||||
const [hostImg, setHostImg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setCrrData(data);
|
||||
console.log(data)
|
||||
// setCrrImages(data.sample_images)
|
||||
// setBirthday(data.birthday !== "" ? moment(data.birthday) : null)
|
||||
// setDisableBtn(data._id ? false : true)
|
||||
// setHostImg(data.image_host)
|
||||
// return () => {
|
||||
// setCrrData(null);
|
||||
// }
|
||||
}, [data]);
|
||||
|
||||
|
||||
// const handleCheckedImg = (event, value) => {
|
||||
// let newListChecked = { ...listChecked }
|
||||
// if (newListChecked.url.indexOf(event.target.value) === -1) {
|
||||
// newListChecked.url.push(event.target.value)
|
||||
// } else {
|
||||
// var i = newListChecked.url.indexOf(event.target.value);
|
||||
// if (i !== -1) {
|
||||
// newListChecked.url.splice(i, 1);
|
||||
// }
|
||||
// }
|
||||
// setListChecked(newListChecked)
|
||||
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// if (crrImages.length > 0) {
|
||||
// let crrDateImg = crrImages[crrIdx]
|
||||
// let getDateImg = crrDateImg !== "" && crrDateImg.split("_")
|
||||
// let dataImg = getDateImg.length > 0 && getDateImg[1].slice(0,6)
|
||||
// setDateImg(dataImg)
|
||||
// }
|
||||
// },[crrImages,crrIdx])
|
||||
|
||||
const click_handle = async () => {
|
||||
let dataPost = {
|
||||
obj_id: crrData?._id ? crrData._id : "",
|
||||
username: crrData.username,
|
||||
full_name: crrData.full_name,
|
||||
password: crrData.password,
|
||||
is_deleted: 0,
|
||||
birthday: crrData.birthday,
|
||||
gender: crrData?.gender ? crrData.gender : "",
|
||||
phone_number: crrData?.phone_number ? crrData?.phone_number : "",
|
||||
role_id_list: selectedRole
|
||||
}
|
||||
const result = await axios({
|
||||
method: 'POST',
|
||||
url: `${HOST}/api/users/insert_or_update`,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
// 'Authorization': token,
|
||||
},
|
||||
data: dataPost,
|
||||
})
|
||||
if (result.data.status === 10000) {
|
||||
if (crrData._id) {
|
||||
swal({
|
||||
icon: 'success',
|
||||
title: 'Thành công',
|
||||
text: 'Sửa thông tin thành công',
|
||||
timer: 1500,
|
||||
buttons: false,
|
||||
})
|
||||
} else {
|
||||
swal({
|
||||
icon: 'success',
|
||||
title: 'Thành công',
|
||||
text: 'Thêm mới thành công',
|
||||
timer: 1500,
|
||||
buttons: false,
|
||||
})
|
||||
onHide()
|
||||
}
|
||||
} else if (result.data.status === 10002) {
|
||||
swal("Thất bại", "Lỗi hệ thống!", "error");
|
||||
} else if (result.data.status === 10004) {
|
||||
swal("Thất bại", "Tài khoản đã tồn tại!", "error");
|
||||
} else if (result.data.status === 10003) {
|
||||
swal("Thất bại", "Tài khoản không được để trống!", "error");
|
||||
} else {
|
||||
if (crrData._id) {
|
||||
swal("Thất bại", "Sửa thông tin thất bại!", "error");
|
||||
} else {
|
||||
swal("Thất bại", "Thêm mới thất bại!", "error");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const UserHandle = (e) => {
|
||||
setCrrData({ ...crrData, [e.target.name]: e.target.value })
|
||||
}
|
||||
|
||||
const onChangeBirthday = (date) => {
|
||||
setBirthday(date)
|
||||
setCrrData({ ...crrData, birthday: moment(date).format("YYYY-MM-DD") })
|
||||
}
|
||||
|
||||
const listOptions = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
listOptions.push(<Option key={i.toString(36) + i + "key"}>{i.toString(36) + i + "value"}</Option>);
|
||||
}
|
||||
|
||||
const handleChangeSelect = (value) => {
|
||||
setSelectedRole(value)
|
||||
}
|
||||
|
||||
const onChangeActive = (value) => {
|
||||
setActive(value)
|
||||
}
|
||||
|
||||
if (!crrData) return <></>;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
{...props}
|
||||
animation={false}
|
||||
size="md"
|
||||
// keyboard={false}
|
||||
// dialogClassName={`${window.innerWidth >= 1920 ? "modal-size-res" : "modal-size"}`}
|
||||
aria-labelledby="contained-modal-title-vcenter"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title id="contained-modal-title-vcenter">{crrData?._id ? "Sửa thông tin" : "Thêm mới"}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
<div id="formUpdateMeeting">
|
||||
<div className="m-widget14 p-0">
|
||||
<div className="row">
|
||||
<div className="col-md-12 d-flex flex-column justify-content-between">
|
||||
<Form
|
||||
id="formEdit"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={() => click_handle()}
|
||||
// onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
initialValues={{
|
||||
full_name: crrData?.full_name,
|
||||
gender: crrData?.gender,
|
||||
username: crrData?.username,
|
||||
role_id_list: crrData?.role_id_list,
|
||||
phone_number: crrData?.phone_number
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="Tên đăng nhập"
|
||||
name="username"
|
||||
rules={[{
|
||||
required: true,
|
||||
message: ""
|
||||
},{
|
||||
pattern: /^(?=.{5,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+$/,
|
||||
message: 'Tên đăng nhập có độ dài từ 5-20 ký tự,không có khoảng trắng và ký tự đặc biệt',
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input autoComplete="new-username" placeholder="Tên đăng nhập" value={crrData?.name} onChange={e => UserHandle(e)} name='username' />
|
||||
</Form.Item>
|
||||
{!crrData?._id &&
|
||||
<Form.Item
|
||||
label="Mật khẩu"
|
||||
name="password"
|
||||
rules={[{ required: true, message: '' }]}
|
||||
>
|
||||
<Input.Password autoComplete="new-password" placeholder="Mật khẩu" value={crrData?.password} onChange={e => UserHandle(e)} name='password' />
|
||||
</Form.Item>
|
||||
}
|
||||
|
||||
<Form.Item
|
||||
label="Họ tên"
|
||||
name="full_name"
|
||||
rules={[{ required: true, message: '' }]}
|
||||
>
|
||||
<Input placeholder="Họ tên" value={crrData?.full_name} onChange={e => UserHandle(e)} name='full_name' />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Số điện thoại"
|
||||
name="phone_number"
|
||||
>
|
||||
<Input placeholder="Điện thoại" value={crrData?.name} onChange={e => UserHandle(e)} name='phone_number' />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="radio-group" label="Giới tính">
|
||||
<Radio.Group name="gender" onChange={e => UserHandle(e)} defaultValue={crrData?.gender}>
|
||||
<Radio name="gender" value={"1"}>Nam</Radio>
|
||||
<Radio name="gender" value={"2"}>Nữ</Radio>
|
||||
<Radio name="gender" value={"3"}>Giới tính khác</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Ngày sinh"
|
||||
name="birthday"
|
||||
>
|
||||
<DatePicker className="form-control m-input"
|
||||
locale={viVN}
|
||||
defaultValue={crrData?.birthday ? moment(birthday, 'DD-MM-YYYY') : null}
|
||||
format={'DD-MM-YYYY'}
|
||||
onChange={e => onChangeBirthday(e)}
|
||||
placeholder="Ngày sinh"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* <Form.Item
|
||||
label="Trạng thái"
|
||||
name="is_deleted"
|
||||
>
|
||||
<Switch defaultChecked={active} onChange={onChangeActive} />
|
||||
</Form.Item> */}
|
||||
|
||||
<Form.Item
|
||||
label="Quyền"
|
||||
name="role_id_list"
|
||||
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Chọn quyền"
|
||||
defaultValue={[]}
|
||||
onChange={handleChangeSelect}
|
||||
>
|
||||
{listOptions}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
</Form>
|
||||
{/* <div className="row d-flex justify-content-end mr-1">
|
||||
<Button variant="accent" className={"m-loader--light m-loader--right "}
|
||||
// disabled={loading}
|
||||
onClick={() => form.submit()}
|
||||
>Lưu</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="accent" className={"m-loader--light m-loader--right "}
|
||||
// disabled={loading}
|
||||
onClick={() => form.submit()}
|
||||
>Lưu</Button>
|
||||
<Button variant="secondary" onClick={onHide}>Đóng</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalUser;
|
||||
Reference in New Issue
Block a user