From d0049fa8397c032593b1110e7e4045c44410f18b Mon Sep 17 00:00:00 2001
From: len0rd <len0rd@users.noreply.github.com>
Date: Wed, 22 Jun 2022 18:05:27 -0400
Subject: [PATCH] add search bar to recipe list and filter in addition to
 current tag filters

---
 views/pages/recipe_navigator.ejs | 74 +++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/views/pages/recipe_navigator.ejs b/views/pages/recipe_navigator.ejs
index b9aa34a..1c83bff 100644
--- a/views/pages/recipe_navigator.ejs
+++ b/views/pages/recipe_navigator.ejs
@@ -12,14 +12,21 @@
     </header>
 
     <div class="container mt-5 topMargin">
-        <h1>Recipes</h1>
+        <div class="row">
+            <div class="col">
+                <h1 class="display-1">Recipes</h1>
+            </div>
+            <div class="col-4 align-self-end">
+                <input class="form-control" id="recipeSearch" type="text" placeholder="search..">
+            </div>
+        </div>
         <div class="row mb-2">
             <div class="col btn-container">
                 <%- include('../partials/generated/recipe-tags') %>
             </div>
         </div>
         <div class="row">
-            <div class="list-group" id="recipe-link-container">
+            <div class="list-group list-group-flush" id="recipe-link-container">
                 <%- include('../partials/generated/recipe-links') %>
             </div>
         </div>
@@ -27,12 +34,9 @@
 
     <%- include('../partials/post_html_include') %>
     <script>
-        /// This script is responsible for filtering the recipe list
-        /// based on enabled/disabled hashtags. I'm certain theres more
-        /// efficient ways to do this but /shrug
-        $(".btn-container").on("click", "button", function() {
-            $(this).toggleClass("btn-light btn-primary");
-            var tag = $(this).text();
+
+        /// Returns a list of the current recipe hashtags that are enabled (enabled filters)
+        function getActiveTags() {
             var activeTags = [];
             // create a list of currently active tags
             $(".btn-container button").filter(function() {
@@ -40,29 +44,41 @@
                     activeTags.push($(this).text())
                 }
             });
+            return activeTags;
+        }
 
-            if ($(this).hasClass("btn-primary")) {
-                // if tag is active, activate its filter
-                $("#recipe-link-container a:visible").filter(function() {
-                    $(this).toggle($(this).attr("tags").toLowerCase().indexOf(tag) > -1)
+        /// check if the given recipe item all the currently selected hashtag filters (an 'AND' search)
+        function recipeHasAllActiveTags(activeTags, recipe) {
+            const recipeTags = recipe.attr("tags").toLowerCase().split(",");
+            return activeTags.every(elem => recipeTags.includes(elem));
+        }
+
+        function recipeHasCurrentSearchPhrase(searchValue, recipe) {
+            return !searchValue || recipe.text().toLowerCase().indexOf(searchValue) > -1;
+        }
+
+        /// This script is responsible for filtering the recipe list
+        /// based on enabled/disabled hashtags. I'm certain theres more
+        /// efficient ways to do this but /shrug
+        $(".btn-container").on("click", "button", function() {
+            $(this).toggleClass("btn-light btn-primary");
+            const activeTags = getActiveTags();
+            const searchValue = $("#recipeSearch").val().toLowerCase();
+
+            $("#recipe-link-container a").filter(function() {
+                $(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
+            });
+        });
+
+        /// This method is responsible for filtering the recipe list based on the search bar
+        $(document).ready(function(){
+            $("#recipeSearch").on("keyup", function() {
+                const searchValue = $("#recipeSearch").val().toLowerCase();
+                const activeTags = getActiveTags();
+                $("#recipe-link-container a").filter(function() {
+                    $(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
                 });
-            }
-            else if ($(this).hasClass("btn-light")) {
-                // tag has been toggled off. re-add any thing that is hidden but shouldnt be
-                $("#recipe-link-container a:hidden").filter(function() {
-                    const elemTagList = $(this).attr("tags").toLowerCase();
-                    hasActiveTags = true;
-                    for (const activeTag of activeTags) {
-                        if (elemTagList.indexOf(activeTag) == -1) {
-                            hasActiveTags = false;
-                            break;
-                        }
-                    }
-                    if (hasActiveTags) {
-                        $(this).toggle(true);
-                    }
-                });
-            }
+            });
         });
     </script>
 </body>