[renderjs] LListBox column titles are clickable and issue sorting

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html

@@ -20,7 +20,7 @@
     <!-- custom script -->
     <script src="gadget_erp5_field_listbox.js" type="text/javascript"></script>
 
-    <script id="listbox-hidden-thead-template" type="text/x-handlebars-template">
+    <script id="listbox-thead-template" type="text/x-handlebars-template">
       <table>
        <thead class="ui-bar-inherit head">
          <tr>
@@ -28,26 +28,11 @@
              <th data-i18n="Jump">Jump</th>
            {{/if}}
            {{#each head_value}}
+              {{#if sort_link}}
+              <th data-i18n="{{data-i18n}}" class="{{class_value}}"><a href="{{sort_link}}">{{text}}</a></th>
+              {{else}}
               <th data-i18n="{{data-i18n}}" class="{{class_value}}">{{text}}</th>
-           {{/each}}
-           {{#if line_icon}}
-             <th></th>
-           {{/if}}
-         </tr>
-       </thead>
-      </table>
-    </script>
-
-    <script id="listbox-show-thead-template" type="text/x-handlebars-template">
-      <table>
-       <thead class="ui-bar-inherit head">
-         <tr>
-           {{#if show_anchor}}
-             <th data-i18n="Jump">Jump</th>
               {{/if}}
-           <th></th>
-           {{#each head_value}}
-              <th  data-i18n="{{data-i18n}}" class="{{class_value}}">{{text}}</th>
            {{/each}}
            {{#if line_icon}}
              <th></th>

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>958.1079.25051.23586</string> </value>
+                <value> <string>960.54476.25567.57719</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1489595378.88</float>
+                        <float>1500472660.17</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js

@@ -5,14 +5,10 @@
   SimpleQuery, ComplexQuery, Query, Handlebars, console, QueryFactory) {
   "use strict";
   var gadget_klass = rJS(window),
-    listbox_hidden_thead_source = gadget_klass.__template_element
-                         .getElementById("listbox-hidden-thead-template")
+    listbox_thead_source = gadget_klass.__template_element
+                         .getElementById("listbox-thead-template")
                          .innerHTML,
-    listbox_hidden_thead_template = Handlebars.compile(listbox_hidden_thead_source),
-    listbox_show_thead_source = gadget_klass.__template_element
-                         .getElementById("listbox-show-thead-template")
-                         .innerHTML,
-    listbox_show_thead_template = Handlebars.compile(listbox_show_thead_source),
+    listbox_thead_template = Handlebars.compile(listbox_thead_source),
 
     listbox_hidden_tbody_source = gadget_klass.__template_element
                          .getElementById("listbox-hidden-tbody-template")
@@ -271,11 +267,11 @@
 
     .onStateChange(function (modification_dict) {
       var gadget = this,
-        head_value_list = [],
+        sort_key = gadget.state.key + "_sort_list:json",
         class_value,
         sort_list,
         column_list,
-        tmp,
+        sort_column_list,
         i,
         j,
         result_queue = new RSVP.Queue();
@@ -294,7 +290,7 @@
         return result_queue
           .push(function () {
             var options = {extended_search: undefined};
-            options[gadget.state.key + "_sort_list:json"] = undefined;
+            options[sort_key] = undefined;
             return gadget.getUrlFor({
               command: 'store_and_change',
               options: options
@@ -318,44 +314,69 @@
           (modification_dict.hasOwnProperty('has_error')) ||
           (modification_dict.hasOwnProperty('show_line_selector')) ||
           (modification_dict.hasOwnProperty('hide_sort')) ||
-          (modification_dict.hasOwnProperty('hide_class'))) {
+          (modification_dict.hasOwnProperty('hide_class')) ||
+          (modification_dict.hasOwnProperty('extended_search'))) {
 
         // display sorting arrow inside correct columns
-        sort_list = JSON.parse(gadget.state.sort_list_json);
-        column_list = JSON.parse(gadget.state.column_list_json);
+        sort_list = JSON.parse(gadget.state.sort_list_json);  // current sort
+        column_list = JSON.parse(gadget.state.column_list_json);  // shown columns
+        sort_column_list = JSON.parse(gadget.state.sort_column_list_json); // sortable columns
+
+        result_queue
+          .push(function () {
+            // construct array of links for sortable columns, undefined otherwise
+            return RSVP.all(column_list.map(function (column) {
 
+              function is_current_column(item) {
+                return item[0] === column[0];
+              }
+
+              var is_sortable = sort_column_list.find(is_current_column) !== undefined,
+                current_sort = sort_list.find(is_current_column),
+                options = {};
+
+              if (is_sortable) {
+                options[sort_key] = [[column[0], 'ascending']];  // make it the only new sort (replace array instead of push)
+                if (current_sort !== undefined && current_sort[1] === 'ascending') {
+                  options[sort_key] = [[column[0], 'descending']];
+                }
+                return gadget.getUrlFor({"command": 'store_and_change', "options": options});
+              }
+              return undefined;
+            }));
+          })
+          .push(function (column_sort_link_list) {
+            // here we obtain links for sorting by columns
+            // so we can construct array of header objects to be rendered in the header template
+            var hide_button_text,
+              hide_button_name,
+              current_sort,
+              head_value_list = [];
             for (i = 0; i < column_list.length; i += 1) {
-          class_value = "";
-          for (j = 0; j < sort_list.length; j += 1) {
-            tmp = sort_list[j];
-            if (tmp[0] === column_list[i][0]) {
-              if (tmp[1] === "ascending") {
+              current_sort = sort_list.find((item) => item[0] === column_list[i][0]);
+              class_value = undefined;
+
+              if (current_sort !== undefined) {
+                if (current_sort[1] === 'ascending') {
                   class_value = "ui-icon ui-icon-arrow-up";
-              } else {
-                class_value = "ui-icon ui-icon-arrow-down";
                 }
-              break;
+                if (current_sort[1] === 'descending') {
+                  class_value = "ui-icon ui-icon-arrow-down";
                 }
               }
+
               head_value_list.push({
                 "data-i18n": column_list[i][1],
                 "class_value": class_value,
+                "sort_link": column_sort_link_list[i],
                 "text": column_list[i][1]
               });
             }
 
-        result_queue
-          .push(function () {
-            var listbox_thead_template,
-              hide_button_text,
-              hide_button_name;
-
             if (gadget.state.show_line_selector) {
-              listbox_thead_template = listbox_show_thead_template;
               hide_button_text = 'Submit';
               hide_button_name = 'SelectRows';
             } else {
-              listbox_thead_template = listbox_hidden_thead_template;
               hide_button_text = 'Hide Rows';
               hide_button_name = 'Hide';
             }

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>960.53125.56977.8192</string> </value>
+                <value> <string>960.56196.34799.43025</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1500458423.03</float>
+                        <float>1500568728.83</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -1216,6 +1216,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
   background-color: #0E81C2;
   color: #FFFFFF;
 }
+.document_table table thead a {
+  color: #FFFFFF;
+  text-decoration: underline;
+}
 .document_table table thead tr th {
   padding: 6pt 3pt;
 }

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>960.1037.21083.19336</string> </value>
+                <value> <string>960.55964.9157.39662</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1497443563.95</float>
+                        <float>1500555425.98</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -1396,6 +1396,10 @@ div[data-gadget-scope='erp5_searchfield'] {
       background-color: @colorsubheaderbackground;
       color: @white;
 
+      a {
+        color: @white;
+        text-decoration: underline;
+      }
 
       // XXX Same than cells
       tr { th {