From 2964ec138defb8daae939d49ff7582ec0cb25f7c Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 12:38:08 +0200
Subject: [PATCH] Update display of join words in filters list and rearrange
 code a bit for clarity

Here we need to build a really dynamic structure on the page like "Results for: <search-term> in <filter1> or <filter2>" and the styling on each of the words needs to be a bit different, specifically the filter terms need to be differently styled to the join words like "in" and "or". We have to generate those bits on the Angular side, but they also have to be wrapped in HTML in a specific way.

$sce.trustAsHtml() marks the injected HTML as "safe" (in relation to security issues like XSS). In this case the injected content doesn't involve any user-defined data, so it should be fine.
---
 .../controllers/products_controller.js.coffee |  9 +++++---
 app/views/shop/products/_search_feedback.haml | 23 ++++++++++---------
 config/locales/en.yml                         |  3 ++-
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 894ed5576f..4a654cde10 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -1,4 +1,4 @@
-Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, OrderCycle, OrderCycleResource, FilterSelectorsService, Cart, Dereferencer, Taxons, Properties, currentHub, $timeout) ->
+Darkswarm.controller "ProductsCtrl", ($scope, $sce, $filter, $rootScope, Products, OrderCycle, OrderCycleResource, FilterSelectorsService, Cart, Dereferencer, Taxons, Properties, currentHub, $timeout) ->
   $scope.Products = Products
   $scope.Cart = Cart
   $scope.query = ""
@@ -76,12 +76,15 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
   $scope.appliedTaxonsList = ->
     $scope.activeTaxons.map( (taxon_id) ->
       Taxons.taxons_by_id[taxon_id].name
-    ).join(" #{t('products_or')} ") if $scope.activeTaxons?
+    ).join($scope.filtersJoinWord()) if $scope.activeTaxons?
 
   $scope.appliedPropertiesList = ->
     $scope.activeProperties.map( (property_id) ->
       Properties.properties_by_id[property_id].name
-    ).join(" #{t('products_or')} ") if $scope.activeProperties?
+    ).join($scope.filtersJoinWord()) if $scope.activeProperties?
+
+  $scope.filtersJoinWord = ->
+    $sce.trustAsHtml(" <span>#{t('products_or')}</span> ")
 
   $scope.clearAll = ->
     $scope.clearQuery()
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 9b5816a41d..70648d9500 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -2,20 +2,21 @@
   .small-12.columns
     .alert-box.search-alert.ng-scope
       %div{"ng-show" => "Products.products.length > 0"}
+        %span.filter-label
+          = t :products_results_for
+          %span{ ng: { hide: "!query"} }
+            %span.applied-search
+              {{ query }}
+
+          %span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
+            = t :products_filters_in
+
+          %span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
+          %span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
+
         %a.clear-all.right{"ng-click" => "clearAll()"}
           = t :products_clear
           %i.ofn-i_009-close
-        %span.filter-label
-          = t :products_results_for
-          %span.applied-properties
-            {{ appliedPropertiesList() }}
-          %span.applied-taxons
-            {{ appliedTaxonsList() }}
-          %span{ ng: { hide: "!query"} }
-            %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
-              = t :products_with
-            %span.applied-search
-              {{ query }}
 
       %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
         .row.summary
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 5802486794..60a4880db0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1651,7 +1651,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
   products_clear: Clear
   products_showing: "Showing:"
   products_results_for: "Results for"
-  products_or: "OR"
+  products_or: "or"
+  products_filters_in: "in"
   products_with: with
   products_search: "Search..."
   products_filter_by: "Filter by"