#251: updated pagination, some refactoring

app/assets/javascripts/angularjs/controllers/build_lists_controller.js

@@ -1,23 +1,29 @@
 RosaABF.controller('BuildListsController', ['$scope', '$http', '$location', '$timeout', function($scope, $http, $location, $timeout) {
 
-  $scope.filter         = null;
+  $scope.params         = null;
   $scope.first_run      = true;
   $scope.server_status  = null;
   $scope.build_lists    = [];
   $scope.isRequest      = false; // Disable 'Search' button
-  $scope.will_paginate  = '';
+  $scope.pages          = [];
 
   // Fixes: redirect to page after form submit
   $("#monitoring_filter").on('submit', function(){ return false; });
 
   $scope.getBuildLists = function() {
+    // Disable 'Search' button
     $scope.isRequest = true;
+
     $http.get('/build_lists.json', {params: $location.search()}).success(function(results) {
+      // Render Server status
       $scope.server_status  = results.server_status;
 
+      // TMP fields
       var dictionary  = results.dictionary;
       var build_lists = [];
       var groups      = {};
+
+      // Grouping of build_lists
       _.each(results.build_lists, function(r){
         var bl = new BuildList(r, dictionary);
         var key = bl.project_id + '-' + bl.commit_hash + '-' + bl.user_id;
@@ -29,14 +35,18 @@ RosaABF.controller('BuildListsController', ['$scope', '$http', '$location', '$ti
         }
       });
       
+      // Adds all build_lists into the table (group by group)
       $scope.build_lists    = [];
       _.each(build_lists, function(bl){
         _.each(bl.related, function(b){ $scope.build_lists.push(b); });
       });
 
-      $scope.will_paginate  = results.will_paginate;
+      // Render pagination
-      $scope.isRequest      = false;
+      $scope.pages     = results.pages;
+      // Enable 'Search' button
+      $scope.isRequest = false;
     }).error(function(data, status, headers, config) {
+      // Enable 'Search' button
       $scope.isRequest = false;
     });;
   }
@@ -45,6 +55,7 @@ RosaABF.controller('BuildListsController', ['$scope', '$http', '$location', '$ti
     build_list.relatedHidden = false;
     _.each(build_list.related, function(bl){
       bl.show = true;
+      // Waits for render of build_lists
       $timeout(function() {
         $('#build-list-' + bl.id + ' td:visible').effect('highlight', {}, 1000);
       }, 100);
@@ -57,57 +68,51 @@ RosaABF.controller('BuildListsController', ['$scope', '$http', '$location', '$ti
     build_list.show = true;
   }
 
-  $scope.defaultValues = {
-    'filter[ownership]':  'owned',
-    'per_page':           25,
-    'page':               1
-  }
   $scope.cancelRefresh = null;
   $scope.refresh = function(force) {
     if ($('#autoreload').is(':checked') || force) {
-      if ($.isEmptyObject($location.search()) || !$scope.first_run) {
+      var params = {};
-        var array = $("#monitoring_filter").serializeArray();
+      _.each($("#monitoring_filter").serializeArray(), function(a){
-        var params = {};
+        if (a.value) { params[a.name] = a.value; }
-        for(i=0; i<array.length; i++){
+      });
-          var a = array[i];
+      $location.search(params);
-          if (a.value) {
-            params[a.name] = a.value.match(/^\{/) ? $scope.defaultValues[a.name] : a.value;
-          }
-        }
-        if (force) { params.page = 1; }
-        $location.search(params);
-      }
-      $scope.first_run = false;
       $scope.getBuildLists();
     }
     if (!force) {
       $scope.cancelRefresh = $timeout($scope.refresh, 60000);
     }
   }
-  $scope.refresh();
 
 
   $scope.$on('$locationChangeSuccess', function(event) {
-    $scope.updateFilter();
+    $scope.updateParams();
   });
 
-  $scope.updateFilter = function() {
+  $scope.updateParams = function() {
     var params = $location.search();
-    var current_page = $scope.filter ? $scope.filter.page : null;
+    $scope.params    = {
-    $scope.filter    = {
+      page:               params.page     || 1,
-      page:               params['page'] || $scope.defaultValues['page'],
+      per_page:           params.per_page || 25,
-      per_page:           params['per_page'] || $scope.defaultValues['per_page'],
+      filter: {
-      ownership:          params['filter[ownership]'] || $scope.defaultValues['filter[ownership]'],
+        ownership:          params['filter[ownership]'] || 'owned',
-      status:             params['filter[status]'],
+        status:             params['filter[status]'],
-      platform_id:        params['filter[platform_id]'],
+        platform_id:        params['filter[platform_id]'],
-      arch_id:            params['filter[arch_id]'],
+        arch_id:            params['filter[arch_id]'],
-      mass_build_id:      params['filter[mass_build_id]'],
+        mass_build_id:      params['filter[mass_build_id]'],
-      updated_at_start:   params['filter[updated_at_start]'],
+        updated_at_start:   params['filter[updated_at_start]'],
-      updated_at_end:     params['filter[updated_at_end]'],
+        updated_at_end:     params['filter[updated_at_end]'],
-      project_name:       params['filter[project_name]'],
+        project_name:       params['filter[project_name]'],
-      id:                 params['filter[id]']
+        id:                 params['filter[id]']
+      }
     }
-    if (current_page && current_page != $scope.filter.page) { $scope.getBuildLists(); }
   }
 
+  $scope.goToPage = function(number) {
+    $location.search('page', number);
+    $scope.getBuildLists();
+  }
+
+  $scope.updateParams();
+  // Waits for render of filters
+  $timeout($scope.refresh, 100);
 }]);

app/assets/stylesheets/design/custom.scss

@@ -2090,3 +2090,17 @@ table tbody {
         border-bottom: 2px solid #125687;
     }
 }
+
+#will_paginate .pagination {
+    div {
+        display: inline-block;
+        margin: 0 2px;
+    }
+    a {
+        text-decoration: none;
+    }
+    .disabled a {
+        color: #292929;
+        cursor: default;
+    }
+}

app/helpers/paginate_helper.rb

@@ -10,4 +10,14 @@ module PaginateHelper
     {:page => page, :per_page => per_page}
   end
 
+  def angularjs_will_paginate(collection_or_options = nil, options = {})
+    if collection_or_options.is_a? Hash
+      options, collection_or_options = collection_or_options, nil
+    end
+    options.merge!(renderer: AngularjsLinkRenderer) unless options[:renderer]
+    options.merge!(next_label: I18n.t('datatables.next_label')) unless options[:next_label]
+    options.merge!(previous_label: I18n.t('datatables.previous_label')) unless options[:previous_label]
+    will_paginate *[collection_or_options, options].compact
+  end
+
 end

app/views/projects/build_lists/_filter.html.haml

@@ -14,46 +14,46 @@
         - if current_user
           .bordered.nopadding
             %h3.medium= t("layout.build_lists.ownership.header")
-            =f.hidden_field :ownership, :value => '{{filter.ownership}}'
+            =f.hidden_field :ownership, :value => '{{params.filter.ownership}}'
             .btn-group
               - ['owned', (@project ? nil : 'related'), 'everything'].compact.each do |ownership|
-                -options = {'ng-class' =>"{active: filter.ownership == '#{ownership}'}",:value => ownership, :style => (@project ? 'width:50%;' : '')}
+                -options = {'ng-class' =>"{active: params.filter.ownership == '#{ownership}'}",:value => ownership, :style => (@project ? 'width:50%;' : '')}
                 %button.btn.ownership{options}= t "layout.build_lists.ownership.#{ownership}"
         %h3.medium= t 'number_rows'
-        =hidden_field_tag :per_page, '{{filter.per_page}}'
+        =hidden_field_tag :per_page, '{{params.per_page}}'
-        =hidden_field_tag :page, '{{filter.page}}'
+        =hidden_field_tag :page, '{{params.page}}'
         .btn-group
           -BuildList::Filter::PER_PAGE.each do |num|
-            %button.btn.per_page{:value => num, 'ng-class' => "{active: filter.per_page == #{num}}"}=num
+            %button.btn.per_page{:value => num, 'ng-class' => "{active: params.per_page == #{num}}"}=num
         %h3.medium= t 'activerecord.attributes.build_list.status'
         .lineForm.aside
           = f.select :status, BuildList::STATUSES.collect{|status| [BuildList.human_status(status), status]}, {:include_blank => true},
-            html_options.merge(:id => 'status', 'ng-model' => 'filter.status')
+            html_options.merge(:id => 'status', 'ng-model' => 'params.filter.status')
         .both
         %br/
       .column
         %h3.medium= t 'activerecord.models.platform'
         .lineForm.aside
-          = f.select :platform_id, availables_main_platforms.collect{|pl| [pl.name, pl.id]}, {:include_blank => true}, html_options.merge(:id => 'platform', 'ng-model' => 'filter.platform_id')
+          = f.select :platform_id, availables_main_platforms.collect{|pl| [pl.name, pl.id]}, {:include_blank => true}, html_options.merge(:id => 'platform', 'ng-model' => 'params.filter.platform_id')
         %h3.medium= t 'activerecord.attributes.build_list.arch'
         .lineForm.aside
-          = f.select :arch_id, Arch.recent.collect{|arch| [arch.name, arch.id]}, {:include_blank => true}, html_options.merge(:id => 'architecture', 'ng-model' => 'filter.arch_id')
+          = f.select :arch_id, Arch.recent.collect{|arch| [arch.name, arch.id]}, {:include_blank => true}, html_options.merge(:id => 'architecture', 'ng-model' => 'params.filter.arch_id')
         %h3.medium= t 'activerecord.models.mass_build'
         .lineForm.aside
           = f.select :mass_build_id, mass_build_options, {:include_blank => true},
-            html_options.merge(:id => 'mass_build', 'ng-model' => 'filter.mass_build_id')
+            html_options.merge(:id => 'mass_build', 'ng-model' => 'params.filter.mass_build_id')
 
       .column
         -[:updated_at_start, :updated_at_end].each do |attr|
           -class_name, message = attr == :updated_at_start ? %w[floatleft _on] : %w[floatright until]
           %div{:class => class_name}
             %h3.medium= t message
-            =f.text_field attr, :readonly => "readonly", :size => 10, :class => 'mediumheight min input_cleanse', :value => "{{filter.#{attr}}}"
+            =f.text_field attr, :readonly => "readonly", :size => 10, :class => 'mediumheight min input_cleanse', :value => "{{params.filter.#{attr}}}"
             =link_to image_tag('x.png', :alt => 'x', :class => 'semi'), "#filter_#{attr}", :id => 'updated_at_clear'
         .both
         -%w[project_name id].each do |filter|
           %h3.medium= t "layout.build_lists.#{filter}_search"
-          %input.mediumheight.input_cleanse{:id => "filter_#{filter}", :name => "filter[#{filter}]", :size => "30", :type => "text", :value => "{{filter.#{filter}}}"}
+          %input.mediumheight.input_cleanse{:id => "filter_#{filter}", :name => "filter[#{filter}]", :size => "30", :type => "text", :value => "{{params.filter.#{filter}}}"}
         %br/
         %br/
       .butgrp

app/views/projects/build_lists/index.html.haml

@@ -26,7 +26,7 @@
             %span.icon-chevron-up{'ng-hide' => 'bl.relatedHidden', 'ng-click' => 'hideRelated(bl)'}
           %a{'ng-href' => '{{bl.url}}' } {{bl.id}}
           %div{'ng-show' => 'bl.hasRelated'}
-            %div.status{'ng-repeat' => 'related in bl.related', :class => '{{related.status_color}}'}   
+            .status{'ng-repeat' => 'related in bl.related', :class => '{{related.status_color}}'}   
 
         / status
         %td
@@ -57,7 +57,7 @@
 
         / arch_short
         %td{'ng-show' => 'bl.arch'} {{bl.arch.name}}
-        %td{'ng-hide' => 'bl.arch'}= t("layout.arches.unexisted_arch")
+        %td{'ng-hide' => 'bl.arch'}= t('layout.arches.unexisted_arch')
 
         / user
         %td
@@ -68,7 +68,6 @@
 
   .both
 
-
+  = render 'shared/angularjs_will_paginate'
-  #will_paginate{'ng-bind-html-unsafe' => 'will_paginate'}
 
 = render @project ? 'projects/base/submenu' : 'projects/build_lists/submenu'

app/views/projects/build_lists/index.json.jbuilder

@@ -34,4 +34,4 @@ end
 
 json.server_status  @build_server_status
 json.filter         @filter.try(:options)
-json.will_paginate  will_paginate(@bls).to_s.gsub(/\/build_lists.json/, '/build_lists#/build_lists').html_safe
+json.pages          angularjs_will_paginate(@bls)

app/views/shared/_angularjs_will_paginate.html.haml

@@ -0,0 +1,14 @@
+#will_paginate{'ng-show' => 'pages'}
+  .pagination
+    %div{'ng-class' => "{'disabled': !page.active}", 'ng-repeat' => 'page in pages', 'ng-switch' => 'page.type'}
+      %a{'ng-switch-when' => 'previous_page', 'ng-click' => 'goToPage(page.number)', :href => ''}
+        = t('datatables.previous_label')
+      %a{'ng-switch-when' => 'first', :href => ''}
+        {{page.number}}
+      %a{'ng-switch-when' => 'page', 'ng-click' => 'goToPage(page.number)', :href => ''}
+        {{page.number}}
+      %a{'ng-switch-when' => 'more', 'ng-click' => 'goToPage(page.number)', :href => ''} …
+      %a{'ng-switch-when' => 'last', 'ng-click' => 'goToPage(page.number)', :href => ''}
+        {{page.number}}
+      %a{'ng-switch-when' => 'next_page', 'ng-click' => 'goToPage(page.number)', :href => ''}
+        = t('datatables.next_label')

lib/ext/angularjs_link_renderer.rb

@@ -0,0 +1,43 @@
+class Array
+  def html_safe
+    self
+  end
+end
+
+
+class AngularjsLinkRenderer < WillPaginate::ActionView::LinkRenderer
+
+  def to_html
+    pagination.map do |item|
+      item.is_a?(Fixnum) ? page_number(item) : send(item)
+    end
+  end
+
+  protected
+  
+    def page_number(page)
+      unless page == current_page
+        {:active => true, :number => page, :type => :page}
+      else
+        {:active => false, :number => page, :type => :first}
+      end
+    end
+    
+    def gap
+      nil
+    end
+    
+    def next_page
+      num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
+      previous_or_next_page(num, @options[:next_label], :next_page)
+    end
+    
+    def previous_or_next_page(page, text, classname)
+      if page
+        {:active => true, :number => page, :type => classname}
+      else
+        {:active => false, :number => page, :type => classname}
+      end
+    end
+    
+end