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 1/3] 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 6c9b89c26..b659b9ec9 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 b10518bc7..75055fe35 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;

From dba3b81c8119527b92ec9b0522d5d891fdfa3ef6 Mon Sep 17 00:00:00 2001
From: Daniel <71837281+darmiel@users.noreply.github.com>
Date: Fri, 21 Oct 2022 09:19:31 +0200
Subject: [PATCH 2/3] refactor: eslint (single-quotes)

---
 src/controllers/dashboard/plugins/available/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index 75055fe35..bb63fcf6e 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -97,10 +97,10 @@ function populateList(options) {
 
 function onSearchBarType(searchBar) {
     const filter = searchBar.value.toLowerCase();
-    for (const header of document.querySelectorAll("div .verticalSection")) {
+    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")) {
+        for (const card of header.querySelectorAll('div .card')) {
             if (filter && filter != '' && !card.textContent.toLowerCase().includes(filter)) {
                 card.style.display = 'none';
             } else {

From b384c5a1af6fc6a61172dfb82ca4f363f1931fb5 Mon Sep 17 00:00:00 2001
From: Daniel <dstatzne@gmail.com>
Date: Tue, 25 Oct 2022 21:35:03 +0200
Subject: [PATCH 3/3] fix: implemented PR feedback

---
 src/controllers/dashboard/plugins/available/index.html | 3 +--
 src/controllers/dashboard/plugins/available/index.js   | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/controllers/dashboard/plugins/available/index.html b/src/controllers/dashboard/plugins/available/index.html
index b659b9ec9..68567db74 100644
--- a/src/controllers/dashboard/plugins/available/index.html
+++ b/src/controllers/dashboard/plugins/available/index.html
@@ -2,8 +2,7 @@
     <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">
+                <input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
             </div>
             <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
             <div id="pluginTiles" style="text-align:left;"></div>
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index bb63fcf6e..095bbb865 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -105,7 +105,7 @@ function onSearchBarType(searchBar) {
                 card.style.display = 'none';
             } else {
                 card.style.display = 'unset';
-                shown += 1;
+                shown++;
             }
         }
         // hide title if no cards are shown