Fixed #12 - Added app labels to model list dialog

django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css

@@ -63,4 +63,5 @@ dialog {
 
 #model-list-dialog-search {
   margin: 0.5em 0em;
+  width: 12vw;
 }

django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js

@@ -56,15 +56,25 @@ function replaceModifiers() {
 // defined in django/contrib/admin/static/admin/js/nav_sidebar.js
 // If/when merged into core, we could try to reuse some parts
 function filterModelList() {
-  const options = [];
   const modelListDialog = document.getElementById('model-list-dialog');
   if (!modelListDialog) {
       return;
   }
-  modelListDialog.querySelectorAll('li a').forEach((container) => {
-      options.push({title: container.innerHTML, node: container});
-  });
 
+  const appSections = [];
+
+  modelListDialog.querySelectorAll('section').forEach(section => {
+    const options = [];
+    section.querySelectorAll('li a').forEach(container => options.push({
+      title: container.innerHTML,
+      node: container
+    }));
+
+    appSections.push({
+      node: section, 
+      options,
+    });
+  });
 
   function checkValue(event) {
       let filterValue = event.target.value;
@@ -75,14 +85,30 @@ function filterModelList() {
           filterValue = '';
           event.target.value = ''; // clear input
       }
-      for (const option of options) {
-          let displayValue = '';
-          if (!filterValue || option.title.toLowerCase().indexOf(filterValue) === -1) {
-            displayValue = 'none'
-          }
-          option.node.parentNode.style.display = displayValue;
-      }
 
+      appSections.forEach(section => {
+        let matched = false;
+        // Check if any of the app models match the filter text
+        section.options.forEach((option) => {
+          let optionDisplay = '';
+          if (option.title.toLowerCase().indexOf(filterValue) === -1) {
+            optionDisplay = 'none';
+          } else {
+            matched = true;
+          }
+          // Set display in parent <li> element
+          option.node.parentNode.style.display = optionDisplay;
+        });
+
+        let sectionDisplay = '';
+        // If there's no filter value or no matched models
+        // for the section, we hide the section entirely
+        if (!filterValue || !matched) {
+          sectionDisplay = 'none';
+        }
+        // Set display for the app section
+        section.node.style.display = sectionDisplay;
+      });
   }
 
   const nav = document.getElementById('model-list-dialog-search');

django_admin_keyboard_shortcuts/templates/admin/base.html

@@ -22,22 +22,33 @@ <h2>{% translate "Models" %}</h2>
         <button aria-label="{% translate 'Close' %}">&#10006;</button>
       </form>
     </div>
-    <input type="search" id="model-list-dialog-search"
-      placeholder="{% translate 'Start typing to search' %}"
-      aria-label="{% translate 'Search models' %}"
-  >
-    <section>
-      <ul>
-        {% all_models as models %}
-        {% for model in models %}
-          <li>
-            <a href="{{ model.url }}"{{ model.name }}>
-              {{ model.name }}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-    </section>
+    <form id="model-list-dialog-form">
+      <label for="model-list-dialog-search">
+        {% translate 'Search model' %}
+      </label>
+      <input
+        type="search"
+        id="model-list-dialog-search"
+        placeholder="{% translate 'Start typing to search...' %}"
+      >
+    </form>
+    <div>
+      {% all_apps as apps %}
+      {% for app_label, models in apps.items %}
+        <section>
+          <h3>{{ app_label }}</h3>
+          <ul>
+          {% for model in models %}
+            <li>
+              <a href="{{ model.url }}"{{ model.name }}>
+                {{ model.name }}
+              </a>
+            </li>
+          {% endfor %}
+          </ul>
+        </section>
+      {% endfor %}
+    </div>
   </dialog>
   <dialog id="shortcuts-dialog">
     <div class="dialog-heading">

django_admin_keyboard_shortcuts/templatetags/shortcuts.py

@@ -6,16 +6,19 @@
 
 
 @register.simple_tag
-def all_models():
-    models = []
+def all_apps():
+    apps = {}
     for model in site._registry.keys():
         app_label = model._meta.app_label
         model_name = model._meta.model_name
         changelist_url = reverse('admin:%s_%s_changelist' % (app_label, model_name))
-        models.append(
-            {
-                "name": model._meta.verbose_name,
-                "url": changelist_url,
-            }
-        )
-    return models
+        model_data = {
+            "name": model._meta.verbose_name,
+            "url": changelist_url
+        }
+        if app_label not in apps:
+            apps[app_label] = [model_data]
+        else:
+            apps[app_label].append(model_data)            
+
+    return apps