WIP: Adding panel for editing items to standing order index

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

@@ -0,0 +1,3 @@
+angular.module("admin.standingOrders").controller "ProductsPanelController", ($scope) ->
+  $scope.standingOrder = $scope.object
+  $scope.distributor_id = $scope.standingOrder.shop.id

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

@@ -7,3 +7,8 @@ angular.module("admin.standingOrders").controller "StandingOrdersController", ($
     if $scope.shop_id?
       # CurrentShop.shop = $filter('filter')($scope.shops, {id: $scope.shop_id})[0]
       $scope.standingOrders = StandingOrders.index("q[shop_id_eq]": $scope.shop_id, ams_prefix: 'index')
+
+  $scope.itemCount = (standingOrder) ->
+    standingOrder.standing_line_items.reduce (sum, sli) ->
+      return sum + sli.quantity
+    , 0

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

@@ -1,45 +1,6 @@
-angular.module("admin.standingOrders").factory "StandingOrder", ($injector, $http, StatusMessage, InfoDialog, StandingOrderResource) ->
+angular.module("admin.standingOrders").factory "StandingOrder", ($injector, StandingOrderResource) ->
   class StandingOrder extends StandingOrderResource
-    errors: {}
 
-    constructor: (obj={}) ->
-      angular.extend(@, obj)
+    constructor: ->
       if $injector.has('standingOrder')
         angular.extend(@, $injector.get('standingOrder'))
-
-    buildItem: (item) ->
-      return false unless item.variant_id > 0
-      return false unless item.quantity > 0
-      data = angular.extend({}, item, { shop_id: @shop_id, schedule_id: @schedule_id })
-      $http.post("/admin/standing_line_items/build", data).then (response) =>
-        @standing_line_items.push response.data
-      , (response) =>
-        InfoDialog.open 'error', response.data.errors[0]
-
-    removeItem: (item) ->
-      index = @standing_line_items.indexOf(item)
-      if item.id?
-        $http.delete("/admin/standing_line_items/#{item.id}").then (response) =>
-          @standing_line_items.splice(index,1)
-        , (response) ->
-          InfoDialog.open 'error', response.data.errors[0]
-      else
-        @standing_line_items.splice(index,1)
-
-    create: ->
-      StatusMessage.display 'progress', 'Saving...'
-      delete @errors[k] for k, v of @errors
-      @$save().then (response) =>
-        StatusMessage.display 'success', 'Saved'
-      , (response) =>
-        StatusMessage.display 'failure', 'Oh no! I was unable to save your changes.'
-        angular.extend(@errors, response.data.errors)
-
-    update: ->
-      StatusMessage.display 'progress', 'Saving...'
-      delete @errors[k] for k, v of @errors
-      @$update().then (response) =>
-        StatusMessage.display 'success', 'Saved'
-      , (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_order_prototype.js.coffee

@@ -0,0 +1,39 @@
+angular.module("admin.standingOrders").factory 'StandingOrderPrototype', ($http, InfoDialog, StatusMessage) ->
+  errors: {}
+
+  buildItem: (item, ams_prefix) ->
+    return false unless item.variant_id > 0
+    return false unless item.quantity > 0
+    data = angular.extend({}, item, { shop_id: @shop_id, schedule_id: @schedule_id })
+    $http.post("/admin/standing_line_items/build", data).then (response) =>
+      @standing_line_items.push response.data
+    , (response) =>
+      InfoDialog.open 'error', response.data.errors[0]
+
+  removeItem: (item) ->
+    index = @standing_line_items.indexOf(item)
+    if item.id?
+      $http.delete("/admin/standing_line_items/#{item.id}").then (response) =>
+        @standing_line_items.splice(index,1)
+      , (response) ->
+        InfoDialog.open 'error', response.data.errors[0]
+    else
+      @standing_line_items.splice(index,1)
+
+  create: ->
+    StatusMessage.display 'progress', 'Saving...'
+    delete @errors[k] for k, v of @errors
+    @$save().then (response) =>
+      StatusMessage.display 'success', 'Saved'
+    , (response) =>
+      StatusMessage.display 'failure', 'Oh no! I was unable to save your changes.'
+      angular.extend(@errors, response.data.errors)
+
+  update: ->
+    StatusMessage.display 'progress', 'Saving...'
+    delete @errors[k] for k, v of @errors
+    @$update().then (response) =>
+      StatusMessage.display 'success', 'Saved'
+    , (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_order_resource.js.coffee

@@ -1,5 +1,5 @@
-angular.module("admin.standingOrders").factory 'StandingOrderResource', ($resource) ->
-  $resource('/admin/standing_orders/:id/:action.json', {}, {
+angular.module("admin.standingOrders").factory 'StandingOrderResource', ($resource, StandingOrderPrototype) ->
+  resource = $resource('/admin/standing_orders/:id/:action.json', {}, {
     'index':
       method: 'GET'
       isArray: true
@@ -8,3 +8,7 @@ angular.module("admin.standingOrders").factory 'StandingOrderResource', ($resour
       params:
         id: '@id'
   })
+
+  angular.extend(resource.prototype, StandingOrderPrototype)
+
+  resource

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

@@ -9,6 +9,5 @@ angular.module("admin.standingOrders").factory 'StandingOrders', ($q, StandingOr
 
     load: (standingOrders) ->
       for standingOrder in standingOrders
-        standingOrder = new StandingOrder(standingOrder)
         @byID[standingOrder.id] = standingOrder
         @pristineByID[standingOrder.id] = angular.copy(standingOrder)

app/controllers/admin/standing_orders_controller.rb

@@ -32,7 +32,7 @@ module Admin
     def update
       form = StandingOrderForm.new(@standing_order, params[:standing_order])
       if form.save
-        render_as_json @standing_order, fee_calculator: fee_calculator
+        render_as_json @standing_order, ams_prefix: params[:ams_prefix], fee_calculator: fee_calculator
       else
         render json: { errors: form.json_errors }, status: :unprocessable_entity
       end

app/serializers/api/admin/index_standing_order_serializer.rb

@@ -1,12 +1,12 @@
 class Api::Admin::IndexStandingOrderSerializer < ActiveModel::Serializer
-  attributes :id, :item_count, :begins_on, :ends_on, :edit_path
+  attributes :id, :item_count, :begins_on, :ends_on, :edit_path, :shop_id, :schedule_id
 
   has_one :shop, serializer: Api::Admin::IdNameSerializer
   has_one :customer, serializer: Api::Admin::IdEmailSerializer # Remove IdEmailSerializer if no longer user here
   has_one :schedule, serializer: Api::Admin::IdNameSerializer
   has_one :payment_method, serializer: Api::Admin::IdNameSerializer
   has_one :shipping_method, serializer: Api::Admin::IdNameSerializer
-  has_many :standing_line_items, serializer: Api::Admin::IdSerializer
+  has_many :standing_line_items, serializer: Api::Admin::StandingLineItemSerializer
 
   def item_count
     object.standing_line_items.sum(&:quantity)

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

@@ -1,14 +1,20 @@
-= render :partial => "spree/admin/variants/autocomplete", :formats => :js
-
 #add-line-item
   %fieldset
     %legend{ align: 'center'}= t(:products)
-    .field.ten.columns.alpha.field
-      = label_tag :add_product_name, t(:name_or_sku)
-      %input#add_variant_id.variant_autocomplete.fullwidth{ type: 'number', ng: { model: 'newItem.variant_id' } }
-    .field.three.columns.field
-      = label_tag :add_quantity, t(:qty)
-      %input#add_quantity.fullwidth{ type: 'number', min: 1, ng: { model: 'newItem.quantity' } }
-    .three.columns.omega.actions
-      %a.icon-plus.button.fullwidth{ href: 'javascript:void(0)', method: :post, ng: { click: 'addStandingLineItem()' } }
-        = t(:add)
+    %table.no-borders
+      %col{ width: '60%' }
+      %col{ width: '20%' }
+      %col{ width: '20%' }
+      %tr
+        %td{ style: "vertical-align:top" }
+          .field
+            = label_tag :add_product_name, t(:name_or_sku)
+            %input#add_variant_id.variant_autocomplete.fullwidth{ type: 'number', ng: { model: 'newItem.variant_id' } }
+        %td{ style: "vertical-align:top" }
+          .field
+            = label_tag :add_quantity, t(:qty)
+            %input#add_quantity.fullwidth{ type: 'number', min: 1, ng: { model: 'newItem.quantity' } }
+        %td{ style: "vertical-align:top" }
+          .actions
+            %a.icon-plus.button.fullwidth{ href: 'javascript:void(0)', method: :post, ng: { click: 'addStandingLineItem()' } }
+              = t(:add)

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

@@ -21,4 +21,5 @@
       %save-bar{ dirty: "standing_order_products_form.$dirty", persist: 'true', ng: { hide: "view == 'review'" } }
         %input{ type: "button", value: t(:back), ng: { click: "back()" } }
         %input.red{ type: "button", value: t(:next), ng: { click: 'next()' } }
+    = render :partial => "spree/admin/variants/autocomplete", :formats => :js
     = render 'products'

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

@@ -1,3 +1,10 @@
+= render :partial => "spree/admin/variants/autocomplete", :formats => :js
+%script{ type: "text/ng-template", id: "admin/panels/standing_order_products.html" }
+  %form{ name: 'standing_order_form', ng: { controller: 'ProductsPanelController' } }
+    %div{ style: 'width: 90%; margin: auto;' }
+      = render 'products'
+    %button{ ng: { click: 'standingOrder.update()'} } Save
+
 %table.index#standing_orders
   %col.customer{ width: "20%", 'ng-show' => 'columns.customer.visible' }
   %col.schedule{ width: "15%", 'ng-show' => 'columns.schedule.visible' }
@@ -27,14 +34,18 @@
         = t('admin.shipping_method')
       %th.actions
          
-  %tr.standing_order{ :id => "so_{{standingOrder.id}}", ng: { repeat: "standingOrder in standingOrders | filter:query", class: { even: "'even'", odd: "'odd'" } } }
-    %td.customer.text-center{ ng: { show: 'columns.customer.visible', bind: '::standingOrder.customer.email' } }
-    %td.schedule.text-center{ ng: { show: 'columns.schedule.visible', bind: '::standingOrder.schedule.name' } }
-    %td.items.text-center{ ng: { show: 'columns.items.visible', bind: '::standingOrder.item_count' } }
-    %td.begins_on.text-center{ ng: { show: 'columns.begins_on.visible', bind: '::standingOrder.begins_on' } }
-    %td.ends_on.text-center{ ng: { show: 'columns.ends_on.visible', bind: '::standingOrder.ends_on' } }
-    %td.payment_method{ ng: { show: 'columns.payment_method.visible', bind: '::standingOrder.payment_method.name' } }
-    %td.shipping_method{ ng: { show: 'columns.shipping_method.visible', bind: '::standingOrder.shipping_method.name' } }
-    %td.actions
-      %a.edit-standing-order.icon-edit.no-text{ ng: { href: '{{standingOrder.edit_path}}'} }
-    -#   %a.delete-standing-order.icon-trash.no-text{ ng: { href: '{{standingOrder.delete_path}}'}, data: { method: 'delete', confirm: "Are you sure?" } }
+  %tbody.panel-ctrl{ object: 'standingOrder', ng: { repeat: "standingOrder in standingOrders | filter:query" } }
+    %tr.standing_order{ :id => "so_{{standingOrder.id}}", class: { even: "'even'", odd: "'odd'" } }
+      %td.customer.text-center{ ng: { show: 'columns.customer.visible', bind: '::standingOrder.customer.email' } }
+      %td.schedule.text-center{ ng: { show: 'columns.schedule.visible', bind: '::standingOrder.schedule.name' } }
+      %td.items.panel-toggle.text-center{ name: 'products', ng: { show: 'columns.items.visible' } }
+        %h5{ ng: { bind: 'itemCount(standingOrder)' } }
+      %td.begins_on.text-center{ ng: { show: 'columns.begins_on.visible', bind: '::standingOrder.begins_on' } }
+      %td.ends_on.text-center{ ng: { show: 'columns.ends_on.visible', bind: '::standingOrder.ends_on' } }
+      %td.payment_method{ ng: { show: 'columns.payment_method.visible', bind: '::standingOrder.payment_method.name' } }
+      %td.shipping_method{ ng: { show: 'columns.shipping_method.visible', bind: '::standingOrder.shipping_method.name' } }
+      %td.actions
+        %a.edit-standing-order.icon-edit.no-text{ ng: { href: '{{standingOrder.edit_path}}'} }
+      -#   %a.delete-standing-order.icon-trash.no-text{ ng: { href: '{{standingOrder.delete_path}}'}, data: { method: 'delete', confirm: "Are you sure?" } }
+
+    %tr.panel-row{ object: "standingOrder", panels: "{products: 'standing_order_products'}" }