From 47798b218c106638de0886508b2fadf747ee2c86 Mon Sep 17 00:00:00 2001
From: Tom Byers <tom.byers@digital.cabinet-office.gov.uk>
Date: Wed, 15 Aug 2018 20:13:49 +0100
Subject: [PATCH] Make live-search into a component

---
 app/templates/components/live-search.html     | 21 +++++++++++++++++++
 app/templates/views/manage-users.html         |  8 ++-----
 .../organisation/users/index.html             |  8 ++-----
 app/templates/views/pricing.html              |  9 ++------
 .../views/templates/_search-box.html          | 10 ---------
 .../views/templates/choose-reply.html         |  3 ++-
 app/templates/views/templates/choose.html     |  3 ++-
 7 files changed, 31 insertions(+), 31 deletions(-)
 create mode 100644 app/templates/components/live-search.html
 delete mode 100644 app/templates/views/templates/_search-box.html

diff --git a/app/templates/components/live-search.html b/app/templates/components/live-search.html
new file mode 100644
index 000000000..f60b8f60c
--- /dev/null
+++ b/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 %}
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index d625d8e5a..d7503a4c9 100644
--- a/app/templates/views/manage-users.html
+++ b/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">
-        {{ textbox(
-          form.search,
-          width='1-1'
-        ) }}
-      </div>
+      {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
     </div>
   {% endif %}
 
diff --git a/app/templates/views/organisations/organisation/users/index.html b/app/templates/views/organisations/organisation/users/index.html
index 896be8dc4..f2a4d7b10 100644
--- a/app/templates/views/organisations/organisation/users/index.html
+++ b/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">
-        {{ textbox(
-          form.search,
-          width='1-1'
-        ) }}
-      </div>
+      {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
     </div>
   {% endif %}
 
diff --git a/app/templates/views/pricing.html b/app/templates/views/pricing.html
index 20d612d93..7171b15fb 100644
--- a/app/templates/views/pricing.html
+++ b/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">
-        {{ textbox(
-          search_form.search,
-          width='1-1',
-          label='Search by country name or code'
-        ) }}
-      </div>
+      {{ live_search(target_selector='#international-pricing .table-row', show=True, form=search_form, label='Search by country name or code') }}
 
       <div id="international-pricing" class="bottom-gutter-3-2">
         {% call mapping_table(
diff --git a/app/templates/views/templates/_search-box.html b/app/templates/views/templates/_search-box.html
deleted file mode 100644
index d150ebebe..000000000
--- a/app/templates/views/templates/_search-box.html
+++ /dev/null
@@ -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 %}
\ No newline at end of file
diff --git a/app/templates/views/templates/choose-reply.html b/app/templates/views/templates/choose-reply.html
index 07706038a..d95b06e13 100644
--- a/app/templates/views/templates/choose-reply.html
+++ b/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 %}
diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html
index 74f1c989e..361dcb638 100644
--- a/app/templates/views/templates/choose.html
+++ b/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 %}