TCS-0140: Sortable index column headers

app/assets/stylesheets/application.scss

@@ -13,5 +13,6 @@
  */
 
 @import 'bootstrap';
-@import 'layout';
 @import 'forms';
+@import 'index_table';
+@import 'layout';

app/assets/stylesheets/index_table.css.scss

@@ -0,0 +1,29 @@
+th.index-header {
+  min-height: 24px;
+}
+
+th.model-id {
+  width: 10%;
+}
+
+th.actions {
+  width: 15%;
+}
+
+th.sortable a {
+  padding-right: 20px;
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+th.sortable a.sortable {
+  background-image: url(image_path('sortable.png'));
+}
+
+th.sortable a.sorted-asc {
+  background-image: url(image_path('sorted_asc.png'));
+}
+
+th.sortable a.sorted-desc {
+  background-image: url(image_path('sorted_desc.png'));
+}

app/controllers/socials_controller.rb

@@ -2,7 +2,12 @@ class SocialsController < ApplicationController
   load_and_authorize_resource
 
   def index
-    @socials = Social.accessible_by(current_ability).page(params[:page])
+    sort = params[:sort] || :id
+    direction = params[:direction] || :asc
+
+    @socials = Social.accessible_by(current_ability)
+                     .order(sort => direction)
+                     .page(params[:page])
   end
 
   def show

app/controllers/users_controller.rb

@@ -2,7 +2,13 @@ class UsersController < ApplicationController
   load_and_authorize_resource
 
   def index
-    @users = User.accessible_by(current_ability).page(params[:page])
+    sort = params[:sort] || :id
+    direction = params[:direction] || :asc
+
+    # unsafe: .order("#{params[:sort]} #{params[:direction]}")
+    @users = User.accessible_by(current_ability)
+                 .order(sort => direction)
+                 .page(params[:page])
   end
 
   def show

app/helpers/index_helper.rb

@@ -0,0 +1,20 @@
+module IndexHelper
+  def sortable(column, title = nil)
+    title ||= column.titleize
+    if column == params[:sort]
+      css_class = "sorted-#{params[:direction]}"
+      direction = (params[:direction] == 'asc') ? 'desc' : 'asc'
+    else
+      css_class = 'sortable'
+      direction = 'asc'
+    end
+
+    raw '<th class="sortable">' +
+        (link_to I18n.t("sortable.#{controller_name}.#{column}"), 
+         request.query_parameters.merge(sort: column, 
+                                        direction: direction, 
+                                        page: nil), 
+         { class: css_class }) +
+        '</th>'
+  end
+end

app/views/socials/_index_table.html.erb

@@ -1,12 +1,10 @@
 <div id="index-table">
 
 <table class="table table-sm table-striped">
-  <tr>
+  <tr class="index-header">
     <th class="model-id">ID</th>
-    <%#= sortable 'name' %>
-    <%#= sortable 'char_no_arg', 'Sample' %>
-    <th>Name</th>
-    <th>Sample</th>
+    <%= sortable 'name' %>
+    <%= sortable 'char_no_arg' %>
     <th colspan="3" class="actions"></th>
   </tr>
 

app/views/users/_index_table.html.erb

@@ -3,21 +3,17 @@
 <table class=" table table-striped">
   <tr>
     <th class="model-id">ID</th>
-      <%#= sortable 'first_name', 'Name' %>
-      <%#= sortable 'email' %>
-      <%#= sortable 'role_id' %>
-      <%#= sortable 'updated_at' %>
-    <th>Name</th>
-    <th>Email</th>
-    <th>Role</th>
-    <th>Updated At</th>
+      <%= sortable 'first_name' %>
+      <%= sortable 'email' %>
+      <%= sortable 'role_id' %>
+      <%= sortable 'updated_at' %>
     <th colspan="3" class="actions"></th>
   </tr>
 
   <% @users.each do |user| %>
     <tr>
       <td><%= user.id %></td>
-      <td><%= user.name_display %></td>
+      <td><%= user.first_name %></td>
       <td><%= user.email %></td>
       <td><%= user.role.to_s %></td>
       <td><%= user.updated_at %></td>

config/locales/sortable.yml

@@ -0,0 +1,10 @@
+en:
+  sortable:
+    socials:
+      char_no_arg: "Sample"
+      name: "Name"
+    users:
+      email: "Email"
+      first_name: "Name"
+      role_id: "Role"
+      updated_at: "Last Update"