Add filter and SU flag to the User query page

Author: szabozoltan69

api/templates/admin/users_per_permission.html

@@ -7,6 +7,8 @@
   <form method="get" class="form-inline" style="margin-bottom: 1rem;">
     <div>
       <label for="id_groups">{% trans "Groups" %}</label><br/>
+  <input type="text" id="id_groups_filter" placeholder="{% trans 'Filter' %}" style="min-width: 360px; margin-bottom: .5rem;" />
+  <br/>
       <select id="id_groups" name="groups" multiple size="12" style="min-width: 360px;">
         {% for g in groups %}
           <option value="{{ g.id }}" {% if g.id in selected_group_ids %}selected{% endif %}>{{ g.name }}</option>
@@ -45,7 +47,8 @@
             <th>{% trans "Name" %}</th>
             <th>{% trans "Organization" %}</th>
             <th>{% trans "Active" %}</th>
-            <th>{% trans "Staff status" %}</th>
+            <th>{% trans "Staff" %}</th>
+            <th>{% trans "Superuser" %}</th>
           </tr>
         </thead>
         <tbody>
@@ -59,6 +62,7 @@
             <!-- yesno:"+,," -> '+' for True, '' for False/None -->
             <td class="bool-col">{{ u.is_active|yesno:"+,," }}</td>
             <td class="bool-col">{{ u.is_staff|yesno:"+,," }}</td>
+            <td class="bool-col">{{ u.is_superuser|yesno:"+,," }}</td>
           </tr>
           {% empty %}
           <tr><td colspan="7">{% trans "No users match the current filters." %}</td></tr>
@@ -70,4 +74,54 @@
     <p>{% trans "Select one or more Groups to view users. Optionally include superusers." %}</p>
   {% endif %}
 </div>
+
+<script>
+  (function() {
+    const filterInput = document.getElementById('id_groups_filter');
+    const selectEl = document.getElementById('id_groups');
+    if (!filterInput || !selectEl) return;
+
+    // Snapshot original options once
+    const allOptions = Array.from(selectEl.options).map(opt => ({
+      value: opt.value,
+      label: opt.text,
+      textLower: opt.text.toLowerCase(),
+      selected: opt.selected,
+    }));
+
+    function syncSelectedState() {
+      const selectedValues = new Set(Array.from(selectEl.selectedOptions).map(o => o.value));
+      for (const o of allOptions) {
+        o.selected = selectedValues.has(o.value);
+      }
+    }
+
+    function renderOptions(query) {
+      const q = (query || '').toLowerCase();
+      const filtered = allOptions.filter(o => o.selected || o.textLower.includes(q));
+      // Rebuild options while preserving selection
+      selectEl.innerHTML = '';
+      for (const o of filtered) {
+        const opt = document.createElement('option');
+        opt.value = o.value;
+        opt.text = o.label;
+        if (o.selected) opt.selected = true;
+        selectEl.appendChild(opt);
+      }
+    }
+
+    selectEl.addEventListener('change', () => {
+      syncSelectedState();
+      renderOptions(filterInput.value);
+    });
+
+    filterInput.addEventListener('input', () => {
+      syncSelectedState();
+      renderOptions(filterInput.value);
+    });
+
+    // Initial render (no filter)
+    renderOptions('');
+  })();
+</script>
 {% endblock %}