dungnh/Face_Classify_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'update sua 1 so cho' (#4) from feature/import-img into dev

Browse Source 
Reviewed-on: huyt/fsi_project#4
This commit is contained in:
huyt 2022-01-12 08:22:35 +00:00
commit 043c75ed16
6 changed files with 1987 additions and 33942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31977
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
app/src/components/ImportImg/ImportImage.js
View File

@ -162,7 +162,7 @@ class ImportImage extends Component {
// ) // )
// } // }
let bulletedListImg = this.state.listImgImport.map((value, index) => { let bulletedListImg = this.state.listImgImport.map((value, index) => {
var listImg var listImg
listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.image_host}`} /> listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.image_host}`} />

83
app/src/components/List/ListItem.js
View File

@ -10,6 +10,12 @@ import { HOST } from '../../config/index';
import swal from 'sweetalert'; import swal from 'sweetalert';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
const initialDataPost = {
index: 1,
item_per_page: 5,
search_data: ""
}
export default function ListItem() { export default function ListItem() {
const [data, setData] = useState(null) const [data, setData] = useState(null)
@ -18,10 +24,10 @@ export default function ListItem() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [dataSearch, setDataSearch] = useState("")
const [activePage, setActivePage] = useState(1) const [activePage, setActivePage] = useState(1)
const [totalItems, setTotalItems] = useState(0) const [totalItems, setTotalItems] = useState(0)
const [dataPost, setDataPost] = useState(initialDataPost)
const itemsPerPage = 5 const itemsPerPage = 5
const [token, setToken] = useState(''); const [token, setToken] = useState('');
@ -42,7 +48,7 @@ export default function ListItem() {
}, [location]) }, [location])
useEffect(() => { useEffect(() => {
getData(1) getData()
}, []) }, [])
const onClickEdit = (data) => { const onClickEdit = (data) => {
@ -50,13 +56,13 @@ export default function ListItem() {
setShowModal(true) setShowModal(true)
} }
const onDelete = async (data) => { const onDelete = async (value) => {
let dataPost = { let dataDel = {
obj_id: data._id, obj_id: value._id,
id: data.id, id: value.id,
name: data.name, name: value.name,
birthday: data.birthday, birthday: value.birthday,
gender: data.gender, gender: value.gender,
is_deleted : 1 is_deleted : 1
} }
try { try {
@ -68,9 +74,13 @@ export default function ListItem() {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
// 'Authorization': token, // 'Authorization': token,
}, },
data: dataPost, data: dataDel,
}) })
if (result.data.status === 10000) { if (result.data.status === 10000) {
if (data.length === 1) {
setActivePage(activePage - 1)
setDataPost({ ...dataPost, index: activePage - 1 })
}
swal({ swal({
icon: 'success', icon: 'success',
title: 'Thành công', title: 'Thành công',
@ -78,9 +88,7 @@ export default function ListItem() {
timer: 1500, timer: 1500,
buttons: false, buttons: false,
}) })
getData(activePage) getData(dataPost)
} else if (result.data.status === 10004) {
swal("Thất bại", "Xoá thất bại!", "error");
} else { } else {
swal("Thất bại", "Xoá thất bại!", "error"); swal("Thất bại", "Xoá thất bại!", "error");
} }
@ -91,11 +99,15 @@ export default function ListItem() {
} }
const handlePageChange = (pageNumber) => { const handlePageChange = (pageNumber) => {
setActivePage(pageNumber) setActivePage(pageNumber);
getData(pageNumber) const data = {
...dataPost,
index: pageNumber,
}
getData(data);
} }
const getData = async (page) => { const getData = async (data) => {
try { try {
const result = await axios({ const result = await axios({
method: 'POST', method: 'POST',
@ -105,11 +117,7 @@ export default function ListItem() {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
// 'Authorization': token // 'Authorization': token
}, },
data: { data: data ? data : dataPost,
index: page,
item_per_page: itemsPerPage,
search_data: dataSearch
},
}) })
if (result.data.status === 10000) { if (result.data.status === 10000) {
setData(result.data.data) setData(result.data.data)
@ -125,7 +133,7 @@ export default function ListItem() {
const handleOnKeyDown = e => { const handleOnKeyDown = e => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
setActivePage(1) setActivePage(1)
getData(1); getData(dataPost);
} }
} }
@ -143,7 +151,9 @@ export default function ListItem() {
var listImg var listImg
if (value.sample_images.length > 0) { if (value.sample_images.length > 0) {
listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.sample_images.length > 0 && value.image_host + value.sample_images[0]}`} /> let getDateImg = value.sample_images[0].split("_")
let dataImg = getDateImg.length > 0 && getDateImg[1].slice(0,6)
listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.sample_images.length > 0 && value.image_host +dataImg+ "/" +value.sample_images[0]}`} />
} else { } else {
listImg = <Avatar shape="square" size={80} icon={<UserOutlined />} /> listImg = <Avatar shape="square" size={80} icon={<UserOutlined />} />
} }
@ -191,13 +201,18 @@ export default function ListItem() {
const onCloseModal = () => { const onCloseModal = () => {
setShowModal(false) setShowModal(false)
setActivePage(activePage) // setActivePage(activePage)
getData(activePage) const data = {
...dataPost,
index: activePage,
}
getData(data);
} }
const reset = async () => { const reset = () => {
setDataSearch('') setActivePage(1)
getData(1) setDataPost({...dataPost, search_data: ""})
getData(initialDataPost)
} }
return ( return (
@ -220,9 +235,9 @@ export default function ListItem() {
<input type="text" <input type="text"
onKeyPress={(e) => handleOnKeyDown(e)} onKeyPress={(e) => handleOnKeyDown(e)}
onChange={(e) => { onChange={(e) => {
setDataSearch(e.target.value) setDataPost({ ...dataPost, search_data: e.target.value })
}} }}
value={dataSearch} value={dataPost.search_data}
id="inputSearch" className="form-control m-input" id="inputSearch" className="form-control m-input"
placeholder="Họ tên..." placeholder="Họ tên..."
data-col-index={0} data-col-index={0}
@ -232,7 +247,7 @@ export default function ListItem() {
<button <button
onClick={() => { onClick={() => {
setActivePage(1) setActivePage(1)
getData(1) getData(dataPost)
}} }}
className="btn btn-accent m-btn m-btn--icon" id="m_search"> className="btn btn-accent m-btn m-btn--icon" id="m_search">
<span> <span>
@ -244,9 +259,7 @@ export default function ListItem() {
<div className="pl-3"> <div className="pl-3">
<button <button
onClick={() => { onClick={() => {
setDataSearch("") reset()
setActivePage(1)
getData(1)
}} }}
className="btn btn-secondary m-btn m-btn--icon" id="m_reset"> className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
<span> <span>

29
app/src/components/Modal/ModalEdit.js
View File

@ -28,6 +28,8 @@ const Modaledit = (props) => {
const [disableBtn, setDisableBtn] = useState(true); const [disableBtn, setDisableBtn] = useState(true);
const [dateImage, setDateImg] = useState("")
const [hostImg, setHostImg] = useState(''); const [hostImg, setHostImg] = useState('');
useEffect(() => { useEffect(() => {
@ -56,13 +58,26 @@ const Modaledit = (props) => {
} }
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 () => { const click_handle = async () => {
let dataPost = { let dataPost = {
origin_name : crrData.name, obj_id: crrData._id ? crrData._id : "",
id: crrData.id,
name: crrData.name,
birthday: crrData.birthday,
gender: crrData.gender ? crrData.gender : ""
} }
const result = await axios({ const result = await axios({
method: 'POST', method: 'POST',
url: `${HOST}/api/face_images/insert_or_update`, url: `${HOST}/api/famous_persons/insert_or_update`,
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -99,7 +114,10 @@ const Modaledit = (props) => {
const bulletedImg = crrImages.map((value, index) => { const bulletedImg = crrImages.map((value, index) => {
let renderImg = value.includes("data:image") ? value : hostImg + value 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 ( return (
<div className="img-res col-md-4 pl-0 mb-3" key={index + 1}> <div className="img-res col-md-4 pl-0 mb-3" key={index + 1}>
<div style={{ 'height': 80 }}> <div style={{ 'height': 80 }}>
@ -195,6 +213,9 @@ const Modaledit = (props) => {
.then(data => { .then(data => {
if (data.status === 10000) { if (data.status === 10000) {
let listDetele = crrImages.filter(item => !listDelImg.includes(item)); let listDetele = crrImages.filter(item => !listDelImg.includes(item));
if (crrIdx >= 1) {
setCrrIdx(crrIdx - 1)
}
setCrrImages(listDetele) setCrrImages(listDetele)
} }
}) })
@ -232,7 +253,7 @@ const Modaledit = (props) => {
<div className="row justify-content-center pb-3"> <div className="row justify-content-center pb-3">
{ {
crrImages[crrIdx] ? crrImages[crrIdx] ?
<Avatar shape="square" src={crrImages[crrIdx].includes("data:image") ? crrImages[crrIdx] : hostImg + crrImages[crrIdx]} size={180} icon={<UserOutlined />} /> : <Avatar shape="square" src={crrImages[crrIdx].includes("data:image") ? crrImages[crrIdx] : hostImg +dateImage+"/"+ crrImages[crrIdx]} size={180} icon={<UserOutlined />} /> :
<Avatar shape="square" size={180} icon={<UserOutlined />} /> <Avatar shape="square" size={180} icon={<UserOutlined />} />
} }

2
app/src/components/Modal/ModalUpload.js
View File

@ -36,7 +36,6 @@ const ModalUpload = (props) => {
}) })
console.log(result) console.log(result)
if (result.data.status === 10000) { if (result.data.status === 10000) {
setLoading(false)
swal({ swal({
text: "Tải ảnh lên thành công", text: "Tải ảnh lên thành công",
icon: "success", icon: "success",
@ -56,6 +55,7 @@ const ModalUpload = (props) => {
console.log(error) console.log(error)
swal("Thất bại", "Tải ảnh lên thất bại!", "error") swal("Thất bại", "Tải ảnh lên thất bại!", "error")
} }
setLoading(false)
} }

3836
app/yarn.lock
View File

File diff suppressed because it is too large Load Diff