From af63ee29f3a5d7fd3d5163261224cb84bfa76037 Mon Sep 17 00:00:00 2001
From: Yuriy Kulakov <yuriy.kulakov.123@gmail.com>
Date: Sun, 18 Apr 2021 19:15:23 +0300
Subject: [PATCH] Now the first column of table at control page is checkbox

---
 main/templates/pages/adm_ruleset.html | 11 ++++++--
 main/views.py                         | 27 ++-----------------
 static/main/js/control.js             | 39 ++++++++++++++++++++-------
 3 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/main/templates/pages/adm_ruleset.html b/main/templates/pages/adm_ruleset.html
index c0a5ad9..a951f80 100644
--- a/main/templates/pages/adm_ruleset.html
+++ b/main/templates/pages/adm_ruleset.html
@@ -8,6 +8,7 @@
 
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'main/css/work.css' %}"/>
+
 {% endblock %}
 
 {% block extra_scripts %}
@@ -21,7 +22,7 @@
 <div class="container-md">
 
     <div class="new-section">
-        <p class="row page-description">Свободных Мест: {{ licences_remaining }}</p>
+        <p class="row page-description" id="licences_remaining">Свободных Мест:</p>
     </div>
 
   {% block form %}
@@ -37,10 +38,16 @@
         <table class="table table-dark light-table">
 
             <thead>
+            <th>
+                <input
+                  type="checkbox"
+                  class="form-check-input"
+                  id="head-checkbox"
+                />
+              </th>
               <th>Name</th>
               <th>Email</th>
               <th>Role</th>
-              <th>Checked</th>
             </thead>
             <tbody id="tbody"></tbody>
 
diff --git a/main/views.py b/main/views.py
index 0129b3a..5c336eb 100644
--- a/main/views.py
+++ b/main/views.py
@@ -300,30 +300,6 @@ class AdminPageView(LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageM
             make_light_agent(user, self.request.user)
             log(user, self.request.user.userprofile)
 
-    def get_context_data(self, **kwargs) -> dict:
-        """
-        Функция формирования контента страницы администратора (с проверкой прав доступа)
-        """
-
-        # context = super().get_context_data(**kwargs)
-
-        # context['licences_remaining'] = max(0, ZENDESK_MAX_AGENTS - context['engineers'])
-        # return context
-
-        context = setup_context(control_lit=True)
-        context.update(super().get_context_data(**kwargs))
-        users = get_list_or_404(
-            UserProfile, role='agent')
-        context['engineers'], context['light_agents'] = count_users(get_users_list())
-        context.update({
-            'users': users,
-            'ZENDESK_ROLES': ZENDESK_ROLES,
-            'engineers': context['engineers'],
-            'light_agents': context['light_agents'],
-            'licences_remaining': max(0, ZENDESK_MAX_AGENTS - context['engineers']),
-        })
-        return context  # TODO: need to get profile page url
-
 
 class CustomLoginView(LoginView):
     """
@@ -349,7 +325,8 @@ class UsersViewSet(viewsets.ReadOnlyModelViewSet):
             'users': serializer.data,
             'engineers': count[0],
             'light_agents': count[1],
-            "zendesk_users": self.get_zendesk_users(self.choose_users(users.values, profiles))
+            'zendesk_users': self.get_zendesk_users(self.choose_users(users.values, profiles)),
+            'max_agents': ZENDESK_MAX_AGENTS
         }
         return Response(res)
 
diff --git a/static/main/js/control.js b/static/main/js/control.js
index 82f9f27..0215b05 100644
--- a/static/main/js/control.js
+++ b/static/main/js/control.js
@@ -1,15 +1,18 @@
 "use strict";
 
+function head_checkbox() {
+  let head_checkbox = document.getElementById("head-checkbox");
+  head_checkbox.addEventListener("click", () => {
+    let checkboxes = document.getElementsByName("users");
+    for (let checkbox of checkboxes) checkbox.click();
+  });
+}
+
 // React
 class ModelUserTableRow extends React.Component {
   render() {
     return (
       <tr className={"table-dark"}>
-        <td>
-          <a href="#">{this.props.user.name}</a>
-        </td>
-        <td>{this.props.user.user.email}</td>
-        <td>{this.props.user.zendesk_role}</td>
         <td>
           <input
             type="checkbox"
@@ -18,6 +21,11 @@ class ModelUserTableRow extends React.Component {
             name="users"
           />
         </td>
+        <td>
+          <a href="#">{this.props.user.name}</a>
+        </td>
+        <td>{this.props.user.user.email}</td>
+        <td>{this.props.user.zendesk_role}</td>
       </tr>
     );
   }
@@ -38,12 +46,12 @@ class ZendeskUserTableRow extends React.Component {
   render() {
     return (
       <tr className={"table-secondary"}>
+        <td></td>
         <td>
           <a href="#">{this.props.user.name}</a>
         </td>
         <td>{this.props.user.email}</td>
         <td>{this.props.user.zendesk_role}</td>
-        <td></td>
       </tr>
     );
   }
@@ -68,9 +76,22 @@ class TableBody extends React.Component {
       engineers: 0,
       light_agents: 0,
       zendesk_users: [],
+      max_agents: 3,
     };
   }
 
+  change_elemnts_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({
@@ -78,11 +99,10 @@ class TableBody extends React.Component {
         engineers: response.data.engineers,
         light_agents: response.data.light_agents,
         zendesk_users: response.data.zendesk_users,
+        max_agents: response.data.max_agents,
       });
-      let elements = document.querySelectorAll(".info-quantity-value");
-      elements[0].innerHTML = this.state.engineers;
-      elements[1].innerHTML = this.state.light_agents;
     });
+    this.change_elemnts_html();
   }
 
   delete_pretext() {
@@ -111,3 +131,4 @@ class TableBody extends React.Component {
 }
 
 ReactDOM.render(<TableBody />, document.getElementById("tbody"));
+head_checkbox();