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"; import { useSelector } from 'react-redux'; const initialDataPost = { index: 1, item_per_page: 10, search_data: "", is_deleted: 0, } 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 dataRole = useSelector(state => state.role.role); 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 = 10 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 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 (
STT | Tên đăng nhập | Họ tên | Giới tính | Ngày sinh | Số điện thoại | {/*Trạng thái | */} {(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" :Thao tác | }
---|