Generalising datasubmitter pendingChanges and watcher directive

app/assets/javascripts/admin/directives/line_item_upd_attr.js.coffee

@@ -1,18 +1,36 @@
 angular.module("ofn.admin").directive "ofnLineItemUpdAttr", (switchClass, pendingChanges) ->
   scope:
-    lineItem: "&ofnLineItemUpdAttr"
-    attrName: "@"
+    object: "&ofnLineItemUpdAttr"
+    type: "@ofnLineItemUpdAttr"
+    attr: "@attrName"
   link: (scope, element, attrs) ->
-    element.dbValue = scope.lineItem()[scope.attrName]
-    scope.$watch "lineItem().#{scope.attrName}", (value) ->
-      if value == element.dbValue
-        pendingChanges.remove(scope.lineItem().id, scope.attrName)
-        switchClass( element, "", ["update-pending", "update-error", "update-success"], false )
+    scope.savedValue = scope.object()[scope.attr]
+
+    scope.$watch "object().#{scope.attr}", (value) ->
+      if value == scope.savedValue
+        pendingChanges.remove(scope.object().id, scope.attr)
+        scope.clear()
       else
-        changeObj =
-          lineItem: scope.lineItem()
-          element: element
-          attrName: scope.attrName
-          url: "/api/orders/#{scope.lineItem().order.number}/line_items/#{scope.lineItem().id}?line_item[#{scope.attrName}]=#{value}"
-        pendingChanges.add(scope.lineItem().id, scope.attrName, changeObj)
-        switchClass( element, "update-pending", ["update-error", "update-success"], false )
+        change =
+          object: scope.object()
+          type: scope.type
+          attr: scope.attr
+          value: value
+          scope: scope
+        scope.pending()
+        pendingChanges.add(scope.object().id, scope.attr, change)
+
+    scope.reset = (value) ->
+      scope.savedValue = value
+
+    scope.success = ->
+      switchClass( element, "update-success", ["update-pending", "update-error"], 3000 )
+
+    scope.pending = ->
+      switchClass( element, "update-pending", ["update-error", "update-success"], false )
+
+    scope.error = ->
+      switchClass( element, "update-error", ["update-pending", "update-success"], false )
+
+    scope.clear = ->
+      switchClass( element, "", ["update-pending", "update-error", "update-success"], false )

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

@@ -1,13 +1,11 @@
-angular.module("ofn.admin").factory "dataSubmitter", [
-  "$http", "$q", "switchClass"
-  ($http, $q, switchClass) ->
-    return (changeObj) ->
-      deferred = $q.defer()
-      $http.put(changeObj.url).success((data) ->
-        switchClass changeObj.element, "update-success", ["update-pending", "update-error"], 3000
-        deferred.resolve data
-      ).error ->
-        switchClass changeObj.element, "update-error", ["update-pending", "update-success"], false
-        deferred.reject()
-      deferred.promise
-]
+angular.module("ofn.admin").factory "dataSubmitter", ($http, $q) ->
+  return (change) ->
+    deferred = $q.defer()
+    url = "/api/orders/#{change.object.order.number}/line_items/#{change.object.id}?line_item[#{change.attr}]=#{change.value}"
+    $http.put(url).success((data) ->
+      change.scope.success()
+      deferred.resolve data
+    ).error ->
+      change.scope.error()
+      deferred.reject()
+    deferred.promise

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

@@ -1,32 +1,29 @@
-angular.module("ofn.admin").factory "pendingChanges",[
-  "dataSubmitter"
-  (dataSubmitter) ->
-    pendingChanges: {}
+angular.module("ofn.admin").factory "pendingChanges", (dataSubmitter) ->
+  pendingChanges: {}
 
-    add: (id, attrName, changeObj) ->
-      @pendingChanges["#{id}"] = {} unless @pendingChanges.hasOwnProperty("#{id}")
-      @pendingChanges["#{id}"]["#{attrName}"] = changeObj
+  add: (id, attr, change) ->
+    @pendingChanges["#{id}"] = {} unless @pendingChanges.hasOwnProperty("#{id}")
+    @pendingChanges["#{id}"]["#{attr}"] = change
 
-    removeAll: ->
-      @pendingChanges = {}
+  removeAll: ->
+    @pendingChanges = {}
 
-    remove: (id, attrName) ->
-      if @pendingChanges.hasOwnProperty("#{id}")
-        delete @pendingChanges["#{id}"]["#{attrName}"]
-        delete @pendingChanges["#{id}"] if @changeCount( @pendingChanges["#{id}"] ) < 1
+  remove: (id, attr) ->
+    if @pendingChanges.hasOwnProperty("#{id}")
+      delete @pendingChanges["#{id}"]["#{attr}"]
+      delete @pendingChanges["#{id}"] if @changeCount( @pendingChanges["#{id}"] ) < 1
 
-    submitAll: ->
-      all = []
-      for id,lineItem of @pendingChanges
-        for attrName,changeObj of lineItem
-          all.push @submit(id, attrName, changeObj)
-      all
+  submitAll: ->
+    all = []
+    for id, objectChanges of @pendingChanges
+      for attrName, change of objectChanges
+        all.push @submit(change)
+    all
 
-    submit: (id, attrName, change) ->
-      dataSubmitter(change).then (data) =>
-        @remove id, attrName
-        change.element.dbValue = data["#{attrName}"]
+  submit: (change) ->
+    dataSubmitter(change).then (data) =>
+      @remove change.object.id, change.attr
+      change.scope.reset( data["#{change.attr}"] )
 
-    changeCount: (lineItem) ->
-      Object.keys(lineItem).length
-]
+  changeCount: (objectChanges) ->
+    Object.keys(objectChanges).length