Removed django context, now uses only React

main/templates/pages/adm_ruleset.html

@@ -30,14 +30,6 @@
 
     <div class="row justify-content-center new-section">
 
-      {% block hidden_form %}
-      <div style="display: none">
-        {% for field in form.users %}
-        {{ field.tag }}
-        {% endfor %}
-      </div>
-      {% endblock %}
-
       <div class="col-10">
         <h6 class="table-title">Список сотрудников</h6>
 
@@ -50,24 +42,10 @@
               <th>Role</th>
               <th>Checked</th>
             </thead>
-
-            <tbody id="old_tbody">
-              {% for user in users %}
-              <tr>
-                <td><a href="#">{{ user.name }}</a></td>
-                <td>{{ user.user.email }}</td>
-                <td>{% if user.custom_role_id == ZENDESK_ROLES.engineer %}
-                      engineer
-                    {% elif user.custom_role_id == ZENDESK_ROLES.light_agent %}
-                      light_agent
-                    {% endif %}
-                </td>
-                <td class="checkbox_field"></td>
-              </tr>
-              {% endfor %}
+            <tbody id="tbody">
             </tbody>
-            <tbody id="new_tbody"></tbody>
         </table>
+        <p id="loading">Данные загружаются...</p>
         {% endblock %}
 
       </div>
@@ -96,7 +74,9 @@
 
         </div>
       </div>
+      {% endblock %}
 
+      {% block buttons %}
       <div class="col-5">
 
         <button type="submit" name="engineer" class="request-acess-button default-button">
@@ -107,8 +87,9 @@
           Назначить выбранных на роль легкого агента
         </button>
       </div>
-    </div>
       {% endblock %}
+
+    </div>
   </form>
   {% endblock %}
 

main/views.py

@@ -285,13 +285,9 @@ class AdminPageView(LoginRequiredMixin, PermissionRequiredMixin,SuccessMessageMi
         Функция формирования контента страницы администратора (с проверкой прав доступа)
         """
         context = super().get_context_data(**kwargs)
-        users = get_list_or_404(
-            UserProfile, role='agent')
-        context['users'] = users
-        context['ZENDESK_ROLES'] = ZENDESK_ROLES
         context['engineers'], context['light_agents'] = count_users(get_users_list())
         context['licences_remaining'] = max(0, ZENDESK_MAX_AGENTS - context['engineers'])
-        return context  # TODO: need to get profile page url
+        return context
 
 
 class CustomLoginView(LoginView):

static/main/js/control.js

@@ -1,21 +1,5 @@
 "use strict";
 
-function move_checkboxes() {
-  let checkboxes = document.getElementsByName("users");
-  let fields = document.querySelectorAll(".checkbox_field");
-  if (checkboxes.length == fields.length) {
-    for (let i = 0; i < fields.length; ++i) {
-      let el = checkboxes[i].cloneNode(true);
-      fields[i].appendChild(el);
-    }
-  } else {
-    alert(
-      "Количество пользователей агентов не соответствует количеству полей в форме AdminPageUsers"
-    );
-  }
-}
-move_checkboxes();
-
 // React
 class TableRow extends React.Component {
   render() {
@@ -49,8 +33,8 @@ class TableBody extends React.Component {
     };
   }
 
-  get_users() {
-    axios.get("/api/users").then((response) => {
+  async get_users() {
+    await axios.get("/api/users").then((response) => {
       this.setState({
         users: response.data.users,
         engineers: response.data.engineers,
@@ -62,7 +46,12 @@ class TableBody extends React.Component {
     });
   }
 
+  delete_pretext() {
+    document.getElementById("loading").remove();
+  }
+
   componentDidMount() {
+    this.get_users().then(() => this.delete_pretext());
     this.interval = setInterval(() => {
       this.get_users();
     }, 60000);
@@ -79,5 +68,4 @@ class TableBody extends React.Component {
   }
 }
 
-ReactDOM.render(<TableBody />, document.getElementById("new_tbody"));
-setTimeout(() => document.getElementById("old_tbody").remove(), 60000);
+ReactDOM.render(<TableBody />, document.getElementById("tbody"));