From 4a8b2b76af659d158f4e53207ef88a362480067d Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Fri, 3 Nov 2023 08:20:01 +0100
Subject: [PATCH] feat(history-queries): selected filters in history queries
 (#332)

---------

Co-authored-by: Laura Martinez Garcia <lauram@empathy.co>
---
 src/components/history-query-filters.vue      | 24 +++++++++++++++++++
 .../my-history/custom-my-history.vue          | 15 +++++++++---
 .../full-width-predictive.vue                 | 16 +++++++++++--
 .../predictive-layer/predictive-layer.vue     | 16 +++++++++++--
 4 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 src/components/history-query-filters.vue

diff --git a/src/components/history-query-filters.vue b/src/components/history-query-filters.vue
new file mode 100644
index 00000000..e5f83d58
--- /dev/null
+++ b/src/components/history-query-filters.vue
@@ -0,0 +1,24 @@
+<template>
+  <div v-if="filtersList && filtersList.length" class="x-text1-sm x-flex x-gap-8 x-text-lead-50">
+    <div class="x-truncate">
+      <span v-for="filter in filtersList" :key="filter.id" class="x-pr-8">
+        {{ filter.label }}
+      </span>
+    </div>
+    <span>({{ filtersList.length }})</span>
+  </div>
+</template>
+
+<script lang="ts">
+  import { HistoryQuery } from '@empathyco/x-types';
+  import { defineComponent, PropType } from 'vue';
+
+  export default defineComponent({
+    props: {
+      filtersList: {
+        type: Array as PropType<HistoryQuery['selectedFilters']>,
+        required: true
+      }
+    }
+  });
+</script>
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index ddb2c920..ec305c41 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -17,11 +17,18 @@
             data-test="my-history-query"
             :suggestion="suggestion"
             suggestionClass="x-suggestion"
+            class="hover:x-no-underline"
           >
             <HistoryIcon class="max-desktop:x-icon-lg" />
 
-            <div class="x-flex x-flex-col x-gap-2">
-              <p>{{ suggestion.query }}</p>
+            <div class="x-group x-flex x-flex-col x-gap-2">
+              <p class="group-hover:x-underline">{{ suggestion.query }}</p>
+
+              <HistoryQueryFilters
+                class="x-w-224 desktop:x-w-320"
+                :filtersList="suggestion.selectedFilters"
+              />
+
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
                 <template v-if="suggestion.totalResults !== undefined">
@@ -52,6 +59,7 @@
   } from '@empathyco/x-components';
   import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';
   import { defineComponent } from 'vue';
+  import HistoryQueryFilters from '../history-query-filters.vue';
 
   export default defineComponent({
     components: {
@@ -59,7 +67,8 @@
       CrossTinyIcon,
       HistoryIcon,
       MyHistory,
-      HistoryQuery
+      HistoryQuery,
+      HistoryQueryFilters
     },
     setup() {
       return {
diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
index a9f90dd5..fe8344d2 100644
--- a/src/components/predictive-layer/full-width-predictive.vue
+++ b/src/components/predictive-layer/full-width-predictive.vue
@@ -39,13 +39,23 @@
                         >
                           <template #suggestion="{ suggestion }">
                             <HistoryQuery
-                              class="x-suggestion-group-md"
+                              class="x-suggestion-group-md hover:x-no-underline"
                               :suggestion="suggestion"
                               suggestionClass="x-suggestion x-suggestion-md"
                             >
                               <template #default="{ query }">
                                 <HistoryIcon class="x-icon-md" />
-                                <Highlight :text="suggestion.query" :highlight="query" />
+                                <div class="x-group x-flex x-flex-col x-gap-2">
+                                  <Highlight
+                                    :text="suggestion.query"
+                                    :highlight="query"
+                                    class="group-hover:x-underline"
+                                  />
+                                  <HistoryQueryFilters
+                                    class="x-w-128"
+                                    :filtersList="suggestion.selectedFilters"
+                                  />
+                                </div>
                               </template>
 
                               <template #remove-button-content>
@@ -153,6 +163,7 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
   import { usePredictiveHelpers } from '../../composables/use-predictive-helpers.composable';
   import DesktopSearchboxAlign from '../desktop/desktop-searchbox-align.vue';
+  import HistoryQueryFilters from '../history-query-filters.vue';
   import SlidingRecommendations from './sliding-recommendations.vue';
   import PredictiveIdentifierResults from './predictive-identifier-results.vue';
   import PredictiveNextQueries from './predictive-next-queries.vue';
@@ -161,6 +172,7 @@
 
   export default defineComponent({
     components: {
+      HistoryQueryFilters,
       DesktopSearchboxAlign,
       MaxDesktopWidthItem,
       PredictiveQuerySuggestions,
diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
index 8031bf8e..e1535ee8 100644
--- a/src/components/predictive-layer/predictive-layer.vue
+++ b/src/components/predictive-layer/predictive-layer.vue
@@ -50,13 +50,23 @@
               >
                 <template #suggestion="{ suggestion }">
                   <HistoryQuery
-                    class="x-suggestion-group-lg desktop:x-suggestion-group-md"
+                    class="x-suggestion-group-lg hover:x-no-underline desktop:x-suggestion-group-md"
                     :suggestion="suggestion"
                     suggestionClass="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
                   >
                     <template #default="{ query }">
                       <HistoryIcon class="x-icon-lg desktop:x-icon-md" />
-                      <Highlight :text="suggestion.query" :highlight="query" />
+                      <div class="x-group x-flex x-flex-col x-gap-2">
+                        <Highlight
+                          :text="suggestion.query"
+                          :highlight="query"
+                          class="group-hover:x-underline"
+                        />
+                        <HistoryQueryFilters
+                          class="x-w-192 desktop:x-w-128"
+                          :filtersList="suggestion.selectedFilters"
+                        />
+                      </div>
                     </template>
 
                     <template #remove-button-content>
@@ -129,6 +139,7 @@
   import { defineComponent } from 'vue';
   import { useDevice } from '../../composables/use-device.composable';
   import { usePredictiveHelpers } from '../../composables/use-predictive-helpers.composable';
+  import HistoryQueryFilters from '../history-query-filters.vue';
   import SlidingRecommendations from './sliding-recommendations.vue';
   import PredictiveIdentifierResults from './predictive-identifier-results.vue';
   import PredictiveQuerySuggestions from './predictive-query-suggestions.vue';
@@ -137,6 +148,7 @@
 
   export default defineComponent({
     components: {
+      HistoryQueryFilters,
       BaseScroll,
       PredictivePopularSearches,
       PredictiveNextQueries,