From 121aab84638b610c32d4e3239a2b5ebe55718f00 Mon Sep 17 00:00:00 2001 From: huyt Date: Wed, 12 Jan 2022 17:40:54 +0700 Subject: [PATCH] update nhan anh --- app/package.json | 1 + app/src/App.js | 6 +- app/src/components/ImportImg/ImportImage.js | 33 +- app/src/components/LabelImg/LabelImage.js | 334 ++++++++++++++++ app/src/components/List/ListItem.js | 3 +- app/src/components/Modal/ModaEditLabel.js | 406 ++++++++++++++++++++ app/src/components/Modal/ModalEdit.js | 3 +- app/src/components/Modal/ModalEditImg.js | 2 +- app/src/components/Test/Test.js | 44 +++ app/src/components/layouts/MenuBar.js | 22 +- app/yarn.lock | 37 +- 11 files changed, 875 insertions(+), 16 deletions(-) create mode 100644 app/src/components/LabelImg/LabelImage.js create mode 100644 app/src/components/Modal/ModaEditLabel.js create mode 100644 app/src/components/Test/Test.js diff --git a/app/package.json b/app/package.json index d569a60..eba885a 100644 --- a/app/package.json +++ b/app/package.json @@ -23,6 +23,7 @@ "react-loading-overlay": "^1.0.1", "react-router-dom": "5.2.0", "react-scripts": "5.0.0", + "react-select": "^5.2.1", "react-spinners": "^0.11.0", "sweetalert": "^2.1.2", "web-vitals": "^2.1.2" diff --git a/app/src/App.js b/app/src/App.js index acc1d12..783f7a7 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -1,8 +1,10 @@ import React from 'react' import ListItem from './components/List/ListItem'; import Login from './components/Login/Login'; +import LabelImage from './components/LabelImg/LabelImage'; import SearchImage from './components/SearchImg/SearchImage'; import ImportImage from './components/ImportImg/ImportImage'; +import Test from './components/Test/Test'; import MenuBar from './components/layouts/MenuBar' import Header from './components/layouts/Header' import 'antd/dist/antd.css'; @@ -19,10 +21,12 @@ function App() {
- {/* */} + + +
diff --git a/app/src/components/ImportImg/ImportImage.js b/app/src/components/ImportImg/ImportImage.js index 86d9cf3..6d0bbf8 100644 --- a/app/src/components/ImportImg/ImportImage.js +++ b/app/src/components/ImportImg/ImportImage.js @@ -8,9 +8,10 @@ import { PulseLoader } from 'react-spinners'; import Modalupload from '../Modal/ModalUpload'; import ModalEditImg from '../Modal/ModalEditImg'; import axios from 'axios'; -import { Avatar, Tooltip } from 'antd'; +import { Avatar, Tooltip, Image } from 'antd'; import {UserOutlined} from '@ant-design/icons'; import momment from 'moment'; +import Select from "react-select"; class ImportImage extends Component { constructor(props) { super(props); @@ -28,7 +29,9 @@ class ImportImage extends Component { modalShow: false, dataEdit: null, modalUploadShow: false, - dataSearch: "" + dataSearch: "", + optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}], + valueSelected: {value: 2, label:"Tải lên"}, } this.itemsPerPage = 5; } @@ -52,7 +55,8 @@ class ImportImage extends Component { data: { index: page, item_per_page: this.itemsPerPage, - search_data: this.state.dataSearch + search_data: this.state.dataSearch, + import_type: this.state.valueSelected.value }, }) @@ -149,11 +153,20 @@ class ImportImage extends Component { this.setState({ activePage: 1, dataSearch: "", + valueSelected: {value: 2, label:"Tải lên"}, }, () => { this.getListImg(1); }) } + changeHandleFilter = (e) => { + this.setState({ + valueSelected: e, + activePage: 1 + }, () => { + this.getListImg(1); + }); + } render() { // if (this.state.isLogin == false) { @@ -162,9 +175,9 @@ class ImportImage extends Component { // ) // } let bulletedListImg = this.state.listImgImport.map((value, index) => { - + var listImg - listImg = + listImg = return ( @@ -172,6 +185,7 @@ class ImportImage extends Component { {(index + this.state.offset + 1)} {listImg} {value.origin_name} + {value.import_type === 1 ? "Facebook" : "Tải lên"} {momment(value.created_time).format("DD-MM-YYYY")} @@ -235,6 +249,14 @@ class ImportImage extends Component { data-col-index={0} /> +
+ handleOnKeyDown(e)} + onChange={(e) => { + setDataPost({ ...dataPost, search_data: e.target.value }) + }} + value={dataPost.search_data} + id="inputSearch" className="form-control m-input" + placeholder="Họ tên..." + data-col-index={0} + /> +
+
+ +
+
+ +
+ +
+ +
+ + {/*begin: Datatable */} + + + + + + + + + + + + {data && tableRows(data)} +
ẢnhHọ tênFacebookIDGiới tínhNgày sinhThao tác
+ + + + + + ) +} diff --git a/app/src/components/List/ListItem.js b/app/src/components/List/ListItem.js index ea9875f..19fd3ef 100644 --- a/app/src/components/List/ListItem.js +++ b/app/src/components/List/ListItem.js @@ -13,7 +13,8 @@ import { useLocation } from 'react-router-dom'; const initialDataPost = { index: 1, item_per_page: 5, - search_data: "" + search_data: "", + person_type: 2, } export default function ListItem() { diff --git a/app/src/components/Modal/ModaEditLabel.js b/app/src/components/Modal/ModaEditLabel.js new file mode 100644 index 0000000..9cc403f --- /dev/null +++ b/app/src/components/Modal/ModaEditLabel.js @@ -0,0 +1,406 @@ +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 [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 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 + +
+
+ +
+
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; diff --git a/app/src/components/Modal/ModalEdit.js b/app/src/components/Modal/ModalEdit.js index fca220f..2bb8b0b 100644 --- a/app/src/components/Modal/ModalEdit.js +++ b/app/src/components/Modal/ModalEdit.js @@ -73,7 +73,8 @@ const Modaledit = (props) => { id: crrData.id, name: crrData.name, birthday: crrData.birthday, - gender: crrData.gender ? crrData.gender : "" + gender: crrData.gender ? crrData.gender : "", + person_type: 2 } const result = await axios({ method: 'POST', diff --git a/app/src/components/Modal/ModalEditImg.js b/app/src/components/Modal/ModalEditImg.js index 5a180e2..9751fd1 100644 --- a/app/src/components/Modal/ModalEditImg.js +++ b/app/src/components/Modal/ModalEditImg.js @@ -84,7 +84,7 @@ class ModalEditImg extends Component {
diff --git a/app/src/components/Test/Test.js b/app/src/components/Test/Test.js new file mode 100644 index 0000000..113d4d9 --- /dev/null +++ b/app/src/components/Test/Test.js @@ -0,0 +1,44 @@ +import { UserOutlined } from '@ant-design/icons'; +import { Avatar, Tooltip } from 'antd'; +import axios from 'axios'; +import ModalEditLabel from '../Modal/ModaEditLabel'; +import momment from 'moment'; +import React, { useEffect, useState } from 'react'; +import Pagination from "react-js-pagination"; +import { PulseLoader } from 'react-spinners'; +import { HOST } from '../../config/index'; +import swal from 'sweetalert'; +import { useLocation } from 'react-router-dom'; + + + +export default function Test() { + + + return ( +
+
+
+
+
+

+ Test +

+
+
+
+
+ + +
+
+
+ ) +} diff --git a/app/src/components/layouts/MenuBar.js b/app/src/components/layouts/MenuBar.js index 5ce8992..40f37a8 100644 --- a/app/src/components/layouts/MenuBar.js +++ b/app/src/components/layouts/MenuBar.js @@ -67,7 +67,27 @@ class MenuBar extends Component { - +
  • + this.onClickClose()}> + + + + Gán nhãn + + + +
    • + +
  • + this.onClickClose()}> + + + + Test + + + +
    • {/* END: Aside Menu */} diff --git a/app/yarn.lock b/app/yarn.lock index ab0bf0f..90fa3f3 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -1049,7 +1049,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== @@ -1114,7 +1114,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/cache@^11.7.1": +"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1": version "11.7.1" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539" integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A== @@ -1140,7 +1140,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/react@^11.1.4": +"@emotion/react@^11.1.1", "@emotion/react@^11.1.4": version "11.7.1" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07" integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw== @@ -1948,7 +1948,14 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react@>=16.9.11": +"@types/react-transition-group@^4.4.0": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" + integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== + dependencies: + "@types/react" "*" + +"@types/react@*", "@types/react@>=16.9.11": version "17.0.38" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd" integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ== @@ -6597,6 +6604,11 @@ memfs@^3.1.2, memfs@^3.2.2: dependencies: fs-monkey "1.0.3" +memoize-one@^5.0.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memoize-one@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" @@ -7944,7 +7956,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^4.0.0" -"prop-types@15.x.x - 16.x.x", prop-types@^15.5.0, prop-types@^15.6.2, prop-types@^15.7.2: +"prop-types@15.x.x - 16.x.x", prop-types@^15.5.0, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8643,6 +8655,19 @@ react-scripts@5.0.0: optionalDependencies: fsevents "^2.3.2" +react-select@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6" + integrity sha512-OOyNzfKrhOcw/BlembyGWgdlJ2ObZRaqmQppPFut1RptJO423j+Y+JIsmxkvsZ4D/3CpOmwIlCvWbbAWEdh12A== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.1.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^5.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + react-spinners@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.11.0.tgz#186fd150cc9f7ab1436227f70d5d113b47e9e43d" @@ -8660,7 +8685,7 @@ react-transition-group@^2.5.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-transition-group@^4.0.0: +react-transition-group@^4.0.0, react-transition-group@^4.3.0: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==