WIP: Adding a side_menu to the enterprise form

app/assets/javascripts/admin/all.js

@@ -22,6 +22,7 @@
 //= require ./payment_methods/payment_methods
 //= require ./products/products
 //= require ./shipping_methods/shipping_methods
+//= require ./side_menu/side_menu
 //= require ./utils/utils
 //= require ./users/users
 //= require textAngular.min.js

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

@@ -0,0 +1,20 @@
+angular.module("admin.enterprises")
+  .controller "sideMenuCtrl", ($scope, Enterprise, SideMenu) ->
+    $scope.Enterprise = Enterprise.enterprise
+    $scope.select = SideMenu.select
+
+    SideMenu.setItems [
+      { name: 'Primary Details' }
+      { name: 'Address' }
+      { name: "Shipping Methods"}
+      { name: "Payment Methods"}
+      { name: "Enterprise Fees"}
+      { name: 'Contact & Social' }
+      { name: 'About' }
+      { name: "Business Details"}
+      { name: 'Images' }
+      { name: "Preferences"}
+    ]
+
+    $scope.select(0)
+    $scope.menu = SideMenu.items

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

@@ -1 +1 @@
-angular.module("admin.enterprises", ["admin.payment_methods", "admin.utils", "admin.shipping_methods", "admin.users", "textAngular"])
+angular.module("admin.enterprises", [

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

@@ -0,0 +1,15 @@
+angular.module("admin.side_menu")
+  .factory "SideMenu", ->
+    new class SideMenu
+      items: []
+      selected: null
+
+      setItems: (items) =>
+        @items = items
+
+      select: (index) =>
+        @selected.selected = false if @selected
+        @selected = @items[index]
+        @selected.selected = true
+
+

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

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

app/assets/stylesheets/admin/side_menu.css.sass

@@ -0,0 +1,17 @@
+.side_menu
+  border-right: 2px solid #f6f6f6
+  border-top: 2px solid #f6f6f6
+  .menu_item
+    padding: 8px 15px
+    font-size: 120%
+    cursor: pointer
+    text-transform: uppercase
+    &.even
+      background-color: #ebf3fb
+    &.odd
+      background-color: #ffffff
+    &:hover
+      background-color: #eaf0f5
+    &.selected
+      background-color: #5498da
+      color: #ffffff

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

@@ -11,11 +11,11 @@
   } do |f|
   .row
     .sixteen.columns.alpha
+      .four.columns.omega
+        = render 'side_menu'
+      .one.column  
       .eleven.columns.alpha.fullwidth_inputs
         = render 'form', f: f
-      .one.column  
-      .four.columns.omega
-        = render 'sidebar', f: f
   .row
     .twelve.columns.alpha
       = render partial: "spree/admin/shared/#{action}_resource_links"

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

@@ -0,0 +1,3 @@
+.side_menu{ ng: { controller: 'sideMenuCtrl' } }
+  .menu_item{ ng: { repeat: '(index,item) in menu', click: 'select(index)', class: '{ selected: item.selected}', 'class-odd' => "'odd'", 'class-even' => "'even'" } }
+    {{ item.name }}

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

@@ -0,0 +1,41 @@
+describe "menuCtrl", ->
+  ctrl = null
+  scope = null
+  Enterprise = null
+  SideMenu = SideMenu
+
+  beforeEach ->
+    module('admin.enterprises')
+    Enterprise =
+      enterprise:
+        payment_method_ids: [ 1, 3 ]
+        shipping_method_ids: [ 2, 4 ]
+    # PaymentMethods =
+    #   paymentMethods: [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ]
+    # ShippingMethods =
+    #   shippingMethods: [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ]
+
+    inject ($controller, _SideMenu_) ->
+      scope = {}
+      SideMenu = _SideMenu_
+      spyOn(SideMenu, "select").andCallThrough()
+      spyOn(SideMenu, "setItems").andCallThrough()
+      ctrl = $controller 'sideMenuCtrl', {$scope: scope, Enterprise: Enterprise, SideMenu: SideMenu}
+
+  describe "initialisation", ->
+    it "stores enterprise", ->
+      expect(scope.Enterprise).toEqual Enterprise.enterprise
+
+    it "sets the item list", ->
+      expect(SideMenu.setItems).toHaveBeenCalled
+      expect(scope.menu).toBe SideMenu.items
+
+    it "sets the initally selected value", ->
+      expect(SideMenu.select).toHaveBeenCalledWith 0
+
+
+  describe "selecting an item", ->
+    it "selects an item by performing setting the selected property on the item to true", ->
+      scope.select 4
+      expect(SideMenu.select).toHaveBeenCalledWith 4
+      expect(scope.menu[4].selected).toBe true