Angularising Admin enterprises form

app/assets/javascripts/admin/all.js

@@ -17,5 +17,6 @@
 //= require admin/spree_promo
 //= require ./admin
 //= require ./products/products
+//= require ./enterprises/enterprises
 
 //= require_tree .

app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee

@@ -0,0 +1,3 @@
+angular.module("admin.enterprises")
+  .controller "enterpriseCtrl", ($scope, Enterprise) ->
+    $scope.enterprise = Enterprise.enterprise

app/assets/javascripts/admin/enterprises/enterprises.js.coffee

@@ -0,0 +1 @@
+angular.module("admin.enterprises", [])

app/assets/javascripts/admin/enterprises/services/enterprise.js.coffee

@@ -0,0 +1,4 @@
+angular.module("admin.enterprises")
+  .factory 'Enterprise', (enterprise) ->
+    new class Enterprise
+      enterprise: enterprise

app/helpers/admin/injection_helper.rb

@@ -0,0 +1,12 @@
+module Admin
+  module InjectionHelper
+    def admin_inject_enterprise
+      admin_inject_json_ams "admin.enterprises", "enterprise", @enterprise, Api::Admin::EnterpriseSerializer
+    end
+
+    def admin_inject_json_ams(ngModule, name, data, serializer, opts = {})
+      json = serializer.new(data).to_json
+      render partial: "admin/json/injection_ams", locals: {ngModule: ngModule, name: name, json: json}
+    end
+  end
+end

app/serializers/api/admin/enterprise_serializer.rb

@@ -0,0 +1,3 @@
+class Api::Admin::EnterpriseSerializer < ActiveModel::Serializer
+  attributes :name, :id, :is_primary_producer, :is_distributor
+end

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

@@ -29,11 +29,11 @@
         .with-tip{'data-powertip' => "Select 'Producer' if you are a primary producer of food. Select 'Hub' if you want a shop-front. You can choose either or both."}
           %a What's this?
       .two.columns
-        = f.check_box :is_distributor
+        = f.check_box :is_distributor, 'ng-model' => 'enterprise.is_distributor'
          
         = f.label :is_distributor, 'Hub'
       .five.columns.omega
-        = f.check_box :is_primary_producer
+        = f.check_box :is_primary_producer, 'ng-model' => 'enterprise.is_primary_producer'
          
         = f.label :is_primary_producer, 'Producer'
     .row

app/views/admin/enterprises/_ng_form.html.haml

@@ -0,0 +1,7 @@
+= admin_inject_enterprise
+.sixteen.columns.alpha{ ng: { app: 'admin.enterprises', controller: 'enterpriseCtrl' } }
+  .eleven.columns.alpha
+    = render partial: 'form', :locals => { f: f }
+  .one.column  
+  .four.columns.omega
+    = render partial: 'sidebar', :locals => { f: f }

app/views/admin/enterprises/_sidebar.html.haml

@@ -1,5 +1,5 @@
 - payment_methods_color = @payment_methods.count > 0 ? (@enterprise.payment_methods.count > 0 ? "blue" : "red") : "red"
-.sidebar_item.four.columns.alpha#payment_methods
+.sidebar_item.four.columns.alpha#payment_methods{ ng: { show: 'enterprise.is_distributor' } }
   .four.columns.alpha.header{ class: "#{payment_methods_color}" }
     %span.four.columns.alpha.centered Payment Methods
   .four.columns.alpha.list{ class: "#{payment_methods_color}" }
@@ -21,7 +21,7 @@
     %span.icon-arrow-right
 
 - shipping_methods_color = @shipping_methods.count > 0 ? (@enterprise.shipping_methods.count > 0 ? "blue" : "red") : "red"
-.sidebar_item.four.columns.alpha#shipping_methods
+.sidebar_item.four.columns.alpha#shipping_methods{ ng: { show: 'enterprise.is_distributor' } }
   .four.columns.alpha.header{ class: "#{shipping_methods_color}" }
     %span.four.columns.alpha.centered Shipping Methods
   .four.columns.alpha.list{ class: "#{shipping_methods_color}" }
@@ -42,7 +42,7 @@
     %span.icon-arrow-right
 
 - enterprise_fees_color = @enterprise_fees.count > 0 ? "blue" : "red"
-.sidebar_item.four.columns.alpha#enterprise_fees
+.sidebar_item.four.columns.alpha#enterprise_fees{ ng: { show: 'enterprise.is_distributor' } }
   .four.columns.alpha.header{ class: "#{enterprise_fees_color}" }
     %span.four.columns.alpha.centered Enterprise Fees
   .four.columns.alpha.list{ class: "#{enterprise_fees_color}" }

app/views/admin/enterprises/edit.html.haml

@@ -5,10 +5,6 @@
   = @enterprise.name
 
 = form_for [main_app, :admin, @enterprise] do |f|
-  .eleven.columns.alpha
-    = render :partial => 'form', :locals => { :f => f }
-  .one.column  
-  .four.columns.omega
-    = render :partial => 'sidebar', :locals => { :f => f }
+  = render partial: 'ng_form', :locals => { f: f }
   .twelve.columns.alpha
-    = render :partial => 'spree/admin/shared/edit_resource_links'
+    = render partial: 'spree/admin/shared/edit_resource_links'

app/views/admin/enterprises/new.html.haml

@@ -4,11 +4,6 @@
   New Enterprise
 
 = form_for [main_app, :admin, @enterprise] do |f|
-  .eleven.columns.alpha
-    = render :partial => 'form', :locals => { :f => f }
-  .one.column  
-  .four.columns.omega
-    = render :partial => 'sidebar', :locals => { :f => f }
+  = render partial: 'ng_form', :locals => { f: f }
   .twelve.columns.alpha
-    -# Save, Save & Close and Cancel button
-    = render :partial => 'spree/admin/shared/new_resource_links'
+    = render partial: 'spree/admin/shared/new_resource_links'

app/views/admin/json/_injection_ams.html.haml

@@ -0,0 +1,2 @@
+:javascript
+  angular.module("#{ngModule}").value("#{name.to_s}", #{json})

config/ng-test.conf.js

@@ -13,7 +13,8 @@ module.exports = function(config) {
       'app/assets/javascripts/shared/bindonce.min.js',
       'app/assets/javascripts/shared/ng-infinite-scroll.min.js',
 
-      'app/assets/javascripts/admin/*.js.*',
+      'app/assets/javascripts/admin/*.js*',
+      'app/assets/javascripts/admin/*/*.js*', // Pull in top level files in each folder first (often these are module declarations)
       'app/assets/javascripts/admin/**/*.js*',
       'app/assets/javascripts/darkswarm/*.js*',
       'app/assets/javascripts/darkswarm/**/*.js*',

spec/features/admin/enterprises_spec.rb

@@ -125,9 +125,17 @@ feature %q{
     fill_in 'enterprise_name', :with => 'Eaterprises'
     fill_in 'enterprise_description', :with => 'Connecting farmers and eaters'
     fill_in 'enterprise_long_description', :with => 'Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.'
-
+    
+    # Check Angularjs switching of sidebar elements
     uncheck 'enterprise_is_primary_producer'
+    uncheck 'enterprise_is_distributor'
+    page.should_not have_selector "#payment_methods"
+    page.should_not have_selector "#shipping_methods"
+    page.should_not have_selector "#enterprise_feess"
     check 'enterprise_is_distributor'
+    page.should have_selector "#payment_methods"
+    page.should have_selector "#shipping_methods"
+    page.should have_selector "#enterprise_feess"
 
     select eg1.name, from: 'enterprise_group_ids'
 

spec/javascripts/unit/admin/enterprises/controllers/enterprise_controller_spec.js.coffee

@@ -0,0 +1,16 @@
+describe "enterpriseCtrl", ->
+  ctrl = null
+  scope = null
+  Enterprise = null
+
+  beforeEach ->
+    module('admin.enterprises')
+    Enterprise = 
+      enterprise: "test enterprise"
+        
+    inject ($controller) ->
+      scope = {}
+      ctrl = $controller 'enterpriseCtrl', {$scope: scope, Enterprise: Enterprise}
+
+  it "stores enterprise", ->
+    expect(scope.enterprise).toBe Enterprise.enterprise

spec/javascripts/unit/admin/enterprises/services/enterprise_spec.js.coffee

@@ -0,0 +1,12 @@
+describe "Enterprise service", ->
+  Enterprise = null
+  enterprise = { name: "test ent name" } 
+  beforeEach ->
+    module 'admin.enterprises'
+    angular.module('admin.enterprises').value('enterprise', enterprise) 
+
+    inject ($injector) ->
+      Enterprise = $injector.get("Enterprise") 
+
+  it "stores enterprise value as Enterprise.enterprise", ->
+    expect(Enterprise.enterprise).toBe enterprise

spec/serializers/admin/enterprise_serializer_spec.rb

@@ -0,0 +1,7 @@
+describe Api::Admin::EnterpriseSerializer do
+  let(:enterprise) { create(:distributor_enterprise) }
+  it "serializes an enterprise" do
+    serializer = Api::Admin::EnterpriseSerializer.new enterprise 
+    serializer.to_json.should match enterprise.name  
+  end
+end