Added cancel button to shipping zones UI

Closes #10754

assets/css/admin.scss

@@ -2414,6 +2414,9 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
 		input, select, textarea {
 			width: 100%;
 		}
+		a.wc-shipping-zone-delete {
+			color: red;
+		}
 		.wc-shipping-zone-postcodes-toggle {
 			float: right;
 			margin: 0;
@@ -2441,6 +2444,8 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
 		}
 		ul {
 			color: #999;
+			position: relative;
+			padding-right: 32px;
 			li {
 				display: inline;
 				margin: 0 0 0 0;
@@ -2458,14 +2463,39 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
 				margin: 0 !important;
 			}
 			li.wc-shipping-zone-methods-add-row {
-				margin: .5em 0 0;
+				position: absolute;
+				right: 0;
+				top: 0;
 			}
 		}
-		.button {
+		.add_shipping_method {
-			display: inline-block;
+			display: block;
+			width: 24px;
+			padding: 24px 0 0 0;
+			height: 0;
+			overflow: hidden;
+			cursor: pointer;
+
+			&:before {
+				@include icon;
+				font-family: 'Dashicons';
+				content: "\f502";
+				color: #999;
+				vertical-align: middle;
+				line-height: 24px;
+				font-size: 16px;
+				margin: 0;
+			}
+
+			&.disabled {
+				cursor: not-allowed;
+				&:before {
+					color: #ccc;
+				}
+			}
 		}
 	}
-	.wc-shipping-zone-actions, .wc-shipping-zone-method-actions, .wc-shipping-class-actions {
+	.wc-shipping-zone-method-actions, .wc-shipping-class-actions {
 		width: 4em;
 
 		a {

assets/js/admin/wc-shipping-zones.js

@@ -28,6 +28,23 @@
 					this.changes = changes;
 					this.trigger( 'change:zones' );
 				},
+				discardChanges: function( id ) {
+					var changes  = this.changes || {},
+						position = null;
+
+					if ( changes[ id ] && changes[ id ].zone_order !== undefined ) {
+						position = changes[ id ].zone_order;
+					}
+
+					delete changes[ id ];
+
+					if ( position !== null ) {
+						changes[ id ] = _.extend( changes[ id ] || {}, { zone_id : id, zone_order : position } );
+					}
+
+					this.changes = changes;
+					this.trigger( 'change:zones' );
+				},
 				save: function() {
 					if ( _.size( this.changes ) ) {
 						$.post( ajaxurl + ( ajaxurl.indexOf( '?' ) > 0 ? '&' : '?' ) + 'action=woocommerce_shipping_zones_save_changes', {
@@ -63,7 +80,7 @@
 					$tbody.on( 'sortupdate', { view: this }, this.updateModelOnSort );
 					$( window ).on( 'beforeunload', { view: this }, this.unloadConfirmation );
 					$save_button.on( 'click', { view: this }, this.onSubmit );
-					$( document.body ).on( 'click', '.add_shipping_method', { view: this }, this.onAddShippingMethod );
+					$( document.body ).on( 'click', '.add_shipping_method:not(.disabled)', { view: this }, this.onAddShippingMethod );
 					$( document.body ).on( 'click', '.wc-shipping-zone-add', { view: this }, this.onAddNewRow );
 					$( document.body ).on( 'click', '.wc-shipping-zone-save-changes', { view: this }, this.onSubmit );
 					$( document.body ).on( 'wc_backbone_modal_response', this.onAddShippingMethodSubmitted );
@@ -107,9 +124,11 @@
 				},
 				renderRow: function( rowData ) {
 					var view = this;
-
 					view.$el.append( view.rowTemplate( rowData ) );
-
+					view.initRow( rowData );
+				},
+				initRow: function( rowData ) {
+					var view = this;
 					var $tr = view.$el.find( 'tr[data-id="' + rowData.zone_id + '"]');
 
 					// Editing?
@@ -161,6 +180,7 @@
 					$table.find( '.edit' ).hide();
 					$table.find( '.wc-shipping-zone-save-changes-notice' ).hide();
 					$table.find( '.wc-shipping-zone-edit' ).on( 'click', { view: this }, this.onEditRow );
+					$table.find( '.wc-shipping-zone-cancel-edit' ).on( 'click', { view: this }, this.onCancelEditRow );
 					$table.find( '.wc-shipping-zone-delete' ).on( 'click', { view: this }, this.onDeleteRow );
 					$table.find( '.wc-shipping-zone-postcodes-toggle' ).on( 'click', { view: this }, this.onTogglePostcodes );
 					$table.find( '.editing .wc-shipping-zone-edit' ).trigger( 'click' );
@@ -193,7 +213,8 @@
 
 							$method_list.prepend( '<li class="wc-shipping-zone-method"><a href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id=' + instance_id + '" class="' + class_name + '">' + shipping_method.title + '</a></li>' );
 						} );
-
+					} else {
+						$method_list.prepend( '<li class="wc-shipping-zone-method">&ndash;</li>' );
 					}
 				},
 				onSubmit: function( event ) {
@@ -244,7 +265,27 @@
 					$( this ).closest('tr').find('.edit').show();
 					$( '.wc-shipping-zone-region-select:not(.enhanced)' ).select2( select2_args );
 					$( '.wc-shipping-zone-region-select:not(.enhanced)' ).addClass('enhanced');
-					$( this ).closest('tr').find('.add_shipping_method').attr( 'disabled', 'disabled' ).addClass( 'tips' );
+
+					var addShippingMethod = $( this ).closest('tr').find('.add_shipping_method');
+					addShippingMethod.addClass( 'disabled' );
+					addShippingMethod.tipTip({ 'attribute': 'data-disabled-tip', 'fadeIn': 50, 'fadeOut': 50, 'delay': 50 });
+				},
+				onCancelEditRow: function( event ) {
+					var view    = event.data.view,
+						model   = view.model,
+						row     = $( this ).closest('tr'),
+						zone_id = row.data('id'),
+						zones   = _.indexBy( model.get( 'zones' ), 'zone_id' );
+
+					event.preventDefault();
+					model.discardChanges( zone_id );
+
+					// Remove row and re-render
+					row.after( view.rowTemplate( zones[ zone_id ] ) );
+					row.remove();
+
+					view.initRow( zones[ zone_id ] );
+					view.initRows( zones );
 				},
 				onDeleteRow: function( event ) {
 					var view    = event.data.view,
@@ -288,7 +329,6 @@
 					if ( zones[ zone_id ][ attribute ] !== value ) {
 						changes[ zone_id ] = {};
 						changes[ zone_id ][ attribute ] = value;
-						zones[ zone_id ][ attribute ]   = value;
 					}
 
 					model.logChanges( changes );

includes/admin/settings/views/html-admin-page-shipping-zones.php

@@ -13,12 +13,11 @@ if ( ! defined( 'ABSPATH' ) ) {
             <th class="wc-shipping-zone-name"><?php esc_html_e( 'Zone Name', 'woocommerce' ); ?></th>
             <th class="wc-shipping-zone-region"><?php esc_html_e( 'Region(s)', 'woocommerce' ); ?></th>
             <th class="wc-shipping-zone-methods"><?php esc_html_e( 'Shipping Method(s)', 'woocommerce' ); ?></th>
-            <th class="wc-shipping-zone-actions">&nbsp;</th>
         </tr>
     </thead>
     <tfoot>
         <tr>
-            <td colspan="5">
+            <td colspan="4">
                 <a class="button button-secondary wc-shipping-zone-add" href="#"><?php esc_html_e( 'Add shipping zone', 'woocommerce' ); ?></a>
                 <input type="submit" name="save" class="button button-primary wc-shipping-zone-save" value="<?php esc_attr_e( 'Save shipping zones', 'woocommerce' ); ?>" disabled />
             </td>
@@ -46,19 +45,20 @@ if ( ! defined( 'ABSPATH' ) ) {
 	                            $class_name = 'yes' === $method->enabled ? 'method_enabled' : 'method_disabled';
 								echo '<li class="wc-shipping-zone-method"><a href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id=' . absint( $method->instance_id ) . '" class="' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</a></li>';
 							}
+						} else {
+							echo '<li class="wc-shipping-zone-method">&ndash;</li>';
 						}
 					?>
-					<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method button" data-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone.', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
+					<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method tips" data-tip="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>" data-disabled-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
 				</ul>
 			</td>
-            <td class="wc-shipping-zone-actions"></td>
         </tr>
     </tbody>
 </table>
 
 <script type="text/html" id="tmpl-wc-shipping-zone-row-blank">
 	<tr>
-		<td class="wc-shipping-zones-blank-state" colspan="5">
+		<td class="wc-shipping-zones-blank-state" colspan="4">
 			<p class="main"><?php _e( 'A shipping zone is a geographic region where a certain set of shipping methods and rates apply.', 'woocommerce' ); ?></p>
 			<p><?php _e( 'For example:', 'woocommerce' ); ?></p>
 			<ul>
@@ -79,10 +79,15 @@ if ( ! defined( 'ABSPATH' ) ) {
             <div class="view">
                 <a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}">{{ data.zone_name }}</a>
                 <div class="row-actions">
-                    <a class="wc-shipping-zone-edit" href="#"><?php _e( 'Edit Zone', 'woocommerce' ); ?></a> | <a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php _e( 'Edit shipping methods', 'woocommerce' ); ?></a>
+                    <a class="wc-shipping-zone-edit" href="#"><?php _e( 'Edit', 'woocommerce' ); ?></a> | <a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php _e( 'View shipping methods', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-delete"><?php _e( 'Delete', 'woocommerce' ); ?></a>
                 </div>
             </div>
-            <div class="edit"><input type="text" name="zone_name[{{ data.zone_id }}]" data-attribute="zone_name" value="{{ data.zone_name }}" placeholder="<?php esc_attr_e( 'Zone Name', 'woocommerce' ); ?>" /></div>
+            <div class="edit">
+				<input type="text" name="zone_name[{{ data.zone_id }}]" data-attribute="zone_name" value="{{ data.zone_name }}" placeholder="<?php esc_attr_e( 'Zone Name', 'woocommerce' ); ?>" />
+				<div class="row-actions">
+                    <a class="wc-shipping-zone-cancel-edit" href="#"><?php _e( 'Cancel changes', 'woocommerce' ); ?></a>
+                </div>
+			</div>
         </td>
 		<td class="wc-shipping-zone-region">
 			<div class="view">{{ data.formatted_zone_location }}</div>
@@ -116,13 +121,10 @@ if ( ! defined( 'ABSPATH' ) ) {
         <td class="wc-shipping-zone-methods">
 			<div>
                 <ul>
-					<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method button" data-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone.', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
+					<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method tips" data-tip="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>" data-disabled-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
 				</ul>
             </div>
 		</td>
-        <td class="wc-shipping-zone-actions">
-			<a class="wc-shipping-zone-delete tips" data-tip="<?php _e( 'Delete', 'woocommerce' ); ?>" href="#"><?php _e( 'Delete', 'woocommerce' ); ?></a>
-		</td>
     </tr>
 </script>