From bcadb6adc502f8c2aeacd4fae8aca34fc748f354 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Mon, 22 Jan 2018 12:58:56 +0100
Subject: Put advanced search inside a modal - get a text summary of advanced
 search

---
 ishtar_common/static/js/ishtar.js                  | 67 ++++++++++++++++++++++
 ishtar_common/static/media/styles.css              |  1 +
 ishtar_common/templates/base.html                  |  2 +
 .../templates/blocks/bs_form_snippet.html          | 38 +++++++++---
 4 files changed, 101 insertions(+), 7 deletions(-)

(limited to 'ishtar_common')

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 00a9b66a0..0f8b0cba2 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -417,3 +417,70 @@ function activate_own_search(){
     });
     return false;
 }
+
+function get_label_from_input(input){
+    if (input.parent().filter('.input-group').length){
+        input = input.parent();
+    }
+    return "<strong>" + input.prev().html() + "</strong>";
+}
+
+
+function update_search_resume(){
+    var summary = "";
+    var inputs = $('#advanced-search-form input').map(
+        function(){
+            var v = "";
+            var item_for_label = $(this);
+            if ($(this).filter(":checkbox:checked").length){
+                var check = $(this).val();
+                if (check == "on"){
+                    v = YES;
+                } else {
+                    v = $(this).parent().first().contents().filter(function() {
+                        return this.nodeType == 3;
+                    }).text();
+                    item_for_label = $(this).parent().parent().parent();
+                }
+            } else if ($(this).filter(":text").length){
+                v = $(this).val();
+            } else if ($(this).filter('input[type="number"]').length){
+                v = $(this).val();
+            }
+            if (v == "") return;
+            if (summary) summary += " ; ";
+            summary += get_label_from_input(item_for_label) + " " + v;
+        }
+    ).get();
+    var selects = $('#advanced-search-form select').each(
+        function(){
+            $(this).find('option').not(':first').filter(':selected').map(
+                function(){
+                    var item_for_label = $(this).parent();
+                    if(item_for_label.filter('optgroup').length){
+                        item_for_label = item_for_label.parent();
+                    }
+                    if (summary) summary += " ; ";
+                    summary += get_label_from_input(item_for_label) + " " + $(this).text();
+            });
+        }
+    );
+
+    if (summary != ""){
+        $('#advanced-search-resume-content').html(summary);
+        $('#advanced-search-resume').show();
+    } else {
+        $('#advanced-search-resume').hide();
+    }
+}
+
+
+function register_advanced_search(){
+    $(".advanced-search-reset").click(
+        function(){
+            document.getElementById('advanced-search-form').reset();
+            $('#advanced-search-resume').hide();
+        }
+    );
+    $(".advanced-search-valid").click(update_search_resume);
+}
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 0526ee49e..7a1534ff5 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -1,3 +1,4 @@
+#advanced-search-resume,
 #language-form{
     display: none;
 }
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index fa62acdd2..d5d138bd2 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -32,6 +32,8 @@
     var activate_own_search_url = '{% url "activate-own-search" %}';
     var activate_all_search_msg = "{% trans 'Searches in the shortcut menu deal with all items.' %}";
     var activate_own_search_msg = "{% trans 'Searches in the shortcut menu deal with only your items.' %}";
+    var YES = "{% trans 'yes' %}";
+    var NO = "{% trans 'no' %}";
     </script>
     {% endcompress %}
     {% compress css %}
diff --git a/ishtar_common/templates/blocks/bs_form_snippet.html b/ishtar_common/templates/blocks/bs_form_snippet.html
index c636465f3..c9716794c 100644
--- a/ishtar_common/templates/blocks/bs_form_snippet.html
+++ b/ishtar_common/templates/blocks/bs_form_snippet.html
@@ -36,9 +36,10 @@
     </div>
     <div class="form-group col-lg">
         <p class="text-right">
-            <a class="btn btn-secondary btn-sm" data-toggle="collapse" href="#tail-form"
-               aria-expanded="false" aria-controls="tail-form">
-                {% trans "Advanced search" %}</a>
+            <button class="btn btn-secondary btn-sm" data-toggle="modal"
+               data-target="#modal-advanced-search">
+                {% trans "Advanced search" %} <i class="fa fa-cogs" aria-hidden="true"></i>
+            </button>
         </p>
     </div>
 
@@ -50,11 +51,21 @@
     </div>
     {% endif %}
 </div>
+<div class="alert alert-info" role="alert" id="advanced-search-resume">
+    <strong><i class="fa fa-cogs" aria-hidden="true"></i>{% trans ":" %}&nbsp;</strong>
+    <span id="advanced-search-resume-content"></span>
+</div>
 {% else %}
 {% if search and forloop.counter0 == 1 %}
-<div class="collapse" id="tail-form">
-    <div class="card card-body">
-        <div class="form-row">
+<div class="modal" id="modal-advanced-search" tabindex="-1" role="dialog"
+     data-backdrop="static" data-keyboard="false" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5>{% trans "Advanced search" %}</h5>
+            </div>
+            <form id="advanced-search-form">
+            <div class="modal-body form-row">
 {% endif %}
 
 {% if not search and forloop.counter0|divisibleby:2 or search and forloop.counter1|divisibleby:2 %}
@@ -65,10 +76,23 @@
       {% include "blocks/bs_field_snippet.html" %}
 {% if forloop.last %}
 {% if search and forloop.counter0 >= 1 %}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary advanced-search-reset"
+                        data-dismiss="modal">{% trans 'Reset' %}</button>
+                <button type="button" class="btn btn-primary advanced-search-valid"
+                        data-dismiss="modal">{% trans "Validate" %}</button>
+            </div>
+            </form>
+        </div>
     </div>
-  </div>
 {% endif %}
 </div>
 {% endif %}
 {% endif %}
 {% endfor %}
+
+{% if search %}
+<script type="text/javascript">
+$(register_advanced_search);</script>
+{% endif %}
-- 
cgit v1.2.3