From 6fcf44fcc712da72f7eb401daf50dd79f3674862 Mon Sep 17 00:00:00 2001
From: Paul Eggleton <paul.eggleton@linux.intel.com>
Date: Wed, 26 Sep 2018 16:31:26 +1200
Subject: [PATCH] Ensure browse buttons clear input text

On the machines/distros/classes pages, if you type a keyword and then
click "search", and there are no matches, then you click on "browse",
there shouldn't be any search text in the box anymore because you're
viewing all items, so use a bit of javascript to ensure that.

While I'm at it, set reasonable ids for the search field on each page
(including the recipes page, although there is no browse button there so
that is just for consistency).

Signed-off-by: Paul Eggleton <paul.eggleton@linux.intel.com>
---
 templates/layerindex/classes.html  | 8 ++++++--
 templates/layerindex/distros.html  | 8 ++++++--
 templates/layerindex/machines.html | 8 ++++++--
 templates/layerindex/recipes.html  | 4 ++--
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/templates/layerindex/classes.html b/templates/layerindex/classes.html
index c513d71..c2cd977 100644
--- a/templates/layerindex/classes.html
+++ b/templates/layerindex/classes.html
@@ -33,10 +33,10 @@
                 <div class="bottom-margin">
                     <form id="filter-form" action="{% url 'class_search' url_branch %}" method="get">
                         <div class="input-group col-md-6">
-                            <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search classes" name="q" value="{{ search_keyword }}" />
+                            <input type="text" class="form-control" id="id_search_text" placeholder="Search classes" name="q" value="{{ search_keyword }}" />
                             <div class="input-group-btn">
                                 <button class="btn btn-default" type="submit" name="search" value="1">search</button>
-                                <button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
+                                <button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
                             </div>
                         </div>
                     </form>
@@ -84,5 +84,9 @@
         $("#filter-form input:text").first().select().focus();
     });
     {% endif %}
+
+    $("#id_browse_btn").click(function() {
+        $("#id_search_text").val("");
+    });
 </script>
 {% endblock %}
diff --git a/templates/layerindex/distros.html b/templates/layerindex/distros.html
index 880c07a..1d5b1f7 100644
--- a/templates/layerindex/distros.html
+++ b/templates/layerindex/distros.html
@@ -34,10 +34,10 @@
                 <div class="bottom-margin">
                     <form id="filter-form" action="{% url 'distro_search' url_branch %}" method="get">
                         <div class="input-group col-md-6">
-                            <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search distros" name="q" value="{{ search_keyword }}" />
+                            <input type="text" class="form-control" id="id_search_text" placeholder="Search distros" name="q" value="{{ search_keyword }}" />
                             <div class="input-group-btn">
                                 <button class="btn btn-default" type="submit" name="search" value="1">search</button>
-                                <button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
+                                <button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
                             </div>
                         </div>
                     </form>
@@ -87,5 +87,9 @@
         $("#filter-form input:text").first().select().focus();
     });
     {% endif %}
+
+    $("#id_browse_btn").click(function() {
+        $("#id_search_text").val("");
+    });
 </script>
 {% endblock %}
diff --git a/templates/layerindex/machines.html b/templates/layerindex/machines.html
index 5eee092..41054a3 100644
--- a/templates/layerindex/machines.html
+++ b/templates/layerindex/machines.html
@@ -33,10 +33,10 @@
                 <div class="bottom-margin">
                     <form id="filter-form" action="{% url 'machine_search' url_branch %}" method="get">
                         <div class="input-group col-md-6">
-                            <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search machines" name="q" value="{{ search_keyword }}" />
+                            <input type="text" class="form-control" id="id_search_text" placeholder="Search machines" name="q" value="{{ search_keyword }}" />
                             <div class="input-group-btn">
                                 <button class="btn btn-default" type="submit" name="search" value="1">search</button>
-                                <button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
+                                <button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
                             </div>
                         </div>
                     </form>
@@ -86,5 +86,9 @@
         $("#filter-form input:text").first().select().focus();
     });
     {% endif %}
+
+    $("#id_browse_btn").click(function() {
+        $("#id_search_text").val("");
+    });
 </script>
 {% endblock %}
diff --git a/templates/layerindex/recipes.html b/templates/layerindex/recipes.html
index cd89fb9..181bdcb 100644
--- a/templates/layerindex/recipes.html
+++ b/templates/layerindex/recipes.html
@@ -35,7 +35,7 @@
                         <div class="form-group" id="searchfield">
                             <div class="controls">
                                 <div class="input-group col-md-6">
-                                    <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search recipes" name="q" value="{{ search_keyword }}" />
+                                    <input type="text" class="form-control" id="id_search_text" placeholder="Search recipes" name="q" value="{{ search_keyword }}" />
                                     <div class="input-group-btn">
                                         <button class="btn btn-default" type="submit">search</button>
                                     </div>
@@ -97,7 +97,7 @@
     });
 
     function validate(){
-        if (!$("#appendedInputButtons").val()){
+        if (!$("#id_search_text").val()){
             $("#errortext").html("<p>Please specify search text</p>");
             $("#searchfield").addClass("has-error");
             return false;