From 4cb2b101d7d82a80428495d240009c32ed6faaf7 Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Fri, 11 Jan 2019 15:18:29 +0000
Subject: [PATCH] WIP: make the search work with filters
---
.../funds/base_submissions_table.html | 45 ++++++++++---------
.../templates/funds/includes/search.html | 6 ---
.../javascript/apply/submission-filters.js | 21 +++++++--
3 files changed, 43 insertions(+), 29 deletions(-)
delete mode 100644 opentech/apply/funds/templates/funds/includes/search.html
diff --git a/opentech/apply/funds/templates/funds/base_submissions_table.html b/opentech/apply/funds/templates/funds/base_submissions_table.html
index 5ab3e1796..66dbdbeb3 100644
--- a/opentech/apply/funds/templates/funds/base_submissions_table.html
+++ b/opentech/apply/funds/templates/funds/base_submissions_table.html
@@ -8,29 +8,33 @@
{% block content %}
{% block table %}
- <div class="wrapper wrapper--table-actions">
- <button class="button button--filters button--contains-icons js-toggle-filters">Filters</button>
- {% include "funds/includes/search.html" %}
- </div>
+ <div class="wrapper wrapper--table-actions">
+ <button class="button button--filters button--contains-icons js-toggle-filters">Filters</button>
- {% if table.data or active_filters %}
- <div class="filters">
- <div class="filters__header">
- <button class="filters__button js-clear-filters">Clear</button>
- <div>Filter by</div>
- <button class="filters__button js-close-filters">Close</button>
- </div>
+ <form method="get" role="search" class="form form--search-desktop js-search-form">
+ <button class="button button--search" type="submit" aria-label="Search">
+ <svg class="icon icon--magnifying-glass icon--search"><use xlink:href="#magnifying-glass"></use></svg>
+ </button>
+ <input class="input input--search js-search-input" type="text" placeholder="Search submissions" name="query"{% if search_term %} value="{{ search_term }}"{% endif %} aria-label="Search input">
+ </form>
+ </div>
- <form action="" method="get" class="form form--filters">
- <ul class="form__filters select2">
- {{ filter.form.as_ul }}
- <li>
- <button class="button button--primary" type="submit" value="Filter">Filter</button>
- </li>
- </ul>
- </form>
+ <div class="filters">
+ <div class="filters__header">
+ <button class="filters__button js-clear-filters">Clear</button>
+ <div>Filter by</div>
+ <button class="filters__button js-close-filters">Close</button>
</div>
- {% endif %}
+
+ <form action="" method="get" class="form form--filters js-filter-form">
+ <ul class="form__filters select2">
+ {{ filter.form.as_ul }}
+ <li>
+ <button class="button button--primary" type="submit" value="Filter">Filter</button>
+ </li>
+ </ul>
+ </form>
+ </div>
{% render_table table %}
{% endblock %}
@@ -39,6 +43,7 @@
{% block extra_js %}
{{ filter.form.media.js }}
<script src="{% static 'js/apply/all-submissions-table.js' %}"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js"></script>
<script src="{% static 'js/apply/submission-filters.js' %}"></script>
<script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
{% endblock %}
diff --git a/opentech/apply/funds/templates/funds/includes/search.html b/opentech/apply/funds/templates/funds/includes/search.html
deleted file mode 100644
index 525771944..000000000
--- a/opentech/apply/funds/templates/funds/includes/search.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<form action="" method="get" role="search" class="form form--search-desktop">
- <button class="button button--search" type="submit" aria-label="Search">
- <svg class="icon icon--magnifying-glass icon--search"><use xlink:href="#magnifying-glass"></use></svg>
- </button>
- <input class="input input--search" type="text" placeholder="Search submissions" name="query"{% if search_term %} value="{{ search_term }}"{% endif %} aria-label="Search input">
-</form>
diff --git a/opentech/static_src/src/javascript/apply/submission-filters.js b/opentech/static_src/src/javascript/apply/submission-filters.js
index 1049f923a..eaaf37d31 100644
--- a/opentech/static_src/src/javascript/apply/submission-filters.js
+++ b/opentech/static_src/src/javascript/apply/submission-filters.js
@@ -10,12 +10,28 @@
const filterOpenClass = 'filters-open';
const filterActiveClass = 'is-active';
+ const $searchInput = $('.js-search-input');
+ const $queryInput = $('#id_query');
+ const $searchForm = $('.js-search-form');
+
+ const $filterForm = $('.js-filter-form');
+
+ const urlParams = new URLSearchParams(window.location.search);
+
// check if the page has a query string and keep filters open if so on desktop
- if (window.location.href.indexOf('?') > -1 && $(window).width() > 1024) {
+ const minimumNumberParams = 1 + urlParams.has('query') ? 1 : 0;
+
+ if ([...urlParams].length > minimumNumberParams && $(window).width() > 1024) {
$body.addClass(filterOpenClass);
updateButtonText();
}
+ $searchForm.submit((e) => {
+ e.preventDefault();
+ $queryInput.val($searchInput.val());
+ $filterForm.submit();
+ });
+
// Add active class to filters - dropdowns are dynamically appended to the dom,
// so we have to listen for the event higher up
$body.on('click', '.select2-dropdown', (e) => {
@@ -61,7 +77,7 @@
// redirect to submissions home to clear filters
function handleClearFilters() {
- window.location.href = window.location.href.split('?')[0];
+ window.location.href = window.location.href.split('?')[0] + '?query=' + urlParams.get('query');
}
// toggle filters button wording
@@ -144,4 +160,3 @@
}).trigger('resize');
})(jQuery);
-
--
GitLab