#251: updated pagination, some refactoring

This commit is contained in:
Vokhmin Alexey V 2013-08-05 16:34:01 +04:00
parent 87f7aff544
commit 935cda4a0a
8 changed files with 140 additions and 55 deletions

View File

@ -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;
$scope.isRequest = false;
// Render pagination
$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 array = $("#monitoring_filter").serializeArray();
var params = {};
for(i=0; i<array.length; i++){
var a = array[i];
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;
var params = {};
_.each($("#monitoring_filter").serializeArray(), function(a){
if (a.value) { params[a.name] = a.value; }
});
$location.search(params);
$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.filter = {
page: params['page'] || $scope.defaultValues['page'],
per_page: params['per_page'] || $scope.defaultValues['per_page'],
ownership: params['filter[ownership]'] || $scope.defaultValues['filter[ownership]'],
status: params['filter[status]'],
platform_id: params['filter[platform_id]'],
arch_id: params['filter[arch_id]'],
mass_build_id: params['filter[mass_build_id]'],
updated_at_start: params['filter[updated_at_start]'],
updated_at_end: params['filter[updated_at_end]'],
project_name: params['filter[project_name]'],
id: params['filter[id]']
$scope.params = {
page: params.page || 1,
per_page: params.per_page || 25,
filter: {
ownership: params['filter[ownership]'] || 'owned',
status: params['filter[status]'],
platform_id: params['filter[platform_id]'],
arch_id: params['filter[arch_id]'],
mass_build_id: params['filter[mass_build_id]'],
updated_at_start: params['filter[updated_at_start]'],
updated_at_end: params['filter[updated_at_end]'],
project_name: params['filter[project_name]'],
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);
}]);

View File

@ -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;
}
}

View File

@ -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

View File

@ -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 :page, '{{filter.page}}'
=hidden_field_tag :per_page, '{{params.per_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

View File

@ -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}}'} &nbsp;
.status{'ng-repeat' => 'related in bl.related', :class => '{{related.status_color}}'} &nbsp;
/ 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
#will_paginate{'ng-bind-html-unsafe' => 'will_paginate'}
= render 'shared/angularjs_will_paginate'
= render @project ? 'projects/base/submenu' : 'projects/build_lists/submenu'

View File

@ -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)

View File

@ -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')

View File

@ -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