//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 GroupListControl extends React.Component {
// constructor(props) {
// super(props);
// autoBind(this);
// Log("GroupListControl", "start");
// this.state = {
// Groups: [],
// //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>
// );
// }
//}