update man hinh user
This commit is contained in:
432
app/src/components/User/User.js
Normal file
432
app/src/components/User/User.js
Normal file
@@ -0,0 +1,432 @@
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Tooltip } from 'antd';
|
||||
import axios from 'axios';
|
||||
import ModalUser from '../Modal/ModalUser';
|
||||
import ModalPassword from '../Modal/ModalPassword';
|
||||
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 Switch from "react-switch";
|
||||
import Select from "react-select";
|
||||
|
||||
const initialDataPost = {
|
||||
index: 1,
|
||||
item_per_page: 5,
|
||||
search_data: "",
|
||||
is_deleted: -1,
|
||||
}
|
||||
|
||||
export default function User() {
|
||||
|
||||
const [data, setData] = useState(null)
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [showModalPassword, setShowModalPassword] = useState(false)
|
||||
const [dataEdit, setDataEdit] = useState(null)
|
||||
|
||||
|
||||
const [optionSelect, setOptionSelect] = useState([
|
||||
{value: -1, label: "Tất cả"},
|
||||
{value: 0, label:"Hoạt động"},
|
||||
{value: 1, label: "Không hoạt động"},
|
||||
])
|
||||
|
||||
const [valueSelected, setValueSelected] = useState({value: -1, label:"Tất cả"})
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const [activePage, setActivePage] = useState(1)
|
||||
const [totalItems, setTotalItems] = useState(0)
|
||||
|
||||
const [offset, setOffset] = useState(0)
|
||||
|
||||
const [dataPost, setDataPost] = useState(initialDataPost)
|
||||
const itemsPerPage = 5
|
||||
|
||||
const [token, setToken] = useState('');
|
||||
|
||||
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]
|
||||
})
|
||||
setToken(decodeURIComponent(obj.token))
|
||||
setToken((obj.token))
|
||||
}
|
||||
}, [location])
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const onClickEdit = (data) => {
|
||||
setDataEdit(data)
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const onClickPassword = (data) => {
|
||||
setDataEdit(data._id)
|
||||
setShowModalPassword(true)
|
||||
}
|
||||
|
||||
const onDelete = async (value) => {
|
||||
try {
|
||||
const result = await axios({
|
||||
method: 'DELETE',
|
||||
url: `${HOST}/api/users/${value._id}`,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
// 'Authorization': token,
|
||||
},
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
FilterItem()
|
||||
}, [activePage])
|
||||
|
||||
const FilterItem = () => {
|
||||
const offset = (activePage - 1) * itemsPerPage;
|
||||
setOffset(offset)
|
||||
}
|
||||
|
||||
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/users/search`,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
// '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 checked = true;
|
||||
if (value.is_deteted === 1) {
|
||||
checked = true
|
||||
|
||||
}
|
||||
if (value.is_deteted === 0) {
|
||||
checked = false
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{(index + offset + 1)}</td>
|
||||
<td>{value.username}</td>
|
||||
<td>{value.full_name}</td>
|
||||
<td>{gender}</td>
|
||||
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
|
||||
<td>{value.phone_number}</td>
|
||||
<td>
|
||||
{
|
||||
value.is_deleted === 1
|
||||
?
|
||||
<span className="m-badge m-badge--secondary m-badge--wide">Không hoạt động</span>
|
||||
:
|
||||
<span className="m-badge m-badge--accent m-badge--wide">Hoạt động</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
<Tooltip placement="top" title={"Đổi mật khẩu"}>
|
||||
<button
|
||||
onClick={() => onClickPassword(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="fa flaticon-lock" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<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.full_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 changeHandleFilter = (e) => {
|
||||
setDataPost({ ...dataPost, is_deleted: e.value })
|
||||
setValueSelected(e)
|
||||
}
|
||||
const onCloseModalPassword = () => {
|
||||
setShowModalPassword(false)
|
||||
const data = {
|
||||
...dataPost,
|
||||
index: activePage,
|
||||
}
|
||||
getData(data);
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
setActivePage(1)
|
||||
setDataPost({ ...dataPost, search_data: "" })
|
||||
getData(initialDataPost)
|
||||
setValueSelected({ value: -1, label: "Tất cả" })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-grid__item m-grid__item--fluid m-wrapper">
|
||||
<div className="m-content p-2">
|
||||
<div className="m-portlet m-portlet--tab mb-0">
|
||||
<div className="m-portlet__head p-3">
|
||||
<div className="m-portlet__head-caption pl-3">
|
||||
<div className="m-portlet__head-title">
|
||||
<h3 className="m-portlet__head-text">
|
||||
Quản lí người dùng
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-portlet__head-tools pr-3">
|
||||
<ul className="m-portlet__nav">
|
||||
<li className="m-portlet__nav-item">
|
||||
{/* {
|
||||
this.state.dataRole.indexOf(this.state.type + '/' + nameTab + ':insert_or_update') !== -1
|
||||
? */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
let defaultData = {
|
||||
birthday: "",
|
||||
// company_id: "1"
|
||||
full_name: "",
|
||||
gender: "1",
|
||||
is_deleted: 0,
|
||||
phone_number: "",
|
||||
role_id_list: [],
|
||||
username: ""
|
||||
}
|
||||
setDataEdit(defaultData)
|
||||
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</span>
|
||||
</span>
|
||||
</button>
|
||||
{/* :
|
||||
""
|
||||
} */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-portlet__body m-portlet__body--no-padding">
|
||||
<div className="row m-row--no-padding m-row--col-separator-xl">
|
||||
<div className="col-xl-12">
|
||||
<div className="m-widget1 col-xl-12 mx-auto">
|
||||
<div className="row col-md-12 ml-0 mr-0 p-0 mb-2">
|
||||
<div className="col-lg-2 pl-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="form-control m-input"
|
||||
placeholder="Tên đăng nhập..."
|
||||
data-col-index={0} />
|
||||
</div>
|
||||
<div className="form-group m-form__group col-xl-2">
|
||||
<Select
|
||||
value={valueSelected}
|
||||
onChange={changeHandleFilter}
|
||||
options={optionSelect}
|
||||
/>
|
||||
</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>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>Tải lại</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<table className="table table-bordered table-hover table-checkable dataTable no-footer dtr-inline collapsed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ 'verticalAlign': 'middle', 'width': '80px' }}>STT</th>
|
||||
<th style={{ 'verticalAlign': 'middle', 'width': '240px' }}>Tên đăng nhập</th>
|
||||
<th style={{ 'verticalAlign': 'middle', 'width': '280px' }}>Họ tên</th>
|
||||
<th style={{ 'verticalAlign': 'middle' }}>Giới tính</th>
|
||||
<th style={{ 'verticalAlign': 'middle' }}>Ngày sinh</th>
|
||||
<th style={{ 'verticalAlign': 'middle' }}>Số điện thoại</th>
|
||||
<th style={{ 'verticalAlign': 'middle' }}>Trạng thái</th>
|
||||
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>
|
||||
{/* {
|
||||
this.state.dataRole.indexOf(this.state.type + '/' + nameTab + ':insert_or_update') !== -1
|
||||
||
|
||||
this.state.dataRole.indexOf(this.state.type + '/' + nameTab + ':delete') !== -1
|
||||
?
|
||||
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>{language[this.props.indexLanguage].textTable.action}</th>
|
||||
:
|
||||
""
|
||||
} */}
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data && tableRows(data)}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* <PulseLoader
|
||||
css={override}
|
||||
sizeUnit={"px"}
|
||||
size={12}
|
||||
margin={'2px'}
|
||||
color={'#36D7B7'}
|
||||
loading={this.state.loading}
|
||||
/> */}
|
||||
</div>
|
||||
{/* <span>
|
||||
Showing {this.state.showFirst} to {this.state.showLast} of {this.state.totalLength} entries
|
||||
</span> */}
|
||||
{showModal && <ModalUser data={dataEdit} onHide={onCloseModal} show={showModal} />}
|
||||
{showModalPassword && <ModalPassword obj_id={dataEdit} onHide={onCloseModalPassword} show={showModalPassword} />}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user