Merge pull request #756 from maykinmedia/fix/1707-remove-double-search-bar

[#1707] Remove double search bar from search page

Author: alextreme

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ env:
 jobs:
   #
   # Unit and integration tests
-  # 
+  #
   tests:
     name: Run the Django test suite
     runs-on: ubuntu-latest
@@ -29,7 +29,7 @@ jobs:
         ports:
           - 5432:5432
         # needed because the postgres container does not provide a healthcheck
-        options: 
+        options:
           --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
           --name postgres
 
@@ -64,7 +64,7 @@ jobs:
             --parallel \
             --exclude-tag=e2e \
             --exclude-tag=elastic
-          coverage run src/manage.py test src --tag=elastic
+          coverage run src/manage.py test src --tag=elastic --exclude-tag=e2e
           coverage combine
 
         env:
@@ -104,6 +104,16 @@ jobs:
         options:
           --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
           --name postgres
+
+      elasticsearch:
+        image: docker.elastic.co/elasticsearch/elasticsearch:7.9.2
+        env:
+          discovery.type: single-node
+          ES_JAVA_OPTS: '-Xms512m -Xmx512m'
+        ports:
+          - 9200:9200
+          - 9300:9300
+
     steps:
       - uses: actions/checkout@v3
       - name: Set up backend environment

requirements/base.txt

@@ -320,7 +320,7 @@ glom==20.11.0
     # via
     #   -r requirements/base.in
     #   mozilla-django-oidc-db
-greenlet==2.0.1
+greenlet==2.0.2
     # via playwright
 html5lib==1.1
     # via
@@ -391,7 +391,7 @@ pillow==9.0.1
     #   easy-thumbnails
     #   reportlab
     #   weasyprint
-playwright==1.28.0
+playwright==1.38.0
     # via -r requirements/base.in
 polib==1.1.1
     # via django-rosetta

requirements/ci.txt

@@ -537,7 +537,7 @@ glom==20.11.0
     #   -c requirements/base.txt
     #   -r requirements/base.txt
     #   mozilla-django-oidc-db
-greenlet==2.0.1
+greenlet==2.0.2
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt
@@ -691,7 +691,7 @@ pillow==9.0.1
     #   weasyprint
 platformdirs==2.4.0
     # via pylint
-playwright==1.28.0
+playwright==1.38.0
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt

requirements/dev.txt

@@ -582,7 +582,7 @@ glom==20.11.0
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
     #   mozilla-django-oidc-db
-greenlet==2.0.1
+greenlet==2.0.2
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
@@ -771,7 +771,7 @@ platformdirs==2.4.0
     #   -r requirements/ci.txt
     #   black
     #   pylint
-playwright==1.28.0
+playwright==1.38.0
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt

src/open_inwoner/cms/cases/tests/test_htmx.py

@@ -450,7 +450,7 @@ def test_cases(self, m):
         contact_form = page.locator("#contact-form")
         expect(contact_form).to_be_visible()
 
-        question_text_area = page.get_by_label(_("Vraag"))
+        question_text_area = page.get_by_role("textbox", name=_("Vraag"))
         expect(question_text_area).to_be_visible()
 
         question_text_area.fill("a question")

src/open_inwoner/components/templates/components/Button/Button.html

@@ -30,6 +30,7 @@
         aria-label="{% firstof title text %}"
         {% as_attributes extra_attributes %}
         {% if id %} id="{{ id }}" {% endif %}
+        {% if form_id %} form="{{ form_id }}"{% endif %}
         {% if ariaExpanded %} aria-expanded="{{ ariaExpanded }}" {% endif %}
     >
         {% if icon %}{% icon icon=icon outlined=icon_outlined %}{% endif %}

src/open_inwoner/components/templates/components/Filter/Filter.html

@@ -8,7 +8,7 @@
         </legend>
         <div class="filter__list">
             {% for option in field.field.choices %}
-                {% choice_checkbox choice=option name=field.name data=field.data index=forloop.counter %}
+                {% choice_checkbox choice=option name=field.name data=field.data index=forloop.counter form_id=form_id %}
             {% endfor %}
         </div>
     </fieldset>

src/open_inwoner/components/templates/components/Form/ChoiceCheckbox.html

@@ -7,6 +7,7 @@
         name="{{ name }}"
         value="{{ choice.0|unlocalize }}"
         id="id_{{ name }}_{{ index }}"
+        {% if form_id %}form="{{ form_id }}"{% endif %}
         {% if choice.0 in data or choice.0|add:0 in data %}checked="checked"{% endif %}
     />
     <label class="checkbox__label" for="id_{{ name }}_{{ index }}">{{ choice.1 }}</label>

src/open_inwoner/components/templates/components/Form/FormActions.html

@@ -1,7 +1,7 @@
 {% load button_tags %}
 <div class="form__actions {% if single %}form__actions--single{% endif %}">
-    {% if secondary_text %}{% button href=secondary_href secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position %}{% endif %}
-    {% if secondary_name %}{% button name=secondary_name type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position %}{% endif %}
-    {% if secondary_value %}{% button name=secondary_name value=secondary_value type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position %}{% endif %}
-    {% button text=primary_text icon=primary_icon primary=primary type="submit" icon_position="after" hide_text=hide_primary_text transparent=transparent %}
+    {% if secondary_text %}{% button href=secondary_href secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
+    {% if secondary_name %}{% button name=secondary_name type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
+    {% if secondary_value %}{% button name=secondary_name value=secondary_value type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
+    {% button text=primary_text icon=primary_icon primary=primary type="submit" icon_position="after" hide_text=hide_primary_text transparent=transparent form_id=form_id %}
 </div>

src/open_inwoner/components/templates/components/Form/Input.html

@@ -7,7 +7,7 @@
             {{ field.label }}
             {% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
         </span>
-        {{ field|addclass:"input" }}
+        {% field_as_widget field "input" form_id %}
         {% if field.help_text and not no_help %}
             <p class="p">{{ field.help_text }}</p>
         {% endif %}

src/open_inwoner/components/templates/components/Header/Header.html

@@ -31,16 +31,13 @@
         {# end of mobile header-menu with logo #}
 
         <div class="header__submenu">
-            {% if cms_apps.products %}
-            {% if request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
+            {% if cms_apps.products and request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
                 <nav class="header__actions header__actions--open" aria-label="Zoek navigatie mobiel">
-                {% url 'search:search' as search_url %}
-                {% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=False %}
-                    {% input search_form.query no_label=True %}
-                    {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
-                {% endrender_form %}
+                    <form id="search-form-mobile-open" class="search-form-delegate form form--inline">
+                        {% input search_form.query no_label=True %}
+                        {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
+                    </form>
                 </nav>
-            {% endif %}
             {% endif %}
 
                 <nav class="primary-navigation" aria-label="Hoofd navigatie">
@@ -111,33 +108,27 @@
 
         {% include "components/Header/PrimaryNavigation.html" %}
 
-        {% if cms_apps.products %}
-          {% if request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
-          <nav class="header__actions" aria-label="Zoek navigatie desktop">
-              {% url 'search:search' as search_url %}
-              {% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=True %}
-                  {% input search_form.query no_label=True %}
-                  {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
-              {% endrender_form %}
-          </nav>
-          {% endif %}
+        {% if cms_apps.products and request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
+            <nav class="header__actions" aria-label="Zoek navigatie desktop">
+                <form id="search-form-desktop" class="search-form-delegate form form--spaceless form--inline">
+                    {% input search_form.query no_label=True %}
+                    {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
+                </form>
+            </nav>
         {% endif %}
 
         {% include "components/Header/NavigationAuthenticated.html" %}
     </div>
     {# end of header container #}
 </header>
 
-{% if cms_apps.products %}
-    {% if request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
-        <section class="search search__mobile search__mobile--closed">
-            <nav class="search__actions " aria-label="Zoek navigatie mobiel">
-                {% url 'search:search' as search_url %}
-                {% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=False %}
-                    {% input search_form.query no_label=True %}
-                    {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
-                {% endrender_form %}
-            </nav>
-        </section>
-    {% endif %}
+{% if cms_apps.products and request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
+    <section class="search search__mobile search__mobile--closed">
+        <nav class="search__actions " aria-label="Zoek navigatie mobiel">
+            <form id="search-form-mobile-closed" class="search-form-delegate form form--inline">
+                {% input search_form.query no_label=True %}
+                {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
+            </form>
+        </nav>
+    </section>
 {% endif %}

src/open_inwoner/components/templatetags/button_tags.py

@@ -43,6 +43,7 @@ def button(text, **kwargs):
     Variables:
         + text: string | this will be the button text.
         - class: str | Additional classes.
+        - form_id: str | ID of parent form, sets 'form' attribute.
         - hide_text: bool | whether to hide the text and use aria attribute instead.
         - href: url or string | where the link links to (can be url name).
         - uuid: string | if href is an url name, pk for reverse can be passed.

src/open_inwoner/components/templatetags/filter_tags.py

@@ -4,12 +4,12 @@
 
 
 @register.inclusion_tag("components/Filter/Filter.html")
-def filter(field, **kwargs):
+def filters(field, **kwargs):
     """
     Building the filter options for the search page.
 
     Usage:
-        {% filter field=field %}
+        {% filters field=field %}
 
     Variables:
         + field: Field | This is a form field.

src/open_inwoner/components/templatetags/form_tags.py

@@ -356,7 +356,9 @@ def hidden(field, **kwargs):
 
 
 @register.inclusion_tag("components/Form/FormActions.html")
-def form_actions(primary_text="", primary_icon=None, secondary=True, **kwargs):
+def form_actions(
+    primary_text="", primary_icon=None, secondary=True, form_id=None, **kwargs
+):
     """
     Rendering the form actions. This may contain a primary and or secondary button.
 
@@ -393,6 +395,7 @@ def form_actions(primary_text="", primary_icon=None, secondary=True, **kwargs):
         "primary_icon": primary_icon,
         "primary": primary,
         "secondary": secondary,
+        "form_id": form_id,
     }
 
 
@@ -411,6 +414,19 @@ def addclass(field, class_string):
     return field.as_widget(attrs={"class": class_string})
 
 
+@register.simple_tag()
+def field_as_widget(field, class_string, form_id):
+    """
+    Clone of addclass-filter but with more atributes
+    """
+    attrs = {}
+    if class_string:
+        attrs["class"] = class_string
+    if form_id:
+        attrs["form"] = form_id
+    return field.as_widget(attrs=attrs)
+
+
 @register.simple_tag(takes_context=True)
 def initial_match(context):
     initial = context.get("initial")

src/open_inwoner/js/components/search/filter-mobile.js

@@ -9,7 +9,6 @@ export class FilterMobile {
 
   toggleOpen(event) {
     event.preventDefault()
-    console.log('this is mobile')
     const filterParent = this.node.parentElement
     if (filterParent) {
       filterParent.classList.toggle('filter--open')

src/open_inwoner/js/components/search/filter-options.js

@@ -1,28 +1,7 @@
-const radioButtons = document.querySelectorAll(
-  '.feedback__options .button-radio__input'
-)
-
-;[...radioButtons].forEach((radioButton) => {
-  radioButton.addEventListener('click', (event) => {
-    const feedbackRemarks = document.querySelectorAll('.feedback__remark')
-    ;[...feedbackRemarks].forEach((feedbackRemark) =>
-      feedbackRemark.classList.add('feedback__remark--show')
-    )
-  })
-})
-
-let timerId = null
-
 const searchForm = document.getElementById('search-form')
 
-const filterButtons = document.querySelectorAll('.filter .checkbox__input')
-;[...filterButtons].forEach((checkbox) => {
+document.querySelectorAll('.filter .checkbox__input').forEach((checkbox) => {
   checkbox.addEventListener('change', (event) => {
-    clearTimeout(timerId)
-
-    // Set a new interval
-    timerId = setTimeout(() => {
-      searchForm.submit()
-    }, 250)
+    searchForm.submit()
   })
 })

src/open_inwoner/js/components/search/index.js

@@ -1,2 +1,34 @@
 import './filter-mobile'
 import './filter-options'
+
+const searchForm = document.getElementById('search-form')
+
+// connect multiple search boxes to centralized hidden form
+document.querySelectorAll('.search-form-delegate').forEach((form) => {
+  console.log(['connecting .search-form-delegate', form, 'to', searchForm])
+  // make sure all forms have same query
+  form.query.value = searchForm.query.value
+
+  // setup to copy the query and submit the actual search form instead of the delegate
+  form.addEventListener('submit', (event) => {
+    event.preventDefault()
+    const query = event.target.query.value.trim()
+    if (query !== '') {
+      searchForm.query.value = query
+      searchForm.submit()
+    }
+  })
+})
+
+// connect search feedback
+document
+  .querySelectorAll('.feedback__options .button-radio__input')
+  .forEach((radioButton) => {
+    radioButton.addEventListener('click', (event) => {
+      document
+        .querySelectorAll('.feedback__remark')
+        .forEach((feedbackRemark) =>
+          feedbackRemark.classList.add('feedback__remark--show')
+        )
+    })
+  })

src/open_inwoner/scss/components/Form/Form.scss

@@ -17,6 +17,10 @@
     gap: 0;
   }
 
+  &--hidden {
+    display: none;
+  }
+
   &--horizontal {
     .form__control > .label {
       flex-direction: row;

src/open_inwoner/search/results.py

@@ -1,5 +1,6 @@
 from collections import OrderedDict
 from dataclasses import dataclass
+from operator import attrgetter
 from typing import List, Type
 
 from django.db import models
@@ -21,7 +22,6 @@ class FacetBucket:
 
     @property
     def label(self) -> str:
-        """display in the label"""
         return f"{self.name} ({self.count})"
 
 
@@ -81,6 +81,12 @@ def total_buckets(self) -> List[FacetBucket]:
     def choices(self) -> list:
         return [(b.slug, b.label) for b in self.buckets]
 
+    def total_choices(self) -> list:
+        return [
+            (b.slug, b.label)
+            for b in sorted(self.total_buckets, key=attrgetter("slug"))
+        ]
+
 
 @dataclass()
 class ProductSearchResult: