Adding tags input to customer index using ngTagsInput

app/assets/javascripts/admin/customers/controllers/customers_controller.js.coffee

@@ -6,6 +6,7 @@ angular.module("admin.customers").controller "customersCtrl", ($scope, Customers
   $scope.columns = Columns.setColumns
     email:     { name: "Email",    visible: true }
     code:      { name: "Code",     visible: true }
+    tags:      { name: "Tags",     visible: true }
 
   $scope.initialise = ->
     $scope.customers = Customers.index(enterprise_id: $scope.shop.id)

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

@@ -1 +1 @@
-angular.module("admin.customers", ['ngResource', 'admin.indexUtils', 'admin.dropdown'])
+angular.module("admin.customers", ['ngResource', 'ngTagsInput', 'admin.indexUtils', 'admin.dropdown'])

app/assets/javascripts/admin/customers/directives/tags_with_translation.js.coffee

@@ -0,0 +1,8 @@
+angular.module("admin.customers").directive "tagsWithTranslation", ->
+  restrict: "E"
+  template: "<tags-input ng-model='object.tags'>"
+  scope:
+    object: "="
+  link: (scope, element, attrs) ->
+    scope.$watchCollection "object.tags", ->
+      scope.object.tag_list = (tag.text for tag in scope.object.tags).join(",")

app/serializers/api/admin/customer_serializer.rb

@@ -1,3 +1,11 @@
 class Api::Admin::CustomerSerializer < ActiveModel::Serializer
-  attributes :id, :email, :enterprise_id, :user_id, :code
+  attributes :id, :email, :enterprise_id, :user_id, :code, :tags, :tag_list
+
+  def tag_list
+    object.tag_list.join(",")
+  end
+
+  def tags
+    object.tag_list.map{ |t| { text: t } }
+  end
 end

app/views/admin/customers/index.html.haml

@@ -39,7 +39,11 @@
 
   .row{ ng: { show: "loaded()" } }
     %form{ name: "customers" }
-      %table.index#customers{ :class => "sixteen columns alpha" }
+      %table.index#customers
+        %col.email{ width: "20%"}
+        %col.code{ width: "20%"}
+        %col.tags{ width: "50%"}
+        %col.actions{ width: "10%"}
         %thead
           %tr{ ng: { controller: "ColumnsCtrl" } }
             -# %th.bulk
@@ -48,15 +52,19 @@
               %a{ :href => '', 'ng-click' => "predicate = 'customer.email'; reverse = !reverse" } Email
             %th.code{ 'ng-show' => 'columns.code.visible' }
               %a{ :href => '', 'ng-click' => "predicate = 'customer.code'; reverse = !reverse" } Code
+            %th.tags{ 'ng-show' => 'columns.tags.visible' } Tags
             %th.actions
               Ask? 
               %input{ :type => 'checkbox', 'ng-model' => "confirmDelete" }
-          %tr.customer{ 'ng-repeat' => "customer in filteredCustomers = ( customers | filter:quickSearch | orderBy:predicate:reverse )", 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'", :id => "c_{{customer.id}}" }
-            -# %td.bulk
-              -# %input{ :type => "checkbox", :name => 'bulk', 'ng-model' => 'customer.checked' }
-            %td.email{ 'ng-show' => 'columns.email.visible' } {{ customer.email }}
-            %td.code{ 'ng-show' => 'columns.code.visible' }
-              %input{ :type => 'text', :name => 'code', :id => 'code', 'ng-model' => 'customer.code', 'obj-for-update' => "customer", "attr-for-update" => "code" }
-            %td.actions
-              %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }
+        %tr.customer{ 'ng-repeat' => "customer in filteredCustomers = ( customers | filter:quickSearch | orderBy:predicate:reverse )", 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'", :id => "c_{{customer.id}}" }
+          -# %td.bulk
+            -# %input{ :type => "checkbox", :name => 'bulk', 'ng-model' => 'customer.checked' }
+          %td.email{ 'ng-show' => 'columns.email.visible' } {{ customer.email }}
+          %td.code{ 'ng-show' => 'columns.code.visible' }
+            %input{ :type => 'text', :name => 'code', :id => 'code', 'ng-model' => 'customer.code', 'obj-for-update' => "customer", "attr-for-update" => "code" }
+          %td.tags{ 'ng-show' => 'columns.tags.visible' }
+            .tag_watcher{ 'obj-for-update' => "customer", "attr-for-update" => "tag_list"}
+              %tags_with_translation{ object: 'customer' }
+          %td.actions
+            %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }
       %input{ :type => "button", 'value' => 'Update', 'ng-click' => 'submitAll()' }

spec/features/admin/customers_spec.rb

@@ -20,7 +20,7 @@ feature 'Customers' do
       end
 
       it "passes the smoke test", js: true do
-        # Prompts for a hub
+        # Prompts for a hub for a list of my managed enterprises
         expect(page).to have_select2 "shop_id", with_options: [managed_distributor.name], without_options: [unmanaged_distributor.name]
 
         select2_select managed_distributor.name, from: "shop_id"
@@ -44,15 +44,29 @@ feature 'Customers' do
         first("div#columns_dropdown div.menu div.menu_item", text: "Email").click
         expect(page).to_not have_selector "th.email"
         expect(page).to_not have_content customer1.email
+      end
+
+      it "allows updating of attributes", js: true do
+        select2_select managed_distributor.name, from: "shop_id"
+        click_button "Go"
 
-        # Updating attributes
         within "tr#c_#{customer1.id}" do
           fill_in "code", with: "new-customer-code"
           expect(page).to have_css "input#code.update-pending"
         end
+        within "tr#c_#{customer1.id}" do
+          find(:css, "tags-input .tags input").set "awesome\n"
+          expect(page).to have_css ".tag_watcher.update-pending"
+        end
         click_button "Update"
+
+        # Every says it updated
         expect(page).to have_css "input#code.update-success"
+        expect(page).to have_css ".tag_watcher.update-success"
+
+        # And it actually did
         expect(customer1.reload.code).to eq "new-customer-code"
+        expect(customer1.tag_list).to eq ["awesome"]
       end
     end
   end