From 3ef73904c1ddaddba42a19a6d133d23ddf294ee3 Mon Sep 17 00:00:00 2001
From: Daniel <71837281+darmiel@users.noreply.github.com>
Date: Fri, 21 Oct 2022 09:05:11 +0200
Subject: [PATCH] feat: search bar for plugin catalogue Adds a search bar to
 the `Catalogue` section, allowing you to filter the available plugins

---
 .../dashboard/plugins/available/index.html    |  4 +++
 .../dashboard/plugins/available/index.js      | 27 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/controllers/dashboard/plugins/available/index.html b/src/controllers/dashboard/plugins/available/index.html
index 6c9b89c26d..b659b9ec97 100644
--- a/src/controllers/dashboard/plugins/available/index.html
+++ b/src/controllers/dashboard/plugins/available/index.html
@@ -1,6 +1,10 @@
 <div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
     <div>
         <div class="content-primary">
+            <div class="inputContainer">
+                <label class="inputLabel" for="txtSearchPlugins">${Search}</label>
+                <input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" class="emby-input">
+            </div>
             <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
             <div id="pluginTiles" style="text-align:left;"></div>
         </div>
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index b10518bc74..75055fe35f 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -86,10 +86,37 @@ function populateList(options) {
         options.noItemsElement.classList.remove('hide');
     }
 
+    const searchBar = document.getElementById('txtSearchPlugins');
+    if (searchBar) {
+        searchBar.addEventListener('input', () => onSearchBarType(searchBar));
+    }
+
     options.catalogElement.innerHTML = html;
     loading.hide();
 }
 
+function onSearchBarType(searchBar) {
+    const filter = searchBar.value.toLowerCase();
+    for (const header of document.querySelectorAll("div .verticalSection")) {
+        // keep track of shown cards after each search
+        let shown = 0;
+        for (const card of header.querySelectorAll("div .card")) {
+            if (filter && filter != '' && !card.textContent.toLowerCase().includes(filter)) {
+                card.style.display = 'none';
+            } else {
+                card.style.display = 'unset';
+                shown += 1;
+            }
+        }
+        // hide title if no cards are shown
+        if (shown <= 0) {
+            header.style.display = 'none';
+        } else {
+            header.style.display = 'unset';
+        }
+    }
+}
+
 function getPluginHtml(plugin, options, installedPlugins) {
     let html = '';
     let href = plugin.externalUrl ? plugin.externalUrl : '#/addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;