💻 Remove modal for make teacher as admin (#5631)

As requested by @Felienne : remove modal for accepting teacher requests and remove reloading the page every time

static/js/admin.ts

@@ -34,4 +34,35 @@ export function initializeAdminUserPage(_options: InitializeAdminUsersPageOption
       $('#hidden_page_input').attr('value', token);
       $('#filterform').submit();
   });
+}
+
+export function filter_admin() {
+    const params: Record<string, any> = {};
+
+    const filter = $('#admin_filter_category').val();
+    params['filter'] = filter;
+
+    if ($('#hidden_page_input').val()) {
+      params['page'] = $('#hidden_page_input').val();
+    }
+
+    switch (filter) {
+      case 'email':
+      case 'username':
+        params['substring'] = $('#email_filter_input').val();
+        break;
+      case 'language':
+        params['language'] = $('#language_filter_input').val();
+        break;
+      case 'keyword_language':
+        params['keyword_language'] = $('#keyword_language_filter_input').val();
+        break;
+      default:
+        params['start'] = $('#admin_start_date').val();
+        params['end'] = $('#admin_end_date').val();
+        break;
+    }
+
+    const queryString = Object.entries(params).map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+    window.open('?' + queryString, '_self');
 }

static/js/app.ts

@@ -1671,37 +1671,6 @@ export function select_profile_image(image: number) {
   $('#image').val(image);
 }
 
-export function filter_admin() {
-  const params: Record<string, any> = {};
-
-  const filter = $('#admin_filter_category').val();
-  params['filter'] = filter;
-
-  if ($('#hidden_page_input').val()) {
-    params['page'] = $('#hidden_page_input').val();
-  }
-
-  switch (filter) {
-    case 'email':
-    case 'username':
-      params['substring'] = $('#email_filter_input').val();
-      break;
-    case 'language':
-      params['language'] = $('#language_filter_input').val();
-      break;
-    case 'keyword_language':
-      params['keyword_language'] = $('#keyword_language_filter_input').val();
-      break;
-    default:
-      params['start'] = $('#admin_start_date').val();
-      params['end'] = $('#admin_end_date').val();
-      break;
-  }
-
-  const queryString = Object.entries(params).map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
-  window.open('?' + queryString, '_self');
-}
-
 export function hide_editor() {
   $('#fold_in_toggle_container').hide();
   $('#code_editor').toggle();

static/js/appbundle.js

@@ -60439,7 +60439,6 @@ ${o3}` : i3;
     edit_user_tags: () => edit_user_tags,
     enable_level: () => enable_level,
     error: () => error,
-    filter_admin: () => filter_admin,
     generate_passwords: () => generate_passwords,
     getEditorContents: () => getEditorContents,
     getForTeacherTable: () => getForTeacherTable,
@@ -60472,8 +60471,6 @@ ${o3}` : i3;
     load_variables: () => load_variables,
     logout: () => logout,
     logs: () => logs,
-    markAsTeacher: () => markAsTeacher,
-    markSuperTeacher: () => markSuperTeacher,
     modal: () => modal,
     modalStepOne: () => modalStepOne,
     preview_adventure: () => preview_adventure,
@@ -119271,51 +119268,6 @@ def note_with_error(value, err):
       }
     });
   }
-  function markAsTeacher(checkbox, username, is_teacher, pending_request, by_super_teacher = false) {
-    $(checkbox).prop("checked", false);
-    let text = "Are you sure you want to remove " + username + " as a teacher?";
-    if (is_teacher) {
-      text = "Are you sure you want to make " + username + " a teacher?";
-    }
-    modal.confirm(text, async () => {
-      try {
-        await postNoResponse(by_super_teacher ? "/super-teacher/mark-as-teacher" : "/admin/mark-as-teacher", {
-          username,
-          is_teacher
-        });
-        location.reload();
-      } catch (e) {
-        console.error(e);
-        modal.notifyError(["Error when", is_teacher ? "marking" : "unmarking", "user", username, "as teacher"].join(" "));
-      }
-    }, async () => {
-      if (pending_request) {
-        await postJson("/admin/mark-as-teacher", {
-          username,
-          is_teacher: false
-        });
-        location.reload();
-      }
-    });
-  }
-  function markSuperTeacher(checkbox, username, is_super_teacher) {
-    let text = "Are you sure you want to make " + username + " a super teacher?";
-    if (is_super_teacher) {
-      text = "Are you sure you want to revoke super teacher privilege from " + username + "?";
-    }
-    modal.confirm(text, async () => {
-      try {
-        await postNoResponse("/admin/mark-super-teacher", {
-          username
-        });
-        location.reload();
-      } catch (e) {
-        console.error(e);
-        modal.notifyError(e);
-        $(checkbox).prop("checked", is_super_teacher);
-      }
-    }, () => $(checkbox).prop("checked", is_super_teacher));
-  }
   function changeUserEmail(username, email) {
     modal.prompt("Please enter the corrected email", email, async function(correctedEmail) {
       if (correctedEmail === email)
@@ -120885,32 +120837,6 @@ def note_with_error(value, err):
     $("#profile_image_" + image).addClass("border-2 border-blue-600");
     $("#image").val(image);
   }
-  function filter_admin() {
-    const params = {};
-    const filter = $("#admin_filter_category").val();
-    params["filter"] = filter;
-    if ($("#hidden_page_input").val()) {
-      params["page"] = $("#hidden_page_input").val();
-    }
-    switch (filter) {
-      case "email":
-      case "username":
-        params["substring"] = $("#email_filter_input").val();
-        break;
-      case "language":
-        params["language"] = $("#language_filter_input").val();
-        break;
-      case "keyword_language":
-        params["keyword_language"] = $("#keyword_language_filter_input").val();
-        break;
-      default:
-        params["start"] = $("#admin_start_date").val();
-        params["end"] = $("#admin_end_date").val();
-        break;
-    }
-    const queryString = Object.entries(params).map(([k, v]) => k + "=" + encodeURIComponent(v)).join("&");
-    window.open("?" + queryString, "_self");
-  }
   function hide_editor() {
     $("#fold_in_toggle_container").hide();
     $("#code_editor").toggle();

static/js/auth.ts

@@ -184,56 +184,6 @@ export function initializeFormSubmits() {
 
 // *** Admin functionality ***
 
-export function markAsTeacher(checkbox: any, username: string, is_teacher: boolean, pending_request: boolean, by_super_teacher = false) {
-  $(checkbox).prop('checked', false);
-  let text = "Are you sure you want to remove " + username + " as a teacher?";
-  if (is_teacher) {
-    text = "Are you sure you want to make " + username + " a teacher?";
-  }
-  modal.confirm (text, async () => {
-    try {
-      await postNoResponse(by_super_teacher ? '/super-teacher/mark-as-teacher' : '/admin/mark-as-teacher', {
-        username: username,
-        is_teacher: is_teacher,
-      });
-      location.reload();
-    } catch (e) {
-      console.error(e);
-      modal.notifyError(['Error when', is_teacher ? 'marking' : 'unmarking', 'user', username, 'as teacher'].join(' '));
-    }
-  }, async () => {
-    // If there is a pending request, we decline the modal -> remove the teacher request
-    if (pending_request) {
-      await postJson('/admin/mark-as-teacher', {
-        username: username,
-        is_teacher: false
-      });
-      location.reload();
-    }
-  });
-}
-
-export function markSuperTeacher(checkbox: any, username: string, is_super_teacher: boolean) {
-  let text = "Are you sure you want to make " + username + " a super teacher?";
-  if (is_super_teacher) {
-    text = "Are you sure you want to revoke super teacher privilege from " + username + "?";
-  }
-  modal.confirm (text, async () => {
-    try {
-      await postNoResponse('/admin/mark-super-teacher', {
-        username: username,
-      });
-      location.reload();
-    } catch (e: any) {
-      console.error(e);
-      modal.notifyError(e);
-      $(checkbox).prop('checked', is_super_teacher);
-    }
-  }, () => $(checkbox).prop('checked', is_super_teacher)
-  );
-}
-
-
 export function changeUserEmail(username: string, email: string) {
   modal.prompt ('Please enter the corrected email', email, async function (correctedEmail) {
     if (correctedEmail === email) return;

static/js/autosave.ts

@@ -32,7 +32,6 @@ export function autoSave(formId: string,
           // If the event is not from a customEvent with is the element autosaved, we pass.
           return
         }
-
           // Now we can simply trigger the submit event on the parent form element.
           formElement.requestSubmit()
 

templates/admin/admin-users.html

@@ -165,11 +165,27 @@ <h4 class="text-center">Total amount of shown users: {{ users|length }}</h4>
             <td class="experience_cell hidden">{{user.prog_experience}}</td>
             <td class="tags_cell text-center cursor-pointer"><span onclick="hedyApp.edit_user_tags('{{user.username}}');">✏️</span></td>
             {% if user.teacher_request %}
-                <td class="teacher_cell text-center"><span class="fa-solid fa-circle-question cursor-pointer" onclick="hedyApp.markAsTeacher (this, '{{user.username}}', true, true)"></span></td>
-            {% else %}
-                <td class="teacher_cell text-center"><input type="checkbox" {% if user.is_teacher %}checked="checked"{% endif %} onclick="hedyApp.markAsTeacher (this, '{{user.username}}', {% if user.is_teacher %}false{% else %}true{% endif %}, false)"></td>
+                <td id="teacher_request_{{user.username}}" class="teacher_cell text-center">
+                    <span class="fa-solid fa-circle-question cursor-pointer"
+                    hx-trigger="click"
+                    hx-post="/admin/mark-as-teacher/{{user.username}}"
+                    _="on click
+                    remove #teacher_request_{{user.username}}
+                    then toggle .hidden on #is_teacher_{{user.username}}
+                    then set #check_teacher_{{user.username}}.checked to true">
+                    </span>
+                </td>
             {% endif %}
-            <td class="teacher_cell text-center"><input type="checkbox" {% if user.is_super_teacher %}checked="checked"{% endif %} onclick="hedyApp.markSuperTeacher (this, '{{user.username}}', {% if user.is_super_teacher %}true{% else %}false{% endif %})"></td>
+                <td id="is_teacher_{{user.username}}" class="{% if user.teacher_request %}hidden{% endif %} teacher_cell text-center">
+                    <input id="check_teacher_{{user.username}}" type="checkbox" {% if user.is_teacher %}checked{% endif %}
+                    hx-trigger="click"
+                    hx-post="/admin/mark-as-teacher/{{user.username}}">
+                </td>
+            <td class="teacher_cell text-center">
+                <input type="checkbox" {% if user.is_super_teacher %}checked="checked"{% endif %} 
+                hx-trigger="click"
+                hx-post="/admin/mark-super-teacher/{{user.username}}">
+            </td>
             <td class="verified_cell hidden">{{user.email_verified}}</td>
             <td class="third_party_cell hidden text-center"><input type="checkbox" {% if user.third_party %}checked="checked"{% endif %} ></td>
           </tr>

templates/super-teacher/support.html

@@ -24,14 +24,19 @@ <h4 class="text-center">Total amount of shown users: {{ users|length }}</h4>
             <td class="country_cell text-center p-2">{{user.country}}</td>
             <td class="tags_cell text-center cursor-pointer text-center p-2">
             {% if user.teacher_request %}
-                <button class="blue-btn" onclick="hedyApp.markAsTeacher (this, '{{user.username}}', true, true, true)">Make teacher</button>
+                <button id="teacher_request_{{user.username}}" class="blue-btn" 
+                hx-trigger="click"
+                hx-post="/admin/mark-as-teacher/{{user.username}}"
+                _="on click
+                remove #teacher_request_{{user.username}}
+                then toggle .hidden on #invite_support_teacher_{{user.username}}"
+                >Make teacher</button>
+            {% endif %}
+            {% if user.support_teacher %}
+              {{user.support_teacher}}
             {% else %}
-              {% if user.support_teacher %}
-                {{user.support_teacher}}
-              {% else %}
-                <button class="green-btn" id="invite-support-teacher"
-                  onclick='hedyApp.invite_support_teacher("{{user.username}}")'>Pair support teacher</button>
-              {% endif %}
+              <button class="green-btn {% if user.teacher_request %}hidden{% endif %}" id="invite_support_teacher_{{user.username}}"
+                onclick='hedyApp.invite_support_teacher("{{user.username}}")'>Pair support teacher</button>
             {% endif %}
             </td>
           </tr>

tests_e2e.py

@@ -170,15 +170,15 @@ def make_current_user_teacher(self):
 
         Need to log in again to refresh the session.
         """
-        self.post_data('admin/mark-as-teacher', {'username': self.username, 'is_teacher': True})
+        self.post_data('admin/mark-as-teacher/' + self.username, {'is_teacher': True})
         return self.login_user(self.username)
 
     def make_current_user_super_teacher(self):
         """Mark the current user as super-teacher.
 
         Need to log in again to refresh the session.
         """
-        self.post_data('admin/mark-super-teacher', {'username': self.username})
+        self.post_data('admin/mark-super-teacher/' + self.username, {})
         return self.login_user(self.username)
 
     def given_user_is_logged_in(self):