Fix pagination + sorting on tax screen

@claudiosmweb

assets/css/admin.scss

@@ -1880,6 +1880,13 @@ a.import_rates {
 		font-size: 1.2em;
 	}
 }
+#rates-pagination {
+	float: right;
+	margin-right: .5em;
+	.tablenav {
+		margin: 0;
+	}
+}
 
 table.wc_tax_rates,
 table.wc_input_table {

assets/js/admin/settings-views-html-settings-tax.js

@@ -173,6 +173,9 @@
 							current_page: this.page,
 							qty_pages:    qty_pages
 						} ) );
+					} else {
+						$pagination.empty();
+						view.page = 1;
 					}
 
 					// Disable sorting if there is a search term filtering the items.
@@ -243,6 +246,8 @@
 								return parseInt( val, 10 );
 							}
 						);
+						// Move the last page
+						view.page = view.qty_pages;
 					}
 
 					rates[ newRow.tax_rate_id ]   = newRow;
@@ -258,27 +263,13 @@
 						model   = view.model,
 						rates   = _.indexBy( model.get( 'rates' ), 'tax_rate_id' ),
 						changes = {},
-						$current, current_id, current_order, rates_to_reorder, reordered_rates;
+						$current, current_id;
 
 					event.preventDefault();
 
 					if ( $current = $tbody.children( '.current' ) ) {
 						$current.each(function(){
 							current_id    = $( this ).data('id');
-							current_order = parseInt( rates[ current_id ].tax_rate_order, 10 );
-
-							rates_to_reorder = _.filter( rates, function( rate ) {
-								if ( parseInt( rate.tax_rate_order, 10 ) > current_order ) {
-									return true;
-								}
-								return false;
-							} );
-
-							reordered_rates = _.map( rates_to_reorder, function( rate ) {
-								rate.tax_rate_order--;
-								changes[ rate.tax_rate_id ] = _.extend( changes[ rate.tax_rate_id ] || {}, { tax_rate_order : rate.tax_rate_order } );
-								return rate;
-							} );
 
 							delete rates[ current_id ];
 
@@ -368,53 +359,29 @@
 
 					model.setRateAttribute( id, attribute, val );
 				},
-				updateModelOnSort: function( event, ui ) {
+				updateModelOnSort: function( event ) {
 					var view         = event.data.view,
 						model        = view.model,
-						$tr          = ui.item,
-						tax_rate_id  = $tr.data( 'id' ),
 						rates        = _.indexBy( model.get( 'rates' ), 'tax_rate_id' ),
-						old_position = rates[ tax_rate_id ].tax_rate_order,
+						changes      = {};
-						new_position = $tr.index() + ( ( view.page - 1 ) * view.per_page ),
-						which_way    = ( new_position > old_position ) ? 'higher' : 'lower',
-						changes      = {},
-						rates_to_reorder, reordered_rates;
 
-					rates_to_reorder = _.filter( rates, function( rate ) {
+					_.each( rates, function( rate ) {
-						var order  = parseInt( rate.tax_rate_order, 10 ),
+						var new_position = 0;
-							limits = [ old_position, new_position ];
+						var old_position = parseInt( rate.tax_rate_order, 10 );
 
-						if ( parseInt( rate.tax_rate_id, 10 ) === parseInt( tax_rate_id, 10 ) ) {
+						if ( $table.find( 'tr[data-id="' + rate.tax_rate_id + '"]').size() ) {
-							return true;
+							new_position = parseInt( $table.find( 'tr[data-id="' + rate.tax_rate_id + '"]').index(), 10 ) + parseInt( ( view.page - 1 ) * view.per_page, 10 );
-						} else if ( order > _.min( limits ) && order < _.max( limits ) ) {
+						} else {
-							return true;
+							new_position = old_position;
-						} else if ( 'higher' === which_way && order === _.max( limits ) ) {
-							return true;
-						} else if ( 'lower' === which_way && order === _.min( limits ) ) {
-							return true;
-						}
-						return false;
-					} );
-
-					reordered_rates = _.map( rates_to_reorder, function( rate ) {
-						var order = parseInt( rate.tax_rate_order, 10 );
-
-						if ( parseInt( rate.tax_rate_id, 10 ) === parseInt( tax_rate_id, 10 ) ) {
-							rate.tax_rate_order = new_position;
-						} else if ( 'higher' === which_way ) {
-							rate.tax_rate_order = order - 1;
-						} else if ( 'lower' === which_way ) {
-							rate.tax_rate_order = order + 1;
 						}
 
-						changes[ rate.tax_rate_id ] = _.extend( changes[ rate.tax_rate_id ] || {}, { tax_rate_order : rate.tax_rate_order } );
+						if ( old_position !== new_position ) {
-
+							changes[ rate.tax_rate_id ] = _.extend( changes[ rate.tax_rate_id ] || {}, { tax_rate_order : new_position } );
-						return rate;
+						}
 					} );
 
-					if ( reordered_rates.length ) {
+					if ( _.size( changes ) ) {
 						model.logChanges( changes );
-						view.render(); // temporary, probably should get yanked.
 					}
 				},
 				sanitizePage: function( page_num ) {
@@ -432,8 +399,6 @@
 			} ),
 			WCTaxTableInstance = new WCTaxTableViewConstructor({
 				model:    WCTaxTableModelInstance,
-				// page:     data.page,  // I'd prefer to have these two specified down here in the instance,
-				// per_page: data.limit, // but it doesn't seem to recognize them in render if I do. :\
 				el:       '#rates'
 			} );
 

includes/admin/settings/views/html-settings-tax.php

@@ -5,9 +5,11 @@ if ( ! defined( 'ABSPATH' ) ) {
 ?>
 
 <div class="wc-tax-rates-search" id="rates-search">
-	<input type="search" class="wc-tax-rates-search-field" placeholder="<?php esc_attr_e( 'Search…', 'woocommerce' ); ?>" value="<?php if ( isset( $_GET['s'] ) ) { echo esc_attr( $_GET['s'] ); } ?>" />
+	<input type="search" class="wc-tax-rates-search-field" placeholder="<?php esc_attr_e( 'Search&hellip;', 'woocommerce' ); ?>" value="<?php if ( isset( $_GET['s'] ) ) { echo esc_attr( $_GET['s'] ); } ?>" />
 </div>
 
+<div id="rates-pagination"></div>
+
 <h3><?php printf( __( '"%s" Tax Rates', 'woocommerce' ), $current_class ? esc_html( $current_class ) : __( 'Standard', 'woocommerce' ) ); ?></h3>
 
 <table class="wc_tax_rates wc_input_table sortable widefat">