From 62b10be5fe3b08003109c34889501e6fe8b3dd67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 15 Nov 2024 12:11:18 +0200
Subject: [PATCH] Implement "no matching checks" message when
searching/filtering
(instead of showing a table with a header row and no data rows)
---
hc/front/views.py | 1 +
static/css/checks.css | 7 ++++
static/js/checks.js | 58 +++++++++++++++++--------------
templates/front/checks.html | 34 ++++++++++++++----
templates/front/checks_table.html | 2 +-
5 files changed, 69 insertions(+), 33 deletions(-)
diff --git a/hc/front/views.py b/hc/front/views.py
index 1618e74d..da4bc25d 100644
--- a/hc/front/views.py
+++ b/hc/front/views.py
@@ -314,6 +314,7 @@ def checks(request: AuthenticatedHttpRequest, code: UUID) -> HttpResponse:
"selected_statuses": selected_statuses,
"search": search,
"hidden_checks": hidden_checks,
+ "num_visible": len(checks) - len(hidden_checks),
"ambiguous": ambiguous,
"show_last_duration": show_last_duration,
}
diff --git a/static/css/checks.css b/static/css/checks.css
index 72dc12c9..690b7722 100644
--- a/static/css/checks.css
+++ b/static/css/checks.css
@@ -164,3 +164,10 @@
width: 650px;
}
}
+
+#no-checks {
+ padding: 1em;
+ text-align: center;
+ font-size: 36px;
+ opacity: 0.3;
+}
diff --git a/static/js/checks.js b/static/js/checks.js
index 3eb83603..b03a95d7 100644
--- a/static/js/checks.js
+++ b/static/js/checks.js
@@ -128,44 +128,50 @@ $(function () {
a.setAttribute("href", url.toString());
});
- // No checked tags, no search string, no status filters: show all
if (checked.length == 0 && !search && statuses.length == 0) {
+ // No checked tags, no search string, no status filters: show all
$("#checks-table tr.checks-row").show();
- return;
- }
-
- function applySingle(index, element) {
- var nameData = element.querySelector(".my-checks-name").dataset;
- if (search) {
- var haystack = [nameData.name, nameData.slug, element.id].join("\n");
- if (haystack.toLowerCase().indexOf(search) == -1) {
- $(element).hide();
- return;
- }
- }
-
- if (checked.length) {
- var tags = nameData.tags.split(" ");
- for (var i = 0, checkedTag; (checkedTag = checked[i]); i++) {
- if (tags.indexOf(checkedTag) == -1) {
+ var numVisible = $("#checks-table tr.checks-row").length;
+ } else {
+ var numVisible = 0;
+ function applySingle(index, element) {
+ var nameData = element.querySelector(".my-checks-name").dataset;
+ if (search) {
+ var parts = [nameData.name, nameData.slug, element.id];
+ var haystack = parts.join("\n").toLowerCase();
+ if (haystack.indexOf(search) == -1) {
$(element).hide();
return;
}
}
- }
- if (statuses.length) {
- if (!statusMatch(element, statuses)) {
- $(element).hide();
- return;
+ if (checked.length) {
+ var tags = nameData.tags.split(" ");
+ for (var i = 0, checkedTag; (checkedTag = checked[i]); i++) {
+ if (tags.indexOf(checkedTag) == -1) {
+ $(element).hide();
+ return;
+ }
+ }
}
+
+ if (statuses.length) {
+ if (!statusMatch(element, statuses)) {
+ $(element).hide();
+ return;
+ }
+ }
+
+ $(element).show();
+ numVisible += 1;
}
- $(element).show();
+ // For each row, see if it needs to be shown or hidden
+ $("#checks-table tr.checks-row").each(applySingle);
}
- // For each row, see if it needs to be shown or hidden
- $("#checks-table tr.checks-row").each(applySingle);
+ $("#checks-table").toggle(numVisible > 0);
+ $("#no-checks").toggle(numVisible == 0);
}
// User clicks on tags: apply filters
diff --git a/templates/front/checks.html b/templates/front/checks.html
index 65287b47..c6338fe0 100644
--- a/templates/front/checks.html
+++ b/templates/front/checks.html
@@ -70,7 +70,8 @@
<input
id="search"
type="text"
- class="form-control">
+ class="form-control"
+ value="{{ search }}">
<div id="filters" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
@@ -146,17 +147,38 @@
</button>
{% endif %}
</div>
-{% endif %}
+
<div class="row">
<div class="col-sm-12">
- {% if checks %}
{% include "front/checks_table.html" %}
- {% else %}
- <div class="alert alert-info">The project <strong>{{ project }}</strong> does not have any checks yet.</div>
- {% endif %}
+ <div id="no-checks" {% if num_visible > 0 %}style="display: none"{% endif %}>
+ no matching checks found
+ </div>
</div>
</div>
+{% else %}
+<div class="row">
+ <div class="col-sm-12">
+ <div class="alert alert-info">
+ The project <strong>{{ project }}</strong> does not have any checks yet.
+ {% if rw and num_available > 0 %}
+ <br><br>
+ <button
+ class="btn btn-primary"
+ data-toggle="modal"
+ data-target="#add-check-modal"
+ {% if num_available <= 0 %}disabled{% endif %}>
+ Add Check
+ </button>
+ {% endif %}
+ </div>
+ </div>
+</div>
+
+{% endif %}
+
+
{% if num_available == 0 %}
<div id="my-checks-bottom-actions" class="row">
diff --git a/templates/front/checks_table.html b/templates/front/checks_table.html
index 93d7fde2..ef98ba99 100644
--- a/templates/front/checks_table.html
+++ b/templates/front/checks_table.html
@@ -2,6 +2,7 @@
<table
id="checks-table"
class="table {% if rw %}rw{% endif%}"
+ {% if num_visible == 0 %}style="display: none"{% endif %}
data-status-url="{% url 'hc-status' project.code %}">
<tr>
<th></th>
@@ -132,7 +133,6 @@
</td>
</tr>
{% endfor %}
-
</table>
{% for channel in channels %}