feat(history-queries): selected filters in history queries (#332)

--------- Co-authored-by: Laura Martinez Garcia <[email protected]>
empathyco · Nov 3, 2023 · 4a8b2b7 · 4a8b2b7
1 parent b116aa1
commit 4a8b2b7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 7 deletions.
diff --git a/src/components/history-query-filters.vue 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
@@ -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,14 +59,16 @@
   } 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: {
       BaseIdModalClose,
       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
@@ -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
@@ -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,