From 87de4ad945573b1da3aa79e2c9bf4830133e49eb Mon Sep 17 00:00:00 2001
From: Magdalena Turska <tuurma@gmail.com>
Date: Fri, 24 Nov 2017 18:33:17 +0100
Subject: [PATCH] refactor: modularize filter checklists; affects #284, #292

---
 modules/search.xqm                        | 82 +++++++----------------
 pages/search/_filter-administrations.html |  8 +--
 pages/search/_filter-sections.html        | 10 +--
 pages/search/_search-bar.html             |  4 +-
 pages/search/search-bar-include.html      | 22 ++++++
 pages/search/search-result.html           | 28 ++++----
 6 files changed, 70 insertions(+), 84 deletions(-)
 create mode 100644 pages/search/search-bar-include.html

diff --git a/modules/search.xqm b/modules/search.xqm
index 87283cfc7..db62167f9 100644
--- a/modules/search.xqm
+++ b/modules/search.xqm
@@ -143,21 +143,13 @@ declare function search:load-sections($node, $model) {
         $html
 };
 
-(: TODO: Replace this "old" function in templates with modularized functions and fix the markup accordingly:
-<label> and <input> must not be nested! :)
 declare
     %templates:wrap
-function search:section-checkbox-value-attribute-and-title($node, $model, $within as xs:string*) {
-    let $section-id := $model?section/id
-    let $section-label := $model?section/label
+function search:search-filters($node as node(), $model as map(*), $within as xs:string*, $administration as xs:string*) {
+(:  more options could be added to $filters  :)
+    let $filters := map {"within": $within, "administration": $administration}
     return
-        (
-            attribute value { $section-id },
-            if (exists($within) and string-join($within) != "" and $section-id = $within) then
-                attribute checked { "checked" }
-            else (),
-            <span class="c-indicator">{ $section-label/string() }</span>
-        )
+        map:new(($model, map {'filters': $filters}))
 };
 
 (:~
@@ -166,12 +158,13 @@ function search:section-checkbox-value-attribute-and-title($node, $model, $withi
 ~:)
 declare
     %templates:wrap
-function search:section-input-attributes($node, $model) {
-    let $section-id := $model?section/id
+function search:section-input-attributes($node as node(), $model as map(*), $section as xs:string, $filter as xs:string) {
+    let $section-id := $model($section)/id
     return
         (
             attribute value { $section-id },
-            attribute id { $section-id }
+            attribute id { $section-id },
+            if(search:section-checked($node, $model, $section, $filter)='checked') then attribute checked {''} else ()
         )
 };
 
@@ -181,11 +174,22 @@ function search:section-input-attributes($node, $model) {
 ~:)
 declare
     %templates:wrap
-function search:section-label($node, $model) {
-    let $section-id := $model?section/id
+function search:section-label($node as node(), $model as map(*), $section as xs:string) {
+    let $section-id := $model($section)/id
     return
         attribute for { $section-id },
-        search:section-label-string($node, $model)
+        templates:process($node/*, $model)
+};
+
+
+declare
+    %templates:wrap
+function search:section-checked($node as node(), $model as map(*), $section as xs:string, $filter as xs:string) {
+    let $c:=console:log('sec fil ' || $section || $filter)
+    let $within := $model?filters($filter)
+    let $c:=console:log($within)
+    let $section-id := $model($section)/id
+    return if ($section-id = $within) then 'checked' else $within
 };
 
 (:~
@@ -194,8 +198,8 @@ function search:section-label($node, $model) {
 ~:)
 declare
     %templates:replace
-function search:section-label-string($node, $model) {
-    $model?section/label/string()
+function search:section-label-string($node as node(), $model as map(*), $section as xs:string) {
+    $model($section)/label/string()
 };
 
 declare function search:load-volumes-within($node, $model, $volume-id as xs:string*) {
@@ -241,44 +245,6 @@ function search:select-volumes-link($node, $model, $q as xs:string?, $volume-id
 
 (: ================= Administrations ================= :)
 
-(:~
- : Generates HTML attributes "value" and "id"
- : @return  HTML attributes
-~:)
-declare
-%templates:wrap
-function search:administration-input-attributes($node, $model) {
-    let $administration-id := $model?administration/id
-    return
-        (
-            attribute value { $administration-id },
-            attribute id { $administration-id }
-        )
-};
-
-(:~
- : Generates an HTML <label> attribute "for" and adds a label text
- : @return  HTML
-~:)
-declare
-%templates:wrap
-function search:administration-label($node, $model) {
-    let $administration-id := $model?administration/id
-    return
-        attribute for { $administration-id },
-        search:administration-label-string($node, $model)
-};
-
-(:~
- : The string containing the administration title
- : @return  String
-~:)
-declare
-%templates:replace
-function search:administration-label-string($node, $model) {
-    $model?administration/label/string()
-};
-
 (:~
  : Load the administrations
  :)
diff --git a/pages/search/_filter-administrations.html b/pages/search/_filter-administrations.html
index dec6c4bae..f1678c0f6 100644
--- a/pages/search/_filter-administrations.html
+++ b/pages/search/_filter-administrations.html
@@ -4,11 +4,11 @@
         <legend class="sr-only">Select Administrations</legend>
         <ul class="hsg-search-inputs-vertical">
             <li data-template="templates:each" data-template-from="administrations" data-template-to="administration">
-                <input class="hsg-search-input" type="checkbox" name="administration" data-template="search:administration-input-attributes"/>
-                <label class="hsg-search-input-label" data-template="search:administration-label">
-                    <span data-template="search:administration-label-string"/>
+                <input class="hsg-search-input" type="checkbox" name="administration" data-template="search:section-input-attributes" data-template-section="administration" data-template-filter="administration"/>
+                <label class="hsg-search-input-label" data-template="search:section-label" data-template-section="administration">
+                    <span data-template="search:section-label-string" data-template-section="administration"/>
                 </label>
             </li>
         </ul>
     </fieldset>
-</form>
+</form>
\ No newline at end of file
diff --git a/pages/search/_filter-sections.html b/pages/search/_filter-sections.html
index ae3faebbb..f7fbbcb8a 100644
--- a/pages/search/_filter-sections.html
+++ b/pages/search/_filter-sections.html
@@ -4,17 +4,17 @@
         <legend class="sr-only">Select sections</legend>
             <ul class="hsg-search-inputs-vertical">
                 <li>
-                    <input id="entire-site-input" class="hsg-search-input global" type="checkbox" name="within" value="entire_site" checked="checked"/>
+                    <input id="entire-site-input" class="hsg-search-input global" type="checkbox" name="within" value="entire_site"/>
                     <label id="entire-site-label" for="entire-site-input" class="hsg-search-input-label">Entire Office of The Historian Website</label>
                 </li>
                 <ul class="filter-subsections">
                     <li data-template="templates:each" data-template-from="sections" data-template-to="section">
-                        <input class="hsg-search-input section" type="checkbox" name="within" data-template="search:section-input-attributes"/>
-                        <label class="hsg-search-input-label" data-template="search:section-label">
-                            <span data-template="search:section-label-string"/>
+                        <input class="hsg-search-input section" type="checkbox" name="within" data-template="search:section-input-attributes" data-template-section="section" data-template-filter="within"/>
+                        <label class="hsg-search-input-label" data-template="search:section-label" data-template-section="section">
+                            <span data-template="search:section-label-string" data-template-section="section"/>
                         </label>
                     </li>
                 </ul>
             </ul>
     </fieldset>
-</form>
+</form>
\ No newline at end of file
diff --git a/pages/search/_search-bar.html b/pages/search/_search-bar.html
index 424925576..3f5d11909 100644
--- a/pages/search/_search-bar.html
+++ b/pages/search/_search-bar.html
@@ -12,9 +12,9 @@ <h1>Search</h1>
                 <input type="search" name="q" class="form-control" id="q" data-template="templates:form-control"/>
                 <button type="submit" class="hsg-link-button search-button btn">
                     <span class="hsg-search-submit-text">Search</span>
-                    <i class="hsg-search-icon"></i>
+                    <i class="hsg-search-icon"/>
                 </button>
             </p>
         </form>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/pages/search/search-bar-include.html b/pages/search/search-bar-include.html
new file mode 100644
index 000000000..68f03f9f0
--- /dev/null
+++ b/pages/search/search-bar-include.html
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<div class="row">
+    <div class="hsg-width-one-whole" data-template="app:fix-links">
+        <h1>Search</h1>
+        <section class="hsg-search-section" role="search">
+            <p>Read these <a href="$app/search/tips">tips and caveats</a> to understand the
+                limitations of this search engine and how to make the most of its scope,
+                phrase, boolean, wildcard, and proximity options.
+            </p>
+            <form method="get" action="$app/search" class="main-form" id="searchForm">
+                <p class="form-group searchbox">
+                    <label for="q" class="sr-only">Search</label>
+                    <input type="search" name="q" class="form-control" id="q" data-template="templates:form-control"/>
+                    <button type="submit" class="hsg-link-button search-button btn">
+                        <span class="hsg-search-submit-text">Search</span>
+                        <i class="hsg-search-icon"/>
+                    </button>
+                </p>
+            </form>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pages/search/search-result.html b/pages/search/search-result.html
index 2cde59b71..617e747b5 100644
--- a/pages/search/search-result.html
+++ b/pages/search/search-result.html
@@ -5,8 +5,12 @@
     <div class="row">
         <div class="hsg-breadcrumb-wrapper">
             <ol class="breadcrumb" data-template="app:fix-links">
-                <li><a href="$app">Home</a></li>
-                <li><a href="$app/search">Search</a></li>
+                <li>
+                    <a href="$app">Home</a>
+                </li>
+                <li>
+                    <a href="$app/search">Search</a>
+                </li>
             </ol>
         </div>
     </div>
@@ -15,7 +19,7 @@
 
     <div data-template="templates:include" data-template-path="pages/search/_filter-querystring.html"/>
 
-    <div class="row">
+    <div class="row" data-template="search:search-filters">
         <!-- filter sidebar -->
         <aside class="hsg-width-one-third">
             <h2>Filter by</h2>
@@ -39,11 +43,10 @@ <h3 class="hsg-sidebar-title">Administrations</h3>
 
                 <!-- filter volumes -->
                 <div>
-                    <fieldset class="filter-sidebar" >
+                    <fieldset class="filter-sidebar">
                         <legend class="hsg-sidebar-title">Volumes</legend>
                         <div class="hsg-search-inputs-vertical">
-                            <label class="hsg-search-input-label" data-template="templates:each"
-                                   data-template-from="volume" data-template-to="volumes">
+                            <label class="hsg-search-input-label" data-template="templates:each" data-template-from="volume" data-template-to="volumes">
                                 <input type="checkbox" name="volumes"/>
                             </label>
                         </div>
@@ -70,12 +73,9 @@ <h2>Results for keyword search
                             </h2>
                             <p data-template="search:result-count-summary"/>
                             <nav>
-                                <ul class="pagination" data-template="search:paginate"
-                                    data-template-per-page="10" data-template-max-pages="10"
-                                    data-template-min-hits="1"/>
+                                <ul class="pagination" data-template="search:paginate" data-template-per-page="10" data-template-max-pages="10" data-template-min-hits="1"/>
                             </nav>
-                            <div class="hsg-search-result" data-template="templates:each"
-                                data-template-from="results" data-template-to="result">
+                            <div class="hsg-search-result" data-template="templates:each" data-template-from="results" data-template-to="result">
                                 <h3 class="hsg-search-result-heading">
                                     <span data-template="search:result-heading"/>
                                 </h3>
@@ -87,9 +87,7 @@ <h3 class="hsg-search-result-heading">
                                 </p>
                             </div>
                             <nav>
-                                <ul class="pagination" data-template="search:paginate"
-                                    data-template-per-page="10" data-template-max-pages="10"
-                                    data-template-min-hits="1"/>
+                                <ul class="pagination" data-template="search:paginate" data-template-per-page="10" data-template-max-pages="10" data-template-min-hits="1"/>
                             </nav>
                         </div>
                     </div>
@@ -100,4 +98,4 @@ <h3 class="hsg-search-result-heading">
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file