quiz results sortable

app/assets/stylesheets/molecules/_tables.scss

@@ -9,6 +9,50 @@ th {
   font-weight: 600;
   padding: $small-spacing 0;
   text-align: left;
+
+  a {
+    display: inline-block;
+    margin-right: 18px;
+    padding-right: 5px;
+    position: relative;
+    text-decoration: none;
+
+    &::after {
+      background-image: asset_data_url("ic_sort_black_24dp_2x.png");
+      background-repeat: no-repeat;
+      background-size: contain;
+      content: "";
+      display: block;
+      height: 18px;
+      left: 100%;
+      opacity: 0.5;
+      position: absolute;
+      top: 4px;
+      width: 18px;
+    }
+
+    &.asc {
+      &::after {
+        background-image: asset_data_url("ic_arrow_drop_up_black_24dp_2x.png");
+        height: 25px;
+        left: calc(100% - 5px);
+        opacity: 1;
+        top: 1px;
+        width: 25px;
+      }
+    }
+
+    &.desc {
+      &::after {
+        background-image: asset_data_url("ic_arrow_drop_down_black_24dp_2x.png");
+        height: 25px;
+        left: calc(100% - 5px);
+        opacity: 1;
+        top: 1px;
+        width: 25px;
+      }
+    }
+  }
 }
 
 td {

app/controllers/admin/result_controller.rb

@@ -1,7 +1,8 @@
 # frozen_string_literal: true
 module Admin
   class ResultController < AdminController
-    #
+    helper_method :sort_column, :sort_direction
+
     # TODO: change context from Candidate to Quiz
     # bypass pundit lockdowns until completed
     after_action :skip_policy_scope
@@ -12,7 +13,7 @@ module Admin
     def index
       @candidates = Candidate.where(completed: true)
                              .includes(:recruiter)
-                             .order(:review_status, completed_at: :desc)
+                             .order("#{sort_column} #{sort_direction}")
     end
 
     def view
@@ -22,5 +23,15 @@ module Admin
       @comments = QuizComment.includes(:user).where(test_hash: @candidate.test_hash).order(:created_at)
       @comment = QuizComment.new
     end
+
+    private
+
+      def sort_column
+        Candidate.column_names.include?(params[:sort]) ? params[:sort] : 'completed_at'
+      end
+
+      def sort_direction
+        %w(asc desc).include?(params[:direction]) ? params[:direction] : 'desc'
+      end
   end
 end

app/helpers/application_helper.rb

@@ -44,4 +44,11 @@ module ApplicationHelper
     @js_blocks << code_label
     content_for :custom_javascipt, &block
   end
+
+  def sortable(column, title = nil)
+    title ||= column.titleize
+    css_class = column == sort_column ? sort_direction.to_s : nil
+    direction = column == sort_column && sort_direction == "desc" ? "asc" : "desc"
+    link_to title, { sort: column, direction: direction }, class: css_class
+  end
 end

app/views/admin/result/index.html.erb

@@ -5,11 +5,11 @@
 <main class="summary_tpl">
   <table cellspacing="0" cellpadding="0">
     <tr>
-      <th>Test ID</th>
-      <th>Experience</th>
-      <th>Client/Project</th>
+      <th><%= sortable "test_hash", "Test ID" %></th>
+      <th><%= sortable "experience" %></th>
+      <th><%= sortable "project", "Client/Project" %></th>
       <th>Recruiter</th>
-      <th>Submitted on</th>
+      <th><%= sortable  "completed_at", "Submitted on" %></th>
       <th>Interview?</th>
     </tr>