[renderjs_ui] Refactoring of Form + one new feature - empty labels will not...

[renderjs_ui] Refactoring of Form + one new feature - empty labels will not show at all (+ forgotten XML files)

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_field_formbox_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.10605.65461.53367</string> </value>
+                <value> <string>961.17832.13281.59733</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1501769352.85</float>
+                        <float>1502199696.37</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js

@@ -60,26 +60,31 @@
     return field_url;
   }
 
+  /**
+   * Physically append rendered field to DOM.
+   *
+   * Wraps every field in label gadget.
+   * @argument field: array<tuple<str, object>> where first item is name, second meta info of the field
+   *           (obsolete to specify the meta information which is returned by JSON style since it is duplicate of information in document instance)
+   */
+  function addField(field, rendered_document, form_definition, form_gadget, group_name, modification_dict) {
+    var field_name = field[0],
+      field_element,
+      suboptions;
 
-  function addField(field, rendered_form, form_definition, form_gadget, group, modification_dict) {
-    if (rendered_form.hasOwnProperty(field[0])) {
-      // Field is enabled in this context
-      var sandbox = "public",
-        field_element = document.createElement("div"),
-        rendered_field = rendered_form[field[0]],
-        // suboptions = options[rendered_field.key] || suboption_dict;
-        suboptions = {};
-
-      // XXX Hardcoded for searchfield - remove later!
-      if (form_definition.extended_search) {
-        suboptions.extended_search = form_definition.extended_search;
+    if (!rendered_document.hasOwnProperty(field_name)) {
+      return;
     }
-      // XXX Hardcoded for listbox's hide functionality
-      suboptions.hide_enabled = form_definition.hide_enabled;
 
-      suboptions.field_url = getFieldTypeGadgetUrl(rendered_field.type);
-      suboptions.label = false;
-      suboptions.field_json = rendered_field;
+    suboptions = {
+      hide_enabled: form_definition.hide_enabled, // listbox specific
+      extended_search: form_definition.extended_search, // searchfield specific
+      field_url: getFieldTypeGadgetUrl(rendered_document[field_name].type),
+      label: ((group_name !== "bottom") && (rendered_document[field_name].title.length > 0)), // no label for bottom group and field without title
+      field_json: rendered_document[field_name] // pass
+    };
+
+    // XXX: what is the purpose of this?
     suboptions.field_json.view = form_gadget.state.view;
 
     // if the whole form is non-editable than every field has to be non-editable
@@ -87,16 +92,17 @@
       suboptions.field_json.editable = 0;
     }
 
+    field_element = document.createElement("div");
     return new RSVP.Queue()
       .push(function () {
         if (modification_dict.hasOwnProperty('hash')) {
           return form_gadget.declareGadget('gadget_erp5_label_field.html', {
-              scope: rendered_field.key,
+            scope: field_name,
             element: field_element,
-              sandbox: sandbox
+            sandbox: "public"
           });
         }
-          return form_gadget.getDeclaredGadget(rendered_field.key);
+        return form_gadget.getDeclaredGadget(field_name);
       })
       .push(function (label_gadget) {
         if (modification_dict.hasOwnProperty('hash')) {
@@ -113,35 +119,29 @@
       })
       .push(function () {
         return field_element;
-          // return fieldset_element;
-          // fieldset_element.appendChild(field_element);
       });
   }
-  }
 
 
-  function addGroup(group, rendered_form, form_definition, form_gadget, modification_dict) {
+  function addGroup(group, rendered_document, form_definition, form_gadget, modification_dict) {
     // XXX: > Romain: fieldset will be needed later for menus
     var fieldset_element = document.createElement("div"),
-      promise_field_list = [],
-      j;
+      group_name = group[0],
+      field_list = group[1];
 
-    fieldset_element.setAttribute("class", group[0]);
+    fieldset_element.setAttribute("class", group_name);
 
-    for (j = 0; j < group[1].length; j += 1) {
-      promise_field_list.push(addField(group[1][j], rendered_form, form_definition, form_gadget, group, modification_dict));
-    }
     return new RSVP.Queue()
       .push(function () {
-        return RSVP.all(promise_field_list);
+        return RSVP.all(field_list.map(function (field) {
+          return addField(field, rendered_document, form_definition, form_gadget, group_name, modification_dict);
+        }));
       })
       .push(function (result_list) {
-        var i;
-        for (i = 0; i < result_list.length; i += 1) {
-          if (result_list[i]) {
-            fieldset_element.appendChild(result_list[i]);
-          }
-        }
+        // append all rendered fields into DOM
+        result_list.forEach(function (result) {
+          if (result) {fieldset_element.appendChild(result); }
+        });
         return fieldset_element;
       });
   }
@@ -152,6 +152,20 @@
       g.props = {};
     })
 
+    .setState({
+      // erp5 document is an instance of a document referenced by jio_key
+      erp5_document: undefined,
+      jio_key: undefined,
+      // form definition holds positioning of fields
+      form_definition: undefined,
+      view: undefined,  // Kato: still have no idea what that means
+      // hash is used to spot changes in positioning of fields
+      hash: "",
+      // attributes of the form - no magic there
+      title: undefined,
+      editable: undefined
+    })
+
     .allowPublicAcquisition("getFieldTypeGadgetUrl", function (param_list) {
       return getFieldTypeGadgetUrl(param_list[0]);
     })
@@ -165,19 +179,24 @@
 
     .declareMethod('render', function (options) {
       var group_list = options.form_definition.group_list,
-        rendered_form = options.erp5_document._embedded._view,
+        rendered_document = options.erp5_document._embedded._view,
+        hash = "",
+        group_name,
+        group_field_list,
         i,
-        j,
-        hash = "";
+        j;
 
-      // Check the list of field to render
-      // If the list is different, DOM content will be dropped
-      // and recreated
+      // Contruct a hash of <placement>+<field names> to snapshot rendering.
+      // The `hash` will make it to the `onStateChange` only if it has changed.
+      // If so, DOM content will be dropped and recreated
       for (i = 0; i < group_list.length; i += 1) {
-        hash += group_list[i][0];
-        for (j = 0; j < group_list[i][1].length; j += 1) {
-          if (rendered_form.hasOwnProperty(group_list[i][1][j][0])) {
-            hash += group_list[i][1][j][0];
+        group_name = group_list[i][0];
+        group_field_list = group_list[i][1];
+        hash += group_name;
+
+        for (j = 0; j < group_field_list.length; j += 1) {
+          if (rendered_document.hasOwnProperty(group_field_list[j][0])) {
+            hash += group_field_list[j][0];
           }
         }
       }
@@ -196,7 +215,7 @@
     .onStateChange(function (modification_dict) {
       var erp5_document = this.state.erp5_document,
         form_definition = this.state.form_definition,
-        rendered_form = erp5_document._embedded._view,
+        rendered_document = erp5_document._embedded._view,
         group_list = form_definition.group_list,
         form_gadget = this;
 
@@ -206,12 +225,9 @@
 
       return new RSVP.Queue()
         .push(function () {
-          var group_promise_list = [],
-            j;
-          for (j = 0; j < group_list.length; j += 1) {
-            group_promise_list.push(addGroup(group_list[j], rendered_form, form_definition, form_gadget, modification_dict));
-          }
-          return RSVP.all(group_promise_list);
+          return RSVP.all(group_list.map(function (group) {
+            return addGroup(group, rendered_document, form_definition, form_gadget, modification_dict);
+          }));
         })
         .push(function (result_list) {
           if (modification_dict.hasOwnProperty('hash')) {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.9083.63657.29132</string> </value>
+                <value> <string>961.17824.16764.21521</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1501749851.19</float>
+                        <float>1502198463.15</float>
                         <string>UTC</string>
                       </tuple>
                     </state>