[renderjs_ui] ListBox has clickable column names which issue sorting

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html

@@ -28,7 +28,11 @@
              <th data-i18n="Jump">Jump</th>
            {{/if}}
            {{#each head_value}}
-              <th  data-i18n="{{data-i18n}}" class="{{class_value}}">{{text}}</th>
+              {{#if sort_link}}
+              <th class="{{class_value}}"><a href="{{sort_link}}" data-i18n="{{data-i18n}}">{{text}}</a></th>
+              {{else}}
+              <th data-i18n="{{data-i18n}}" class="{{class_value}}">{{text}}</th>
+              {{/if}}
            {{/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.57573.52830.63385</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1489595378.88</float>
+                        <float>1500651800.2</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js

@@ -267,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();
@@ -290,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
@@ -314,37 +314,64 @@
           (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);
-
-        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") {
-                class_value = "ui-icon ui-icon-arrow-up";
-              } else {
-                class_value = "ui-icon ui-icon-arrow-down";
-              }
-              break;
-            }
-          }
-          head_value_list.push({
-            "data-i18n": column_list[i][1],
-            "class_value": class_value,
-            "text": column_list[i][1]
-          });
-        }
+        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 () {
-            var listbox_thead_template,
-              hide_button_text,
-              hide_button_name;
+            // 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], 'descending']];  // make it the only new sort (replace array instead of push)
+                if (current_sort !== undefined && current_sort[1] === 'descending') {
+                  options[sort_key] = [[column[0], 'ascending']];
+                }
+                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) {
+              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";
+                }
+                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]
+              });
+            }
 
             if (gadget.state.show_line_selector) {
               hide_button_text = 'Submit';

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.56198.53416.29457</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1500458423.03</float>
+                        <float>1500626843.31</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 {