From 9a248352e9d6b4a2800f65f49ca76691afab603d Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Wed, 4 Jul 2018 17:11:35 +0200
Subject: UI: improve criteria search management

---
 ishtar_common/static/js/ishtar.js                  | 30 ++++++++++++++++-----
 .../templates/blocks/bs_form_snippet.html          | 31 ++++++++++++++++++----
 2 files changed, 50 insertions(+), 11 deletions(-)

(limited to 'ishtar_common')

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 84ce160d3..279d43b0e 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -188,10 +188,12 @@ function display_info(msg){
         }, 5000);
 }
 
-function add_message(message, message_type){
+function add_message(message, message_type, target, clear){
     if (!message_type) message_type = 'info';
+    if (!target) target = "#message_list";
 
-    var html = $("#message_list").html();
+    var html = "";
+    if (!clear) html = $(target).html();
     html += '<div class="alert alert-' + message_type + ' alert-dismissible fade show"';
     html += '   role="alert">';
     html += message;
@@ -200,7 +202,7 @@ function add_message(message, message_type){
     html += '         <span aria-hidden="true">&times;</span>';
     html += '     </button>';
     html += ' </div>';
-    $("#message_list").html(html);
+    $(target).html(html);
 }
 
 function load_opened_shortcut_menu(){
@@ -532,10 +534,19 @@ function get_label_from_input(input){
     return input.parent().attr('data-alt-name');
 }
 
+function clear_search_field(){
+    $("#id_search_vector").val("");
+    add_message("-", 'info', "#advanced-search-info", true);
+}
 
 function update_search_field(){
-    var query = $("#id_search_vector").val();
-    if (!query) query = "";
+    var base_query = $("#id_search_vector").val();
+    if (base_query){
+        base_query += " ";
+    } else {
+        base_query += "";
+    }
+    var query = "";
     var inputs = $('#wizard-form input').map(
         function(){
             var v = "";
@@ -577,7 +588,13 @@ function update_search_field(){
         }
     );
     document.getElementById('wizard-form').reset();
-    value = $("#id_search_vector").val(query);
+    base_query += query
+    $("#id_search_vector").val(base_query);
+    if (base_query){
+        add_message(base_query, 'info', "#advanced-search-info", true);
+    } else {
+        add_message("-", 'info', "#advanced-search-info", true);
+    }
 }
 
 var sheet_list = new Array();
@@ -612,6 +629,7 @@ function register_advanced_search(){
         }
     );
     $(".advanced-search-valid").click(update_search_field);
+    $(".advanced-search-clear").click(clear_search_field);
 }
 
 
diff --git a/ishtar_common/templates/blocks/bs_form_snippet.html b/ishtar_common/templates/blocks/bs_form_snippet.html
index 820ef8c99..7bdac3bf3 100644
--- a/ishtar_common/templates/blocks/bs_form_snippet.html
+++ b/ishtar_common/templates/blocks/bs_form_snippet.html
@@ -50,6 +50,21 @@
                 </button>
             </div>
             <div class="modal-body form-row">
+                <div class="form-group col-12" id="advanced-search-info">
+                </div>
+                <div class="form-group col-12">
+                    <p class="text-center">
+                        <button type="button"
+                                class="btn btn-primary advanced-search-valid">
+                            {% trans "Add" %}</button>
+                        <button type="button"
+                                class="btn btn-secondary advanced-search-clear">
+                            {% trans 'Clear' %}</button>
+                        <button type="button" class="btn btn-secondary"
+                                data-dismiss="modal">{% trans 'Close' %}</button>
+                    </p>
+                </div>
+            <hr>
 {% endif %}
 {% if field.name in form.HEADERS %}
 {% if forloop.counter0 %}
@@ -76,11 +91,17 @@
 
 {% if search and forloop.counter0 >= 1 %}
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary"
-                        data-dismiss="modal">{% trans 'Close' %}</button>
-                <button type="button" class="btn btn-primary advanced-search-valid"
-                        data-dismiss="modal">{% trans "Add" %}</button>
+            <div class="form-group col-12">
+                <p class="text-center">
+                    <button type="button"
+                            class="btn btn-primary advanced-search-valid">
+                        {% trans "Add" %}</button>
+                    <button type="button"
+                            class="btn btn-secondary advanced-search-clear">
+                        {% trans 'Clear' %}</button>
+                    <button type="button" class="btn btn-secondary"
+                            data-dismiss="modal">{% trans 'Close' %}</button>
+                </p>
             </div>
         </div>
     </div>
-- 
cgit v1.2.3