Skip to content

Commit

Permalink
Merge fc15ab9 into 653d968
Browse files Browse the repository at this point in the history
  • Loading branch information
dhruvkb authored Feb 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 653d968 + fc15ab9 commit ec56101
Showing 5 changed files with 46 additions and 9 deletions.
7 changes: 7 additions & 0 deletions frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
Original file line number Diff line number Diff line change
@@ -50,6 +50,7 @@
:class="recentClasses"
@select="handleSelect"
@clear="handleClear"
@clear-single="handleClearSingle"
@keydown.tab.native="hideRecentSearches"
/>
</ClientOnly>
@@ -227,6 +228,11 @@ export default defineComponent({
inputFieldRef.value?.focusInput()
searchStore.clearRecentSearches()
}
/* Clear a specific recent search from the store. */
const handleClearSingle = (idx: number) => {
inputFieldRef.value?.focusInput()
searchStore.clearRecentSearch(idx)
}
return {
searchBarEl,
@@ -247,6 +253,7 @@ export default defineComponent({
handleKeydown,
handleSelect,
handleClear,
handleClearSingle,
}
},
})
39 changes: 30 additions & 9 deletions frontend/src/components/VRecentSearches/VRecentSearches.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<template>
<div
class="flex flex-col gap-1 rounded-sm border bg-white"
:class="bordered ? 'border-dark-charcoal-20 p-4 shadow-el-2' : 'border-tx'"
class="flex flex-col rounded-sm bg-white"
:class="bordered ? 'border border-dark-charcoal-20 p-2 shadow-el-2' : 'p-3'"
data-testid="recent-searches"
>
<div
class="flex flex-row items-center justify-between py-2"
:class="{ 'pe-2': !bordered }"
class="flex h-10 flex-row items-center justify-between ps-3"
:class="{ 'pe-1': !bordered }"
>
<!-- Left margin to align with the text of recent searches. -->
<span class="category mx-2 my-1">
<span class="category">
{{ $t("recentSearches.heading") }}
</span>
<VButton
@@ -37,20 +37,34 @@
:id="`option-${idx}`"
:key="idx"
role="option"
class="description-regular my-1 rounded-sm border-1.5 p-2 hover:bg-dark-charcoal-10"
class="group/entry description-regular flex h-10 flex-row items-center gap-2 rounded-sm border-1.5 pe-1 ps-2 hover:bg-dark-charcoal-10"
:class="idx === selectedIdx ? 'border-pink' : 'border-tx'"
:aria-selected="idx === selectedIdx"
@click="handleClick(idx)"
>
<VIcon name="search" />
{{ entry }}
<VIconButton
variant="transparent-gray"
:icon-props="{ name: 'close-small' }"
size="small"
:label="$t('recentSearches.clearSingle.label', { entry }).toString()"
class="ms-auto group-hover/entry:flex"
:class="{ hidden: bordered }"
@click.stop="handleClearSingle(idx)"
/>
</li>
<!-- eslint-enable -->
</ul>
<span v-else class="description-regular mx-2 my-3">
<span
v-else
class="description-regular flex h-10 flex-row items-center ps-3"
:class="{ 'pe-1': !bordered }"
>
{{ $t("recentSearches.none") }}
</span>

<span class="caption-regular mx-2 my-3 text-dark-charcoal-70">
<span class="caption-regular mt-auto p-3 text-dark-charcoal-70">
{{ $t("recentSearches.disclaimer") }}
</span>
</div>
@@ -62,14 +76,16 @@ import { defineComponent, type PropType } from "vue"
import { defineEvent } from "~/types/emits"
import VButton from "~/components/VButton.vue"
import VIcon from "~/components/VIcon/VIcon.vue"
import VIconButton from "~/components/VIconButton/VIconButton.vue"
/**
* List the recent searches of the user allowing them to go back to a previous
* search. These searches are saved locally and never shared with the server.
*/
export default defineComponent({
name: "VRecentSearches",
components: { VButton },
components: { VIconButton, VIcon, VButton },
props: {
/**
* the list of saved past searches
@@ -95,6 +111,7 @@ export default defineComponent({
emits: {
select: defineEvent<[number]>(),
clear: defineEvent(),
"clear-single": defineEvent<[number]>(),
},
setup(_, { emit }) {
const handleClick = (idx: number) => {
@@ -103,10 +120,14 @@ export default defineComponent({
const handleClear = () => {
emit("clear")
}
const handleClearSingle = (idx: number) => {
emit("clear-single", idx)
}
return {
handleClick,
handleClear,
handleClearSingle,
}
},
})
Original file line number Diff line number Diff line change
@@ -18,6 +18,9 @@ import VRecentSearches from "~/components/VRecentSearches/VRecentSearches.vue"
clear: {
action: "clear",
},
clearSingle: {
action: "clearSingle",
},
}}
/>

3 changes: 3 additions & 0 deletions frontend/src/locales/scripts/en.json5
Original file line number Diff line number Diff line change
@@ -744,6 +744,9 @@
text: "Clear",
label: "Clear recent searches",
},
clearSingle: {
label: "Clear recent search '{entry}'",
},
none: "No recent searches to show.",
disclaimer: "Openverse does not store your recent searches, this information is kept locally in your browser.",
},
3 changes: 3 additions & 0 deletions frontend/src/stores/search.ts
Original file line number Diff line number Diff line change
@@ -331,6 +331,9 @@ export const useSearchStore = defineStore("search", {
clearRecentSearches() {
this.recentSearches = []
},
clearRecentSearch(idx: number) {
this.recentSearches.splice(idx, 1)
},
/**
* Initial filters do not include the provider filters. We create the provider filters object
* when we fetch the provider data on the Nuxt server initialization.

0 comments on commit ec56101

Please sign in to comment.