Add the ability to Sort Recordings (GRN-43) (#327)

* <Added Pagination>

* <Created search bar in Room>

* <Fixed search bar UI>

* <Fixed searching>

* <Modified search>

* <Fixed code style>

* <fixed changes>

* <Added pagination and search for public recordings>

* <added rspec tests>

* <Added and Updated search.js>

* <Fixed live searching for current user room>

* <Fixed live searching for current user room>

* <Added live search for join>

* <Fixed errors>

* <fixed gemfile>

* <Fix gems>

* <>

* <Fixed rspec tests>

* <Added filter ui options>

* <Add sorting functionality>

* <Added sorting functionality for public recordings>

* <Update branch>

* <Fix code>

* <Fix code>

* <Fix code style>

* Update sort.js

app/assets/javascripts/sort.js

+// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+//
+// Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
+//
+// This program is free software; you can redistribute it and/or modify it under the
+// terms of the GNU Lesser General Public License as published by the Free Software
+// Foundation; either version 3.0 of the License, or (at your option) any later
+// version.
+//
+// BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License along
+// with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+
+$(document).on('turbolinks:load', function(){
+  var controller = $("body").data('controller');
+  var action = $("body").data('action');
+
+  if(controller == "rooms" && action == "show" || controller == "rooms" && action == "update"){
+
+    // Choose active header
+    // (Name, Length or Users)
+    $('th').each(function(){
+      if($(this).data("header")){
+        $(this).on('click', function(){    
+          set_active_header($(this).data("header"));
+          sort_by($(this).data("header"), $(this).data('order'));
+        });
+      }
+    });
+
+    // Based on the header (Name, Length or Users) clicked,
+    // Modify the ui for the tables
+    function set_active_header(active_header){
+      $('th').each(function(){
+        if($(this).data("header") == active_header){
+          configure_order($(this));
+        }
+        else{
+          $(this).text($(this).data("header"));
+          $(this).data('order', 'none');
+        }
+      });
+    }
+
+    // Based on the header (Name, Length or Users) clicked,
+    // Modify the ui for the tables
+    function configure_order(header_elem){
+      if(header_elem.data('order') === 'asc'){ // asc
+        header_elem.text(header_elem.data("header") + " ↓");
+        header_elem.data('order', 'desc');
+      }
+      else if(header_elem.data('order') === 'desc'){ // desc
+        header_elem.text(header_elem.data("header"));
+        header_elem.data('order', 'none');
+      }
+      else{ // none
+        header_elem.text(header_elem.data("header") + " ↑");
+        header_elem.data('order', 'asc');
+      }
+    }
+
+    // Given a label and an order, sort recordings by order
+    // under a given label
+    function sort_by(label, order){
+      var recording_list_tbody = $('.table-responsive').find('tbody');
+      if(label === "Name"){
+        sort_recordings(recording_list_tbody, order, "#recording-title");
+      }
+      else if(label === "Length"){
+        sort_recordings(recording_list_tbody, order, "#recording-length");
+      }
+      else if(label === "Users"){
+        sort_recordings(recording_list_tbody, order, "#recording-users");
+      }
+    }
+
+    // Generalized function for sorting recordings
+    function sort_recordings(recording_list_tbody, order, recording_id){
+      recording_list_tbody.find('tr').sort(function(a, b){
+        a_val = $.trim($(a).find(recording_id).text());
+        b_val = $.trim($(b).find(recording_id).text());
+
+        if(order === "asc"){
+          return a_val.localeCompare(b_val);
+        }
+        else if(order === "desc"){
+          return b_val.localeCompare(a_val);
+        }
+      }).appendTo(recording_list_tbody);
+    }
+  }
+});

app/views/shared/_sessions.html.erb

@@ -24,12 +24,16 @@
             <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
               <thead>
                 <tr>
-                  <th><%= t("recording.table.name") %></th>
+                  <th data-header="<%= t("recording.table.name") %>" data-order="none"><%= t("recording.table.name") %></th>
                   <% if recording_thumbnails? %>
                     <th><%= t("recording.table.thumbnails") %></th>
                   <% end %>
-                  <th class="text-left"><%= t("recording.table.length") %></th>
-                  <th class="text-left"><%= t("recording.table.users") %></th>
+                  <th class="text-left" data-header="<%= t("recording.table.length") %>" data-order="none">
+                    <%= t("recording.table.length") %>
+                  </th>
+                  <th class="text-left" data-header="<%= t("recording.table.users") %>" data-order="none">
+                    <%= t("recording.table.users") %>
+                  </th>
                   <th class="text-left"><%= t("recording.table.visibility") %></th>
                   <th><%= t("recording.table.formats") %></th>
                   <% unless only_public %>

app/views/shared/components/_public_recording_row.html.erb

@@ -15,7 +15,7 @@
 
 <tr>
   <td>
-    <div>
+    <div id="recording-title">
       <text>
         <% if recording[:metadata][:name] %>
           <%= recording[:metadata][:name] %>
@@ -38,13 +38,13 @@
       <% end %>
     </td>
   <% end %>
-  <td class="text-left">
+  <td id="recording-length" class="text-left">
     <div class="small text-muted text-uppercase">
       <%= t("recording.table.length") %>
     </div>
     <%= recording_length(recording[:playbacks]) %>
   </td>
-  <td class="text-left">
+  <td id="recording-users" class="text-left">
     <div class="small text-muted text-uppercase">
       <%= t("recording.table.users") %>
     </div>

app/views/shared/components/_recording_row.html.erb

@@ -39,10 +39,10 @@
       <% end %>
     </td>
   <% end %>
-  <td class="text-left">
+  <td id="recording-length" class="text-left" data-full-length="<%=recording[:playbacks].first[:length]%>">
     <%= recording_length(recording[:playbacks]) %>
   </td>
-  <td class="text-left">
+  <td id="recording-users" class="text-left">
     <%= recording[:participants] || "-" %>
   </td>
   <td class="text-left">

config/routes.rb

@@ -65,6 +65,7 @@ Rails.application.routes.draw do
     post '/start', to: 'rooms#start', as: :start_room
     get '/logout', to: 'rooms#logout', as: :logout_room
 
+    # Manage recordings
     scope '/:record_id' do
       post '/', to: 'rooms#update_recording', as: :update_recording
       delete '/', to: 'rooms#delete_recording', as: :delete_recording