From 70609f51a1124be1704f4a61aad9a597c961c0e8 Mon Sep 17 00:00:00 2001
From: Phil Hodgson <bitbucket@philhodgson.net>
Date: Tue, 7 Oct 2014 17:24:37 -0400
Subject: [PATCH] 3618: first steps at making it possible to sort in infinite
 scroll by clicking on a column name

---
 .../app/assets/javascripts/infinite_scroll.js | 28 +++++++++++++++++++
 .../assets/stylesheets/application.css.scss   |  4 +++
 .../projects/_show_data_collections.html.erb  |  2 +-
 .../projects/_show_tab_contents.html.erb      |  8 ++++--
 4 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/apps/workbench/app/assets/javascripts/infinite_scroll.js b/apps/workbench/app/assets/javascripts/infinite_scroll.js
index 6b392c48d7..4c177e1922 100644
--- a/apps/workbench/app/assets/javascripts/infinite_scroll.js
+++ b/apps/workbench/app/assets/javascripts/infinite_scroll.js
@@ -168,4 +168,32 @@ $(document).
                 on('scroll resize', { container: this }, maybe_load_more_content).
                 trigger('scroll');
         });
+    }).
+    on('click', 'th[data-sort-order]', function() {
+        var direction = $(this).data('sort-order-direction');
+        // reverse the current direction, or do ascending if none
+        if( typeof(direction) == 'undefined' || direction == 'desc' ) {
+            direction = 'asc';
+        } else {
+            direction = 'desc';
+        }
+        $(this).data('sort-order-direction', direction);
+        // change the ordering parameter and refresh the data display with the new order
+        var $target = $(this).closest('table').find('[data-infinite-content-params-attr]');
+        var params_attr = 'infinite-content-params-' + $target.data('infinite-content-params-attr');
+        var params = $target.data(params_attr) || {};
+        params.order = $(this).data('sort-order') + ' ' + direction;
+        $target.data('params_attr', params);
+        $target.trigger('refresh-content');
+    }).
+    on('ready arv:pane:loaded refresh-content', function() {
+        $('th[data-sort-order]').each(function() {
+            $(this).find('i').remove();
+            var direction = $(this).data('sort-order-direction');
+            if( typeof(direction) != 'undefined' ) {
+                $(this).append('<i class="fa fa-sort-' + direction + '"/>');
+            } else {
+                $(this).append('<i class="fa fa-sort"/>');
+            }
+        });
     });
diff --git a/apps/workbench/app/assets/stylesheets/application.css.scss b/apps/workbench/app/assets/stylesheets/application.css.scss
index eeb054551a..77fe7126c0 100644
--- a/apps/workbench/app/assets/stylesheets/application.css.scss
+++ b/apps/workbench/app/assets/stylesheets/application.css.scss
@@ -150,6 +150,10 @@ nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:hover {
     color: #800;
 }
 
+th[data-sort-order] {
+    cursor: pointer;
+}
+
 .inline-progress-container div.progress {
     margin-bottom: 0;
 }
diff --git a/apps/workbench/app/views/projects/_show_data_collections.html.erb b/apps/workbench/app/views/projects/_show_data_collections.html.erb
index a2df49ede2..1bf8b459fa 100644
--- a/apps/workbench/app/views/projects/_show_data_collections.html.erb
+++ b/apps/workbench/app/views/projects/_show_data_collections.html.erb
@@ -1,4 +1,4 @@
 <%= render_pane 'tab_contents', to_string: true, locals: {
     filters: [['uuid', 'is_a', "arvados#collection"]],
-    order: 'collections.name'
+    sortable_columns: { 'name' => 'collections.name' }
     }.merge(local_assigns) %>
diff --git a/apps/workbench/app/views/projects/_show_tab_contents.html.erb b/apps/workbench/app/views/projects/_show_tab_contents.html.erb
index 52fd0a3db0..7254d9cf07 100644
--- a/apps/workbench/app/views/projects/_show_tab_contents.html.erb
+++ b/apps/workbench/app/views/projects/_show_tab_contents.html.erb
@@ -1,4 +1,5 @@
 <% order = nil if local_assigns[:order].nil? %>
+<% sortable_columns = {} if local_assigns[:sortable_columns].nil? %>
 <div class="selection-action-container">
   <div class="row">
     <div class="col-sm-5">
@@ -76,14 +77,17 @@
       <col width="60%" style="width: 60%;" />
       <col width="40%" style="width: 40%;" />
     </colgroup>
-    <tbody data-infinite-scroller="#<%= tab_pane %>-scroll" data-infinite-content-href="<%= url_for partial: :contents_rows %>" data-infinite-content-params-projecttab="<%= {filters: filters, order: order}.to_json %>">
+    <tbody data-infinite-scroller="#<%= tab_pane %>-scroll" data-infinite-content-href="<%= url_for partial: :contents_rows %>" data-infinite-content-params-projecttab="<%= {filters: filters, order: order}.to_json %>" data-infinite-content-params-attr="projecttab">
     </tbody>
     <thead>
       <tr>
         <th></th>
         <th></th>
         <th></th>
-        <th>name</th>
+        <% sort_order = sortable_columns['name'] %>
+        <th <%= raw sort_order.nil? ? "" : "data-sort-order='#{sort_order}'" %>>
+          name
+        </th>
         <th>description</th>
       </tr>
     </thead>
-- 
2.30.2