Merge pull request #763 from maykinmedia/feature/1711-hide-filters-when-unused

[#1711] [#1710] Make search filters conditional and add mobile toggle

Author: Bartvaderkin

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

@@ -1,15 +1,16 @@
-{% load i18n filter_tags icon_tags form_tags %}
+{% load i18n filter_tags icon_tags button_tags form_tags %}
 
 <div>
-    <fieldset class="filter filter--open" aria-label="{% trans "Filter" %}">
+    <fieldset class="filter" aria-label="{% trans "Filter" %}">
+        {% button href="#" icon="expand_more" icon_position="after" extra_classes="filter__mobile filter--toggle" bordered=False text=field.label %}
         <legend class="filter__title">
-            {{ field.label }}
+            <span class="filter__legend-label">{{ field.label }}</span>
         </legend>
         <div class="filter__list">
             {% for option in field.field.choices %}
                 {% choice_checkbox choice=option name=field.name data=field.data index=forloop.counter %}
             {% endfor %}
         </div>
     </fieldset>
-    <hr class="divider divider--small">
+    <hr class="divider divider--tiny">
 </div>

src/open_inwoner/configurations/admin.py

@@ -162,6 +162,16 @@ class SiteConfigurarionAdmin(OrderedInlineModelAdminMixin, SingletonModelAdmin):
                 ),
             },
         ),
+        (
+            _("Search filter options"),
+            {
+                "fields": (
+                    "search_filter_categories",
+                    "search_filter_tags",
+                    "search_filter_organizations",
+                )
+            },
+        ),
         (_("Emails"), {"fields": ("email_new_message",)}),
         (
             _("Openid Connect"),

src/open_inwoner/configurations/migrations/0052_siteconfiguration_search_filters.py

@@ -0,0 +1,40 @@
+# Generated by Django 3.2.20 on 2023-09-18 10:09
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0051_merge_20230907_1800"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="search_filter_categories",
+            field=models.BooleanField(
+                default=True,
+                help_text="Whether to show category-checkboxes in order to filter the search result.",
+                verbose_name="Add category filter for search results",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="search_filter_organizations",
+            field=models.BooleanField(
+                default=True,
+                help_text="Whether to show organization-checkboxes in order to filter the search result.",
+                verbose_name="Add organization filter for search results",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="search_filter_tags",
+            field=models.BooleanField(
+                default=True,
+                help_text="Whether to show tag-checkboxes in order to filter the search result.",
+                verbose_name="Add tag filter for search results",
+            ),
+        ),
+    ]

src/open_inwoner/configurations/models.py

@@ -316,6 +316,31 @@ class SiteConfiguration(SingletonModel):
         verbose_name=_("Plan help"),
         help_text=_("The help text for the plan page."),
     )
+
+    # search filters
+    search_filter_categories = models.BooleanField(
+        verbose_name=_("Add category filter for search results"),
+        default=True,
+        help_text=_(
+            "Whether to show category-checkboxes in order to filter the search result."
+        ),
+    )
+    search_filter_tags = models.BooleanField(
+        verbose_name=_("Add tag filter for search results"),
+        default=True,
+        help_text=_(
+            "Whether to show tag-checkboxes in order to filter the search result."
+        ),
+    )
+    search_filter_organizations = models.BooleanField(
+        verbose_name=_("Add organization filter for search results"),
+        default=True,
+        help_text=_(
+            "Whether to show organization-checkboxes in order to filter the search result."
+        ),
+    )
+
+    # email notifications
     email_new_message = models.BooleanField(
         verbose_name=_("Send email about a new message"),
         default=True,

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

@@ -0,0 +1,34 @@
+export class FilterMobile {
+  static selector = '.filter--toggle'
+
+  constructor(node) {
+    this.node = node
+    this.node.addEventListener('click', this.toggleOpen.bind(this))
+    document.addEventListener('keydown', this.filterClosing.bind(this), false)
+  }
+
+  toggleOpen(event) {
+    event.preventDefault()
+    console.log('this is mobile')
+    const filterParent = this.node.parentElement
+    if (filterParent) {
+      filterParent.classList.toggle('filter--open')
+    }
+  }
+
+  filterClosing(event) {
+    if (event.type === 'keydown' && event.key === 'Escape') {
+      const filterParent = this.node.parentElement
+      if (filterParent) {
+        filterParent.classList.remove('filter--open')
+      }
+    }
+  }
+}
+
+/**
+ * Controls the toggling of filter lists on mobile to view more
+ */
+document
+  .querySelectorAll(FilterMobile.selector)
+  .forEach((filterToggle) => new FilterMobile(filterToggle))

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

@@ -0,0 +1,28 @@
+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) => {
+  checkbox.addEventListener('change', (event) => {
+    clearTimeout(timerId)
+
+    // Set a new interval
+    timerId = setTimeout(() => {
+      searchForm.submit()
+    }, 250)
+  })
+})

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

@@ -1,28 +1,2 @@
-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) => {
-  checkbox.addEventListener('change', (event) => {
-    clearTimeout(timerId)
-
-    // Set a new timeout
-    timerId = setTimeout(() => {
-      searchForm.submit()
-    }, 250)
-  })
-})
+import './filter-mobile'
+import './filter-options'

src/open_inwoner/scss/components/Divider/Divider.scss

@@ -6,6 +6,10 @@
     margin: var(--spacing-large) 0;
   }
 
+  &--tiny {
+    margin: var(--spacing-medium) 0;
+  }
+
   @media (min-width: 768px) {
     margin: var(--spacing-giant) 0;
   }

src/open_inwoner/scss/components/Filter/Filter.scss

@@ -1,27 +1,106 @@
 .filter {
   border: 0 solid transparent;
+  margin: 0;
+  padding: 0;
 
-  &--open {
-    .filter__list {
+  @media (min-width: 768px) {
+    padding: 0 var(--spacing-large) var(--spacing-large) var(--spacing-large);
+  }
+
+  &__list {
+    padding-top: 0;
+    padding-bottom: var(--spacing-large);
+    display: none;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-large);
+
+    @media (min-width: 768px) {
       display: grid;
+      padding-top: var(--spacing-large);
+      padding-bottom: 0;
+    }
+
+    .checkbox .checkbox__label {
+      cursor: pointer;
     }
   }
 
+  .button {
+    color: var(--font-color-body);
+    font-weight: bold;
+    padding: 0;
+  }
+
   &__title {
     color: var(--font-color-heading-4);
     font-family: var(--font-family-heading);
     font-size: var(--font-size-heading-4);
     font-weight: bold;
     letter-spacing: 0;
     line-height: 21px;
-    cursor: pointer;
     display: flex;
   }
 
-  &__list {
-    padding-top: var(--spacing-large);
-    display: none;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-large);
+  &__legend {
+    &-label {
+      display: none;
+      @media (min-width: 768px) {
+        display: inline;
+      }
+    }
+  }
+
+  .divider {
+    background-color: yellow;
+    border: red solid 5px !important;
+    &--small {
+      display: none;
+      @media (min-width: 768px) {
+        display: block;
+      }
+    }
+    &--tiny {
+      display: block;
+      @media (min-width: 768px) {
+        display: none;
+      }
+    }
+  }
+
+  &__mobile {
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
+
+  //toggling dropdows
+  &.filter--open {
+    .button {
+      color: var(--color-secondary);
+      padding: 0;
+    }
+
+    .button--textless [class*='icon'] {
+      display: inline-block;
+      right: var(--spacing-large);
+      top: 0;
+      transform: rotate(180deg);
+      transition: all 0.3s;
+    }
+
+    .filter__list {
+      display: grid;
+    }
+  }
+}
+
+.grid__filters {
+  .h2 {
+    border-bottom: 2px solid var(--color-gray-light);
+    display: block;
+    padding-bottom: var(--spacing-large);
+    @media (min-width: 768px) {
+      display: none;
+    }
   }
 }

src/open_inwoner/templates/pages/search.html

@@ -18,10 +18,20 @@ <h1 class="h1">{% trans "Zoeken naar " %} "{{ form.query.value }}"</h1>
         {#  facets and results section #}
         {% if paginator.count %}
             <div class="grid">
-                <aside class="grid__sidebar" aria-label="{% trans "Zoekfilters" %}">
-                    {% filter field=form.categories %}
-                    {% filter field=form.tags %}
-                    {% filter field=form.organizations %}
+                <aside class="grid__sidebar grid__filters" aria-label="{% trans "Zoekfilters" %}">
+                {% if search_filter_categories or search_filter_tags or search_filter_organizations %}
+                    <h2 class="h2">{% trans "Zoekfilters" %}</h2>
+                        {% if search_filter_categories %}
+                                {% filter field=form.categories %}
+                        {% endif %}
+                        {% if search_filter_tags %}
+                                {% filter field=form.tags %}
+                        {% endif %}
+                        {% if search_filter_organizations %}
+                                {% filter field=form.organizations %}
+                        {% endif %}
+                {%  endif %}
+                {#  end search filters #}
                 </aside>
 
                 <div class="grid__main">

src/open_inwoner/utils/context_processors.py

@@ -80,6 +80,9 @@ def settings(request):
         "extra_css": config.extra_css,
         "menu_categories": Category.get_root_nodes().published(),
         "search_form": SearchForm(auto_id=False),
+        "search_filter_categories": config.search_filter_categories,
+        "search_filter_tags": config.search_filter_tags,
+        "search_filter_organizations": config.search_filter_organizations,
         "has_general_faq_questions": Question.objects.general().exists(),
         "settings": dict(
             [(k, getattr(django_settings, k, None)) for k in public_settings]