#26: update table on issues page with Ajax

app/assets/javascripts/extra/tracker.js

@@ -33,6 +33,39 @@ $(document).ready(function() {
     return send_index_tracker_request('GET');
   });
 
+  $("#table1.issues-table .pagination a").live('click', function() {
+    var a = $(this);
+    var page = parseInt($('.pagination .current').text());
+    if (a.hasClass('next_page')) {
+      page += 1;
+    } else {
+      if (a.hasClass('previous_page')) {
+        page -= 1;
+      } else {
+        page = a.text();
+      }
+    }
+    $('.pagination .current').html(page);
+    return send_index_tracker_request('GET');
+  });
+
+  $(".issues-filter .tabnav-tabs li").live('click', function() {
+    var li = $(this);
+    var items = $('.issues-filter .tabnav-tabs');
+    if (li.hasClass('list-browser-sorts')) {
+      if (li.hasClass('selected')) {
+        var direction = li.hasClass('asc') ? 'desc' : 'asc';
+        li.removeClass('asc').removeClass('desc').addClass(direction);
+      } else {
+        items.find('.list-browser-sorts').removeClass('selected');
+      }
+    } else {
+      items.find('.list-browser-filter-tabs').removeClass('selected');
+    }
+    li.addClass('selected');
+    return send_index_tracker_request('GET');
+  });
+
   $("#filter_issues #myradio1").live('change', function(event) {
     return send_index_tracker_request('GET');
   });
@@ -77,11 +110,16 @@ $(document).ready(function() {
     var filter_form = $('#filter_issues');
     url = url || filter_form.attr("action");
     var label_form = $('#filter_labels');
-    var status = 'status=' + $('#issues_status').attr('value');
+    var issues_filter = $('.issues-filter');
+    var status = 'status=' + (issues_filter.find('.open').hasClass('selected') ? 'open' : 'closed');
+    var direction = 'direction=' + (issues_filter.find('.list-browser-sorts').hasClass('asc') ? 'asc' : 'desc');
+    var sort = 'sort=' + (issues_filter.find('.list-browser-sorts.updated').hasClass('selected') ? 'updated' : 'created');
+    var page = $('.pagination .current').text();
+    page = 'page=' + (page.length == 0 ? 1 : page);
     $.ajax({
       type: type_request,
       url: url,
-      data: filter_form.serialize() + '&' + label_form.serialize() + '&' + status + '&' + data,
+      data: filter_form.serialize() + '&' + label_form.serialize() + '&' + status + '&' + direction + '&' + sort + '&' + page + '&' + data,
       success: function(data){
                  $('article').html(data);
                  $(".niceRadio").each(function() { changeRadioStart(jQuery(this)) });

app/controllers/projects/issues_controller.rb

@@ -18,13 +18,13 @@ class Projects::IssuesController < Projects::BaseController
     @issues = @issues.search(params[:search_issue])
 
     @opened_issues, @closed_issues = @opened_issues_count, @issues.closed_or_merged.count
-    if params[:status] == 'closed'
+    @status = params[:status] == 'closed' ? :closed : :open
-      @issues, @status = @issues.closed_or_merged, params[:status]
+    @issues = @issues.send( (@status == :closed) ? :closed_or_merged : :not_closed_or_merged )
-    else
-      @issues, @status = @issues.not_closed_or_merged, 'open'
-    end
 
-    @issues = @issues.includes(:assignee, :user, :pull_request).def_order.uniq
+    @sort       = params[:sort] == 'updated' ? :updated : :created
+    @direction  = params[:direction] == 'asc' ? :asc : :desc
+    @issues = @issues.order("issues.#{@sort}_at #{@direction}")
+    @issues = @issues.includes(:assignee, :user, :pull_request).uniq
                      .paginate :per_page => 10, :page => params[:page]
     if status == 200
       render 'index', :layout => request.xhr? ? 'with_sidebar' : 'application'

app/views/projects/issues/_issues_table.html.haml

@@ -11,18 +11,20 @@
 #description-top.issues-filter
   .project-tabnav
     %ul.tabnav-tabs
-      - open = @status == 'open'
+      %li.list-browser-filter-tabs.open{:class => ('selected' if @status == :open)}
-      %li{:class => (open ? 'selected' : '')}
+        %a= "#{t('layout.issues.statuses.open')} (#{@opened_issues})"
-        %a= 'Open'
+      %li.list-browser-filter-tabs.closed{:class => ('selected' if @status != :open)}
-      %li{:class => (!open ? 'selected' : '')}
+        %a= "#{t('layout.issues.statuses.closed')} (#{@closed_issues})"
-        %a= 'Closed'
+      %li.list-browser-sorts.updated{:class => ("selected #{@direction}" if @sort == :updated)}
-      %li.list-browser-sorts
+        - if @sort == :updated
-        %a= 'Updated'
+          %i{:class => (@direction == :asc ? 'icon-chevron-up' : 'icon-chevron-down')}
-      %li.list-browser-sorts.selected.desc
+        %a= t('layout.issues.sort.updated')
-        %i.icon-chevron-up
+      %li.list-browser-sorts.created{:class => ("selected #{@direction}" if @sort == :created)}
-        %a= 'Submitted'
+        - if @sort == :created
+          %i{:class => (@direction == :asc ? 'icon-chevron-up' : 'icon-chevron-down')}
+        %a= t('layout.issues.sort.submitted')
 
-#table1
+#table1.issues-table
   %table#myTable.tablesorter.tracker{:cellpadding => "0", :cellspacing => "0"}
     %tbody
       = render :partial => 'projects/issues/issue', :collection => issues

config/locales/models/issue.en.yml

@@ -23,6 +23,9 @@ en:
       confirm_delete: Are you sure you want to delete this task?
       edit_header: Edit task
       create_header: Create task
+      sort:
+        updated: Updated
+        submitted: Submitted
       statuses:
         open: Open
         closed: Closed

config/locales/models/issue.ru.yml

@@ -23,6 +23,9 @@ ru:
       confirm_delete: Вы уверены, что хотите удалить эту задачу?
       edit_header: Редактирование задачи
       create_header: Создать задачу
+      sort:
+        updated: Обнавлены
+        submitted: Созданы
       statuses:
         open: Открытые
         closed: Закрытые