Make live-search into a component

app/templates/components/live-search.html

@@ -0,0 +1,21 @@
+{% from "components/textbox.html" import textbox %}
+
+{% macro live_search(
+    target_selector=None,
+    show=False,
+    form=None,
+    label=None
+) %}
+    {%- set search_label = label or form.search.label.text %}
+    {% if show %}
+      <div data-module="autofocus">
+        <div class="live-search" data-module="live-search" data-targets="{{ target_selector }}">
+          {{ textbox(
+            form.search,
+            width='1-1',
+            label=search_label
+          ) }}
+        </div>
+      </div>
+    {% endif %}
+{% endmacro %}

app/templates/views/manage-users.html

@@ -3,6 +3,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/tick-cross.html" import tick_cross %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/live-search.html" import live_search %}
 
 {% set table_options = {
   'field_headings': [
@@ -33,12 +34,7 @@
 
   {% if show_search_box %}
     <div data-module="autofocus">
-      <div class="live-search" data-module="live-search" data-targets=".user-list-item">
+      {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
-        {{ textbox(
-          form.search,
-          width='1-1'
-        ) }}
-      </div>
     </div>
   {% endif %}
 

app/templates/views/organisations/organisation/users/index.html

@@ -3,6 +3,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/tick-cross.html" import tick_cross %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/live-search.html" import live_search %}
 
 {% block org_page_title %}
   Team members
@@ -23,12 +24,7 @@
 
   {% if show_search_box %}
     <div data-module="autofocus">
-      <div class="live-search" data-module="live-search" data-targets=".user-list-item">
+      {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
-        {{ textbox(
-          form.search,
-          width='1-1'
-        ) }}
-      </div>
     </div>
   {% endif %}
 

app/templates/views/pricing.html

@@ -1,5 +1,6 @@
 {% from "components/table.html" import mapping_table, row, text_field, field, row_heading %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/live-search.html" import live_search %}
 
 {% extends "withoutnav_template.html" %}
 
@@ -62,13 +63,7 @@
     <details>
       <summary>International text message rates</summary>
 
-      <div class="live-search" data-module="live-search" data-targets="#international-pricing .table-row">
+      {{ live_search(target_selector='#international-pricing .table-row', show=True, form=search_form, label='Search by country name or code') }}
-        {{ textbox(
-          search_form.search,
-          width='1-1',
-          label='Search by country name or code'
-        ) }}
-      </div>
 
       <div id="international-pricing" class="bottom-gutter-3-2">
         {% call mapping_table(

app/templates/views/templates/_search-box.html

@@ -1,10 +0,0 @@
-    {% if show_search_box %}
-      <div data-module="autofocus">
-        <div class="live-search" data-module="live-search" data-targets="#template-list .column-whole">
-          {{ textbox(
-            search_form.search,
-            width='1-1'
-          ) }}
-        </div>
-      </div>
-    {% endif %}

app/templates/views/templates/choose-reply.html

@@ -1,6 +1,7 @@
 {% from "components/pill.html" import pill %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/live-search.html" import live_search %}
 
 {% extends "withnav_template.html" %}
 
@@ -28,7 +29,7 @@
 
   {% else %}
 
-    {% include "views/templates/_search-box.html" %}
+    {{ live_search(target_selector='#template-list .column-whole', show=show_search_box, form=search_form) }}
 
     <nav class="grid-row" id=template-list>
       {% for template in templates %}

app/templates/views/templates/choose.html

@@ -1,6 +1,7 @@
 {% from "components/pill.html" import pill %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/live-search.html" import live_search %}
 
 {% extends "withnav_template.html" %}
 
@@ -55,7 +56,7 @@
       </div>
     {% endif %}
 
-    {% include "views/templates/_search-box.html" %}
+    {{ live_search(target_selector='#template-list .column-whole', show=show_search_box, form=search_form) }}
 
     <nav class="grid-row" id=template-list>
       {% for template in templates %}