[erp5_hal_json_style/erp5_web_renderjs_ui] Stop rendering relation field listboxes

Speed up JSON calculation by dropping not needed info for rendering.

Render a listfield to select the relation field listboxes on the 'relation_form' page template.

bt5/erp5_hal_json_style/SkinTemplateItem/portal_skins/erp5_hal_json_style/ERP5Document_getHateoas.py

@@ -703,34 +703,9 @@ def renderField(traversed_document, field, form, value=None, meta_type=None, key
     query = url_template_dict["jio_search_template"] % {
       "query": make_query({"query": sql_catalog.buildQuery(relation_query_kw).asSearchTextExpression(sql_catalog)})
     }
-    title = field.get_value("title")
-    column_list = field.get_value("columns")
-    proxy_listbox_ids = field.get_value("proxy_listbox_ids")
-
-    if len(proxy_listbox_ids):
-      listbox_ids = proxy_listbox_ids
-    else:
-      listbox_ids = [('Base_viewRelatedObjectListBase/listbox','default')]
-    listbox = {}
-
-    rel_form = getattr(traversed_document, 'Base_viewRelatedObjectList')
-    listbox_form_field = rel_form.get_field('listbox')
-    for (listbox_path, listbox_name) in listbox_ids:
-      REQUEST.set('proxy_listbox_id', listbox_path)
-      # Set only relation_form_id but do NOT change form_id to the relation_form neither field_id to the listbox
-      # field_id must point to a relation field
-      REQUEST.set('relation_form_id', rel_form.id)
-
-      # Render sub-field of listbox but not as a full-field with its field_id in the REQUEST
-      # because Relation stuff expects the original RelationField to be the one "being rendered"
-      subfield = renderField(traversed_document, listbox_form_field, rel_form, request_field=False)
-      del REQUEST.other['relation_form_id']
-      del REQUEST.other['proxy_listbox_id']
-
-      listbox[Base_translateString(listbox_name)] = subfield
 
     result.update({
-      "url": relative_url,
+      "url": traversed_document.getRelativeUrl(),
       "translated_portal_types": translated_portal_type,
       "portal_types": portal_type_list,
       "query": query,
@@ -738,8 +713,17 @@ def renderField(traversed_document, field, form, value=None, meta_type=None, key
       "catalog_index": field.get_value('catalog_index'),
       "allow_jump": field.get_value('allow_jump'),
       "allow_creation": field.get_value('allow_creation'),
-      "proxy_listbox_ids_len": len(proxy_listbox_ids),
-      "listbox": listbox,
+      "search_view": url_template_dict['traverse_generator_action'] % {
+        "root_url": site_root.absolute_url(),
+        "script_id": script.id,
+        "relative_url": traversed_document.getRelativeUrl().replace("/", "%2F"),
+        "view": "Base_viewRelatedObjectList",
+        "extra_param_json": urlsafe_b64encode(
+          json.dumps(ensureSerializable({
+            'original_form_id': form.id,
+            'field_id': field.id
+        })))
+      }
     })
 
     if not isinstance(result["default"], list):
@@ -1077,6 +1061,53 @@ def renderForm(traversed_document, form, response_dict, key_prefix=None, selecti
     )
   }
 
+  use_relation_form_page_template = (form.pt == "relation_form")
+  if use_relation_form_page_template:
+    # Provide the list of possible listboxes
+    proxy_form_id_list = context.Base_getRelatedObjectParameter('proxy_listbox_ids')
+    if not len(proxy_form_id_list):
+      proxy_form_id_list = [('Base_viewRelatedObjectListBase/listbox', 'default')]
+
+    # Create the possible choices
+    root_url = site_root.absolute_url()
+    renderHiddenField(response_dict, "proxy_form_id_list", '')
+    response_dict["proxy_form_id_list"].update({
+      "items": [(Base_translateString(y), url_template_dict['traverse_generator_action'] % {
+        "root_url": site_root.absolute_url(),
+        "script_id": script.id,
+        "relative_url": traversed_document.getRelativeUrl().replace("/", "%2F"),
+        "view": "Base_viewRelatedObjectList",
+        "extra_param_json": urlsafe_b64encode(
+          json.dumps(ensureSerializable({
+            'proxy_listbox_id': x,
+            'original_form_id': extra_param_json['original_form_id'],
+            'field_id': extra_param_json['field_id']
+          })))
+      }) for x, y in proxy_form_id_list],
+      "first_item": 1,
+      "required": 0,
+      "type": "ListField",
+      "title": Base_translateString("Select Template")
+    })
+
+    # Allow to correctly render the listbox
+    if REQUEST.get('proxy_listbox_id', None) is None:
+      REQUEST.set('proxy_listbox_id', proxy_form_id_list[0][0])
+    else:
+      # Correctly set the listfield default value
+      response_dict["proxy_form_id_list"]["default"] = url_template_dict['traverse_generator_action'] % {
+        "root_url": site_root.absolute_url(),
+        "script_id": script.id,
+        "relative_url": traversed_document.getRelativeUrl().replace("/", "%2F"),
+        "view": "Base_viewRelatedObjectList",
+        "extra_param_json": urlsafe_b64encode(
+          json.dumps(ensureSerializable({
+            'proxy_listbox_id': REQUEST.get('proxy_listbox_id', None),
+            'original_form_id': extra_param_json['original_form_id'],
+            'field_id': extra_param_json['field_id']
+          })))
+      }
+
   # Go through all groups ("left", "bottom", "hidden" etc.) and add fields from
   # them into form.
   for group in form.Form_getGroupTitleAndId():
@@ -1087,7 +1118,7 @@ def renderForm(traversed_document, form, response_dict, key_prefix=None, selecti
       if not field.get_value("enabled"):
         continue
       try:
-        response_dict[field.id] = renderField(traversed_document, field, form, key_prefix=key_prefix, selection_params=selection_params)
+        response_dict[field.id] = renderField(traversed_document, field, form, key_prefix=key_prefix, selection_params=selection_params, request_field=not use_relation_form_page_template)
         if field_errors.has_key(field.id):
           response_dict[field.id]["error_text"] = field_errors[field.id].error_text
       except AttributeError as error:

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml

@@ -106,7 +106,7 @@
         <item>
             <key> <string>text_content</string> </key>
             <value> <string>CACHE MANIFEST\n
-# generated on Wed, 08 Aug 2018 10:00:00 GMT+0100\n
+# generated on Wed, 24 Oct 2018 10:00:00 GMT+0100\n
 # XXX + fonts\n
 # images/ajax-loader.gif\n
 CACHE:\n
@@ -383,7 +383,7 @@ NETWORK:\n
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>969.29434.4806.56729</string> </value>
+                <value> <string>971.10217.23589.22510</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -401,7 +401,7 @@ NETWORK:\n
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1533747534.5</float>
+                        <float>1540374696.11</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multirelationstringfield_js.js

@@ -21,6 +21,7 @@
           title: gadget.state.title,
           key: gadget.state.key,
           view: gadget.state.view,
+          search_view: gadget.state.search_view,
           url: gadget.state.url,
           allow_creation: gadget.state.allow_creation,
           portal_types: gadget.state.portal_types,
@@ -55,6 +56,7 @@
           title: field_json.title,
           key: field_json.key,
           view: field_json.view,
+          search_view: field_json.search_view,
           url: field_json.url,
           allow_creation: field_json.allow_creation,
           portal_types: field_json.portal_types,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multirelationstringfield_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.11252.5060.21026</string> </value>
+                <value> <string>971.1893.7821.24388</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1536588738.44</float>
+                        <float>1539872955.21</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_relation_search_html.html

@@ -8,35 +8,20 @@
     <!-- renderjs -->
     <script src="rsvp.js" type="text/javascript"></script>
     <script src="renderjs.js" type="text/javascript"></script>
-    <script src="handlebars.js" type="text/javascript"></script>
-    <script src="jiodev.js" type="text/javascript"></script>
 
     <link rel="http://www.renderjs.org/rel/interface" href="interface_page.html">
 
     <!-- custom script -->
     <script src="gadget_erp5_page_relation_search.js" type="text/javascript"></script>
 
-
-     <script id="search-template" type="text/x-handlebars-template">
-        <div class="ui-field-contain">
-          <label data-i18n="Select Template">Select Template<span></span></label>
-             <select>
-              {{#each options}}
-                {{#equal this ../select_template}}
-                  <option selected="selected" data-i18n="{{this}}" value="{{this}}">{{this}}</option>
-                {{else}}
-                  <option data-i18n="{{this}}" value="{{this}}">{{this}}</option>
-                {{/equal}}
-              {{/each}}
-             </select>
-        </div>
-
-    </script>
-
   </head>
 
   <body>
       <div class="left">
+        <div data-gadget-url="gadget_erp5_label_field.html"
+                data-gadget-scope="field_list"
+                data-gadget-sandbox="public">
+        </div>
       </div>
       <div data-gadget-url="gadget_erp5_pt_form_list.html"
               data-gadget-scope="form_list"

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_relation_search_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.13790.51027.29644</string> </value>
+                <value> <string>971.9035.27158.59511</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1536847595.94</float>
+                        <float>1540301504.46</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_relation_search_js.js

-/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80 */
-/*global window, rJS, RSVP, Handlebars*/
-(function (window, rJS, RSVP, Handlebars) {
+/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80, unparam: true */
+/*global window, rJS, RSVP*/
+(function (window, rJS, RSVP) {
   "use strict";
 
-  /////////////////////////////////////////////////////////////////
-  // Handlebars
-  /////////////////////////////////////////////////////////////////
-  // Precompile the templates while loading the first gadget instance
-  var gadget_klass = rJS(window),
-    search_source = gadget_klass.__template_element
-                         .getElementById("search-template")
-                         .innerHTML,
-    search_template = Handlebars.compile(search_source);
-
-  Handlebars.registerHelper('equal', function (left_value,
-    right_value, options) {
-    if (arguments.length < 3) {
-      throw new Error("Handlebars Helper equal needs 2 parameters");
-    }
-    if (left_value !== right_value) {
-      return options.inverse(this);
-    }
-    return options.fn(this);
-  });
-
-
-  gadget_klass
+  rJS(window)
     /////////////////////////////////////////////////////////////////
     // Acquired methods
     /////////////////////////////////////////////////////////////////
@@ -33,7 +11,6 @@
     .declareAcquiredMethod("getUrlFor", "getUrlFor")
     .declareAcquiredMethod("redirect", "redirect")
     .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
-    .declareAcquiredMethod("translateHtml", "translateHtml")
 
     /////////////////////////////////////////////////////////////////
     // declared methods
@@ -50,38 +27,34 @@
         });
     })
     .declareMethod("render", function (options) {
-      var gadget = this,
-        select_template = options.select_template || "";
+      var gadget = this;
       return new RSVP.Queue()
         .push(function () {
           return RSVP.all([
             gadget.jio_getAttachment(options.url, options.view),
-            gadget.getDeclaredGadget('form_list')
+            gadget.getDeclaredGadget('form_list'),
+            gadget.getDeclaredGadget('field_list')
           ]);
         })
         .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);
+          var listbox = result_list[0]._embedded._view.listbox,
+            proxy_form_id = result_list[0]._embedded._view.proxy_form_id_list;
+          listbox.command = "history_previous";
+          listbox.line_icon = true;
+          listbox.editable = 0;
 
-          if (listbox_key_list.length > 1) {
-            if (select_template === "") {
-              select_template = listbox_key_list[0];
-            }
-          } else {
-            select_template = listbox_key_list[0];
-          }
-          listbox[select_template].command = "history_previous";
-          listbox[select_template].line_icon = true;
+          proxy_form_id.editable = 1;
+          proxy_form_id.hidden = (proxy_form_id.items.length < 2);
 
           return RSVP.all([
-            gadget.changeState({options: JSON.stringify(listbox_key_list),
-                                select_template: select_template}),
+            result_list[2].render({
+              field_json: proxy_form_id,
+              field_type: proxy_form_id.type,
+              label: true
+            }),
             result_list[1].render({
               erp5_document: {"_embedded": {"_view": {
-                "listbox": listbox[select_template]
+                "listbox": listbox
               }},
                 "title": result_list[0].title,
                 "_links": result_list[0]._links
@@ -97,21 +70,7 @@
         });
 
     })
-    .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.element.querySelector(".left").innerHTML = html;
-        });
-    })
+
     .declareMethod("triggerSubmit", function () {
       var argument_list = arguments;
       return this.getDeclaredGadget('form_list')
@@ -119,19 +78,23 @@
           return gadget.triggerSubmit.apply(gadget, argument_list);
         });
     })
-    .onEvent('change', function (evt) {
-      var target = evt.target,
-        value;
-      if (target.nodeName === 'SELECT') {
-        value = target.options[target.selectedIndex].value;
-        this.state.select_template = value;
-        return this.redirect({
+
+    .allowPublicAcquisition('notifyChange', function (ignore, scope) {
+      var gadget = this;
+      if (scope === 'field_list') {
+        return gadget.getDeclaredGadget(scope)
+          .push(function (result) {
+            return result.getContent();
+          })
+          .push(function (result) {
+            return gadget.redirect({
               command: 'change',
               options: {
-            select_template: value
+                view: result.proxy_form_id_list
               }
             });
+          });
       }
     });
 
-}(window, rJS, RSVP, Handlebars));
+}(window, rJS, RSVP));
\ No newline at end of file

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>971.411.63561.65467</string> </value>
+                <value> <string>971.9094.36639.48298</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1539784088.89</float>
+                        <float>1540305094.05</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.js

@@ -98,8 +98,8 @@
           options: {
             page: "relation_search",
             url: gadget.state.url,
+            view: gadget.state.search_view,
             extended_search: extended_search,
-            view: gadget.state.view,
             back_field: gadget.state.key,
             relation_index: gadget.state.relation_index
           },
@@ -134,6 +134,7 @@
         title: options.title,
         key: options.key,
         view: options.view,
+        search_view: options.search_view,
         url: options.url,
         allow_creation: options.allow_creation,
         portal_types: JSON.stringify(options.portal_types),

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.16829.43481.45789</string> </value>
+                <value> <string>971.1889.61176.26572</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1536923390.01</float>
+                        <float>1539874767.77</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relationstringfield_js.js

@@ -22,6 +22,7 @@
             title: field_json.title,
             key: field_json.key,
             view: field_json.view,
+            search_view: field_json.search_view,
             url: field_json.url,
             allow_creation: field_json.allow_creation,
             portal_types: field_json.portal_types,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relationstringfield_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.11323.28526.22766</string> </value>
+                <value> <string>970.13790.51027.29644</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1536593071.17</float>
+                        <float>1539872919.1</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_relation_field_zuite/testProxyListBox.zpt

@@ -309,7 +309,7 @@
 <tr>
   <td>select</td>
   <td>//select</td>
-  <td>index=1</td>
+  <td>index=2</td>
 </tr>
 
 <tr>
@@ -327,7 +327,7 @@
 
 
 <tr>
-  <td>verifyValue</td>
+  <td>assertSelected</td>
   <td>//select</td>
   <td>Foo Listbox</td>
 </tr>
@@ -357,7 +357,7 @@
 <tr>
   <td>select</td>
   <td>//select</td>
-  <td>index=2</td>
+  <td>index=1</td>
 </tr>
 
 <tr>
@@ -375,7 +375,7 @@
 
 
 <tr>
-  <td>verifyValue</td>
+  <td>assertSelected</td>
   <td>//select</td>
   <td>Foo Line Listbox</td>
 </tr>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_translate_zuite/testRelationField.zpt

@@ -152,9 +152,9 @@
 
 
 <tr>
-  <td>verifyElementPresent</td>
-  <td>//option[@value = 'moren']</td>
-  <td></td>
+  <td>assertSelected</td>
+  <td>//select</td>
+  <td>moren</td>
 </tr>
 
 </tbody></table>