Skip to content

Commit

Permalink
Enhancements : improve most recent global search UI
Browse files Browse the repository at this point in the history
- Fixes remove person filter/chip when applied
- Close person searchable filter via workaround

Resolves : #41381

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
  • Loading branch information
Fenn-CS committed Nov 10, 2023
1 parent 13b6e17 commit e6032af
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 5 deletions.
5 changes: 2 additions & 3 deletions core/src/components/GlobalSearch/SearchableList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
-->

<template>
<NcPopover :shown="opened">
<NcPopover>
<template #trigger>
<slot name="trigger" />
<slot ref="popoverTrigger" name="trigger" />
</template>
<div class="searchable-list__wrapper">
<NcTextField :value.sync="searchTerm"
Expand Down Expand Up @@ -122,7 +122,6 @@ export default {
itemSelected(element) {
this.$emit('item-selected', element)
this.clearSearch()
this.opened = false
},
},
}
Expand Down
14 changes: 12 additions & 2 deletions core/src/views/GlobalSearchModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
:empty-content-text="t('core', 'Not found')"
@item-selected="applyPersonFilter">
<template #trigger>
<NcButton>
<NcButton ref="peopleFilterTrigger">
<template #icon>
<AccountGroup :size="20" />
</template>
Expand Down Expand Up @@ -357,6 +357,15 @@ export default {
this.personFilter.user = person.user
this.personFilter.name = person.displayName
this.filters.push(this.personFilter)
/*
* Workaround to close SearchableList
* NcPopover used in the SearchableList component does have
* any prop/external state used to manage it's open status
* according to https://nextcloud-vue-components.netlify.app/#/Components/NcPopover.
* `:shown=''` prop used on NcPopover
* as well as as `v-close-popper` on the list items in searchable list did not work
*/
this.$refs.peopleFilterTrigger.$el.click()
} else {
this.filters[existingPersonFilter].id = person.id
this.filters[existingPersonFilter].user = person.user
Expand Down Expand Up @@ -397,7 +406,8 @@ export default {
} else {
for (let i = 0; i < this.filters.length; i++) {
if (this.filters[i].id === 'date') {
// Remove date and person filter
if (this.filters[i].id === 'date' || this.filters[i].id === filter.id) {
this.dateFilterIsApplied = false
this.filters.splice(i, 1)
break
Expand Down

0 comments on commit e6032af

Please sign in to comment.