[erp5_web_renderjs_ui] Rewrite page_relation_search

No need to keep many references on the gadget itself.

Javascript can calculate the length of an array...

Reduce not needed DOM modification.

Stop writing in the DOM when changing the template value.
This keeps the focus on the select.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_relation_search_js.js

-/*jslint nomen: true, indent: 2, maxerr: 3 */
+/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80 */
 /*global window, rJS, RSVP, Handlebars*/
 (function (window, rJS, RSVP, Handlebars) {
   "use strict";
@@ -26,27 +26,10 @@
 
 
   gadget_klass
-    /////////////////////////////////////////////////////////////////
-    // ready
-    /////////////////////////////////////////////////////////////////
-    // Init local properties
-    .ready(function (g) {
-      g.props = {};
-    })
-
-    // Assign the element to a variable
-    .ready(function (g) {
-      return g.getElement()
-        .push(function (element) {
-          g.props.element = element;
-        });
-    })
-
     /////////////////////////////////////////////////////////////////
     // Acquired methods
     /////////////////////////////////////////////////////////////////
     .declareAcquiredMethod("updateHeader", "updateHeader")
-    .declareAcquiredMethod("getUrlParameter", "getUrlParameter")
     .declareAcquiredMethod("getUrlFor", "getUrlFor")
     .declareAcquiredMethod("redirect", "redirect")
     .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
@@ -56,68 +39,77 @@
     // declared methods
     /////////////////////////////////////////////////////////////////
     .allowPublicAcquisition('updateHeader', function (param_list) {
-      return this.updateHeader({
-        page_title: param_list[0].page_title,
-        back_url: this.props.back_url,
-        filter_action: true
-      });
+      var gadget = this;
+      return gadget.getUrlFor({command: 'history_previous'})
+        .push(function (back_url) {
+          return gadget.updateHeader({
+            page_title: param_list[0].page_title,
+            back_url: back_url,
+            filter_action: true
+          });
+        });
     })
     .declareMethod("render", function (options) {
       var gadget = this,
         select_template = options.select_template || "";
-      return gadget.getUrlFor({command: 'history_previous'})
-        .push(function (back_url) {
-          gadget.props.back_url = back_url;
+      return new RSVP.Queue()
+        .push(function () {
           return RSVP.all([
             gadget.jio_getAttachment(options.url, options.view),
             gadget.getDeclaredGadget('form_list')
           ]);
         })
-        .push(function (results) {
-          var form_gadget = results[1],
-            listbox_render,
-            field = results[0]._embedded._view[options.back_field.slice("field_".length)],
-            html;
+        .push(function (result_list) {
+          var field = result_list[0]._embedded._view[
+            options.back_field.slice("field_".length)
+          ],
+            listbox = field.listbox,
+            listbox_key_list = Object.keys(field.listbox);
 
-          gadget.props.listbox = field.listbox;
-          gadget.props.listbox_key = Object.keys(field.listbox);
-          gadget.props.field_title = field.title;
-
-          if (field.proxy_listbox_ids_len) {
+          if (listbox_key_list.length > 1) {
             if (select_template === "") {
-              select_template = gadget.props.listbox_key[0];
+              select_template = listbox_key_list[0];
             }
-            listbox_render = gadget.props.listbox[select_template];
-            html = search_template({
-              options: gadget.props.listbox_key,
-              select_template: select_template
-            });
-            gadget.props.element.querySelector(".left").innerHTML = html;
           } else {
-            listbox_render = gadget.props.listbox[gadget.props.listbox_key[0]];
+            select_template = listbox_key_list[0];
           }
-          listbox_render.command = "history_previous";
-          listbox_render.line_icon = true;
-          return form_gadget.render({
-            erp5_document: {"_embedded": {"_view": {
-              "listbox": listbox_render
-            }},
-              "title": results[0].title,
-              "_links": results[0]._links
-              },
-            form_definition: {
-              group_list: [[
-                "bottom",
-                [["listbox"]]
-              ]]
-            }
-          });
-        })
-        .push(function () {
-          return gadget.translateHtml(gadget.props.element.querySelector(".left").innerHTML);
-        })
+          listbox[select_template].command = "history_previous";
+          listbox[select_template].line_icon = true;
+
+          return RSVP.all([
+            gadget.changeState({options: JSON.stringify(listbox_key_list),
+                                select_template: select_template}),
+            result_list[1].render({
+              erp5_document: {"_embedded": {"_view": {
+                "listbox": listbox[select_template]
+              }},
+                "title": result_list[0].title,
+                "_links": result_list[0]._links
+                },
+              form_definition: {
+                group_list: [[
+                  "bottom",
+                  [["listbox"]]
+                ]]
+              }
+            })
+          ]);
+        });
+
+    })
+    .onStateChange(function () {
+      var gadget = this,
+        option_list = JSON.parse(gadget.state.options);
+      if (option_list.length <= 1) {
+        gadget.element.querySelector(".left").innerHTML = '';
+        return;
+      }
+      return gadget.translateHtml(search_template({
+        options: option_list,
+        select_template: gadget.state.select_template
+      }))
         .push(function (html) {
-          gadget.props.element.querySelector(".left").innerHTML = html;
+          gadget.element.querySelector(".left").innerHTML = html;
         });
     })
     .declareMethod("triggerSubmit", function () {
@@ -132,6 +124,7 @@
         value;
       if (target.nodeName === 'SELECT') {
         value = target.options[target.selectedIndex].value;
+        this.state.select_template = value;
         return this.redirect({
           command: 'change',
           options: {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_relation_search_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>964.60339.56148.38212</string> </value>
+                <value> <string>971.411.63561.65467</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1516373132.37</float>
+                        <float>1539784088.89</float>
                         <string>UTC</string>
                       </tuple>
                     </state>