https://github.com/reactioncommerce/reaction/issues/73

- [ x] editable provider (cog near method title)
- [ x] add additional providers ui

packages/reaction-shipping/client/templates/shipping.coffee

@@ -1,62 +1,155 @@
+###
+# Template shipping Helpers
+###
 Template.shipping.helpers
   packageData: ->
     return ReactionCore.Collections.Packages.findOne({name:"reaction-shipping"})
+
   shipping: ->
     ReactionCore.Collections.Shipping.find()
 
+  # boolean to display addShippingProvider form
+  selectedShippingProvider: ->
+    return Session.equals "selectedShippingProvider", true
+
+###
+# Template Shipping Events
+###
 Template.shipping.events
   'click': () ->
     Alerts.removeSeen()
 
+  # add new shipping provider
+  'click .add-shipping-provider': (event, template) ->
+    console.log "click add-shipping-provider"
+    toggleSession "selectedShippingProvider"
+
+###
+# template addShippingMethod Helpers
+###
 Template.addShippingMethod.helpers
   # just get the current shipping table
   shipping: ->
     return ReactionCore.Collections.Shipping.find()
 
-Template.shippingFlatRateTable.helpers
+###
+# template addShippingProvider events
+###
+Template.editShippingMethod.events
+  # add new shipping provider
+  'click .cancel': (event, template) ->
+    console.log "cancel editShippingMethod"
+    toggleSession "selectedShippingMethod"
+    event.preventDefault()
+
+###
+# template addShippingProvider events
+###
+Template.editShippingProvider.events
+  # add new shipping provider
+  'click .cancel': (event, template) ->
+    console.log "cancel editShippingProvider"
+    toggleSession "selectedShippingProvider"
+    event.preventDefault()
+
+###
+# template addShippingProvider events
+###
+Template.addShippingProvider.events
+  # add new shipping provider
+  'click .cancel': (event, template) ->
+    console.log "cancel addShippingProvider"
+    toggleSession "selectedShippingProvider"
+    event.preventDefault()
+
+###
+# template addShippingMethods events
+###
+Template.addShippingMethod.events
+  # add new shipping provider
+  'click .cancel': (event, template) ->
+    console.log "cancel addShippingMethod"
+    toggleSession "selectedAddShippingMethod"
+    event.preventDefault()
+
+###
+# Template shippingProviderTable Helpers
+###
+Template.shippingProviderTable.helpers
   # just get the current shipping table
   shipping: ->
     return ReactionCore.Collections.Shipping.find()
+
   # toggle selected
-  selectedMethod: (item) ->
+  selectedShippingMethod: (item) ->
     session = Session.get "selectedShippingMethod"
     if _.isEqual @, session
       return @
+
   #toggle addShippingMethodForm
-  addShippingMethodMode: ->
-    if Session.equals "addShippingMethod", true
-      return true
-    else
-      return false
+  selectedAddShippingMethod: ->
+    session = Session.get "selectedAddShippingMethod"
+    if _.isEqual @, session
+      return @
 
+  selectedShippingProvider: ->
+    session = Session.get "selectedShippingProvider"
+    if _.isEqual @, session
+      return @
 
-Template.shippingFlatRateTable.events
-  # toggle selected
+###
+# template shippingProviderTable events
+###
+Template.shippingProviderTable.events
+  # toggle selected method
   'click .edit-shipping-method': (event, template) ->
     session = Session.get "selectedShippingMethod"
     if _.isEqual @, session
-      #toggleSession "selectedShippingMethod"
       Session.set "selectedShippingMethod", false
     else
       Session.set "selectedShippingMethod", @
 
+  # toggle selected provider
+  'click .edit-shipping-provider': (event, template) ->
+    # session = Session.get "selectedShippingProvider"
+    console.log "click edit-shipping-provider"
+    return toggleSession "selectedShippingProvider", @
+
+    # if _.isEqual @, session
+    #   Session.set "selectedShippingProvider", false
+    # else
+    #   toggleSessionObj "selectedShippingProvider", @
+
   # call method to delete shipping method
   'click #delete-shipping-method': (event, template) ->
-    Meteor.call "removeShippingMethod", $(event.currentTarget).data('provider-id'), @
-    Alerts.add "Shipping method deleted.", "success", autoHide: true, placement:"shippingPackage"
+    if confirm("Are you sure you want to delete "+ @.name)
+      Meteor.call "removeShippingMethod", $(event.currentTarget).data('provider-id'), @
+      Alerts.add "Shipping method deleted.", "success", autoHide: true, placement:"shippingPackage"
+    else
+      event.preventDefault()
+      event.stopPropagation()
+      return
 
   # add new shipping method
   'click #add-shipping-method': (event, template) ->
-    toggleSession "addShippingMethod"
+    console.log "click add-shipping-method"
+    session = Session.get "selectedAddShippingMethod"
+    if _.isEqual @, session
+      Session.set "selectedAddShippingMethod", false
+    else
+      Session.set "selectedAddShippingMethod", @
 
 
+###
+# Autoform hooks
+# Because these are some convoluted forms
+###
 AutoForm.hooks "shipping-method-add-form":
   onSuccess: (operation, result, template) ->
+    toggleSession "selectedAddShippingMethod"
     Alerts.add "Shipping method rate added.", "success", autoHide: true, placement:"shippingPackage"
-  endSubmit: (formId, template) ->
-    #just here to prevent the default hook from running
 
-AutoForm.hooks "shipping-provider-insert-form":
+AutoForm.hooks "shipping-provider-add-form":
   onSuccess: (operation, result, template) ->
     Alerts.add "Shipping provider saved.", "success", autoHide: true, placement:"shippingPackage"
 

packages/reaction-shipping/client/templates/shipping.html

@@ -1,25 +1,44 @@
 <template name="shipping">
-<div class="row">
-  <h2>Shipping<small> Settings</small></h2>
-</div>
-<div class="shipping-rate-tables">
-  {{> shippingFlatRateTable}}
-</div>
-<span id="shipping-alerts">
-  {{>bootstrapAlerts placement="shippingPackage"}}
-</span>
+  <div class="row">
+    <div class="col-sm-11">
+      <h2><span data-i18n="checkoutShipping.shipping">Shipping</span> <small data-18n="app.settings">Settings</small></h2>
+    </div>
+    <div class="col-sm-1">
+      <div class="add-shipping-provider pull-right"><i class="fa fa-plus fa-lg" title="Add shipping provider"></i></div>
+    </div>
+  </div>
+  {{#if selectedShippingProvider}}
+    <div class="row">
+      <div class="panel panel-default">
+        <div class="panel-body">
+        {{> addShippingProvider}}
+        </div>
+      </div>
+    </div>
+  {{/if}}
+  <div class="shipping-rate-tables">
+    {{> shippingProviderTable}}
+  </div>
+  <span id="shipping-alerts">
+    {{>bootstrapAlerts placement="shippingPackage"}}
+  </span>
 </template>
 
 
-<template name="shippingFlatRateTable">
+<template name="shippingProviderTable">
 {{#each shipping}}
     <div class="panel panel-default">
-      <div class="panel-heading">
+      <div class="panel-heading edit-shipping-provider">
         <span class="text-left">{{provider.name}}</span>
         <span class="pull-right">
-          <i class="fa fa-cog" id="edit-shipping-provider"></i>
+          <i class="fa fa-cog" id="edit-shipping-provider" title="Edit shipping provider"></i>
         </span>
       </div>
+      {{#if selectedShippingProvider}}
+        <div class="panel-body">
+        {{> editShippingProvider}}
+        </div>
+      {{/if}}
       <div class="panel-body">
       {{#if methods}}
         <table class="table table-striped">
@@ -32,11 +51,11 @@ <h2>Shipping<small> Settings</small></h2>
               <th>Handling</th>
               <th>Rate</th>
               <th>Enabled</th>
-              <th><i class="fa fa-plus pull-right" id="add-shipping-method"></i></th>
+              <th><i class="fa fa-plus pull-right" id="add-shipping-method" title="Add shipping method"></i></th>
             </tr>
           </thead>
           <tbody>
-          {{#if addShippingMethodMode}}
+          {{#if selectedAddShippingMethod}}
             <tr class="active">
             <td colspan="8">
             {{> addShippingMethod}}
@@ -53,21 +72,21 @@ <h2>Shipping<small> Settings</small></h2>
               <td>{{formatPrice rate}}</td>
               <td>
                 {{#if enabled}}
-                  <i class="fa fa-check text-success"></i>
+                  <i class="fa fa-check text-success" title="Enabled"></i>
                 {{else}}
-                  <i class="fa fa-ban text-danger"></i>
+                  <i class="fa fa-ban text-danger" title="Disabled"></i>
                 {{/if}}
               </td>
               <td class="text-right">
-                <i class="fa fa-cog" id="edit-shipping-method"></i>
-                <i class="fa fa-trash" id="delete-shipping-method" data-provider-id="{{../_id}}"></i>
+                <i class="fa fa-cog" id="edit-shipping-method" title="Edit shipping method"></i>
+                <i class="fa fa-trash" id="delete-shipping-method" data-provider-id="{{../_id}}" title="Delete shipping method"></i>
               </td>
             </tr>
-            {{#if selectedMethod}}
+            {{#if selectedShippingMethod}}
             <tr class="active">
-            <td colspan="8">
-            {{> editShippingMethod}}
-            </td>
+              <td colspan="8">
+                {{> editShippingMethod}}
+              </td>
             </tr>
             {{/if}}
           {{/each}}
@@ -80,8 +99,8 @@ <h2>Shipping<small> Settings</small></h2>
     </div>
 
 {{else}}
-  <div class="alert alert-info">No shipping providers defined.</div>
-  {{>addProvider}}
+  <div class="alert alert-info" data-i18n="shipping.noShippingMethods">No shipping methods are configured.</div>
+  {{>addShippingProvider}}
 {{/each}}
 </template>
 
@@ -94,6 +113,7 @@ <h2>Shipping<small> Settings</small></h2>
       template="bootstrap3-inline"
       type="method"
       meteormethod="addShippingMethod"
+      resetOnSuccess=false
       }}
     <fieldset>
       <div class="col-md-4">
@@ -111,7 +131,10 @@ <h2>Shipping<small> Settings</small></h2>
               {{>afQuickField name='handling'}}
               {{>afQuickField name='rate'}}
             </div>
-            <button type="submit" class="btn btn-primary pull-right">Submit</button>
+            <div class="pull-right">
+              <button type="submit" class="btn btn-primary">Submit</button>
+              <button type="cancel" class="btn btn-primary cancel">Cancel</button>
+            </div>
           </div>
           </div>
       </div>
@@ -136,7 +159,7 @@ <h2>Shipping<small> Settings</small></h2>
     <fieldset>
       <div class="col-md-4">
         <div class="panel panel-default">
-          <div class="panel-heading">Edit {{name}} rate</div>
+          <div class="panel-heading">Update {{name}} rate</div>
           <div class="panel-body">
             <div class="col-md-6">
               {{>afQuickField name='name' autofocus=''}}
@@ -149,7 +172,10 @@ <h2>Shipping<small> Settings</small></h2>
               {{>afQuickField name='handling'}}
               {{>afQuickField name='rate'}}
             </div>
-            <button type="submit" class="btn btn-primary pull-right">Submit</button>
+            <div class="pull-right">
+              <button type="submit" class="btn btn-primary">Submit</button>
+              <button type="cancel" class="btn btn-primary cancel">Cancel</button>
+            </div>
           </div>
           </div>
       </div>
@@ -164,11 +190,11 @@ <h2>Shipping<small> Settings</small></h2>
 </template>
 
 
-<template name="addProvider">
+<template name="addShippingProvider">
     {{#autoForm
       collection="ReactionCore.Collections.Shipping"
       doc=.
-      id="shipping-provider-insert-form"
+      id="shipping-provider-add-form"
       template="bootstrap3-inline"
       type="method"
       meteormethod="addShippingProvider"
@@ -177,16 +203,45 @@ <h2>Shipping<small> Settings</small></h2>
     <fieldset>
     <legend>Add Provider</legend>
     <div class="col-md-2">
-      {{>afQuickField name='provider.name' autofocus='' default="Flat Rate"}}
-      {{>afQuickField name='provider.label'}}
+      {{>afQuickField name='provider.name' autofocus='' placeholder="STDPOSTAL"}}
+      {{>afQuickField name='provider.label' placeholder="FLAT RATE"}}
       {{>afQuickField name='provider.enabled'}}
     </div>
     </fieldset>
     <button type="submit" class="btn btn-primary">Submit</button>
+    <button type="cancel" class="btn btn-primary cancel">Cancel</button>
     {{/autoForm}}
 </template>
 
 
+<template name="editShippingProvider">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      {{#autoForm
+        schema="ReactionCore.Schemas.Shipping"
+        doc=.
+        template="bootstrap3-inline"
+        id="shipping-provider-edit-form"
+        type="method"
+        meteormethod="updateShippingProvider"
+        resetOnSuccess=false
+        }}
+      <fieldset>
+      <legend>Update Provider</legend>
+      <div class="col-md-2">
+        {{>afQuickField name='provider.name' autofocus='' default="Flat Rate"}}
+        {{>afQuickField name='provider.label'}}
+        {{>afQuickField name='provider.enabled'}}
+      </div>
+      </fieldset>
+      <button type="submit" class="btn btn-primary">Submit</button>
+      <button type="cancel" class="btn btn-primary cancel">Cancel</button>
+      {{/autoForm}}
+    </div>
+  </div>
+</template>
+
+
 <template name="afArrayField_inlineRange">
   <div class="panel panel-default">
     <div class="panel-heading">{{afFieldLabelText name=this.atts.name}}