Untitled
unknown
plain_text
2 years ago
8.3 kB
6
Indexable
import React from 'react'; import Menu from './Menu' import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator'; import Container from 'react-bootstrap/Container' import Row from 'react-bootstrap/Row' import Col from 'react-bootstrap/Col' import Button from 'react-bootstrap/Button' import Form from 'react-bootstrap/Form' import FormControl from 'react-bootstrap/FormControl' import ModalAddUser from './ModalAddUser' import ModalRemoveUser from './ModalRemoveUser' import './ManageUsers.css'; import { RiAddCircleLine, RiDeleteBin2Line } from "react-icons/ri"; import { HiOutlinePencilAlt } from "react-icons/hi"; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import ky from 'ky'; export default class ManageUsers extends React.Component { constructor(props) { super(props); const products = [ ]; const selected = [ ]; this.showAddUserDialog = this.showAddUserDialog.bind(this); this.showRemoveUserDialog = this.showRemoveUserDialog.bind(this); this.getUsers = this.getUsers.bind(this); this.generatePush = this.generatePush.bind(this); this.hideDialog = this.hideDialog.bind(this); this.handleTableChange = this.handleTableChange.bind(this); this.resetSelection = this.resetSelection.bind(this); this.handleSearch = this.handleSearch.bind(this); this.handleChange = this.handleChange.bind(this); this.state = { showDialog: false, dialogType: '' , validated: false, loginErrorState: false, redirect: false, toastMessage: '', selectedItems: selected, data: products, page: 1, sizePerPage: 10, totalSize: 10, endpoint_mode: 'usersList', findString: '' }; } handleTableChange = async (type, { page, sizePerPage }) => { await this.setState({ page: page, sizePerPage: sizePerPage }); await this.getUsers(); } generatePush(type, message) { if(type === "error") { toast.error(message, { position: toast.POSITION.TOP_CENTER }); } if(type === "bigerror") { toast.error(message, { position: toast.POSITION.TOP_CENTER, className: "bigtoast" }); } if(type === "success") { toast.success(message, { position: toast.POSITION.TOP_CENTER }); } } async getUsers() { var url; let p = this.state.page - 1; var endpoint; if (this.state.endpoint_mode === 'usersList') { endpoint = '/api/adminapi/usersList/' + this.state.sizePerPage + '/' + p; } if (this.state.endpoint_mode === 'usersFind') { endpoint = '/api/adminapi/usersFind/' + this.state.findString + '/' + this.state.sizePerPage + '/' + p; } try { const response = await ky.get(endpoint).json(); if (typeof response.usersList !== 'undefined') { response.usersList.forEach( function (element, index, array) { url = '/manage/users/' + element.username; element.action = (<a href={url} ><HiOutlinePencilAlt /></a>); } ) this.setState({ data: response.usersList, totalSize: response.total }); } } catch (error) { this.generatePush("error", "Unexpected error. " + error.response.status + " Try to refresh"); } } componentDidMount() { this.getUsers() } resetSelection() { this.setState(() => ({ selectedItems: [] })); } handleOnSelect = (row, isSelect) => { if (isSelect) { this.setState(() => ({ selectedItems: [...this.state.selectedItems, row.username] })); } else { this.setState(() => ({ selectedItems: this.state.selectedItems.filter(x => x !== row.username) })); } } handleOnSelectAll = (isSelect, rows) => { const ids = rows.map(r => r.username); if (isSelect) { this.setState(() => ({ selectedItems: ids })); } else { this.setState(() => ({ selectedItems: [] })); } } async handleSearch(event) { event.preventDefault(); if (this.state.findString !== '') { await this.setState({ endpoint_mode: 'usersFind', page: 1 }); } else { await this.setState({ endpoint_mode: 'usersList', page: 1 }); } await this.getUsers() } handleChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } showAddUserDialog() { this.setState({ showDialog: true, dialogType: 'addUser' }); } showRemoveUserDialog() { this.setState({ showDialog: true, dialogType: 'removeUser' }); } hideDialog() { this.setState({ showDialog: false, dialogType: '' }); this.getUsers() } render() { let dialog; let btnRemoveInteractive; const columns = [{ dataField: 'id', text: 'Id' }, { dataField: 'username', text: 'Username' }, { dataField: 'creationDate', text: 'Creation date' }, { dataField: 'action', text: '', headerClasses: 'actions-column' } ]; const selectRow = { mode: 'checkbox', classes: 'selection-row', onSelect: this.handleOnSelect, onSelectAll: this.handleOnSelectAll, page: this.state.page, sizePerPage: this.state.sizePerPage, totalSize: this.state.totalSize } const { data, sizePerPage, page, totalSize } = this.state; if(this.state.showDialog && this.state.dialogType === 'addUser') { dialog = ( <ModalAddUser onHide={this.hideDialog} onPush={this.generatePush}/> ); } if(this.state.showDialog && this.state.dialogType === 'removeUser') { dialog = ( <ModalRemoveUser onHide={this.hideDialog} onPush={this.generatePush} usersList={this.state.selectedItems} onRemove={this.resetSelection}/> ); } if(this.state.selectedItems.length < 1) { btnRemoveInteractive = ( <Button variant="danger" size="sm" className="me-1" disabled onClick={this.showRemoveUserDialog}> <RiDeleteBin2Line className="btn-icons-pos"/> Remove </Button> ); } else { btnRemoveInteractive = ( <Button variant="danger" size="sm" className="me-1" onClick={this.showRemoveUserDialog}> <RiDeleteBin2Line className="btn-icons-pos"/> Remove </Button> ); } return ( <> <Menu /> <ToastContainer autoClose={2000} /> {dialog} <h5 className="p-3"> Users Administration </h5> <Container fluid> <Row> <Col xs={10} className="mb-1"> <Button variant="success" size="sm" className="me-1" onClick={this.showAddUserDialog}> <RiAddCircleLine className="btn-icons-pos" /> Add </Button> {btnRemoveInteractive} </Col> <Col> <Form className="d-flex" onSubmit={this.handleSearch}> <FormControl type="search" name = "findString" placeholder="Username" onChange={this.handleChange} value={this.state.findString} className="me-1" aria-label="Search" size="sm" /> <Button variant="outline-success" size="sm" type="submit">Search</Button> </Form> </Col> </Row> <Row> <BootstrapTable keyField='id' remote data={ data } columns={ columns } striped hover condensed pagination={ paginationFactory({ page, sizePerPage, totalSize }) } onTableChange={ this.handleTableChange } selectRow={ selectRow } /> </Row> </Container> </> ); } }
Editor is loading...