Add a search box in the "My Checks" page.

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 - Load settings from environment variables
 - Add "List-Unsubscribe" header to alert and report emails
 - Don't send monthly reports to inactive accounts (no pings in 6 months)
+- Add search box in the "My Checks" page
 
 ### Bug Fixes
 - During DST transition, handle ambiguous dates as pre-transition

hc/front/views.py

@@ -76,12 +76,21 @@ def my_checks(request):
     channels = list(channels.order_by("created"))
 
     hidden_checks = set()
+    # Hide checks that don't match selected tags:
     selected_tags = set(request.GET.getlist("tag", []))
     if selected_tags:
         for check in checks:
             if not selected_tags.issubset(check.tags_list()):
                 hidden_checks.add(check)
 
+    # Hide checks that don't match the search string:
+    search = request.GET.get("search", "")
+    if search:
+        for check in checks:
+            search_key = "%s\n%s" % (check.name.lower(), check.code)
+            if search not in search_key:
+                hidden_checks.add(check)
+
     ctx = {
         "page": "checks",
         "checks": checks,
@@ -94,6 +103,8 @@ def my_checks(request):
         "num_available": request.team.check_limit - len(checks),
         "sort": request.profile.sort,
         "selected_tags": selected_tags,
+        "show_search": True,
+        "search": search,
         "hidden_checks": hidden_checks
     }
 

static/css/my_checks.css

@@ -27,6 +27,11 @@
     border-color: #000;
 }
 
+#search {
+    padding-left: 15px;
+    border-radius: 16px;
+}
+
 @media (min-width: 992px) {
     #update-timeout-modal .modal-dialog, #ping-details-modal .modal-dialog  {
         width: 800px;

static/js/checks.js

@@ -63,11 +63,7 @@ $(function () {
         return false;
     });
 
-
-    // Filtering by tags
-    $("#my-checks-tags div").click(function() {
-        $(this).toggleClass('checked');
-
+    function applyFilters() {
         // Make a list of currently checked tags:
         var checked = [];
         var qs = [];
@@ -76,6 +72,11 @@ $(function () {
             qs.push({"name": "tag", "value": el.textContent});
         });
 
+        var search = $("#search").val().toLowerCase();
+        if (search) {
+            qs.push({"name": "search", "value": search});
+        }
+
         // Update hash
         if (window.history && window.history.replaceState) {
             var url = "/checks/";
@@ -85,13 +86,23 @@ $(function () {
             window.history.replaceState({}, "", url);
         }
 
-        // No checked tags: show all
-        if (checked.length == 0) {
+        // No checked tags and no search string: show all
+        if (checked.length == 0 && !search) {
             $("#checks-table tr.checks-row").show();
             return;
         }
 
-        function applyFilters(index, element) {
+        function applySingle(index, element) {
+            if (search) {
+                var code = element.getAttribute("id");
+                var name = $(".my-checks-name", element).attr("data-name").toLowerCase();
+                if (name.indexOf(search) == -1 && code.indexOf(search) == -1) {
+                    $(element).hide();
+                    return;
+                }
+            }
+
+            if (checked.length) {
                 // use attr(), as data() tries converting strings to JS types:
                 // (e.g., "123" -> 123)
                 var tags = $(".my-checks-name", element).attr("data-tags").split(" ");
@@ -101,14 +112,24 @@ $(function () {
                         return;
                     }
                 }
+            }
 
             $(element).show();
         }
 
         // For each row, see if it needs to be shown or hidden
-        $("#checks-table tr.checks-row").each(applyFilters);
+        $("#checks-table tr.checks-row").each(applySingle);
+    }
+
+    // User clicks on tags: apply filters
+    $("#my-checks-tags div").click(function() {
+        $(this).toggleClass('checked');
+        applyFilters();
     });
 
+    // User changes the search string: apply filters
+    $("#search").keyup(applyFilters);
+
     $(".show-log").click(function(e) {
         var code = $(this).closest("tr.checks-row").attr("id");
         var url = "/checks/" + code + "/details/";

templates/base.html

@@ -146,6 +146,12 @@
                 <li><a href="{% url 'hc-login' %}">Sign In</a></li>
             </ul>
             {% endif %}
+
+            {% if show_search %}
+            <form class="navbar-form navbar-right">
+                <input id="search" type="text" placeholder="Search checks&hellip;" class="form-control" value="{{ search }}">
+            </form>
+            {% endif %}
         </div>
 
         </div>