[renderjs_ui] LinesField works in non-editable mode

/#/bug_module/20171103-82F24A

/reviewed-on nexedi/erp5!489

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_js.js

@@ -8,79 +8,53 @@
     return lines;
   }
 
-  function listToBR(lines) {
-    if (Array.isArray(lines)) {return lines.join("<br/>\n"); }
-    return lines;
-  }
-
   rJS(window)
-
-    .declareMethod('render', function (options) {
-      return this.changeState(options.field_json);
+    .setState({
+      gadget_rendered: false
     })
 
-    .onStateChange(function (modification_dict) {
+    .declareMethod('render', function (options) {
       var gadget = this,
-        url,
-        value;
-
-      if (modification_dict.hasOwnProperty('editable')) {
-        if (gadget.state.editable) {
-          url = 'gadget_html5_textarea.html';
-          value = listToNewlines(gadget.state.value || gadget.state.default || []);
-        } else {
-          url = 'gadget_html5_element.html';
-          value = listToBR(gadget.state.value || gadget.state.default || []);
-        }
-        return this.declareGadget(url, {scope: 'sub'})
-          .push(function (sub_gadget) {
-            // Clear first to DOM, append after to reduce flickering/manip
-            while (gadget.element.firstChild) {
-              gadget.element.removeChild(gadget.element.firstChild);
-            }
-            gadget.element.appendChild(sub_gadget.element);
-            // Use full-blown render when the widget is new
-            return sub_gadget.render({
-              value: value,
-              name: gadget.state.key,
-              editable: gadget.state.editable,
-              required: gadget.state.required,
-              title: gadget.state.title,
-              hidden: gadget.state.hidden
-            });
+        new_state = {
+          "default": listToNewlines(options.field_json.default),
+          "editable": options.field_json.editable,
+          "required": options.field_json.required,
+          "hidden": options.field_json.hidden,
+          "title": options.field_json.title,
+          "key": options.field_json.key
+        };
+
+      if (this.state.gadget_rendered === false) {
+        return gadget.declareGadget("gadget_erp5_field_textarea.html", {scope: 'sub'})
+          .push(function (subgadget) {
+            gadget.element.appendChild(subgadget.element);
+            new_state.gadget_rendered = true;
+            return gadget.changeState(new_state);
           });
       }
+      return this.changeState(new_state);
+    })
 
-      return gadget.getDeclaredGadget('sub')
-        .push(function (input) {
-          if (modification_dict.hasOwnProperty("value")) {
-            if (gadget.state.editable) {
-              modification_dict.value = listToNewlines(modification_dict.value);
-            } else {
-              modification_dict.value = listToBR(modification_dict.value);
-            }
-          }
-          // when we only receive changes we can simply pass (minimaly modified) modification dictionary
-          return input.render(modification_dict);
+    .onStateChange(function () {
+      var gadget = this;
+      return this.getDeclaredGadget('sub')
+        .push(function (subgadget) {
+          return subgadget.render({field_json: gadget.state});
         });
     })
 
     .declareMethod('getContent', function () {
-      var gadget = this;
-      return gadget.getDeclaredGadget('sub')
+      return this.getDeclaredGadget('sub')
         .push(function (sub_gadget) {
           return sub_gadget.getContent();
         });
     })
 
     .declareMethod('checkValidity', function () {
-      if (this.state.editable) {
-        return this.getDeclaredGadget('sub')
-          .push(function (gadget) {
-            return gadget.checkValidity();
-          });
-      }
-      return true;
+      return this.getDeclaredGadget('sub')
+        .push(function (subgadget) {
+          return subgadget.checkValidity();
+        });
     });
 
 }(window, rJS));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.56527.16709.20804</string> </value>
+                <value> <string>963.41690.30150.51729</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1510071879.23</float>
+                        <float>1511408348.35</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.js

@@ -50,6 +50,13 @@
         });
     })
 
+    .declareMethod('checkValidity', function () {
+      return this.getDeclaredGadget('sub')
+        .push(function (subgadget) {
+          return subgadget.checkValidity();
+        });
+    })
+
     .declareMethod('getContent', function () {
       if (this.state.editable) {
         return this.getDeclaredGadget('sub')

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.45675.44850.53452</string> </value>
+                <value> <string>960.5523.58984.43537</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1479375229.95</float>
+                        <float>1511311791.54</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_lines_field_zuite/testDialogLinesField.zpt

@@ -22,7 +22,8 @@
     <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_field_lines.html"]//textarea</td><td></td></tr>
 <tr><td>type</td>
     <td>field_my_lines_list</td>
-    <td>foo<br/>bar</td></tr>
+    <td>foo<br/><!-- tags and comments get stripped away -->
+bar</td></tr>
 
 <!-- Change sorting of the listbox -->
 <tr><td>waitForElementPresent</td>
@@ -32,7 +33,8 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
 <tr><td>assertValue</td>
     <td>//textarea[@name='field_my_lines_list']</td>
-    <td>foo<br/>bar</td></tr>
+    <td>foo<br/>
+bar</td></tr>
 
 <!-- Save and force unloading of Form and its content from the memory by going back -->
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
@@ -49,10 +51,12 @@
 <!-- Assert value still holds and change it -->
 <tr><td>assertValue</td>
     <td>//textarea[@name='field_my_lines_list']</td>
-    <td>foo<br/>bar</td></tr>
+    <td>foo<br/>
+bar</td></tr>
 <tr><td>assertValue</td>
     <td>//textarea[@name='field_my_lines_list']</td>
-    <td>foo<br/>bar</td></tr>
+    <td>foo<br/>
+bar</td></tr>
 <tr><td>type</td>
     <td>//textarea[@name='field_my_lines_list']</td>
     <td>foo bar</td></tr>
@@ -68,7 +72,6 @@
 
 <!-- Save and force unloading of Form and its content from the memory by going back -->
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
-
 <tr><td>click</td>
     <td>//div[@data-role='header']//h1/a</td><td></td></tr>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_lines_field_zuite/testEmptyLine.zpt

@@ -25,12 +25,7 @@
     <td>a
 b
 </td></tr>
-<tr><td>waitForElementPresent</td>
-    <td>//button[@data-i18n='Save']</td><td></td></tr>
-<tr><td>click</td>
-    <td>//button[@data-i18n='Save']</td><td></td></tr>
-<tr><td>waitForTextPresent</td>
-    <td>Data updated.</td><td></td></tr>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
 <!-- Force unloading of Form and its content from the memory by going back -->
 <tr><td>click</td>
     <td>//div[@data-role='header']//h1/a</td><td></td></tr>
@@ -46,5 +41,18 @@ b
     <td>a
 b
 </td></tr>
+
+<tr><td>click</td>
+    <td>//button[@name='panel']</td><td></td></tr>
+<tr><td>waitForElementPresent</td>
+    <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_panel.html"]//input[@name='editable' and @type='checkbox']</td><td></td></tr>
+<tr><td>click</td>
+    <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_panel.html"]//input[@name='editable' and @type='checkbox']</td><td></td></tr>
+<tr><td>waitForElementPresent</td>
+    <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_field_lines.html"]//div[@data-gadget-url="${renderjs_url}/gadget_html5_element.html"]/pre</td><td></td></tr>
+<tr><td>assertText</td>
+    <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_field_lines.html"]//div[@data-gadget-url="${renderjs_url}/gadget_html5_element.html"]/pre</td>
+    <td>a
+b</td></tr>
 </body>
 </html>
\ No newline at end of file