UserListControl.jsx

import React from 'react';
import autoBind from 'react-autobind';
import { ReactTabulator } from 'react-tabulator'
import { Modal, Button } from 'react-bootstrap'

import Log from '../../../Tools/LogTools'
import Notification from '../../../Tools/Notification'

import UserServices from '../../../Services/UserServices'

export default class UserListControl extends React.Component {

    constructor(props) {
        super(props);
        autoBind(this);
        Log("UserListControl", "start");

        this.state = {
            Users: [],
            ShoGroups: false,
            //Заглушка
            UserGroups: {
                ID: -1,
                Name: "",
                Password: "",
                Active: false,
                Changes: -1, 
                Groups: [{                     
                        ID: -11,
                        Name: "",
                        EnterInGroup: false
                    }]
                }
        };

        this.userServices = new UserServices();
        //AutodecrementID
        this.ID = -1;

        this.columns = [
            { title: "ID", field: "ID" },
            { title: "Name", field: "Name", editor: "input" },
            { title: "Password", field: "Password", editor: "input" },
            { title: "Active", field: "Active", editor: "tick" },

            { title: "Groups", formatter: this.ButtonFormatter, align: "center", cellClick: this.OnGroupsClick },
            { title: "Delete", formatter: this.ButtonFormatter, align: "center", cellClick: this.DeleteUserClick },
        ];

        this.columns_groups = [
            { title: "ID", field: "ID" },
            { title: "Name", field: "Name" },
            { title: "EnterInGroup", field: "EnterInGroup", editor: "tick" },
        ];

        this.DownloadUsers();
    }

    DownloadUsers() {
        this.userServices.GetUsersAsync().
            then(function (data) {
                let users = data.Users;
                this.Groups = data.Groups;
                this.setState({ Users: users });
            }.bind(this));
    }
    UploadUsers() {        
        this.userServices.SetUsersAsync(this.state.Users).
            then(function (data) {
                if (data.Successe)
                    Notification.MesOk(data.ResMessage, "Save");
                else
                    Notification.MesEr(data.ResMessage, "Save");

                this.DownloadUsers();
            }.bind(this));
    }

    //custom formatter definition
    ButtonFormatter(cell, formatterParams, onRendered) { //plain text value
        return "<i class='fa fa-print'><button>Action</button></i>";
    };

    OnCellChange(cell) {
        let users = this.state.Users;

        let row = cell.getRow();
        let ID = row._row.data.ID;

        var data_row = users.filter(e => e.ID === ID)[0];

        //Если NoChange то Update
        if (data_row.Changes === 0)
            data_row.Changes = 1;
    }

    OnCellChange_Groups(cell) {

        //Если NoChange то Update
        if (this.state.UserGroups.Changes === 0)
            this.state.UserGroups.Changes = 1;
    }

    UpdateClick() {
        this.DownloadUsers();
    }


    CreateUserCick() {
        let new_user = {
            ID: this.ID,
            Name: "NewUser" + this.ID,
            Password: "QWERTY",
            Active: true,
            Changes: 2, //Create

            Groups: this.Groups.map((e) => {
                return {
                    ID: e.ID,
                    Name: e.Name,
                    EnterInGroup: (e.Name == "Пользователи") ? true : false
                };
            })
        };
        this.ID--;

        let users = this.state.Users;
        users.push(new_user);

        this.setState({ Users: users });
    }

    DeleteUserClick(e, cell) {
        //let table = this.refs.table.table;
        let row = cell.getRow();
        let ID = row._row.data.ID;

        let users = this.state.Users;

        let user = users.filter(e => e.ID === ID)[0];

        if (user.Changes === 2) {
            users.splice(users.findIndex(e => e.ID === ID), 1);
        }
        else {
            user.Changes = 3;
        }

        this.setState({ Users: users });
    }

    OnGroupsClick(e, cell) {
        let row = cell.getRow();
        let ID = row._row.data.ID;

        let users = this.state.Users;

        let user = users.filter(e => e.ID === ID)[0];

        this.setState({ ShoGroups: true, UserGroups: user });
    }
    OnGroupsClose() {
        this.setState({ ShoGroups: false });
    }    

    render() {
        return (
            <div>
                <button onClick={this.CreateUserCick}>CreateUser</button>
                <button onClick={this.DownloadUsers}>Update(Изменения будут утеряны)</button>
                <button onClick={this.UploadUsers}>SaveChanges</button>


                <ReactTabulator ref="table"
                    data={this.state.Users.filter(e => e.Changes != 3)}
                    columns={this.columns}
                    tooltips={true}
                    layout={"fitData"}

                    cellEdited={this.OnCellChange}
                />

                <Modal ref="Modal"
                    show={this.state.ShoGroups}
                    onHide={this.OnGroupsClose}

                    size="lg"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered
                >
                    <Modal.Header closeButton>
                        <Modal.Title>User Groups: {this.state.UserGroups.ID + " " + this.state.UserGroups.Name}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <ReactTabulator ref="table_UserGroups"
                            data={this.state.UserGroups.Groups}
                            columns={this.columns_groups}
                            tooltips={true}
                            layout={"fitData"}

                            cellEdited={this.OnCellChange_Groups}
                        />
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.OnGroupsClose}>
                            Close
                        </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
}