Added input to filter model list in dialog

knyghty · Jun 8, 2024 · 881a241 · 881a241
1 parent aa8f79e
commit 881a241
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css b/django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css
@@ -15,24 +15,20 @@ kbd {
 
 dialog {
   min-width: 20em;
-  padding: 0;
+  padding: 1em;
+  height: 50vh;
+  width: 40vw;
 
   .dialog-heading {
     align-items: center;
     display: flex;
     justify-content: space-between;
-    padding: 1em;
 
     h2 {
       margin: 0;
     }
   }
 
-  section {
-    border: 1px solid #000;
-    margin: 1em;
-  }
-
   h3 {
     background: #eee;
     margin: 0;
@@ -64,3 +60,7 @@ dialog {
     }
   }
 }
+
+#model-list-dialog-search {
+  margin: 0.5em 0em;
+}
diff --git a/django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js b/django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js
@@ -13,7 +13,6 @@ function removePressedKey(key) {
 
 function storeKeyCombo(key) {
   pressedKeys.add(key);
-  console.log(pressedKeys);
   setTimeout(function() { removePressedKey(key); }, 5000);
 }
 
@@ -51,11 +50,56 @@ function replaceModifiers() {
   }
 }
 
+// This overlaps a lot with the initSidebarQuickFilter function
+// 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});
+  });
+
+
+  function checkValue(event) {
+      let filterValue = event.target.value;
+      if (filterValue) {
+          filterValue = filterValue.toLowerCase();
+      }
+      if (event.key === 'Escape') {
+          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;
+      }
+
+  }
+
+  const nav = document.getElementById('model-list-dialog-search');
+  nav.addEventListener('change', checkValue, false);
+  nav.addEventListener('input', checkValue, false);
+  nav.addEventListener('keyup', checkValue, false);
+
+  // We don't want to show anything on the list until the user starts typing
+  checkValue({ target: { value: ''} , key: ''})
+}
+
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", showDialogOnClick);
   document.addEventListener("DOMContentLoaded", replaceModifiers);
+  document.addEventListener("DOMContentLoaded", filterModelList);
 } else {
   showDialogOnClick();
   replaceModifiers();
+  filterModelList();
 }
 document.addEventListener("keyup", handleKeyUp);
diff --git a/django_admin_keyboard_shortcuts/templates/admin/base.html b/django_admin_keyboard_shortcuts/templates/admin/base.html
@@ -1,5 +1,6 @@
 {% extends "admin/base.html" %}
 {% load static %}
+{% load i18n %}
 {% load shortcuts %}
 
 {% block extrahead %}
@@ -23,8 +24,11 @@ <h2>Models</h2>
         <button aria-label="Close">✖️</button>
       </form>
     </div>
+    <input type="search" id="model-list-dialog-search"
+      placeholder="{% translate 'Start typing to search' %}"
+      aria-label="{% translate 'Search models' %}"
+  >
     <section>
-      <h3>Models</h3>
       <ul>
         {% all_models as models %}
         {% for model in models %}