351 lines
14 KiB
JavaScript
351 lines
14 KiB
JavaScript
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';
|
|
import { useSelector } from 'react-redux';
|
|
import Store from '../../store';
|
|
|
|
const initialDataPost = {
|
|
index: 1,
|
|
item_per_page: 5,
|
|
search_data: "",
|
|
person_type: 4,
|
|
}
|
|
|
|
export default function LabelImage() {
|
|
|
|
const [data, setData] = useState(null)
|
|
const [showModal, setShowModal] = useState(false)
|
|
const [dataEdit, setDataEdit] = useState(null)
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const token = useSelector(state => state.isLogin.access_token);
|
|
const dataRole = useSelector(state => state.role.role);
|
|
|
|
console.log(token)
|
|
|
|
const [activePage, setActivePage] = useState(1)
|
|
const [totalItems, setTotalItems] = useState(0)
|
|
|
|
const [dataPost, setDataPost] = useState(initialDataPost)
|
|
const itemsPerPage = 5
|
|
|
|
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
if (location.search) {
|
|
let path = location.search.replace('?', '').split('&');
|
|
let obj = {}
|
|
path.forEach(value => {
|
|
let arr = value.split('=');
|
|
obj[arr[0]] = arr[1]
|
|
})
|
|
}
|
|
}, [location])
|
|
|
|
useEffect(() => {
|
|
getData()
|
|
}, [])
|
|
|
|
const onClickEdit = (data) => {
|
|
setDataEdit(data)
|
|
setShowModal(true)
|
|
}
|
|
|
|
const onDelete = async (value) => {
|
|
let dataDel = {
|
|
obj_id: value._id,
|
|
id: value.id,
|
|
name: value.name,
|
|
birthday: value.birthday,
|
|
gender: value.gender,
|
|
is_deleted : 1
|
|
}
|
|
try {
|
|
const result = await axios({
|
|
method: 'POST',
|
|
url: `${HOST}/api/famous_persons/insert_or_update`,
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': Store.getState().isLogin.access_token,
|
|
// 'Authorization': token,
|
|
},
|
|
data: dataDel,
|
|
})
|
|
if (result.data.status === 10000) {
|
|
if (data.length === 1) {
|
|
setActivePage(activePage - 1)
|
|
setDataPost({ ...dataPost, index: activePage - 1 })
|
|
}
|
|
swal({
|
|
icon: 'success',
|
|
title: 'Thành công',
|
|
text: 'Xoá thành công',
|
|
timer: 1500,
|
|
buttons: false,
|
|
})
|
|
getData(dataPost)
|
|
} else {
|
|
swal("Thất bại", "Xoá thất bại!", "error");
|
|
}
|
|
} catch (error) {
|
|
setLoading(false)
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
const handlePageChange = (pageNumber) => {
|
|
setActivePage(pageNumber);
|
|
const data = {
|
|
...dataPost,
|
|
index: pageNumber,
|
|
}
|
|
getData(data);
|
|
}
|
|
|
|
const getData = async (data) => {
|
|
try {
|
|
const result = await axios({
|
|
method: 'POST',
|
|
url: `${HOST}/api/famous_persons/search`,
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': Store.getState().isLogin.access_token,
|
|
// 'Authorization': token
|
|
},
|
|
data: data ? data : dataPost,
|
|
})
|
|
if (result.data.status === 10000) {
|
|
setData(result.data.data)
|
|
setTotalItems(result.data.count)
|
|
setLoading(false)
|
|
}
|
|
} catch (error) {
|
|
setLoading(false)
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
const handleOnKeyDown = e => {
|
|
if (e.key === 'Enter') {
|
|
setActivePage(1)
|
|
getData(dataPost);
|
|
}
|
|
}
|
|
|
|
const tableRows = (dataAll) => dataAll.map((value, index) => {
|
|
var gender = ""
|
|
if (value.gender === "1") {
|
|
gender = "Nam"
|
|
} else if (value.gender === "2") {
|
|
gender = "Nữ"
|
|
} else if (value.gender === "3") {
|
|
gender = "Giới tính khác"
|
|
} else {
|
|
gender = ""
|
|
}
|
|
|
|
var listImg
|
|
if (value.sample_images.length > 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 {
|
|
listImg = <Avatar shape="square" size={80} icon={<UserOutlined />} />
|
|
}
|
|
|
|
return (
|
|
<tr key={index}>
|
|
<td>{listImg}</td>
|
|
<td>{value.name}</td>
|
|
<td>{value.id}</td>
|
|
<td>{gender}</td>
|
|
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
|
|
{(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" :
|
|
<td>
|
|
{dataRole?.indexOf('person:edit') !== -1 ?
|
|
<Tooltip placement="top" title={"Sửa"}>
|
|
<button
|
|
onClick={() => onClickEdit(value)}
|
|
className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
|
|
<i className="la la-edit" />
|
|
</button>
|
|
</Tooltip>
|
|
: ""}
|
|
{dataRole?.indexOf('person:delete') !== -1 ?
|
|
<Tooltip placement="top" title={"Xoá"}>
|
|
<button
|
|
onClick={f => {
|
|
f.preventDefault();
|
|
swal({
|
|
// title: "Are you sure?",
|
|
text: "Bạn có chắc muốn xoá " + value.name,
|
|
icon: "warning",
|
|
buttons: ["Huỷ", "Xoá"],
|
|
dangerMode: true,
|
|
})
|
|
.then(willDelete => {
|
|
if (willDelete) {
|
|
onDelete(value);
|
|
}
|
|
});
|
|
}}
|
|
className="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
|
|
<i className="la la-trash" />
|
|
</button>
|
|
</Tooltip>
|
|
: ""}
|
|
</td>}
|
|
</tr>
|
|
)
|
|
})
|
|
|
|
|
|
const onCloseModal = () => {
|
|
setShowModal(false)
|
|
// setActivePage(activePage)
|
|
const data = {
|
|
...dataPost,
|
|
index: activePage,
|
|
}
|
|
getData(data);
|
|
}
|
|
|
|
const reset = () => {
|
|
setActivePage(1)
|
|
setDataPost({...dataPost, search_data: ""})
|
|
getData(initialDataPost)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{showModal && <ModalEditLabel data={dataEdit} onHide={onCloseModal} show={showModal} />}
|
|
<div className="m-grid__item m-grid__item--fluid m-wrapper p-2" id="capture_form">
|
|
<div className="m-content p-2">
|
|
<div className="m-portlet m-portlet--mobile pb-3">
|
|
<div className="m-portlet__head">
|
|
<div className="m-portlet__head-caption">
|
|
<div className="m-portlet__head-title">
|
|
<h3 className="font-family-text">
|
|
Gán nhãn
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="m-portlet__body pt-2">
|
|
<div className="row pl-4">
|
|
<div className="row p-3 col-xl-11">
|
|
<div className="col-lg-2 p-0 m--margin-bottom-10-tablet-and-mobile">
|
|
<input type="text"
|
|
onKeyPress={(e) => handleOnKeyDown(e)}
|
|
onChange={(e) => {
|
|
setDataPost({ ...dataPost, search_data: e.target.value })
|
|
}}
|
|
value={dataPost.search_data}
|
|
id="inputSearch" className="font-family-text form-control m-input"
|
|
placeholder="Họ tên..."
|
|
data-col-index={0}
|
|
/>
|
|
</div>
|
|
<div className="pl-3">
|
|
<button
|
|
onClick={() => {
|
|
setActivePage(1)
|
|
getData(dataPost)
|
|
}}
|
|
className="btn btn-accent m-btn m-btn--icon" id="m_search">
|
|
<span>
|
|
<i className="la la-search" />
|
|
<span className='font-family-text'>Tìm kiếm</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div className="pl-3">
|
|
<button
|
|
onClick={() => {
|
|
reset()
|
|
}}
|
|
className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
|
|
<span>
|
|
<i className="la la-rotate-left" />
|
|
<span className='font-family-text'>Tải lại</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{dataRole?.indexOf('person:edit') !== -1 ?
|
|
<div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
|
|
<button
|
|
onClick={(e) => {
|
|
let dataEdit = {
|
|
obj_id: "",
|
|
id: "",
|
|
name: "",
|
|
birthday: "",
|
|
gender: "",
|
|
sample_images: [],
|
|
image_host: ""
|
|
};
|
|
setDataEdit(dataEdit)
|
|
setShowModal(true)
|
|
}}
|
|
className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air">
|
|
<span>
|
|
<i className="la la-plus" />
|
|
<span>Thêm mới</span>
|
|
</span>
|
|
</button>
|
|
</div> : "" }
|
|
</div>
|
|
{/*begin: Datatable */}
|
|
<table className="table table-striped- font-family-text color table-bordered table-hover table-checkable" id="m_table_1">
|
|
<thead>
|
|
<tr>
|
|
<th>Ảnh</th>
|
|
<th>Họ tên</th>
|
|
<th>FacebookID</th>
|
|
<th>Giới tính</th>
|
|
<th>Ngày sinh</th>
|
|
{(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" : <th>Thao tác</th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody>{data && tableRows(data)}</tbody>
|
|
</table>
|
|
<PulseLoader
|
|
// css={override}
|
|
sizeUnit={"px"}
|
|
size={12}
|
|
margin={'2px'}
|
|
color={'#36D7B7'}
|
|
loading={loading}
|
|
/>
|
|
<Pagination
|
|
prevPageText='Trang trước'
|
|
nextPageText='Trang sau'
|
|
firstPageText='Trang đầu'
|
|
lastPageText='Trang cuối'
|
|
activePage={activePage}
|
|
itemsCountPerPage={itemsPerPage}
|
|
totalItemsCount={totalItems}
|
|
pageRangeDisplayed={5}
|
|
onChange={handlePageChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|