raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-01 02:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace pagination with infinite scroll on BPE

Browse Source
This commit is contained in:
Rob H
2014-07-31 10:42:34 +10:00
parent 1abbc7fa86
commit 9922dc6e79
4 changed files with 9 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/admin.js.coffee
View File

@@ -1,3 +1,3 @@
angular.module("ofn.admin", ["ngResource", "ngAnimate", "ofn.dropdown", "admin.products"]).config ($httpProvider) ->
angular.module("ofn.admin", ["ngResource", "ngAnimate", "ofn.dropdown", "admin.products", "infinite-scroll"]).config ($httpProvider) ->
$httpProvider.defaults.headers.common["X-CSRF-Token"] = $("meta[name=csrf-token]").attr("content")
$httpProvider.defaults.headers.common["Accept"] = "application/json, text/javascript, */*"

1
app/assets/javascripts/admin/all.js
View File

@@ -16,6 +16,7 @@
//= require admin/spree_auth
//= require admin/spree_promo
//= require admin/spree_paypal_express
//= require ../shared/ng-infinite-scroll.min.js
//= require ./admin
//= require ./enterprises/enterprises
//= require ./payment_methods/payment_methods

25
app/assets/javascripts/admin/bulk_product_update.js.coffee
View File

@@ -30,24 +30,12 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", [
filters: { title: "Filter Products", visible: false }
column_toggle: { title: "Toggle Columns", visible: false }
$scope.perPage = 25
$scope.currentPage = 1
$scope.products = []
$scope.filteredProducts = []
$scope.currentFilters = []
$scope.totalCount = -> $scope.filteredProducts.length
$scope.totalPages = -> Math.ceil($scope.totalCount()/$scope.perPage)
$scope.firstVisibleProduct = -> ($scope.currentPage-1)*$scope.perPage+1
$scope.lastVisibleProduct = -> Math.min($scope.totalCount(),$scope.currentPage*$scope.perPage)
$scope.setPage = (page) -> $scope.currentPage = page
$scope.minPage = -> Math.max(1,Math.min($scope.totalPages()-4,$scope.currentPage-2))
$scope.maxPage = -> Math.min($scope.totalPages(),Math.max(5,$scope.currentPage+2))
$scope.limit = 15
$scope.productsWithUnsavedVariants = []
$scope.$watch ->
$scope.totalPages()
, (newVal, oldVal) ->
$scope.currentPage = Math.max $scope.totalPages(), 1 if newVal != oldVal && $scope.totalPages() < $scope.currentPage
$scope.initialise = (spree_api_key) ->
authorise_api_reponse = ""
@@ -328,6 +316,9 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", [
products = (product for product in product_list when product.id == id)
if products.length == 0 then null else products[0]
$scope.incrementLimit = ->
if $scope.limit < $scope.products.length
$scope.limit = $scope.limit + 5
$scope.setMessage = (model, text, style, timeout) ->
model.text = text
@@ -464,11 +455,3 @@ toObjectWithIDKeys = (array) ->
object[array[i].id].variants = toObjectWithIDKeys(array[i].variants) if array[i].hasOwnProperty("variants") and array[i].variants instanceof Array
object
subset = (bigArray,smallArray) ->
if smallArray instanceof Array && bigArray instanceof Array && smallArray.length > 0
for item in smallArray
return false if angular.toJson(bigArray).indexOf(angular.toJson(item)) == -1
return true
else
return false

31
app/views/spree/admin/products/bulk_edit.html.haml
View File

@@ -60,33 +60,8 @@
%div.sixteen.columns.alpha{ 'ng-hide' => 'loading || products.length == 500 || products.length == 0' }
%div.quick_search{ :class => "five columns omega" }
%input.search{ :class => "four columns alpha", 'ng-model' => 'query', :name => "quick_filter", :type => 'text', 'placeholder' => 'Quick Search' }
%div.pagination{ :class => "seven columns omega" }
%div.pagenav{ :class => "two columns alpha" }
%span.first
%a{ :href => "#", 'ng-click' => "currentPage = 1", 'ng-show' => "currentPage > 1" }
&laquo;&nbsp;First
%span.prev
%a{ :href => "#", 'ng-click' => "currentPage = currentPage - 1", 'ng-show' => "currentPage > 1" }
&lsaquo;&nbsp;Prev
%div.pagenav{ :class => "columns omega" }
%span.page{ 'ng-repeat' => "page in [] | rangeArray:minPage():maxPage()", 'ng-class' => "{current: currentPage==page}" }
%a{ :href => "#", 'ng-click' => "setPage(page)" }
{{page}}
%span{ 'ng-show' => "maxPage() < totalPages()" } ...
%div.pagenav{ :class => "two columns omega" }
%span.next
%a{ :href => "#", 'ng-click' => "currentPage = currentPage + 1", 'ng-show' => "currentPage < totalPages()" }
Next&nbsp;&rsaquo;
%span.last
%a{ :href => "#", 'ng-click' => "currentPage = totalPages()", 'ng-show' => "currentPage < totalPages()" }
Last&nbsp;&raquo;
%div.pagination_info{ :class => 'four columns alpha' }
Show&nbsp;
%select{ 'ng-model' => 'perPage', :name => 'perPage', 'ng-options' => 'pp for pp in [25,50,100,200]'}
&nbsp;per page
%br
%span Displaying {{firstVisibleProduct()}}-{{lastVisibleProduct()}} of {{totalCount()}} products
%table.index#listing_products.bulk
%div.spacer{ :class => "nine columns omega" } &nbsp;
%table.index#listing_products.bulk{ "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1" }
%colgroup
%col
%col
@@ -115,7 +90,7 @@
%th.actions
%th.actions
%th.actions
%tbody{ 'ng-repeat' => 'product in filteredProducts = (products | filter:query)', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'", 'ng-show' => "$index >= perPage*(currentPage-1) && $index < perPage*currentPage" }
%tbody{ 'ng-repeat' => 'product in filteredProducts = ( products | filter:query | limitTo:limit )', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'" }
%tr.product{ :id => "p_{{product.id}}" }
%td.left-actions
%a{ 'ofn-toggle-variants' => 'true', :class => "view-variants icon-chevron-right", 'ng-show' => 'hasVariants(product)' }