[erp5_web_renderjs_ui] Disable listbox button by default

Forbid click if the event listener is not activated yet

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html

@@ -193,9 +193,9 @@
     <script id="listbox-template" type="text/x-handlebars-template">
       <div class="ui-table-header ui-header ui-bar-c ui-corner-all">
         <h1 data-i18n="{{title}}" class="ui-title ui-override-theme">{{title}}<span> <span class="listboxloader ui-icon-spinner ui-btn-icon-left"></span></span></h1>
-          <button data-rel="hide" data-i18n="{{hide_button_text}}" name="{{hide_button_name}}" type="button" class="submit responsive ui-last-child ui-btn ui-icon-low-vision ui-btn-icon-left {{hide_class}}">{{hide_button_text}}</button>
-          <button data-rel="configure_columns" data-i18n="Configure" name="Configure" type="button" class="submit responsive ui-last-child ui-btn ui-icon-wrench ui-btn-icon-left {{configure_class}}">Configure</button>
-          <button data-rel="Sort" data-i18n="Sort" name="Sort" type="button" class="submit responsive ui-last-child ui-btn ui-icon-sort-amount-desc ui-btn-icon-left {{sort_class}}">Sort</button>
+          <button {{disabled}} data-rel="hide" data-i18n="{{hide_button_text}}" name="{{hide_button_name}}" type="button" class="submit responsive ui-last-child ui-btn ui-icon-low-vision ui-btn-icon-left {{hide_class}}">{{hide_button_text}}</button>
+          <button {{disabled}} data-rel="configure_columns" data-i18n="Configure" name="Configure" type="button" class="submit responsive ui-last-child ui-btn ui-icon-wrench ui-btn-icon-left {{configure_class}}">Configure</button>
+          <button {{disabled}} data-rel="Sort" data-i18n="Sort" name="Sort" type="button" class="submit responsive ui-last-child ui-btn ui-icon-sort-amount-desc ui-btn-icon-left {{sort_class}}">Sort</button>
       </div>
       <table class="ui-responsive ui-body-c ui-table-inset">
         <thead class="ui-bar-inherit thead"></thead>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>967.24634.17714.15001</string> </value>
+                <value> <string>967.44841.15161.33928</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1526286250.56</float>
+                        <float>1526894643.05</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js

@@ -129,6 +129,7 @@
     /////////////////////////////////////////////////////////////////
     // ready
     /////////////////////////////////////////////////////////////////
+    .setState({disabled: true})
     // Init local properties
     .ready(function () {
       this.props = {
@@ -316,7 +317,11 @@
         sort_column_list,
         i,
         j,
-        result_queue = new RSVP.Queue();
+        result_queue = new RSVP.Queue(),
+        button_selector_list = ['button[name="Sort"]', 'button[name="Hide"]',
+                                'button[name="Configure"]',
+                                'button[name="SelectRows"]'],
+        button;
 
 /*
       if (modification_dict.hasOwnProperty('error_text') && this.state.error_text !== undefined) {
@@ -348,7 +353,16 @@
           });
       }
 
-
+      if (modification_dict.hasOwnProperty('disabled')) {
+        // Mark buttons as enabled/disabled
+        // so that Zelenium can explicitely wait for enabled button
+        for (i = 0; i < button_selector_list.length; i += 1) {
+          button = gadget.element.querySelector(button_selector_list[i]);
+          if (button !== null) {
+            button.disabled = gadget.state.disabled;
+          }
+        }
+      }
 
       if ((modification_dict.hasOwnProperty('sort_list_json')) ||
           (modification_dict.hasOwnProperty('column_list_json')) ||
@@ -426,7 +440,8 @@
                 configure_class: gadget.state.configure_class,
                 title: gadget.state.title,
                 hide_button_text: hide_button_text,
-                hide_button_name: hide_button_name
+                hide_button_name: hide_button_name,
+                disabled: gadget.state.disabled ? 'disabled' : ''
               })),
               gadget.translateHtml(listbox_thead_template({
                 head_value: head_value_list,
@@ -819,6 +834,12 @@
     }, {mutex: 'changestate'})
 
     .onEvent('click', function click(evt) {
+      // For some reason, Zelenium can click even if button has the disabled
+      // attribute. So, it is needed for now to manually checks
+      if (this.state.disabled) {
+        return;
+      }
+
       var gadget = this,
         sort_button = gadget.element.querySelector('button[name="Sort"]'),
         hide_button = gadget.element.querySelector('button[name="Hide"]'),
@@ -905,6 +926,12 @@
 
     }, false, false)
 
+    .declareService(function enableButton() {
+      // click event listener is now activated
+      // Change the state of the gadget
+      return this.changeState({disabled: false});
+    })
+
     .allowPublicAcquisition("notifyInvalid", function notifyInvalid() {
       return;
     })

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>967.35176.12886.11639</string> </value>
+                <value> <string>967.44855.43962.32563</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1526654510.2</float>
+                        <float>1526894963.13</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui_test/Zuite_CommonTemplateForRenderjsUi.zpt

@@ -624,6 +624,11 @@
       <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//button[@data-i18n='Sort']</td>
       <td></td>
     </tr>
+    <tr>
+      <td>waitForElementNotPresent</td>
+      <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//button[@data-i18n='Sort' and @disabled]</td>
+      <td></td>
+    </tr>
     <tr>
       <td>click</td>
       <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//button[@data-i18n='Sort']</td>
@@ -791,6 +796,11 @@
       <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//button[@data-i18n='Configure']</td>
       <td></td>
     </tr>
+    <tr>
+      <td>waitForElementNotPresent</td>
+      <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//button[@data-i18n='Configure' and @disabled]</td>
+      <td></td>
+    </tr>
     <tr>
       <td>click</td>
       <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//button[@data-i18n='Configure']</td>