✨ add multi-search

froide/helper/templates/helper/search/multi_search.html

@@ -0,0 +1,22 @@
+{% load i18n %}
+
+<form action="{% url "foirequest-list" %}" method="get">
+  <div class="d-grid gap-2 d-md-flex">
+    <select class="form-select flex-grow-0 w-auto">
+      {% for search in searches %}
+      <option value="{{ search.url }}">
+        {{ search.title }}
+      </option>
+      {% endfor %}
+    </select>
+    <input
+      name="q"
+      type="search"
+      class="form-control"
+      placeholder="{% trans "Search term" %}" />
+    <button type="submit" class="btn btn-outline-primary text-nowrap">
+      <i class="fa fa-search"></i>
+      {% trans "Search" %}
+    </button>
+  </div>
+</form>

froide/helper/templatetags/search_helper.py

@@ -14,3 +14,10 @@ def render_search_list(context, current, num_results=None, query=""):
         "searches": searches,
         "query": query,
     }
+
+
+@register.inclusion_tag("helper/search/multi_search.html", takes_context=True)
+def multi_search(context):
+    searches = search_registry.get_searches(context["request"])
+
+    return {"searches": searches}

frontend/javascript/snippets/search.ts

@@ -1,48 +1,25 @@
-function applyToForm(searchForm: HTMLFormElement): void {
-  function submitForm(): void {
-    searchForm.submit()
-  }
-  const inputs = searchForm.querySelectorAll('select')
-  let i
-  for (i = 0; i < inputs.length; i += 1) {
-    const selectInput = inputs[i]
-    selectInput.addEventListener('change', submitForm)
-  }
+const firstPathSegment = (path: string) => path.split('/')[1]
 
-  function dropdownSubmit(input: HTMLInputElement) {
-    return function (this: HTMLElement, e: Event) {
-      e.preventDefault()
-      input.value = this.dataset.value ?? ''
-      searchForm.submit()
-    }
-  }
+document
+  .querySelectorAll<HTMLFormElement>('.froide-multi-search')
+  .forEach((form) => {
+    const select = form.querySelector('select')
+    if (select === null) return
 
-  const dropdowns = searchForm.querySelectorAll('.dropdown')
-  for (i = 0; i < dropdowns.length; i += 1) {
-    const dropdown = dropdowns[i]
-    const input = dropdown.querySelector('input')
-    dropdown.querySelectorAll('.dropdown-menu a').forEach((dropdownLink) => {
-      dropdownLink.addEventListener(
-        'click',
-        dropdownSubmit(input as HTMLInputElement)
-      )
+    select.addEventListener('change', () => {
+      form.action = select.value
     })
-  }
-}
 
-const domSearchForm = document.querySelector<HTMLFormElement>('.search-form')
-if (domSearchForm !== null) {
-  applyToForm(domSearchForm)
-}
+    const searchBases = [...select.querySelectorAll('option')].map((o) => [
+      firstPathSegment(o.value),
+      o.value
+    ])
+    const currentBase = firstPathSegment(window.location.pathname)
+    const bestMatch = searchBases.find((s) => s[0] === currentBase)?.[1]
+    console.log(bestMatch)
 
-document.addEventListener('shown.bs.modal', (event) => {
-  if (event.target == null) {
-    return
-  }
-  if (event.target instanceof HTMLElement) {
-    const focussable = event.target.querySelector('[data-focus]')
-    if (focussable instanceof HTMLInputElement) {
-      focussable.focus()
+    if (bestMatch !== undefined) {
+      form.action = bestMatch
+      select.value = bestMatch
     }
-  }
-})
+  })