Add Selected Filters in myHistory #332

annacv · 2023-10-16T08:41:06Z

EMP-2293

Implement selectedFilters in myHistory aside panel.

Test:
Choose & query and filter with one or more filters, check the aside panel & see filters shown below the query

EMP-2293

src/components/my-history/custom-my-history.vue

EMP-2293

src/components/my-history/my-history-filters.vue

EMP-2293

annacv · 2023-10-26T08:55:22Z

src/components/my-history/custom-my-history.vue

+                class="x-text1-sm x-text-lead-50 x-line-clamp-1"
+              >
+                <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
+                  {{ filter.label ?? filter.id }}


This filter.id should not be needed as soon as this empathyco/x#1325 is implemented

EMP-2293

support-empathy · 2023-10-26T09:22:19Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

EMP-2293

support-empathy · 2023-10-26T14:48:58Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

CachedaCodes · 2023-10-30T10:32:27Z

src/components/my-history/custom-my-history.vue

@@ -16,12 +16,28 @@
            @click="closeModal"
            data-test="my-history-query"
            :suggestion="suggestion"
-            suggestionClass="x-suggestion"
+            suggestionClass="x-suggestion x-w-[320px]"


We already have 320px as value in the theme's spacing

CachedaCodes · 2023-10-30T10:34:19Z

src/components/my-history/custom-my-history.vue

+                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"
+                class="x-text1-sm x-flex x-text-lead-50"
+              >
+                <p class="x-line-clamp-1">


Using a line clamp of 1 is overkill, this should be done just with x-truncate.

The width limit should be here, not in the parent.

CachedaCodes · 2023-10-30T10:39:07Z

src/components/my-history/custom-my-history.vue

+                    {{ label(filter) }}
+                  </span>
+                </p>
+                <p class="x-pl-8">({{ suggestion.selectedFilters.length }})</p>


You're adding extra 8px between the last filter and the filter count with this padding.
Also this should be an span

Suggested change

<p class="x-pl-8">({{ suggestion.selectedFilters.length }})</p>

<span>({{ suggestion.selectedFilters.length }})</span>

CachedaCodes · 2023-10-30T10:41:10Z

src/components/my-history/custom-my-history.vue

-              <p>{{ suggestion.query }}</p>
+              <p class="hover:x-underline">{{ suggestion.query }}</p>
+              <div
+                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"


Suggested change

v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"

v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"

CachedaCodes · 2023-10-30T10:42:24Z

src/components/my-history/custom-my-history.vue

          >
            <HistoryIcon class="max-desktop:x-icon-lg" />

            <div class="x-flex x-flex-col x-gap-2">
-              <p>{{ suggestion.query }}</p>
+              <p class="hover:x-underline">{{ suggestion.query }}</p>


This way you only get the underline when hovering this specific element. This underline should appear when you hover anywhere in the parent.
Use tailwind group for this

CachedaCodes · 2023-10-30T10:52:13Z

src/tailwind/plugin-options.js

@@ -17,6 +17,9 @@ module.exports = {
        paddingTop: theme('spacing.24'),
        paddingBottom: theme('spacing.24')
      }
+    },
+    '.history-query.suggestion-group:hover': {


This removes the hover decorations to all HQ, including the ones in the empathize.
You can deactivate the text decoration in the history query with tailwind.

This is still here and it's not needed

CachedaCodes · 2023-10-30T10:58:38Z

The filters under the HQs in the empathize are missing

herrardo · 2023-10-30T14:57:58Z

src/components/my-history/custom-my-history.vue

+                class="x-text1-sm x-text-lead-50 x-line-clamp-1"
+              >
+                <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
+                  {{ filter.label ?? filter.id }}


Suggested change

{{ filter.label ?? filter.id }}

{{ filter.label }}

You can accept this commit by pointing to x-components "3.0.1-alpha.1"

…r comments

support-empathy · 2023-10-31T11:12:32Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

CachedaCodes · 2023-10-31T14:01:37Z

src/components/my-history/custom-my-history.vue

+                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
+                class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
+              >
+                <div class="x-line-clamp-1">


You're still using line clamp instead of truncate.
Also, this should have a width of 320px aprox.

CachedaCodes · 2023-10-31T14:02:14Z

src/components/predictive-layer/full-width-predictive.vue

+                                    "
+                                    class="x-text1-sm x-flex x-text-lead-50"
+                                  >
+                                    <div class="x-line-clamp-1">


Change this line clamp with truncate

CachedaCodes · 2023-10-31T14:04:06Z

src/components/my-history/custom-my-history.vue

-              <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>
+              <div


This is a pretty big chunk that is duplicated here and in the empathize, moving it to it's own component might be a good idea.

CachedaCodes · 2023-10-31T14:04:44Z

src/tailwind/plugin-options.js

@@ -17,6 +17,9 @@ module.exports = {
        paddingTop: theme('spacing.24'),
        paddingBottom: theme('spacing.24')
      }
+    },
+    '.history-query.suggestion-group:hover': {


This is still here and it's not needed

…filters-in-my-history

…filters-in-my-history # Conflicts: # package-lock.json # package.json

support-empathy · 2023-11-02T08:16:38Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

CachedaCodes

gj!

The HQ in mobile don't have the filters, I think it's because mobile uses the PredictiveLayer component instead of the full width one

CachedaCodes · 2023-11-02T13:32:11Z

src/components/history-query-filters.vue

+  });
+</script>
+
+<style scoped></style>


Suggested change

<style scoped></style>

CachedaCodes · 2023-11-02T13:33:58Z

src/components/history-query-filters.vue

+      suggestion: {
+        type: HistoryQuery,
+        required: true


You don't need the whole suggestion

Suggested change

suggestion: {

type: HistoryQuery,

required: true

filtersList: {

type: HistoryQuery['selectedFilters'],

required: true

CachedaCodes · 2023-11-02T13:37:27Z

src/components/my-history/custom-my-history.vue

+            <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-192" :suggestion="suggestion"></HistoryQueryFilters>


Suggested change

<HistoryQueryFilters class="x-w-192" :suggestion="suggestion"></HistoryQueryFilters>

<HistoryQueryFilters class="x-w-192" :suggestion="suggestion"/>

Also, the list of filters could be have more width here, bump it to something around 250-320

CachedaCodes · 2023-11-02T13:38:50Z

src/components/history-query-filters.vue

+
+<script>
+  import { defineComponent } from 'vue';
+  import { HistoryQuery } from '@empathyco/x-components/history-queries';


You're importing the component instead of the type.

support-empathy · 2023-11-02T14:59:35Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

support-empathy · 2023-11-02T15:15:36Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

support-empathy · 2023-11-02T15:19:15Z

Check PR 332 preview 👀

https://x.test.empathy.co/preview/332/index.html

annacv added 2 commits October 16, 2023 10:37

feat: selected Filters in myHistory

292bb01

EMP-2293

feat: selected Filters in myHistory

beb1b80

EMP-2293

annacv requested a review from a team as a code owner October 16, 2023 08:41

CachedaCodes suggested changes Oct 16, 2023

View reviewed changes

src/components/my-history/custom-my-history.vue Outdated Show resolved Hide resolved

src/components/my-history/custom-my-history.vue Outdated Show resolved Hide resolved

src/components/my-history/custom-my-history.vue Outdated Show resolved Hide resolved

annacv added 7 commits October 16, 2023 17:07

feat: add line-clamp tailwind plugin

b2691a9

EMP-2293

feat: use line-clamp in my history filters

31011fb

EMP-2293

feat: add translations

4015125

EMP-2293

feat: create my-history-filters component

c43179b

EMP-2293

feat: wip showing 2 opt

b583f93

EMP-2293

chore: update branch

7a5e686

EMP-2293

feat: apply design with line-clamp

a2e2555

EMP-2293

annacv commented Oct 25, 2023

View reviewed changes

src/components/my-history/my-history-filters.vue Outdated Show resolved Hide resolved

annacv requested a review from CachedaCodes October 26, 2023 06:57

annacv added 4 commits October 26, 2023 09:01

chore: rm unnecessary div

e401ad2

EMP-2293

feat: st if condition inside custom-my-history

81c1cd4

EMP-2293

feat: rm unneded component, rm unneded class

cceca35

EMP-2293

chore: add forgotten if

0afd27a

EMP-2293

annacv commented Oct 26, 2023

View reviewed changes

fix: rm ?? operator from template

59a7de0

EMP-2293

style(my-history): fix show num of filters, fix underline on hover

ed69591

EMP-2293

CachedaCodes suggested changes Oct 30, 2023

View reviewed changes

herrardo suggested changes Oct 30, 2023

View reviewed changes

style(my-history): add filters in empathize history queries and fix p…

d029328

…r comments

CachedaCodes suggested changes Oct 31, 2023

View reviewed changes

lauramargar added 2 commits November 2, 2023 08:54

feat(my-history): create new component for history query filters

cc1700f

feat(my-history): remove line-clamp dependency

856c819

lauramargar added 2 commits November 2, 2023 09:10

Merge remote-tracking branch 'origin/main' into feature/EMP-2293-Add-…

9627342

…filters-in-my-history

Merge remote-tracking branch 'origin/main' into feature/EMP-2293-Add-…

6dfe40f

…filters-in-my-history # Conflicts: # package-lock.json # package.json

CachedaCodes suggested changes Nov 2, 2023

View reviewed changes

feat(my-history): fix pr comments

b78ef52

feat(my-history): change history query filters' prop

ffc4441

feat(my-history): underline only the query

94aec1e

CachedaCodes approved these changes Nov 3, 2023

View reviewed changes

CachedaCodes merged commit 4a8b2b7 into main Nov 3, 2023
4 checks passed

CachedaCodes deleted the feature/EMP-2293-Add-filters-in-my-history branch November 3, 2023 07:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Selected Filters in myHistory #332

Add Selected Filters in myHistory #332

annacv commented Oct 16, 2023 •

edited by jira bot

Loading

annacv Oct 26, 2023

support-empathy commented Oct 26, 2023

support-empathy commented Oct 26, 2023

CachedaCodes Oct 30, 2023

CachedaCodes Oct 30, 2023

CachedaCodes Oct 30, 2023

CachedaCodes Oct 30, 2023

CachedaCodes Oct 30, 2023

CachedaCodes Oct 30, 2023

CachedaCodes Oct 31, 2023

CachedaCodes commented Oct 30, 2023

herrardo Oct 30, 2023

support-empathy commented Oct 31, 2023

CachedaCodes Oct 31, 2023

CachedaCodes Oct 31, 2023

CachedaCodes Oct 31, 2023

CachedaCodes Oct 31, 2023

support-empathy commented Nov 2, 2023

CachedaCodes left a comment

CachedaCodes Nov 2, 2023

CachedaCodes Nov 2, 2023

CachedaCodes Nov 2, 2023

CachedaCodes Nov 2, 2023

support-empathy commented Nov 2, 2023

support-empathy commented Nov 2, 2023

support-empathy commented Nov 2, 2023

	<p class="x-pl-8">({{ suggestion.selectedFilters.length }})</p>
	<span>({{ suggestion.selectedFilters.length }})</span>

	v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"
	v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"

	<HistoryQueryFilters class="x-w-192" :suggestion="suggestion"></HistoryQueryFilters>
	<HistoryQueryFilters class="x-w-192" :suggestion="suggestion"/>

Add Selected Filters in myHistory #332

Add Selected Filters in myHistory #332

Conversation

annacv commented Oct 16, 2023 • edited by jira bot Loading

Choose a reason for hiding this comment

support-empathy commented Oct 26, 2023

support-empathy commented Oct 26, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CachedaCodes commented Oct 30, 2023

Choose a reason for hiding this comment

support-empathy commented Oct 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

support-empathy commented Nov 2, 2023

CachedaCodes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

support-empathy commented Nov 2, 2023

support-empathy commented Nov 2, 2023

support-empathy commented Nov 2, 2023

annacv commented Oct 16, 2023 •

edited by jira bot

Loading