Styling save button for standing order panels, and updating pristineByID array on update/save

app/assets/javascripts/admin/standing_orders/controllers/products_panel_controller.js.coffee

@@ -1,3 +1,16 @@
-angular.module("admin.standingOrders").controller "ProductsPanelController", ($scope) ->
+angular.module("admin.standingOrders").controller "ProductsPanelController", ($scope, StandingOrders) ->
   $scope.standingOrder = $scope.object
   $scope.distributor_id = $scope.standingOrder.shop_id
+  $scope.saving = false
+
+  $scope.saved = ->
+    pristine = StandingOrders.pristineByID[$scope.standingOrder.id].standing_line_items
+    return false unless angular.equals($scope.standingOrder.standing_line_items, pristine)
+    true
+
+  $scope.save = ->
+    $scope.saving = true
+    $scope.standingOrder.update().then ->
+      $scope.saving = false
+    , ->
+      $scope.saving = false

app/assets/javascripts/admin/standing_orders/services/standing_order_prototype.js.coffee

@@ -1,4 +1,4 @@
-angular.module("admin.standingOrders").factory 'StandingOrderPrototype', ($http, InfoDialog, StatusMessage) ->
+angular.module("admin.standingOrders").factory 'StandingOrderPrototype', ($http, $injector, InfoDialog, StatusMessage) ->
   errors: {}
 
   buildItem: (item) ->
@@ -14,6 +14,7 @@ angular.module("admin.standingOrders").factory 'StandingOrderPrototype', ($http,
     index = @standing_line_items.indexOf(item)
     if item.id?
       $http.delete("/admin/standing_line_items/#{item.id}").then (response) =>
+        $injector.get('StandingOrders').afterRemoveItem(@id, item.id) if $injector.has('StandingOrders')
         @standing_line_items.splice(index,1)
       , (response) ->
         InfoDialog.open 'error', response.data.errors[0]
@@ -25,6 +26,7 @@ angular.module("admin.standingOrders").factory 'StandingOrderPrototype', ($http,
     delete @errors[k] for k, v of @errors
     @$save().then (response) =>
       StatusMessage.display 'success', 'Saved'
+      $injector.get('StandingOrders').afterCreate(@id) if $injector.has('StandingOrders')
     , (response) =>
       StatusMessage.display 'failure', 'Oh no! I was unable to save your changes.'
       angular.extend(@errors, response.data.errors)
@@ -34,6 +36,7 @@ angular.module("admin.standingOrders").factory 'StandingOrderPrototype', ($http,
     delete @errors[k] for k, v of @errors
     @$update().then (response) =>
       StatusMessage.display 'success', 'Saved'
+      $injector.get('StandingOrders').afterUpdate(@id) if $injector.has('StandingOrders')
     , (response) =>
       StatusMessage.display 'failure', 'Oh no! I was unable to save your changes.'
       angular.extend(@errors, response.data.errors)

app/assets/javascripts/admin/standing_orders/services/standing_orders.js.coffee

@@ -11,3 +11,13 @@ angular.module("admin.standingOrders").factory 'StandingOrders', ($q, StandingOr
       for standingOrder in standingOrders
         @byID[standingOrder.id] = standingOrder
         @pristineByID[standingOrder.id] = angular.copy(standingOrder)
+
+    afterCreate: (id) ->
+      @pristineByID[id] = angular.copy(@byID[id])
+
+    afterUpdate: (id) ->
+      @pristineByID[id] = angular.copy(@byID[id])
+
+    afterRemoveItem: (id, deletedItemID) ->
+      for item, i in @pristineByID[id].standing_line_items when item.id == deletedItemID
+        @pristineByID[id].standing_line_items.splice(i, 1)

app/assets/stylesheets/admin/enterprise_index_panels.css.scss

@@ -6,32 +6,6 @@
     }
   }
 
-  a.update {
-    cursor: pointer;
-    margin-bottom: 10px;
-    font-size: 1.3rem;
-    background-color: #DA5354;
-    &:hover {
-      background-color: #CD4E4F;
-    }
-    &.disabled {
-      background-color: #C1C1C1;
-    }
-    &.saving {
-      background-color: #FF9848;
-      i.icon-refresh {
-        -webkit-animation: spin 2s infinite linear;
-        animation: spin 2s infinite linear;
-      }
-    }
-    span{
-      i{
-        font-size: 1.5rem;
-        margin-left: 10px;
-      }
-    }
-  }
-
   a.selector {
     display: block;
     position: relative;

app/assets/stylesheets/admin/index_panel_buttons.css.scss

@@ -0,0 +1,31 @@
+tbody.panel-ctrl {
+  tr.panel-row {
+    > td {
+      a.update {
+        cursor: pointer;
+        margin-bottom: 10px;
+        font-size: 1.3rem;
+        background-color: #DA5354;
+        &:hover {
+          background-color: #CD4E4F;
+        }
+        &.disabled {
+          background-color: #C1C1C1;
+        }
+        &.saving {
+          background-color: #FF9848;
+          i.icon-refresh {
+            -webkit-animation: spin 2s infinite linear;
+            animation: spin 2s infinite linear;
+          }
+        }
+        span{
+          i{
+            font-size: 1.5rem;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}

app/models/standing_line_item.rb

@@ -11,4 +11,6 @@ class StandingLineItem < ActiveRecord::Base
     .where(id: variant_id, schedules: { id: schedule}, exchanges: { incoming: false, receiver_id: shop })
     .any?
   end
+
+  default_scope order('id ASC')
 end

app/views/admin/standing_orders/_table.html.haml

@@ -3,7 +3,16 @@
   %form{ name: 'standing_order_form', ng: { controller: 'ProductsPanelController' } }
     %div{ style: 'width: 90%; margin: auto;' }
       = render 'products'
-    %button{ ng: { click: 'standingOrder.update()'} } Save
+      %a.button.update.fullwidth{ ng: { class: "{disabled: saved() && !saving, saving: saving}", click: "save()" } }
+        %span{ ng: {hide: "saved() || saving" } }
+          SAVE
+          %i.icon-save
+        %span{ ng: {show: "saved() && !saving" } }
+          SAVED
+          %i.icon-ok-sign
+        %span{ ng: {show: "saving" } }
+          SAVING
+          %i.icon-refresh
 
 %table.index#standing_orders
   %col.customer{ width: "20%", 'ng-show' => 'columns.customer.visible' }