Added control page tests and fixed bugs

static/main/js/control_page/src/control.js

@@ -1,6 +1,48 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, {useState} from "react";
 import axios from "axios";
+import * as ReactDOM from "react-dom";
+
+function FreeWorkplaces(props) {
+  return (
+    <div className="new-section">
+      <p className="row page-description" id="licences_remaining">Свободных мест: {props.count}</p>
+    </div>
+  )
+
+}
+
+function WorkersCount(props) {
+  return (
+    <div className="row justify-content-center new-section d-flex align-items-center">
+      <div className="col-5">
+        <div className="info">
+          <div className="info-row">
+            <div className="info-target">Инженеров:</div>
+            <div className="info-quantity">
+              <div className="status-circle-small light-green"></div>
+              <span className="info-quantity-value" id="engineers">{props.engineers}</span>
+            </div>
+          </div>
+          <div className="info-row">
+            <div className="info-target">Легких агентов:</div>
+            <div className="info-quantity">
+              <div className="status-circle-small light-yellow"></div>
+              <span className="info-quantity-value" id="agents">{props.light_agents}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="col-5">
+        <button type="submit" name="engineer" className="request-acess-button default-button">
+          Назначить выбранных на роль инженера
+        </button>
+        <button type="submit" name="light_agent" className="hand-over-acess-button default-button">
+          Назначить выбранных на роль легкого агента
+        </button>
+      </div>
+    </div>
+  )
+}
 
 class ModelUserTableRow extends React.Component {
   render() {
@@ -26,11 +68,10 @@ class ModelUserTableRow extends React.Component {
 
 class ModelUserTableRows extends React.Component {
   render() {
-    return ReactDOM.createPortal(
+    return (
       this.props.users.map((user, key) => (
         <ModelUserTableRow user={user} key={key} />
-      )),
-      document.getElementById("tbody")
+      ))
     );
   }
 }
@@ -58,39 +99,27 @@ class ZendeskUserTableRow extends React.Component {
 
 class ZendeskUserTableRows extends React.Component {
   render() {
-    return ReactDOM.createPortal(
+    return (
       this.props.users.map((user, key) => (
         <ZendeskUserTableRow user={user} key={key} />
-      )),
-      document.getElementById("tbody")
-    );
+      ))
+    )
   }
 }
 
-export class TableBody extends React.Component {
+export class Table extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       users: [],
-      engineers: 0,
-      light_agents: 0,
+      engineers: null,
+      light_agents: null,
       zendesk_users: [],
-      max_agents: 3,
+      max_agents: null,
+      renderLoad: true
     };
   }
 
-  change_elements_html() {
-    let elements = document.querySelectorAll(".info-quantity-value");
-    let licences = document.getElementById("licences_remaining");
-    elements[0].innerHTML = this.state.engineers;
-    elements[1].innerHTML = this.state.light_agents;
-    let max_licences = Math.max(
-      this.state.max_agents - this.state.engineers,
-      0
-    );
-    licences.innerHTML = "Свободных мест: " + max_licences;
-  }
-
   async get_users() {
     await axios.get("/api/users").then((response) => {
       this.setState({
@@ -99,19 +128,23 @@ export class TableBody extends React.Component {
         light_agents: response.data.light_agents,
         zendesk_users: response.data.zendesk_users,
         max_agents: response.data.max_agents,
+        renderLoad: false
       });
+      return response
+    }).catch(reason => {
+      console.log(reason)
     });
-    this.change_elements_html();
-  }
-
-  delete_pretext() {
-    document.getElementById("loading").remove();
   }
 
   componentDidMount() {
-    this.get_users().then(() => this.delete_pretext());
+    this.get_users().then(() => {})
+      .catch(reason => {
+      console.log(reason)
+    });
     this.interval = setInterval(() => {
-      this.get_users();
+      this.get_users().catch(reason => {
+        console.log(reason)
+      })
     }, 60000);
   }
 
@@ -121,10 +154,31 @@ export class TableBody extends React.Component {
 
   render() {
     return (
-      <tr>
-        <ModelUserTableRows users={this.state.users} />
-        <ZendeskUserTableRows users={this.state.zendesk_users} />
-      </tr>
+      <div>
+        <FreeWorkplaces count={Math.max(this.state.max_agents - this.state.engineers, 0)}/>
+        <table className="table table-dark light-table">
+          <thead>
+            <tr>
+              <th>
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  id="head-checkbox"
+                />
+              </th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+            </tr>
+          </thead>
+          <tbody id="tbody">
+            <ModelUserTableRows users={this.state.users}/>
+            <ZendeskUserTableRows users={this.state.zendesk_users}/>
+          </tbody>
+        </table>
+        {this.state.renderLoad === true ? <p id="loading">Данные загружаются...</p> : null}
+        <WorkersCount engineers={this.state.engineers} light_agents={this.state.light_agents}/>
+      </div>
     );
   }
 }