From 76acd706ea4135842e042f845d94764ad73c3d2a Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Fri, 28 Nov 2014 14:38:28 +1100 Subject: [PATCH] Adding ability to show and hide menu items --- .../enterprise_controller.js.coffee | 8 ++ .../side_menu_controller.js.coffee | 12 +-- .../side_menu/services/side_menu.js.coffee | 19 +++- .../stylesheets/admin/side_menu.css.sass | 4 +- .../admin/enterprises/_side_menu.html.haml | 7 +- .../side_menu_controller_spec.js.coffee | 4 +- .../side_menu/services/side_menu.js.coffee | 93 +++++++++++++++++++ 7 files changed, 133 insertions(+), 14 deletions(-) create mode 100644 spec/javascripts/unit/admin/side_menu/services/side_menu.js.coffee diff --git a/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee b/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee index de63fa4d05..9a665571b2 100644 --- a/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee +++ b/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee @@ -45,3 +45,11 @@ angular.module("admin.enterprises") count++ if shipping_method.selected count , 0 + + $scope.$watch "Enterprise.is_primary_producer", (newValue, oldValue) -> + if newValue + $scope.menu.hide_item_by_name('Shipping Methods') + $scope.menu.hide_item_by_name('Payment Methods') + else if !newValue + $scope.menu.show_item_by_name('Shipping Methods') + $scope.menu.show_item_by_name('Payment Methods') diff --git a/app/assets/javascripts/admin/enterprises/controllers/side_menu_controller.js.coffee b/app/assets/javascripts/admin/enterprises/controllers/side_menu_controller.js.coffee index 683d1f3bc6..590728d19f 100644 --- a/app/assets/javascripts/admin/enterprises/controllers/side_menu_controller.js.coffee +++ b/app/assets/javascripts/admin/enterprises/controllers/side_menu_controller.js.coffee @@ -4,18 +4,18 @@ angular.module("admin.enterprises") $scope.menu = SideMenu $scope.select = SideMenu.select - SideMenu.setItems [ + $scope.menu.setItems [ { name: 'Primary Details' } { name: 'Address' } { name: 'Contact' } { name: 'Social' } { name: 'About' } - { name: "Business Details"} + { name: 'Business Details' } { name: 'Images' } - { name: "Shipping Methods"} - { name: "Payment Methods"} - { name: "Enterprise Fees"} - { name: "Preferences"} + { name: "Shipping Methods" } + { name: "Payment Methods" } + { name: "Enterprise Fees" } + { name: "Preferences" } ] $scope.select(0) diff --git a/app/assets/javascripts/admin/side_menu/services/side_menu.js.coffee b/app/assets/javascripts/admin/side_menu/services/side_menu.js.coffee index 5f45bb4818..020f0981d8 100644 --- a/app/assets/javascripts/admin/side_menu/services/side_menu.js.coffee +++ b/app/assets/javascripts/admin/side_menu/services/side_menu.js.coffee @@ -6,10 +6,23 @@ angular.module("admin.side_menu") setItems: (items) => @items = items + item.visible = true for item in @items select: (index) => - @selected.selected = false if @selected - @selected = @items[index] - @selected.selected = true + if index < @items.length + @selected.selected = false if @selected + @selected = @items[index] + @selected.selected = true + find_by_name: (name) => + for item in @items when item.name is name + return item + null + hide_item_by_name: (name) => + item = @find_by_name(name) + item.visible = false if item + + show_item_by_name: (name) => + item = @find_by_name(name) + item.visible = true if item diff --git a/app/assets/stylesheets/admin/side_menu.css.sass b/app/assets/stylesheets/admin/side_menu.css.sass index 540b7ceae9..a41e60f711 100644 --- a/app/assets/stylesheets/admin/side_menu.css.sass +++ b/app/assets/stylesheets/admin/side_menu.css.sass @@ -6,9 +6,9 @@ font-size: 120% cursor: pointer text-transform: uppercase - &.even - background-color: #ebf3fb &.odd + background-color: #ebf3fb + &.even background-color: #ffffff &:hover background-color: #eaf0f5 diff --git a/app/views/admin/enterprises/_side_menu.html.haml b/app/views/admin/enterprises/_side_menu.html.haml index 3022456e4a..687c2d2a12 100644 --- a/app/views/admin/enterprises/_side_menu.html.haml +++ b/app/views/admin/enterprises/_side_menu.html.haml @@ -1,3 +1,8 @@ .side_menu{ ng: { controller: 'sideMenuCtrl' } } - .menu_item{ ng: { repeat: '(index,item) in menu.items', click: 'select(index)', class: '{ selected: item.selected}', 'class-odd' => "'odd'", 'class-even' => "'even'" } } + .menu_item{ ng: { repeat: '(index,item) in menu.items', + show: "item.visible", + click: 'select(index)', + class: '{ selected: item.selected}', + 'class-odd' => "'odd'", + 'class-even' => "'even'" } } {{ item.name }} \ No newline at end of file diff --git a/spec/javascripts/unit/admin/enterprises/controllers/side_menu_controller_spec.js.coffee b/spec/javascripts/unit/admin/enterprises/controllers/side_menu_controller_spec.js.coffee index 5261a96390..136203a644 100644 --- a/spec/javascripts/unit/admin/enterprises/controllers/side_menu_controller_spec.js.coffee +++ b/spec/javascripts/unit/admin/enterprises/controllers/side_menu_controller_spec.js.coffee @@ -15,8 +15,8 @@ describe "menuCtrl", -> # ShippingMethods = # shippingMethods: [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ] - inject ($controller, _SideMenu_) -> - scope = {} + inject ($rootScope, $controller, _SideMenu_) -> + scope = $rootScope SideMenu = _SideMenu_ spyOn(SideMenu, "select").andCallThrough() spyOn(SideMenu, "setItems").andCallThrough() diff --git a/spec/javascripts/unit/admin/side_menu/services/side_menu.js.coffee b/spec/javascripts/unit/admin/side_menu/services/side_menu.js.coffee new file mode 100644 index 0000000000..1c6044b66e --- /dev/null +++ b/spec/javascripts/unit/admin/side_menu/services/side_menu.js.coffee @@ -0,0 +1,93 @@ +describe "SideMenu service", -> + SideMenu = null + + beforeEach -> + module "admin.side_menu" + + beforeEach inject (_SideMenu_) -> + SideMenu = _SideMenu_ + + describe "setting items", -> + it "sets the items", -> + items = [ { name: "Name 1"}, { name: "Name 2"} ] + SideMenu.setItems items + expect(SideMenu.items[0]).toBe items[0] + + it "sets the the visible flag to true for each", -> + items = [ { name: "Name 1"}, { name: "Name 2"} ] + SideMenu.setItems items + expect(items[0].visible).toBe true + + describe "selecting an item", -> + describe "when no item has been selected", -> + it "doesn't crash because of no selected item existing", -> + SideMenu.items = [ { name: "Name 1"}, { name: "Name 2"} ] + SideMenu.select(1) + + it "sets selected to the new item", -> + SideMenu.items = [ { name: "Name 1"}, { name: "Name 2"} ] + SideMenu.select(1) + expect(SideMenu.find_by_name("Name 2")).toBe SideMenu.items[1] + + it "switches the selected value of the newly selected item to true", -> + item1 = { name: "Name 1", selected: false } + item2 = { name: "Name 2", selected: false } + SideMenu.items = [ item1, item2 ] + SideMenu.select(1) + expect(item2.selected).toBe true + + it "doesn't crash if given an index greater than the length of items", -> + SideMenu.items = [ { name: "Name 1"}, { name: "Name 2"} ] + SideMenu.select(12) + + describe "when an item has been selected", -> + item1 = item2 = null + + beforeEach -> + item1 = { name: "Name 1", selected: true } + item2 = { name: "Name 2", selected: false } + SideMenu.selected = item1 + SideMenu.items = [ item1, item2 ] + SideMenu.select(1) + + it "switches the selected value of the existing selected item to false", -> + expect(item1.selected).toBe false + + it "switches the selected value of the newly selected item to true", -> + expect(item2.selected).toBe true + + + describe "finding by name", -> + it "returns the element that matches", -> + SideMenu.items = [ { name: "Name 1"}, { name: "Name 2"} ] + expect(SideMenu.find_by_name("Name 2")).toBe SideMenu.items[1] + + it "returns one element even if two items are found", -> + SideMenu.items = [ { name: "Name 1"}, { name: "Name 1"} ] + expect(SideMenu.find_by_name("Name 1")).toBe SideMenu.items[0] + + it "returns null if no items are found", -> + SideMenu.items = [ { name: "Name 1"}, { name: "Name 2"} ] + expect(SideMenu.find_by_name("Name 3")).toBe null + + describe "hiding an item by name", -> + it "sets visible to false on the response from find_by_name", -> + mockItem = { visible: true } + spyOn(SideMenu, 'find_by_name').andReturn mockItem + SideMenu.hide_item_by_name() + expect(mockItem.visible).toBe false + + it "doesn't crash if null is returned from find_by_name", -> + spyOn(SideMenu, 'find_by_name').andReturn null + SideMenu.hide_item_by_name() + + describe "showing an item by name", -> + it "sets visible to false on the response from find_by_name", -> + mockItem = { visible: false } + spyOn(SideMenu, 'find_by_name').andReturn mockItem + SideMenu.show_item_by_name() + expect(mockItem.visible).toBe true + + it "doesn't crash if null is returned from find_by_name", -> + spyOn(SideMenu, 'find_by_name').andReturn null + SideMenu.show_item_by_name()