Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Selected Filters in myHistory #332

Merged
merged 23 commits into from
Nov 3, 2023
Merged

Add Selected Filters in myHistory #332

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
292bb01
feat: selected Filters in myHistory
annacv Oct 16, 2023
beb1b80
feat: selected Filters in myHistory
annacv Oct 16, 2023
b2691a9
feat: add line-clamp tailwind plugin
annacv Oct 16, 2023
31011fb
feat: use line-clamp in my history filters
annacv Oct 16, 2023
4015125
feat: add translations
annacv Oct 17, 2023
c43179b
feat: create my-history-filters component
annacv Oct 17, 2023
b583f93
feat: wip showing 2 opt
annacv Oct 17, 2023
7a5e686
chore: update branch
annacv Oct 25, 2023
a2e2555
feat: apply design with line-clamp
annacv Oct 25, 2023
e401ad2
chore: rm unnecessary div
annacv Oct 26, 2023
81c1cd4
feat: st if condition inside custom-my-history
annacv Oct 26, 2023
cceca35
feat: rm unneded component, rm unneded class
annacv Oct 26, 2023
0afd27a
chore: add forgotten if
annacv Oct 26, 2023
59a7de0
fix: rm ?? operator from template
annacv Oct 26, 2023
ed69591
style(my-history): fix show num of filters, fix underline on hover
annacv Oct 26, 2023
d029328
style(my-history): add filters in empathize history queries and fix p…
lauramargar Oct 31, 2023
cc1700f
feat(my-history): create new component for history query filters
lauramargar Nov 2, 2023
856c819
feat(my-history): remove line-clamp dependency
lauramargar Nov 2, 2023
9627342
Merge remote-tracking branch 'origin/main' into feature/EMP-2293-Add-…
lauramargar Nov 2, 2023
6dfe40f
Merge remote-tracking branch 'origin/main' into feature/EMP-2293-Add-…
lauramargar Nov 2, 2023
b78ef52
feat(my-history): fix pr comments
lauramargar Nov 2, 2023
ffc4441
feat(my-history): change history query filters' prop
lauramargar Nov 2, 2023
94aec1e
feat(my-history): underline only the query
lauramargar Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/components/history-query-filters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<div
v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
>
<div class="x-truncate">
<span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
{{ filter.label }}
</span>
</div>
<span>({{ suggestion.selectedFilters.length }})</span>
</div>
</template>

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're importing the component instead of the type.


export default defineComponent({
props: {
suggestion: {
type: HistoryQuery,
required: true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need the whole suggestion

Suggested change
suggestion: {
type: HistoryQuery,
required: true
filtersList: {
type: HistoryQuery['selectedFilters'],
required: true

}
}
});
</script>

<style scoped></style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<style scoped></style>

12 changes: 9 additions & 3 deletions src/components/my-history/custom-my-history.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@
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-192" :suggestion="suggestion"></HistoryQueryFilters>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


<p class="x-text1 x-text1-sm x-text-neutral-75">
{{ formatTime(suggestion.timestamp) }}
<template v-if="suggestion.totalResults !== undefined">
Expand Down Expand Up @@ -52,14 +56,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 {
Expand Down
16 changes: 14 additions & 2 deletions src/components/predictive-layer/full-width-predictive.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
:suggestion="suggestion"
></HistoryQueryFilters>
</div>
</template>

<template #remove-button-content>
Expand Down Expand Up @@ -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';
Expand All @@ -161,6 +172,7 @@

export default defineComponent({
components: {
HistoryQueryFilters,
DesktopSearchboxAlign,
MaxDesktopWidthItem,
PredictiveQuerySuggestions,
Expand Down
Loading