[erp5_web_renderjs_ui] Search editor: support form submit with enter

Reduce the number of event listeners.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -527,6 +527,7 @@ div[data-gadget-scope='editor_panel'] {
 div[data-gadget-scope='editor_panel'] div[data-role="header"] {
   display: flex;
   justify-content: space-between;
+  flex-direction: row-reverse;
 }
 div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 {
   text-align: left;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>955.29626.47611.24814</string> </value>
+                <value> <string>955.33777.42224.15633</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1480081058.6</float>
+                        <float>1480337940.73</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_html.html

@@ -26,7 +26,6 @@
     <!-- custom script -->
     <script src="gadget_erp5_search_editor.js"></script>
 
-  
     <script id="options-template" type="text/x-handlebars-template">
       <select data-iconpos="left">
         {{#each option}}
@@ -35,12 +34,10 @@
       </select>
     </script>
 
-   
-  
     <script id="filter-item-template" type="text/x-handlebars-template">
-      <button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
+      <button class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
       <div class="filter_item {{class_value}}" >
-        <select data-iconpos="left">
+        <select class="column" data-iconpos="left">
           {{#each option}}
             {{#equal value selected_option}}
               <option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
@@ -62,31 +59,21 @@
           <input type="{{input_type}}" value="{{input_value}}"></input>
         </div>
       </div>
-    
     </script>
 
-  
-  
-  
-  
-  
     <script id="filter-template" type="text/x-handlebars-template">
       <div class="ui-panel-inner">
         <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
-            <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
+          <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
             <div class="ui-controlgroup-controls">
-              <form class="delete">
-                <button data-rel="close" type="submit" data-i18n="Close" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button>
-              </form>
+              <button data-i18n="submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
             </div>
           </div>
 
           <h1 class="ui-title" role="heading" data-i18n="Filter Editor" aria-level="1">Filter Editor</h1>
-            <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
+          <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
             <div class="ui-controlgroup-controls">
-                <form class="submit">
-                  <button data-rel="save" data-i18n="submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
-                </form>
+              <button data-i18n="Close" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button>
             </div>
           </div>
         </div>
@@ -102,14 +89,11 @@
 
           <div class="filter_item_container">
           </div>
-            <form class="plus">
-             <button type="submit" class="plus ui-btn-c ui-override-theme ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all">Add Criteria</button>
-           </form>
+          <button class="plus ui-btn-c ui-override-theme ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all">Add Criteria</button>
         </section>
       </div>
     </script>
 
-    
   </head>
   <body>
     <form class="filter_editor">

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.7210.40753.48042</string> </value>
+                <value> <string>955.38108.27853.11810</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474905528.91</float>
+                        <float>1480342657.32</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_js.js

 /*jslint indent: 2, maxerr: 3, maxlen: 100, nomen: true */
-/*global window, document, rJS, RSVP, Handlebars, loopEventListener,
+/*global window, document, rJS, RSVP, Handlebars,
   QueryFactory, SimpleQuery, ComplexQuery, Query, console*/
-(function (window, document, rJS, RSVP, Handlebars, loopEventListener,
+(function (window, document, rJS, RSVP, Handlebars,
   QueryFactory, SimpleQuery, ComplexQuery, Query, console) {
   "use strict";
   var gadget_klass = rJS(window),
-    filter_item_source = gadget_klass.__template_element
+    template_element = gadget_klass.__template_element,
+
+    filter_item_template = Handlebars.compile(template_element
                          .getElementById("filter-item-template")
-                         .innerHTML,
-    filter_item_template = Handlebars.compile(filter_item_source),
-    filter_source = gadget_klass.__template_element
+                         .innerHTML),
+    filter_template = Handlebars.compile(template_element
                          .getElementById("filter-template")
-                         .innerHTML,
-    filter_template = Handlebars.compile(filter_source),
-
-    options_source = gadget_klass.__template_element
+                         .innerHTML),
+    options_template = Handlebars.compile(template_element
                          .getElementById("options-template")
-                         .innerHTML,
-    options_template = Handlebars.compile(options_source);
+                         .innerHTML),
+    NUMERIC = [
+      ["Equals To", "="], ["Greater Than", ">"],
+      ["Less Than", "<"], ["Not Greater Than", "<="],
+      ["Not Less Than", ">="]
+    ],
+    OTHER = [
+      ["Exact Match", "exacte_match"],
+      ["keyword", "keyword"]
+    ],
+    DEFAULT = [["Contain", "Contain"]];
 
-  Handlebars.registerHelper('equal', function (left_value,
-    right_value, options) {
+  Handlebars.registerHelper('equal', function (left_value, right_value, options) {
     if (arguments.length < 3) {
       throw new Error("Handlebars Helper equal needs 2 parameters");
     }
@@ -30,9 +37,9 @@
     return options.fn(this);
   });
 
-  //XXXXX
-  //define input's type according to column's value
-  //the way to determiner is not generic
+  // XXX
+  // define input's type according to column's value
+  // the way to determiner is not generic
   function isNumericComparison(value) {
     return value.indexOf('date') !== -1 ||
       value.indexOf('quantity') !== -1 ||
@@ -45,27 +52,24 @@
       i;
     if (value !== "searchable_text") {
       if (isNumericComparison(value)) {
-        tmp = gadget.props.numeric;
+        tmp = NUMERIC;
       } else {
-        tmp = gadget.props.other;
+        tmp = OTHER;
       }
     } else {
-      tmp = gadget.props.default;
+      tmp = DEFAULT;
     }
     for (i = 0; i < tmp.length; i += 1) {
       option.push({
-        "text": tmp[i][0],
-        "value": tmp[i][1]
+        text: tmp[i][0],
+        value: tmp[i][1]
       });
     }
     return gadget.translateHtml(options_template({option: option}));
   }
 
-
-
-
   function createFilterItemTemplate(gadget, class_value, filter_item) {
-    var column_list = gadget.props.search_column_list,
+    var column_list = gadget.state.search_column_list,
       option = [],
       tmp,
       operator_option = [],
@@ -74,33 +78,33 @@
 
     if (filter_item) {
       if (isNumericComparison(filter_item.key)) {
-        tmp = gadget.props.numeric;
+        tmp = NUMERIC;
         if (filter_item.key.indexOf("date") !== -1) {
           input_type = "date";
         } else {
           input_type = "number";
         }
       } else {
-        tmp = gadget.props.other;
+        tmp = OTHER;
       }
     } else {
-      tmp = gadget.props.default;
+      tmp = DEFAULT;
       filter_item = {};
     }
 
     for (i = 0; i < tmp.length; i += 1) {
       operator_option.push({
-        "text": tmp[i][0],
-        "value": tmp[i][1],
-        "selected_option": filter_item.operator
+        text: tmp[i][0],
+        value: tmp[i][1],
+        selected_option: filter_item.operator
       });
     }
 
     for (i = 0; i < column_list.length; i += 1) {
       option.push({
-        "text": column_list[i][1],
-        "value": column_list[i][0],
-        "selected_option": filter_item.key || "searchable_text"
+        text: column_list[i][1],
+        value: column_list[i][0],
+        selected_option: filter_item.key || "searchable_text"
       });
     }
     return gadget.translateHtml(filter_item_template({
@@ -112,115 +116,43 @@
     }));
   }
 
-
-  function listenToSelect(gadget, class_value) {
-    var list = [],
-      i,
-      filter_item_list =
-        gadget.props.element.querySelectorAll("." + class_value);
-    function createFunction(i) {
-      var select_list = filter_item_list[i].querySelectorAll("select"),
-        input = filter_item_list[i].querySelector("input");
-      return loopEventListener(
-        select_list[0],
-        "change",
-        false,
-        function (event) {
-          return new RSVP.Queue()
-            .push(function () {
-              return createOptionsTemplate(gadget, event.target.value);
-            })
-            .push(function (innerHTML) {
-              select_list[1].innerHTML = innerHTML;
-              if (isNumericComparison(event.target.value)) {
-                if (event.target.value.indexOf("date") !== -1) {
-                  input.setAttribute("type", "date");
-                } else {
-                  input.setAttribute("type", "number");
-                }
-              } else {
-                input.setAttribute("type", "text");
-              }
-            });
-        }
-      );
-    }
-    for (i = 0; i < filter_item_list.length; i += 1) {
-      list.push(createFunction(i));
-    }
-    return RSVP.all(list);
-  }
-
-
-
-
-  rJS(window)
-    /////////////////////////////////////////////////////////////////
-    // ready
-    /////////////////////////////////////////////////////////////////
-    // Init local properties
-    .ready(function (g) {
-      g.props = {};
-    })
-    .ready(function (g) {
-      return g.getElement()
-        .push(function (element) {
-          g.props.element = element;
-          g.props.numeric = [["Equals To", "="], ["Greater Than", ">"],
-            ["Less Than", "<"], ["Not Greater Than", "<="],
-            ["Not Less Than", ">="]];
-          g.props.other = [["Exact Match", "exacte_match"],
-            ["keyword", "keyword"]];
-          g.props.default = [["Contain", "Contain"]];
-        });
-    })
-
-
-
+  gadget_klass
     //////////////////////////////////////////////
     // acquired method
     //////////////////////////////////////////////
     .declareAcquiredMethod("translateHtml", "translateHtml")
     .declareAcquiredMethod("redirect", "redirect")
     .declareAcquiredMethod("trigger", "trigger")
+
     //////////////////////////////////////////////
     // initialize the gadget content
     //////////////////////////////////////////////
-    .declareMethod('render', function (options) {
-      var gadget = this;
-      gadget.props.search_column_list = options.search_column_list;
-      gadget.props.begin_from = options.begin_from;
-
-      gadget.props.extended_search = options.extended_search;
+    .onStateChange(function () {
+      var gadget = this,
+        container = gadget.element.querySelector(".container"),
+        div = document.createElement("div"),
+        operator_select,
+        filter_item_container,
+        query_list = [],
+        promise_list = [],
+        i;
 
-      return new RSVP.Queue()
-        .push(function () {
-          var tmp = filter_template();
-          return gadget.translateHtml(tmp);
-        })
+      return gadget.translateHtml(filter_template())
         .push(function (translated_html) {
-          var tmp = document.createElement("div");
-          tmp.innerHTML = translated_html;
-          gadget.props.element.querySelector(".container").appendChild(tmp);
-        });
-    })
-    //////////////////////////////////////////////
-    .declareService(function () {
-      var gadget = this,
-        i,
-        list = [],
-        operator_select = gadget.props.element.querySelector("select"),
-        container = gadget.props.element.querySelector(".filter_item_container"),
-        query_list;
-      if (gadget.props.extended_search) {
-        //string to query
+          div.innerHTML = translated_html;
+
+          operator_select = div.querySelector("select");
+          filter_item_container = div.querySelector(".filter_item_container");
+
+          if (gadget.state.extended_search) {
+            // string to query
             try {
-          query_list = QueryFactory.create(gadget.props.extended_search);
+              query_list = QueryFactory.create(gadget.state.extended_search);
             } catch (error) {
-          //XXXX hack to not crash interface
-          //it catch all error, not only search criteria invalid error
+              // XXX hack to not crash interface
+              // it catch all error, not only search criteria invalid error
               console.warn(error);
-          return;
+              return [];
             }
             if (query_list.operator === "OR") {
               operator_select.querySelectorAll("option")[1].selected = "selected";
@@ -228,46 +160,38 @@
 
             query_list = query_list.query_list || [query_list];
             for (i = 0; i < query_list.length; i += 1) {
-          list.push(createFilterItemTemplate(gadget, "auto", query_list[i]));
-        }
-        return RSVP.Queue()
-          .push(function () {
-            return RSVP.all(list);
-          })
-          .push(function (all_result) {
-            var div;
-            for (i = 0; i < all_result.length; i += 1) {
-              div = document.createElement("div");
-              div.innerHTML = all_result[i];
-              container.appendChild(div);
+              promise_list.push(createFilterItemTemplate(gadget, "auto", query_list[i]));
             }
-            return listenToSelect(gadget, "auto");
-          });
           }
+          return RSVP.all(promise_list);
         })
-    .declareService(function () {
-      var gadget = this,
-        container = gadget.props.element.querySelector(".filter_item_container");
-      return loopEventListener(
-        gadget.props.element.querySelector(".filter_editor"),
-        "submit",
-        false,
-        function () {
-          var focused = document.activeElement;
-          if (focused.nodeName === "BUTTON") {
-            container.removeChild(focused.parentElement);
+        .push(function (result_list) {
+          var subdiv;
+          for (i = 0; i < result_list.length; i += 1) {
+            subdiv = document.createElement("div");
+            subdiv.innerHTML = result_list[i];
+            filter_item_container.appendChild(subdiv);
           }
+
+          while (container.firstChild) {
+            container.removeChild(container.firstChild);
           }
-      );
+
+          container.appendChild(div);
+        });
     })
-    .declareService(function () {
-      var gadget = this;
-      return loopEventListener(
-        gadget.props.element.querySelector(".submit"),
-        "submit",
-        false,
-        function () {
+
+    .declareMethod('render', function (options) {
+      return this.changeState({
+        search_column_list: options.search_column_list,
+        begin_from: options.begin_from,
+        extended_search: options.extended_search
+      });
+    })
+
+    .onEvent('submit', function () {
       var i,
+        gadget = this,
         simple_operator,
         query,
         key,
@@ -277,8 +201,8 @@
         select,
         value,
         options = {},
-            filter_item_list = gadget.props.element.querySelectorAll(".filter_item"),
-            operator_select = gadget.props.element.querySelector("select"),
+        filter_item_list = gadget.element.querySelectorAll(".filter_item"),
+        operator_select = gadget.element.querySelector("select"),
         operator = operator_select[operator_select.selectedIndex].value;
       for (i = 0; i < filter_item_list.length; i += 1) {
         select_list = filter_item_list[i].querySelectorAll("select");
@@ -319,49 +243,58 @@
         query = "";
       }
       options.extended_search = query;
-          options[gadget.props.begin_from] = undefined;
-          return gadget.redirect(
-            {
+      options[gadget.state.begin_from] = undefined;
+      return gadget.redirect({
         command: 'store_and_change',
         options : options
-            }
-          );
-        }
-      );
-    })
-    .declareService(function () {
-      var gadget = this,
-        class_value = "add_after";
-      return loopEventListener(
-        gadget.props.element.querySelector(".plus"),
-        "submit",
-        false,
-        function () {
-          return new RSVP.Queue()
-            .push(function () {
-              return createFilterItemTemplate(gadget, class_value);
+      });
+
     })
+
+    .onEvent('click', function (evt) {
+      var gadget = this;
+
+      if (evt.target.classList.contains('close')) {
+        evt.preventDefault();
+        return this.trigger();
+      }
+
+      if (evt.target.classList.contains('plus')) {
+        evt.preventDefault();
+        return createFilterItemTemplate(gadget, 'auto')
           .push(function (template) {
             var tmp = document.createElement("div"),
-                container = gadget.props.element.querySelector(".filter_item_container");
+              container = gadget.element.querySelector(".filter_item_container");
             tmp.innerHTML = template;
             container.appendChild(tmp);
-              return listenToSelect(gadget, class_value);
           });
       }
-      );
-    })
-    .declareService(function () {
+
+      if (evt.target.classList.contains('ui-icon-minus')) {
+        evt.preventDefault();
+        evt.target.parentElement.parentElement.removeChild(evt.target.parentElement);
+      }
+    }, false, false)
+
+    .onEvent('change', function (evt) {
       var gadget = this;
-      return loopEventListener(
-        gadget.props.element.querySelector(".delete"),
-        "submit",
-        false,
-        function () {
-          return gadget.trigger();
+      if (evt.target.classList.contains('column')) {
+        evt.preventDefault();
+        return createOptionsTemplate(gadget, evt.target.value)
+          .push(function (innerHTML) {
+            evt.target.parentElement.querySelectorAll('select')[1].innerHTML = innerHTML;
+            if (isNumericComparison(evt.target.value)) {
+              if (evt.target.value.indexOf("date") !== -1) {
+                evt.target.parentElement.querySelector('input').setAttribute("type", "date");
+              } else {
+                evt.target.parentElement.querySelector('input').setAttribute("type", "number");
+              }
+            } else {
+              evt.target.parentElement.querySelector('input').setAttribute("type", "text");
             }
-      );
           });
+      }
+    }, false, false);
 
-}(window, document, rJS, RSVP, Handlebars, loopEventListener,
+}(window, document, rJS, RSVP, Handlebars,
   QueryFactory, SimpleQuery, ComplexQuery, Query, console));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searcheditor_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.34519.30853.16520</string> </value>
+                <value> <string>955.38135.49149.41489</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468415510.46</float>
+                        <float>1480342558.79</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -633,6 +633,7 @@ div[data-gadget-scope='editor_panel'] {
 
     display: flex;
     justify-content: space-between;
+    flex-direction: row-reverse;
 
     h1 {
       text-align: left;