[erp5_web_renderjs_ui] Display the count method result

Display also the pagination state next to the listbox title

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html

@@ -171,7 +171,7 @@
     <script id="listbox-nav-template" type="text/x-handlebars-template">
       <a class="{{previous_classname}}" data-i18n="Previous" href="{{previous_url}}">Previous</a>
       <a class="{{next_classname}}" data-i18n="Next" href="{{next_url}}">Next</a>
-      <span class="ui-disabled ui-right" data-i18n="{{record}}">{{record}}</span>
+      <span class="ui-disabled ui-right">{{record}}</span>
     </script>
 
     <script id="listbox-template" type="text/x-handlebars-template">

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>965.14600.20468.49988</string> </value>
+                <value> <string>965.42445.26451.18841</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1518012378.11</float>
+                        <float>1519380501.26</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js

@@ -446,10 +446,13 @@
         // Trigger line content calculation
         result_queue
           .push(function () {
-            var loading_element_classList = gadget.element.querySelector(".listboxloader").classList,
+            var loading_element = gadget.element.querySelector(".listboxloader"),
+              loading_element_classList = loading_element.classList,
               tbody_classList = gadget.element.querySelector("table").querySelector("tbody").classList;
             // Set the loading icon and trigger line calculation
             loading_element_classList.add.apply(loading_element_classList, loading_class_list);
+            // remove pagination information
+            loading_element.textContent = '';
             tbody_classList.add(disabled_class);
 
             return gadget.fetchLineContent(false);
@@ -463,7 +466,8 @@
             var lines = gadget.state.lines,
               promise_list = [],
               allDocs_result = gadget.state.allDocs_result,
-              counter;
+              counter,
+              pagination_message = '';
 
             column_list = JSON.parse(gadget.state.column_list_json);
             // for actual allDocs_result structure see ref:gadget_erp5_jio.js
@@ -583,10 +587,16 @@
 
                 if ((gadget.state.begin_from === 0) && (counter === 0)) {
                   record = variable.translated_no_record;
+                  pagination_message = 0;
                 } else if ((allDocs_result.data.rows.length <= lines) && (gadget.state.begin_from === 0)) {
                   record = counter + " " + variable.translated_records;
+                  pagination_message = counter;
                 } else {
-                  record = variable.translated_records + " " + (((gadget.state.begin_from + lines) / lines - 1) * lines + 1) + " - " + (((gadget.state.begin_from + lines) / lines - 1) * lines + counter);
+                  pagination_message = (((gadget.state.begin_from + lines) / lines - 1) * lines + 1) + " - " + (((gadget.state.begin_from + lines) / lines - 1) * lines + counter);
+                  if (allDocs_result.count !== undefined) {
+                    pagination_message += ' / ' + allDocs_result.count;
+                  }
+                  record = variable.translated_records + " " + pagination_message;
                 }
 
                 if (gadget.state.begin_from === 0) {
@@ -603,12 +613,11 @@
                     "next_classname": next_classname,
                     "next_url": next_url
                   })
-                )
+                );
+              })
               .push(function (listbox_nav_html) {
                 gadget.element.querySelector('nav').innerHTML = listbox_nav_html;
-                  });
-              })
-              .push(function () {
+
                 var result_sum = (gadget.state.allDocs_result.sum || {}).rows || [], // render summary footer if available
                   summary = result_sum.map(function (row, row_index) {
                     var row_editability = row['listbox_uid:list'] !== undefined;
@@ -639,8 +648,10 @@
                 return renderTablePart(gadget, listbox_tfoot_template, summary, "tfoot");
               })
               .push(function () {
-                var loading_element_classList = gadget.element.querySelector(".listboxloader").classList;
+                var loading_element = gadget.element.querySelector(".listboxloader"),
+                  loading_element_classList = loading_element.classList;
                 loading_element_classList.remove.apply(loading_element_classList, loading_class_list);
+                loading_element.textContent = '(' + pagination_message + ')';
               });
           });
       }

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>964.60204.10137.19421</string> </value>
+                <value> <string>965.44873.24271.11298</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1516364900.78</float>
+                        <float>1519377228.21</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testEditableFieldInEditableColumn.zpt

@@ -64,11 +64,9 @@
   <td></td>
 </tr>
 
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//span[@data-i18n='1 Records']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(1)', 'footer': '1 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr>
   <td>waitForElementPresent</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testEmptyListboxWithStat.zpt

@@ -35,8 +35,10 @@ Ensure empty listbox does not show stat line even though it receives stat data.
 
 <tr><td>open</td>
     <td>${renderjs_url}/#/foo_module</td><td></td></tr>
-<tr><td>waitForElementPresent</td>
-    <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//nav/span[@data-i18n="No records"]</td><td></td></tr>
+
+<tal:block tal:define="pagination_configuration python: {'header': '(0)', 'footer': 'No records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr><td>assertElementNotPresent</td>
     <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//table/tfoot/tr</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testManualPagination.zpt

@@ -50,8 +50,9 @@ a damn about limits so it is perfect adept for testing.
     <td>${listbox}//a[@data-i18n="Next"]</td><td></td></tr>
 <tr><td>assertElementNotPresent</td><!-- "Next" link must be enabled -->
     <td>${listbox}//a[@data-i18n="Next" and contains(@class, "ui-disabled")]</td><td></td></tr>
-<tr><td>assertTextPresent</td>
-    <td>Records 1 - 3</td><td></td></tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(1 - 3)', 'footer': 'Records 1 - 3'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr><td>click</td>
     <td>${listbox}//a[@data-i18n="Next"]</td><td></td></tr>
@@ -60,8 +61,9 @@ a damn about limits so it is perfect adept for testing.
     <td>${listbox}//a[@data-i18n="Next"]</td><td></td></tr>
 <tr><td>assertElementNotPresent</td><!-- "Next" link must be enabled -->
     <td>${listbox}//a[@data-i18n="Next" and contains(@class, "ui-disabled")]</td><td></td></tr>
-<tr><td>assertTextPresent</td>
-    <td>Records 4 - 6</td><td></td></tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(4 - 6)', 'footer': 'Records 4 - 6'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr><td>click</td><!-- wait explicitely for the first listbox which holds the modification history -->
     <td>${listbox}//a[@data-i18n="Next"]</td><td></td></tr>
@@ -70,8 +72,9 @@ a damn about limits so it is perfect adept for testing.
     <td>${listbox}//a[@data-i18n="Next"]</td><td></td></tr>
 <tr><td>assertElementPresent</td><!-- "Next" link must be disabled because we are at the end -->
     <td>${listbox}//a[@data-i18n="Next" and contains(@class, "ui-disabled")]</td><td></td></tr>
-<tr><td>assertTextPresent</td>
-    <td>Records 7 - 8</td><td></td></tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(7 - 8)', 'footer': 'Records 7 - 8'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 </tbody></table>
 </body>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testNoEditableFieldOnFormList.zpt

@@ -64,11 +64,9 @@
   <td></td>
 </tr>
 
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//span[@data-i18n='1 Records']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(1)', 'footer': '1 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr>
   <td>waitForElementPresent</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testNoEditableFieldWhenEditableColumnIsEmpty.zpt

@@ -108,11 +108,9 @@
   <td></td>
 </tr>
 
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//span[@data-i18n='1 Records']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(1)', 'footer': '1 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr>
   <td>waitForElementPresent</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testStatColumns.zpt

@@ -44,8 +44,9 @@ Ensure Stat Column methods are executed correctly and result displayed in tfoot
 
 <tr><td>open</td>
     <td>${renderjs_url}/#/foo_module</td><td></td></tr>
-<tr><td>waitForElementPresent</td>
-    <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//nav/span[@data-i18n="2 Records"]</td><td></td></tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(2)', 'footer': '2 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr><td>store</td>
     <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//table</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testStatMethod.zpt

@@ -44,8 +44,9 @@ Ensure stat_method gets executed and result displayed in tfoot element of the li
 
 <tr><td>open</td>
     <td>${renderjs_url}/#/foo_module</td><td></td></tr>
-<tr><td>waitForElementPresent</td>
-    <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//nav/span[@data-i18n="3 Records"]</td><td></td></tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(3)', 'footer': '3 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr><td>store</td>
     <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//table</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testStatMissing.zpt

@@ -41,8 +41,9 @@ Ensure no stat line is displayed when no stat_method and no stat_columns are def
 
 <tr><td>open</td>
     <td>${renderjs_url}/#/foo_module</td><td></td></tr>
-<tr><td>waitForElementPresent</td>
-    <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//nav/span[@data-i18n="3 Records"]</td><td></td></tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(3)', 'footer': '3 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <tr><td>assertElementNotPresent</td>
     <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//table/tfoot/tr</td>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_templates_zuite/testFormListSearchResetsPagination.zpt

@@ -70,21 +70,17 @@
   <td>Title 10</td>
   <td></td>
 </tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//span[@data-i18n='1 Records']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(1)', 'footer': '1 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <!-- Pagination keeps search query -->
 <tal:block tal:define="search_query python: '%'">
   <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/search_in_form_list" />
 </tal:block>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//span[@data-i18n='Records 1 - 3']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(1 - 3 / 25)', 'footer': 'Records 1 - 3 / 25'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 <tal:block tal:define="parsed_query python: '';
                        search_query python: '%'">
   <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />
@@ -94,11 +90,9 @@
   <td>//a[@data-i18n='Next']</td>
   <td></td>
 </tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//span[@data-i18n='Records 4 - 6']</td>
-  <td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(4 - 6 / 25)', 'footer': 'Records 4 - 6 / 25'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 <tal:block tal:define="parsed_query python: '';
                        search_query python: '%'">
   <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_search_in_form_list" />

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

@@ -106,9 +106,6 @@
  </tr>
 
 
-
-<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/clear_query" />
-
 </tbody></table>
 </body>
 </html>
\ No newline at end of file

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/testDeleteDocument.zpt

@@ -168,11 +168,9 @@
  	<td></td>
 </tr>
 
-<tr>
- 	<td>waitForTextPresent</td>
- 	<td>2 Records</td>
- 	<td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(2)', 'footer': '2 Records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <!-- Wait for the action page and click on the delete link -->
 <tr>
@@ -333,17 +331,9 @@
   <td></td>
 </tr>
 
-<tr>
- 	<td>waitForTextPresent</td>
- 	<td>No records</td>
- 	<td></td>
-</tr>
-
-<tr>
- 	<td>verifyTextPresent</td>
- 	<td>No records</td>
- 	<td></td>
-</tr>
+<tal:block tal:define="pagination_configuration python: {'header': '(0)', 'footer': 'No records'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/check_listbox_pagination_text" />
+</tal:block>
 
 <!-- Wait for the action page and check no delete link is here-->
 <tr>

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

@@ -53,7 +53,7 @@
     <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/triggle_filter" />
     <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/trash_editor_configuration" />
     <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_filter" />
-    <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+    <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_listbox_loaded" />
   </tal:block>
 
   <tal:block metal:define-macro="submit_search_filter">
@@ -231,13 +231,47 @@
     </tr>
   </tal:block>
 
+  <tal:block metal:define-macro="check_listbox_pagination_text">
+    <tr>
+      <td colspan="3"><b tal:content="python: 'Check the listbox pagination text: %s' % pagination_configuration"></b></td>
+    </tr>
+    <tr>
+      <td>waitForElementPresent</td>
+      <td tal:content="python: '//div[contains(@data-gadget-url, \'gadget_erp5_field_listbox.html\')]//h1//span[@class=\'listboxloader\' and text()=\'%(header)s\']' % pagination_configuration"></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>assertElementPresent</td>
+      <td tal:content="python: '//div[contains(@data-gadget-url, \'gadget_erp5_field_listbox.html\')]//h1//span[@class=\'listboxloader\' and text()=\'%(header)s\']' % pagination_configuration"></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>waitForElementPresent</td>
+      <td tal:content="python: '//div[contains(@data-gadget-url, \'gadget_erp5_field_listbox.html\')]//nav//span[@class=\'ui-disabled ui-right\' and text()=\'%(footer)s\']' % pagination_configuration"></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>assertElementPresent</td>
+      <td tal:content="python: '//div[contains(@data-gadget-url, \'gadget_erp5_field_listbox.html\')]//nav//span[@class=\'ui-disabled ui-right\' and text()=\'%(footer)s\']' % pagination_configuration"></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td colspan="3"><p></p></td>
+    </tr>
+  </tal:block>
+
   <tal:block metal:define-macro="wait_for_listbox_loaded">
     <tr>
       <td colspan="3"><b>Wait for the listbox to be loaded</b></td>
     </tr>
+    <tr>
+      <td>waitForElementNotPresent</td>
+      <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//h1//span[contains(@class, "ui-icon-spinner")]</td>
+      <td></td>
+    </tr>
     <tr>
       <td>waitForElementPresent</td>
-      <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//nav//span[contains(@data-i18n, "Records")]</td>
+      <td>//div[contains(@data-gadget-url, 'gadget_erp5_field_listbox.html')]//nav//span[contains(text(), "ecord")]</td>
       <td></td>
     </tr>
     <tr>