Add datatable to all teams page [SCI-936]

app/assets/javascripts/users/settings/teams.js

@@ -56,4 +56,38 @@ function initLeaveTeams() {
   );
 }
 
+// Initialize teams DataTable
+function initTeamsTable() {
+  teamsDatatable = $('#teams-table').DataTable({
+    order: [[0, 'asc']],
+    dom: 'RBltpi',
+    stateSave: true,
+    buttons: [],
+    processing: true,
+    serverSide: true,
+    ajax: {
+      url: $('#teams-table').data('source'),
+      type: 'POST'
+    },
+    colReorder: {
+      fixedColumnsLeft: 1000000 // Disable reordering
+    },
+    columnDefs: [{
+      targets: [0, 1],
+      orderable: true,
+      searchable: false
+    }, {
+      targets: [2],
+      searchable: false,
+      orderable: true
+    }, {
+      targets: [3],
+      searchable: false,
+      orderable: false,
+      sWidth: '1%'
+    }]
+  });
+}
+
+initTeamsTable();
 initLeaveTeams();

app/assets/stylesheets/themes/scinote.scss

@@ -732,6 +732,15 @@ a[data-toggle="tooltip"] {
   text-align: center;
 }
 
+// Teams datatable
+.teams-datatable {
+  margin-bottom: 20px;
+
+  .dataTables_paginate {
+    float: right;
+  }
+}
+
 /** Users datatable */
 .panel-team-users .panel-body {
   padding-bottom: 0;

app/controllers/users/settings_controller.rb

@@ -9,6 +9,7 @@ class Users::SettingsController < ApplicationController
     :teams,
     :team,
     :create_team,
+    :teams_datatable,
     :team_users_datatable,
     :tutorial,
     :reset_tutorial,
@@ -114,6 +115,14 @@ class Users::SettingsController < ApplicationController
     end
   end
 
+  def teams_datatable
+    respond_to do |format|
+      format.json do
+        render json: ::TeamsDatatable.new(view_context, @user)
+      end
+    end
+  end
+
   def team_users_datatable
     respond_to do |format|
       format.json {

app/datatables/teams_datatable.rb

@@ -0,0 +1,106 @@
+class TeamsDatatable < AjaxDatatablesRails::Base
+  include InputSanitizeHelper
+
+  def_delegator :@view, :link_to
+  def_delegator :@view, :team_path
+  def_delegator :@view, :leave_user_team_html_path
+
+  MEMEBERS_SORT_COL = 'members'.freeze
+
+  def initialize(view, user)
+    super(view)
+    @user = user
+  end
+
+  def sortable_columns
+    @sortable_columns ||= [
+      'Team.name',
+      'UserTeam.role',
+      MEMEBERS_SORT_COL
+    ]
+  end
+
+  private
+
+  # Returns json of current samples (already paginated)
+  def data
+    records.map do |record|
+      {
+        'DT_RowId': record.id,
+        '0': if record.admin?
+               link_to(escape_input(record.team.name), team_path(record.team))
+             else
+               escape_input(record.team.name)
+             end,
+        '1': escape_input(record.role_str),
+        '2': if record.guest?
+               I18n.t('users.settings.teams.index.na')
+             else
+               record.team.users.count
+             end,
+        '3': leave_team_button(record)
+      }
+    end
+  end
+
+  # Overwrite default pagination method as here
+  # we need to be able work also with arrays
+  def paginate_records(records)
+    records.to_a.drop(offset).first(per_page)
+  end
+
+  def load_paginator
+    self
+  end
+
+  # Overwrite default sort method to handle custom members column
+  # which is calculated in code and not present in DB
+  def sort_records(records)
+    if params[:order].present? && params[:order].length == 1
+      if sort_column(params[:order].values[0]) == MEMEBERS_SORT_COL
+        records = records.sort_by(&proc { |ut| ut.team.users.count })
+        if params[:order].values[0]['dir'] == 'asc'
+          return records
+        elsif params[:order].values[0]['dir'] == 'desc'
+          return records.reverse
+        end
+      else
+        super(records)
+      end
+    else
+      super(records)
+    end
+  end
+
+  # If user is last admin of team, don't allow
+  # him/her to leave team
+  def leave_team_button(user_team)
+    button = "<span class=\"glyphicon glyphicon-log-out\"></span>
+              <span class=\"hidden-xs\">
+                #{I18n.t('users.settings.teams.index.leave')}
+              </span>"
+    team = user_team.team
+    if user_team.admin? && team.user_teams.where(role: 2).count <= 1
+      button.prepend('<div class="btn btn-default btn-xs"
+                      type="button" disabled="disabled">')
+      button << '</div>'
+    else
+      button = link_to(
+        button.html_safe,
+        leave_user_team_html_path(user_team, format: :json),
+        remote: true, class: 'btn btn-default btn-xs', type: 'button',
+        data: { action: 'leave-user-team' }
+      )
+    end
+    button
+  end
+
+  # Query database for records (this will be later paginated and filtered)
+  # after that "data" function will return json
+  def get_raw_records
+    UserTeam
+      .includes(:team)
+      .references(:team)
+      .where(user: @user)
+  end
+end

app/views/users/settings/teams.html.erb

@@ -22,71 +22,19 @@
     </div>
 
     <% if @member_of > 0 %>
-      <table class="table">
-        <thead>
-          <tr>
-            <th><%=t "users.settings.teams.index.thead_name" %></th>
-            <th><%=t "users.settings.teams.index.thead_role" %></th>
-            <th class="hidden-xs"><%=t "users.settings.teams.index.thead_created_at" %></th>
-            <th class="hidden-xs"><%=t "users.settings.teams.index.thead_joined_on" %></th>
-            <th><%=t "users.settings.teams.index.thead_members" %></th>
-            <th>&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @user_teams.each do |user_team| %>
-            <% team = user_team.team %>
+      <div class="teams-datatable">
+        <table id="teams-table" class="table" data-source="<%= teams_datatable_path(format: :json) %>">
+          <thead>
             <tr>
-              <td>
-                <% if user_team.admin? %>
-                  <%= link_to team.name, team_path(team) %>
-                <% else %>
-                  <%= team.name %>
-                <% end %>
-              </td>
-              <td><%= user_team.role_str %></td>
-              <td class="hidden-xs">
-                <% if user_team.guest? %>
-                  <%= t("users.settings.teams.index.na") %>
-                <% else %>
-                  <%= l(team.created_at, format: :full) %>
-                <% end %>
-              </td>
-              <td class="hidden-xs"><%= l(user_team.created_at, format: :full) %></td>
-              <td>
-                <% if user_team.guest? %>
-                  <%= t("users.settings.teams.index.na") %>
-                <% else %>
-                  <%= team.users.count %>
-                <% end %>
-              </td>
-              <td>
-                <!-- If user is last admin of team, don't allow
-                him/her to leave team -->
-                <% if user_team.admin? && team.user_teams.where(role: 2).count <= 1 %>
-                  <div class="btn btn-default btn-xs" type="button" disabled="disabled">
-                    <span class="glyphicon glyphicon-log-out"></span>
-                    <span class="hidden-xs">
-                      <%= t("users.settings.teams.index.leave") %>
-                    </span>
-                  </div>
-                <% else %>
-                  <%= link_to leave_user_team_html_path(user_team, format: :json),
-                              remote: true,
-                              class: 'btn btn-default btn-xs',
-                              type: 'button',
-                              data: { action: 'leave-user-team' } do %>
-                    <span class="glyphicon glyphicon-log-out"></span>
-                    <span class="hidden-xs">
-                      <%= t("users.settings.teams.index.leave") %>
-                    </span>
-                  <% end %>
-                <% end %>
-              </td>
+              <th id="team-name"><%= t("users.settings.teams.index.thead_name") %></th>
+              <th id="team-role"><%= t("users.settings.teams.index.thead_role") %></th>
+              <th id="team-members"><%= t("users.settings.teams.index.thead_members") %></th>
+              <th>&nbsp;</th>
             </tr>
-          <% end %>
-        </tbody>
-      </table>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
     <% else %>
       <br />
     <% end %>
@@ -94,4 +42,5 @@
 </div>
 
 <%= render partial: "users/settings/teams/leave_user_team_modal.html.erb" %>
+<%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag "users/settings/teams" %>

config/routes.rb

@@ -63,6 +63,9 @@ Rails.application.routes.draw do
   get 'users/settings/teams/:team_id/description',
       to: 'users/settings#team_description',
       as: 'team_description'
+  post 'users/settings/teams/teams_datatable',
+       to: 'users/settings#teams_datatable',
+       as: 'teams_datatable'
   post 'users/settings/teams/:team_id/users_datatable',
        to: 'users/settings#team_users_datatable',
        as: 'team_users_datatable'