import { UploadOutlined, UserOutlined } from '@ant-design/icons'; import { Avatar, Button as ButtonAntd, DatePicker, Form, Input, Radio, Upload } 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 ModalEditLabel = (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 [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); 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 : "", name: crrData.name, birthday: crrData.birthday, gender: crrData.gender ? crrData.gender : "", id: crrData.id ? crrData.id : "", person_type: 4 } const result = await axios({ method: 'POST', url: `${HOST}/api/famous_persons/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, }) setCrrData({...crrData, _id: result.data.data}) setDisableBtn(false) } } else if (result.data.status === 10002) { swal("Thất bại", "Lỗi hệ thống!", "error"); } else { swal("Thất bại", "Sửa thông tin thất bại!", "error"); } } const bulletedImg = crrImages.map((value, index) => { let getDateImg = value.split("_") let dataImg = getDateImg.length > 0 && getDateImg[1].slice(0,6) let renderImg = value.includes("data:image") ? value : hostImg +dataImg+ "/" + value return (
{ checkDeleteMulti === false ? { setCrrIdx(index) }} className={"opacity_img_click img_check " + (crrIdx === index ? 'active' : '')} /> : }
) }) const checkLength= (file,fileList) => { if (crrImages.length + fileList.length > 3) { swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning"); return false } } // const uploadImage = async (options) => { // const { file } = options; // const base64 = await convertBase64(file) // let dataUploadImg = { // obj_id: crrData._id ? crrData._id : "", // base64_image_list: [base64.split(',')[1]] // } // let promises = []; // promises.push( // axios // .post(`${HOST}/api/face_images/famous_person`, dataUploadImg, { // headers: { // 'Accept': 'application/json', // 'Content-Type': 'application/json', // } // }) // ) // await Promise.all(promises) // .then((data) => { // let success = false // let manyFace = false // let noFace = false // for (let i = 0; i < data.length; i++) { // const element = data[i]; // if (element.data.status === 10000) { // let listImg = dataUpload // setHostImg(element.data.image_host) // listImg.unshift(element.data.data.toString()) // setDataUpload(...dataUpload) // success = true // } else if (element.data.status === 10003 && element.data.message === "Too many face in image") { // manyFace = true // } else if (element.data.status === 10003 && element.data.message === "No face in image") { // noFace = true // } else { // success = false // } // } // if (success) { // let originData = crrImages // originData.unshift(dataUpload[0].toString()) // let arrSet = [...new Set(originData)] // setCrrImages(arrSet) // setCheckDeleteMulti(false) // } else if (manyFace) { // swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error"); // } else if (noFace) { // swal("Thất bại", "Ảnh không có khuôn mặt!", "error"); // } else { // swal("Thất bại", "Lỗi hệ thống!", "error"); // } // }) // .catch((err) => { // console.log(err) // }); // }; const uploadImage = async (options) => { if (crrImages.length >= 3) { swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning"); return } else { const { file } = options; const base64 = await convertBase64(file) let dataUploadImg = { obj_id: crrData._id ? crrData._id : "", base64_image_list: [base64.split(',')[1]] } fetch(`${HOST}/api/face_images/famous_person`, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', // 'Authorization': token }, body: JSON.stringify(dataUploadImg) }) .then(res => res.json()) .then(data => { if (data.status === 10000) { setHostImg(data.image_host) let listImg = [...crrImages] listImg.unshift(data.data.toString()) setCrrImages(listImg) setCheckDeleteMulti(false) } else if (data.status === 10003) { if (data.message === "Too many face in image") { swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error"); } else { swal("Thất bại", "Ảnh không hợp lệ", "error"); } } }) } }; const convertBase64 = (file) => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.readAsDataURL(file) fileReader.onload = () => { resolve(fileReader.result); } fileReader.onerror = (error) => { reject(error); } }) } const deleteFaceMulti = () => { let listDelImg = listChecked.url fetch(`${HOST}/api/face_images/ignore_face`, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', // 'Authorization': token }, body: JSON.stringify({ person_obj_id: crrData._id ? crrData._id : "", images: listDelImg }) }) .then(res => res.json()) .then(data => { if (data.status === 10000) { let listDetele = crrImages.filter(item => !listDelImg.includes(item)); if (crrIdx >= 1) { setCrrIdx(crrIdx - 1) } setCrrImages(listDetele) } }) } 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") }) } if (!crrData) return <>; return ( = 1920 ? "modal-size-res" : "modal-size"}`} aria-labelledby="contained-modal-title-vcenter" > {crrData._id ? "Sửa thông tin" : "Thêm mới"} {crrData &&
{ crrImages[crrIdx] ? } /> : } /> }
{ crrImages.length > 0 ?
{ checkDeleteMulti === true ?
: "" }
: "" }
{ bulletedImg }
}>Tải ảnh lên {!disableBtn &&
* Giới hạn 3 ảnh
}
click_handle()} // onFinishFailed={onFinishFailed} autoComplete="off" initialValues={{ name: crrData.name, id: crrData.id, }} > UserHandle(e)} name='name' /> UserHandle(e)} name='id' /> UserHandle(e)} defaultValue={crrData.gender}> Nam Nữ Giới tính khác onChangeBirthday(e)} placeholder="Ngày sinh" />
} {/* */}
); } export default ModalEditLabel;