🪲 Fix admin filter (#5874)

Exports the functions inside the admin file so they are accessible within the `hedyApp`

Fixes #5865

**How to test**

* Login as admin
* Go to http://localhost:8080/admin/users and use the filter
* It should work
* I also added a cypress test

**Checklist**
Done? Check if you have it all in place using this list: (mark with x if done)

static/js/appbundle.js

@@ -60595,6 +60595,7 @@ ${o3}` : i3;
     emptyEditor: () => emptyEditor,
     enable_level: () => enable_level,
     error: () => error,
+    filter_admin: () => filter_admin,
     getCurrentAdv: () => getCurrentAdv,
     getEditorContents: () => getEditorContents,
     getForTeacherTable: () => getForTeacherTable,
@@ -60607,6 +60608,7 @@ ${o3}` : i3;
     incrementDebugLine: () => incrementDebugLine,
     initialize: () => initialize,
     initializeActivity: () => initializeActivity,
+    initializeAdminUserPage: () => initializeAdminUserPage,
     initializeApp: () => initializeApp,
     initializeClassOverviewPage: () => initializeClassOverviewPage,
     initializeCodePage: () => initializeCodePage,
@@ -122256,6 +122258,32 @@ def note_with_error(value, err):
       $("#filterform").submit();
     });
   }
+  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");
+  }
 
   // static/js/profile.ts
   function initializeMyProfilePage(_options) {

static/js/index.ts

@@ -30,4 +30,5 @@ export * from './user-activity';
 export * from './adventure';
 export * from './microbit';
 export * from './autosave';
-export * from './custom-elements';
+export * from './custom-elements';
+export * from './admin';

templates/admin/admin-users.html

@@ -91,7 +91,7 @@ <h2 class="px-8">Visible attributes</h2>
             </div>
             <div class="w-full p-2 mx-4">
                 <h2 class="px-8 pb-2">Filtering options</h2>
-                <select id="admin_filter_category" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded mr-4">
+                <select id="admin_filter_category" data-cy="admin_filter_category" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded mr-4">
                     <option value="created" {% if filter and filter == "created" %} selected {% endif %}>Created</option>
                     <option value="last_login" {% if filter and filter == "last_login" %} selected {% endif %}>Last login</option>
                     <option value="username" {% if filter and filter == "username" %} selected {% endif %}>Username</option>
@@ -113,12 +113,12 @@ <h2 class="px-8 pb-2">Filtering options</h2>
                         {% endfor %}
                     </select>
                     <div id="date_filter_input" class="filter_input flex flex-row w-full" {% if filter and filter != "created" and filter != "last_login" %}style="display: none;"{% endif %}>
-                        <input type="date" id="admin_start_date" {% if start_date %} value="{{ start_date }}" {% endif %} class="inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2 ltr:mr-1 rtl:ml-1">
-                        <input type="date" id="admin_end_date" {% if end_date %} value="{{ end_date }}" {% endif %} class="inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2">
+                        <input type="date" id="admin_start_date" data-cy="admin_start_date" {% if start_date %} value="{{ start_date }}" {% endif %} class="inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2 ltr:mr-1 rtl:ml-1">
+                        <input type="date" id="admin_end_date" data-cy="admin_end_date" {% if end_date %} value="{{ end_date }}" {% endif %} class="inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2">
                     </div>
                     <div class="flex flex-row ltr:ml-auto rtl:mr-auto">
                         <button type="reset" class="red-btn mx-2" onclick="window.open('/admin/users', '_self');">Reset</button>
-                        <button type="submit" class="green-btn ltr:ml-2 rtl:mr-2 px-4">Filter</button>
+                        <button type="submit" class="green-btn ltr:ml-2 rtl:mr-2 px-4" data-cy="submit">Filter</button>
                     </div>
                 </div>
             </div>

tests/cypress/e2e/admin_page/user_overview/view_all_users.cy.js

@@ -1,14 +1,28 @@
 
 import { goToAdminUsersPage } from '../../tools/navigation/nav.js';
 
-it('should view all users', () => {
-  goToAdminUsersPage();
 
-  cy.getDataCy('view_all_button').should('be.not.disabled').should('be.visible').click();
+describe('Test for users page within admins UI', () => {
+  it('should view all users', () => {
+    goToAdminUsersPage();
+
+    cy.getDataCy('view_all_button').should('be.not.disabled').should('be.visible').click();
+
+    cy.location().should((loc) => {
+        console.log(loc);
+        expect(loc.pathname).equal(Cypress.env('admin_users_page'));
+        expect(loc.search).equal('?filter=all');
+    })
+  })
 
-  cy.location().should((loc) => {
-      console.log(loc);
-      expect(loc.pathname).equal(Cypress.env('admin_users_page'));
-      expect(loc.search).equal('?filter=all');
+  it('should be able to use the filter', () => {
+    goToAdminUsersPage();
+    cy.getDataCy('admin_filter_category').select('last_login')
+    cy.getDataCy('admin_start_date').type('2024-10-10')
+    cy.getDataCy('admin_end_date').type('2024-10-11')
+    cy.getDataCy('submit').click()
+    cy.location().should((loc) => {
+      expect(loc.search).equal('?filter=last_login&start=2024-10-10&end=2024-10-11')
+    })
   })
-})
+})