Adding quick search and column dropdown to customers index

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

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

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

@@ -1,12 +1,14 @@
 angular.module("admin.customers").factory 'Customers', (CustomerResource) ->
   new class Customers
-    customers: {}
+    customers: []
+    customers_by_id: {}
     loaded: false
 
     index: (params={}, callback=null) ->
     	CustomerResource.index params, (data) =>
         for customer in data
-          @customers[customer.id] = customer
+          @customers.push customer
+          @customers_by_id[customer.id] = customer
 
         @loaded = true
         (callback || angular.noop)(@customers)

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

@@ -9,6 +9,34 @@
     .ten.columns.omega
       %input{ type: 'button', value: 'Go', ng: { click: 'initialise()' } }
 
+  .row{ 'ng-hide' => '!loaded() || lineItems.length == 0' }
+    .controls{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px;" }
+      .three.columns.alpha
+        %input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
+      .three.columns  
+      -#   %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
+      -#     %span{ :class => 'icon-check' }   Actions
+      -#     %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
+      -#     %div.menu{ 'ng-show' => "expanded" }
+      -#       %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredCustomers)", 'ofn-close-on-click' => true }
+      -#         %span{ :class => 'three columns omega' } {{action.name }}
+      .seven.columns  
+      .three.columns.omega
+        %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
+          %span{ :class => 'icon-reorder' }   Columns
+          %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
+          %div.menu{ 'ng-show' => "expanded" }
+            %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns",  'ofn-toggle-column' => true }
+              %span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
+              %span{ :class => 'two columns omega' } {{column.name }}
+    .row
+      .sixteen.columns.alpha#loading{ 'ng-if' => 'shop_id && !loaded()' }
+        %img.spinner{ src: "/assets/spinning-circles.svg" }
+        %h1 LOADING CUSTOMERS
+    .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded() && filteredCustomers.length == 0'}
+      %h1#no_results No customers found.
+
+
   .row{ ng: { show: "loaded()" } }
     %form{ name: "customers" }
       %table.index#customers{ :class => "sixteen columns alpha" }
@@ -23,7 +51,7 @@
             %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_{{id}}" }
+          %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 }}

spec/features/admin/customers_spec.rb

@@ -11,7 +11,8 @@ feature 'Customers' do
 
     describe "using the customers index" do
       let!(:customer1) { create(:customer, enterprise: managed_distributor) }
-      let!(:customer2) { create(:customer, enterprise: unmanaged_distributor) }
+      let!(:customer2) { create(:customer, enterprise: managed_distributor) }
+      let!(:customer3) { create(:customer, enterprise: unmanaged_distributor) }
 
       before do
         quick_login_as user
@@ -25,10 +26,24 @@ feature 'Customers' do
         select2_select managed_distributor.name, from: "shop_id"
         click_button "Go"
 
+        # Loads the right customers
+        expect(page).to have_selector "tr#c_#{customer1.id}"
+        expect(page).to have_selector "tr#c_#{customer2.id}"
+        expect(page).to_not have_selector "tr#c_#{customer3.id}"
+
+        # Searching
+        fill_in "quick_search", with: customer2.email
+        expect(page).to_not have_selector "tr#c_#{customer1.id}"
+        expect(page).to have_selector "tr#c_#{customer2.id}"
+        fill_in "quick_search", with: ""
+
+        # Toggling columns
+        expect(page).to have_selector "th.email"
         expect(page).to have_content customer1.email
-        expect(page).to have_content customer1.code
-        expect(page).to_not have_content customer2.email
-        expect(page).to_not have_content customer2.code
+        first("div#columns_dropdown", :text => "COLUMNS").click
+        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
     end
   end

spec/javascripts/unit/admin/customers/services/customers_spec.js.coffee

@@ -22,7 +22,7 @@ describe "Customers service", ->
       # This is super weird and freaking annoying. I think resource results have extra
       # properties ($then, $promise) that cause them to not be equal to the reponse object
       # provided to the expectGET clause above.
-      expect(Customers.customers).toEqual { 5: new CustomerResource({ id: 5, email: 'someone@email.com'}) }
+      expect(Customers.customers).toEqual [ new CustomerResource({ id: 5, email: 'someone@email.com'}) ]
 
     it "returns @customers", ->
       expect(result).toEqual Customers.customers