[erp5_web_renderjs_ui] Disable the dialog as soon as it is submitted.

This will prevent double concurrent submit.
Mutex can not be used, as it will block the update rendering.

Disable the dialog until the event listener is actived.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_html.html

@@ -13,9 +13,9 @@
 
     <script id="dialog-button-template" type="text/x-handlebars-template">
       {{#if show_update_button}}
-        <button name="action_update" type="submit" data-i18n="Update">Update</button>
+        <button disabled name="action_update" type="submit" data-i18n="Update">Update</button>
       {{/if}}
-      <input name="action_confirm" class="dialogconfirm" data-theme="b" data-inline="true" type="submit" data-i18n="[value]Proceed" value="Proceed" data-icon="check" />
+      <input disabled name="action_confirm" class="dialogconfirm" data-theme="b" data-inline="true" type="submit" data-i18n="[value]Proceed" value="Proceed" data-icon="check" />
       <a class="dialogcancel" data-i18n="Cancel">Cancel</a>
     </script>
 

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_html.xml

@@ -220,7 +220,7 @@
             </item>
             <item>
                 <key> <string>actor</string> </key>
-                <value> <string>superkato</string> </value>
+                <value> <string>zope</string> </value>
             </item>
             <item>
                 <key> <string>comment</string> </key>
@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>965.12118.35525.1655</string> </value>
+                <value> <string>967.55044.25804.33536</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1524057259.75</float>
+                        <float>1527506690.43</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js

@@ -3,9 +3,39 @@
 (function (window, rJS, RSVP, calculatePageTitle, Handlebars, ensureArray) {
   "use strict";
 
-  function submitDialog(gadget, is_updating) {
+  function checkValidity() {
+    return this.getDeclaredGadget("erp5_form")
+      .push(function (declared_gadget) {
+        return declared_gadget.checkValidity();
+      });
+  }
+
+  function getContent() {
+    return this.getDeclaredGadget("erp5_form")
+      .push(function (sub_gadget) {
+        return sub_gadget.getContent();
+      });
+  }
+
+  function submitDialog(is_updating) {
+    var gadget = this,
+      button_container =
+          gadget.element.querySelector('.dialog_button_container'),
+      update_button = button_container.querySelector('button'),
+      submit_input = button_container.querySelector('input');
+    submit_input.disabled = true;
+    if (update_button !== null) {
+      update_button.disabled = true;
+    }
+
+    function enableButton() {
+      submit_input.disabled = false;
+      if (update_button !== null) {
+        update_button.disabled = false;
+      }
+    }
 
-    return gadget.getContent()
+    return getContent.apply(this)
       .push(function (content_dict) {
         var data = {},
           key;
@@ -80,6 +110,13 @@
             // do not mingle with editable because it isn't necessary
           }
         });
+      })
+      .push(function (result) {
+        enableButton();
+        return result;
+      }, function (error) {
+        enableButton();
+        throw error;
       });
       // We do not handle submit failures because Page Form handles them well
       // If any error bubbles here we do not know what to do with it anyway
@@ -112,19 +149,9 @@
     /////////////////////////////////////////////////////////////////
     // Proxy methods to the child gadget
     /////////////////////////////////////////////////////////////////
-    .declareMethod('checkValidity', function checkValidity() {
-      return this.getDeclaredGadget("erp5_form")
-        .push(function (declared_gadget) {
-          return declared_gadget.checkValidity();
-        });
-    }, {mutex: 'changestate'})
+    .declareMethod('checkValidity', checkValidity, {mutex: 'changestate'})
 
-    .declareMethod('getContent', function getContent() {
-      return this.getDeclaredGadget("erp5_form")
-        .push(function (sub_gadget) {
-          return sub_gadget.getContent();
-        });
-    }, {mutex: 'changestate'})
+    .declareMethod('getContent', getContent, {mutex: 'changestate'})
 
     /////////////////////////////////////////////////////////////////
     // declared methods
@@ -155,6 +182,8 @@
         });
     })
 
+    // .declareMethod('submitDialog', submitDialog, {mutex: 'changestate'})
+
     .onStateChange(function onStateChange(modification_dict) {
       var form_gadget = this,
         selector = form_gadget.element.querySelector("h3"),
@@ -255,20 +284,34 @@
     .onEvent('submit', function submit() {
       if (this.state.has_update_action === true) {
         // default action on submit is update in case of its existence
-        return submitDialog(this, true);
+        return submitDialog.apply(this, [true]);
       }
-      return submitDialog(this, false);
+      return submitDialog.apply(this, [false]);
     }, false, true)
 
     .onEvent('click', function click(evt) {
       if (evt.target.name === "action_confirm") {
         evt.preventDefault();
-        return submitDialog(this, false);
+        return submitDialog.apply(this, [false]);
       }
       if (evt.target.name === "action_update") {
         evt.preventDefault();
-        return submitDialog(this, true);
+        return submitDialog.apply(this, [true]);
+      }
+    }, false, false)
+
+    .declareService(function enableButton() {
+      // click event listener is now activated
+      // Change the state of the gadget
+      var gadget = this,
+        button_container =
+            gadget.element.querySelector('.dialog_button_container'),
+        update_button = button_container.querySelector('button'),
+        submit_input = button_container.querySelector('input');
+      submit_input.disabled = false;
+      if (update_button !== null) {
+        update_button.disabled = false;
       }
-    }, false, false);
+    });
 
 }(window, rJS, RSVP, calculatePageTitle, Handlebars, ensureArray));

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml

@@ -224,7 +224,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>967.24634.17714.15001</string> </value>
+                <value> <string>967.55054.64073.15854</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -242,7 +242,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1526654351.56</float>
+                        <float>1527506827.94</float>
                         <string>UTC</string>
                       </tuple>
                     </state>