From 2078b45ad6475d8ca525d4dfcc56b44fa48ab1a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 12 Oct 2018 12:52:48 +0300
Subject: [PATCH] When filtering by tags, put the selected tags in the query
 string. Fixes #191

---
 CHANGELOG.md                           |  1 +
 hc/front/views.py                      | 11 ++++++++++-
 static/js/checks.js                    | 19 ++++++++++++-------
 templates/front/my_checks.html         |  2 +-
 templates/front/my_checks_desktop.html |  3 ++-
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66487e63..b8164f25 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - Added "Docs > Third-Party Resources" page.
 - Improved  layout and styling in "Login" page.
 - Separate "sign Up" and "Log In" forms.
+- "My Checks" page: support filtering checks by query string parameters.
 
 ### Bug Fixes
 - Timezones were missing in the "Change Schedule" dialog, fixed.
diff --git a/hc/front/views.py b/hc/front/views.py
index 3221369e..fa32054d 100644
--- a/hc/front/views.py
+++ b/hc/front/views.py
@@ -75,6 +75,13 @@ def my_checks(request):
     channels = Channel.objects.filter(user=request.team.user)
     channels = list(channels.order_by("created"))
 
+    hidden_checks = set()
+    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)
+
     ctx = {
         "page": "checks",
         "checks": checks,
@@ -85,7 +92,9 @@ def my_checks(request):
         "ping_endpoint": settings.PING_ENDPOINT,
         "timezones": all_timezones,
         "num_available": request.team.check_limit - len(checks),
-        "sort": request.profile.sort
+        "sort": request.profile.sort,
+        "selected_tags": selected_tags,
+        "hidden_checks": hidden_checks
     }
 
     return render(request, "front/my_checks.html", ctx)
diff --git a/static/js/checks.js b/static/js/checks.js
index b49c00af..d0993d9e 100644
--- a/static/js/checks.js
+++ b/static/js/checks.js
@@ -66,20 +66,28 @@ $(function () {
 
     // Filtering by tags
     $("#my-checks-tags div").click(function() {
-        // .active has not been updated yet by bootstrap code,
-        // so cannot use it
         $(this).toggleClass('checked');
 
         // Make a list of currently checked tags:
         var checked = [];
+        var qs = [];
         $("#my-checks-tags .checked").each(function(index, el) {
             checked.push(el.textContent);
+            qs.push({"name": "tag", "value": el.textContent});
         });
 
+        // Update hash
+        if (window.history && window.history.replaceState) {
+            var url = "/checks/";
+            if (qs.length) {
+                url += "?" + $.param(qs);
+            }
+            window.history.replaceState({}, "", url);
+        }
+
         // No checked tags: show all
         if (checked.length == 0) {
             $("#checks-table tr.checks-row").show();
-            $("#checks-list > li").show();
             return;
         }
 
@@ -97,11 +105,8 @@ $(function () {
             $(element).show();
         }
 
-        // Desktop: for each row, see if it needs to be shown or hidden
+        // For each row, see if it needs to be shown or hidden
         $("#checks-table tr.checks-row").each(applyFilters);
-        // Mobile: for each list item, see if it needs to be shown or hidden
-        $("#checks-list > li").each(applyFilters);
-
     });
 
     $(".show-log").click(function(e) {
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 40dc26b5..7297707e 100644
--- a/templates/front/my_checks.html
+++ b/templates/front/my_checks.html
@@ -8,7 +8,7 @@
     {% if tags %}
     <div id="my-checks-tags" class="col-sm-12">
         {% for tag, status in tags %}
-            <div class="btn btn-xs {{ status }}">{{ tag }}</div>
+            <div class="btn btn-xs {{ status }} {% if tag in selected_tags %}checked{% endif%}">{{ tag }}</div>
         {% endfor %}
     </div>
     {% endif %}
diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html
index bc50b179..564220f5 100644
--- a/templates/front/my_checks_desktop.html
+++ b/templates/front/my_checks_desktop.html
@@ -45,7 +45,8 @@
         id="{{ check.code }}"
         class="checks-row"
         data-url="{{ check.url }}"
-        data-email="{{ check.email }}">
+        data-email="{{ check.email }}"
+        {% if check in hidden_checks %}style="display: none"{% endif %}>
 
         <td class="indicator-cell">
             <span class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>