371 lines
14 KiB
JavaScript
371 lines
14 KiB
JavaScript
import React, { Component } from "react";
|
|
import { HOST } from '../../config';
|
|
import swal from 'sweetalert';
|
|
import { Redirect } from 'react-router-dom';
|
|
import Pagination from "react-js-pagination";
|
|
import $ from 'jquery';
|
|
import { PulseLoader } from 'react-spinners';
|
|
import Modalupload from '../Modal/ModalUpload';
|
|
import ModalEditImg from '../Modal/ModalEditImg';
|
|
import axios from 'axios';
|
|
import { Avatar, Tooltip, Image } from 'antd';
|
|
import {UserOutlined} from '@ant-design/icons';
|
|
import momment from 'moment';
|
|
import Select from "react-select";
|
|
import Store from '../../store';
|
|
class ImportImage extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
listImgImport: [],
|
|
crrImg: [],
|
|
activePage: 1,
|
|
offset: 0,
|
|
showFirst: 0,
|
|
showLast: 0,
|
|
totalLength: 0,
|
|
loading: true,
|
|
count: 0,
|
|
modalShow: false,
|
|
dataEdit: null,
|
|
modalUploadShow: false,
|
|
dataSearch: "",
|
|
optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}],
|
|
valueSelected: {value: 2, label:"Tải lên"},
|
|
dataRole: Store.getState().role.role,
|
|
}
|
|
Store.subscribe(() => {
|
|
this.setState({
|
|
dataRole: Store.getState().role.role,
|
|
}, () => {
|
|
|
|
});
|
|
});
|
|
this.itemsPerPage = 5;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getListImg(1);
|
|
}
|
|
|
|
|
|
getListImg = async (page) => {
|
|
this.setState({ loading: true });
|
|
try {
|
|
const result = await axios({
|
|
method: 'POST',
|
|
url: `${HOST}/api/face_images/search`,
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
// 'Authorization': token
|
|
},
|
|
data: {
|
|
index: page,
|
|
item_per_page: this.itemsPerPage,
|
|
search_data: this.state.dataSearch,
|
|
import_type: this.state.valueSelected.value
|
|
},
|
|
})
|
|
|
|
if (result.data.status === 10000) {
|
|
this.setState({
|
|
listImgImport: result.data.data,
|
|
totalLength: result.data.count,
|
|
}, () => {
|
|
this.FilterItem(this.state.activePage)
|
|
})
|
|
}
|
|
} catch (error) {
|
|
this.setState({
|
|
})
|
|
console.log(error);
|
|
}
|
|
this.setState({ loading: false });
|
|
}
|
|
|
|
|
|
|
|
modalClose = () => {
|
|
this.setState({
|
|
modalShow: false,
|
|
});
|
|
this.getListImg(this.state.activePage);
|
|
}
|
|
|
|
modalUploadClose = () => {
|
|
this.setState({
|
|
modalUploadShow: false,
|
|
});
|
|
this.getListImg(this.state.activePage);
|
|
}
|
|
|
|
FilterItem = (activePage) => {
|
|
const offset = (activePage - 1) * this.itemsPerPage;
|
|
this.setState({
|
|
offset: offset
|
|
})
|
|
}
|
|
|
|
onClickEdit = (value) => {
|
|
this.setState({
|
|
modalShow: true,
|
|
dataEdit: value
|
|
})
|
|
}
|
|
|
|
handlePageChange = (pageNumber) => {
|
|
this.setState({
|
|
activePage: pageNumber
|
|
}, () => {
|
|
this.getListImg(pageNumber);
|
|
})
|
|
}
|
|
|
|
onDelete = async (img) => {
|
|
let data = await fetch(`${HOST}/api/face_images/delete`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
// 'Authorization': token
|
|
},
|
|
body: JSON.stringify({ 'image_obj_id_list': [img._id] })
|
|
}).then((response) => {
|
|
return response.json()
|
|
});
|
|
|
|
if (data.status === 10000) {
|
|
var { activePage } = this.state
|
|
if (this.state.listImgImport.length === 1) {
|
|
activePage = activePage - 1
|
|
}
|
|
this.setState({
|
|
activePage: activePage
|
|
})
|
|
swal("Thành công", "Xoá ảnh thành công", "success")
|
|
this.getListImg(this.state.activePage);
|
|
}
|
|
else {
|
|
swal("Thất bại", "Xoá ảnh thất bại", "error");
|
|
}
|
|
}
|
|
|
|
handleOnKeyDown = e => {
|
|
if (e.key === 'Enter') {
|
|
this.getListImg(1)
|
|
}
|
|
}
|
|
|
|
reset = () => {
|
|
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) {
|
|
// return (
|
|
// <Redirect to={'/login'} />
|
|
// )
|
|
// }
|
|
let bulletedListImg = this.state.listImgImport.map((value, index) => {
|
|
|
|
var listImg
|
|
listImg = <Image style={{ width: "80px", height: "auto", objectFit: "contain"}} alt="" src={`${value.image_host}`} />
|
|
|
|
|
|
return (
|
|
<tr key={index}>
|
|
<td>{(index + this.state.offset + 1)}</td>
|
|
<td>{listImg}</td>
|
|
<td>{value.origin_name}</td>
|
|
<td>{value.import_type === 1 ? "Facebook" : "Tải lên"}</td>
|
|
<td>{momment(value.created_time).format("DD-MM-YYYY")}</td>
|
|
{this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" :
|
|
<td>
|
|
{this.state.dataRole?.indexOf('import:edit') !== -1 ?
|
|
<Tooltip placement="top" title={"Sửa"}>
|
|
<button
|
|
onClick={() => this.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> : ""}
|
|
{this.state.dataRole?.indexOf('import: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á ảnh này",
|
|
icon: "warning",
|
|
buttons: ["Huỷ", "Xoá"],
|
|
dangerMode: true,
|
|
})
|
|
.then(willDelete => {
|
|
if (willDelete) {
|
|
this.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>
|
|
)
|
|
});
|
|
|
|
return (
|
|
<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="m-portlet__head-text">
|
|
Kho ảnh
|
|
</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) => this.handleOnKeyDown(e)}
|
|
onChange={(e) => {
|
|
this.setState({
|
|
dataSearch: e.target.value
|
|
})
|
|
}}
|
|
value={this.state.dataSearch}
|
|
id="inputSearch" className="form-control m-input"
|
|
placeholder="Tên ảnh..."
|
|
data-col-index={0}
|
|
/>
|
|
</div>
|
|
<div className="form-group m-form__group col-xl-2">
|
|
{process.env.REACT_APP_SOURCE_IMG === "1" ?
|
|
<Select
|
|
placeholder={'Loại ảnh'}
|
|
value={this.state.valueSelected}
|
|
onChange={this.changeHandleFilter}
|
|
options={this.state.optionSelect}
|
|
/> : ""
|
|
}
|
|
</div>
|
|
<div className="pl-3">
|
|
<button
|
|
onClick={() => {
|
|
this.getListImg(1);
|
|
this.setState({
|
|
activePage: 1
|
|
})
|
|
}}
|
|
className="btn btn-accent m-btn m-btn--icon" id="m_search">
|
|
<span>
|
|
<i className="la la-search" />
|
|
<span>Tìm kiếm</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div className="pl-3">
|
|
<button
|
|
onClick={() => {
|
|
this.reset()
|
|
}}
|
|
className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
|
|
<span>
|
|
<i className="la la-rotate-left" />
|
|
<span>Tải lại</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{this.state.dataRole?.indexOf('import:upload') !== -1 ?
|
|
<div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
|
|
<button
|
|
onClick={(e) => {
|
|
this.setState({
|
|
modalUploadShow: 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>Tải ảnh lên</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
: "" }
|
|
</div>
|
|
{/*begin: Datatable */}
|
|
<table className="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
|
|
<thead>
|
|
<tr>
|
|
<th style={{width: "50px"}}>STT</th>
|
|
<th>Ảnh</th>
|
|
<th>Tên ảnh</th>
|
|
<th>Loại ảnh</th>
|
|
<th>Ngày tải lên</th>
|
|
{this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" : <th>Thao tác</th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody>{bulletedListImg}</tbody>
|
|
</table>
|
|
<Modalupload
|
|
show={this.state.modalUploadShow}
|
|
onHide={this.modalUploadClose}
|
|
/>
|
|
<ModalEditImg
|
|
show={this.state.modalShow}
|
|
onHide={this.modalClose}
|
|
data={this.state.dataEdit}
|
|
/>
|
|
<PulseLoader
|
|
// css={override}
|
|
sizeUnit={"px"}
|
|
size={12}
|
|
margin={'2px'}
|
|
color={'#36D7B7'}
|
|
loading={this.state.loading}
|
|
/>
|
|
<Pagination
|
|
prevPageText='Trang trước'
|
|
nextPageText='Trang sau'
|
|
firstPageText='Trang đầu'
|
|
lastPageText='Trang cuối'
|
|
activePage={this.state.activePage}
|
|
itemsCountPerPage={this.itemsPerPage}
|
|
totalItemsCount={this.state.totalLength}
|
|
pageRangeDisplayed={5}
|
|
onChange={this.handlePageChange}
|
|
/>
|
|
<div className="font-family-text">Tổng kết quả <strong>{this.state.totalLength}</strong></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
export default ImportImage;
|