Filter products list on shop by active properties

app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee

@@ -1,4 +1,4 @@
-Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle, FilterSelectorsService, Cart, Taxons) ->
+Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle, FilterSelectorsService, Cart, Taxons, Properties) ->
   $scope.Products = Products
   $scope.Cart = Cart
   $scope.totalActive =  FilterSelectorsService.totalActive
@@ -21,11 +21,16 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle,
     if code == 13
       e.preventDefault()
 
-  $scope.appliedTaxonsList = () ->
+  $scope.appliedTaxonsList = ->
     $scope.activeTaxons.map( (taxon_id) ->
       Taxons.taxons_by_id[taxon_id].name
     ).join(" & ") if $scope.activeTaxons?
 
+  $scope.appliedPropertiesList = ->
+    $scope.activeProperties.map( (property_id) ->
+      Properties.properties_by_id[property_id].name
+    ).join(" & ") if $scope.activeProperties?
+
   $scope.clearAll = ->
     $scope.query = ""
     FilterSelectorsService.clearAll()

app/assets/javascripts/darkswarm/filters/properties.js.coffee

@@ -0,0 +1,16 @@
+Darkswarm.filter 'properties', ()->
+  # Filter anything that responds to object.properties
+  (objects, ids) ->
+    objects ||= []
+    ids ?= []
+    if ids.length == 0
+      # No properties selected, pass all objects through.
+      objects
+    else
+      objects.filter (obj)->
+        properties = obj.properties
+        # Combine object properties with supplied properties, if they exist.
+        # properties = properties.concat obj.supplied_properties if obj.supplied_properties
+        # Match property array.
+        properties.some (property)->
+          property.id in ids

app/assets/javascripts/templates/single_line_selectors.html.haml

@@ -7,7 +7,7 @@
       %span
         + {{ overFlowSelectors().length }} more
       %i.ofn-i_052-point-down
-  .f-dropdown.content#show-more
+  .f-dropdown.right.text-left.medium.content#show-more
     %ul
       %active-selector{ ng: { repeat: "selector in overFlowSelectors()", hide: "selector.fits" } }
         %render-svg{path: "{{selector.object.icon}}"}

app/assets/stylesheets/darkswarm/_shop-filters.css.sass

@@ -27,10 +27,14 @@
 .filter-box.filter-box-shopfront, .filter-box.property-box-shopfront
   background: transparent
 
-  single-line-selector
+  single-line-selectors
     overflow-x: hidden
     white-space: nowrap
 
+    .f-dropdown
+      overflow-x: auto
+      white-space: normal
+
   ul
     margin: 0
   ul, ul li

app/views/shop/products/_form.html.haml

@@ -10,8 +10,10 @@
           %i.ofn-i_009-close
         %span.filter-label
           Showing:
+          %span{ ng: { show: "!query && !appliedPropertiesList() && !appliedTaxonsList()"} }
+            All
           %span.applied-properties
-            Certified Organic
+            {{ appliedPropertiesList() }}
           %span.applied-taxons
             {{ appliedTaxonsList() }}
           %span.applied-search{ ng: { hide: "!query"} }
@@ -28,7 +30,7 @@
 
   %div.pad-top{bindonce: true}
     %product.animate-repeat{"ng-controller" => "ProductNodeCtrl",
-      "ng-repeat" => "product in filteredProducts = (Products.products | products:query | taxons:activeTaxons) track by product.id ", "id" => "product-{{ product.id }}"}
+      "ng-repeat" => "product in filteredProducts = (Products.products | products:query | taxons:activeTaxons | properties: activeProperties) track by product.id ", "id" => "product-{{ product.id }}"}
       = render partial: "shop/products/summary"
       %shop-variant{variant: 'product.master', "bo-if" => "!product.hasVariants", "id" => "variant-{{ product.master.id }}"}
       %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id", "id" => "variant-{{ variant.id }}"}