Enhancements : improve most recent global search UI

- Fixes remove person filter/chip when applied
- Close person searchable filter via workaround
- Person filter has no effect fixed, now uses user property instead of id

Resolves : #41381

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

core/src/components/GlobalSearch/SearchableList.vue

@@ -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"
@@ -122,7 +122,6 @@ export default {
 		itemSelected(element) {
 			this.$emit('item-selected', element)
 			this.clearSearch()
-			this.opened = false
 		},
 	},
 }

core/src/views/GlobalSearchModal.vue

@@ -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>
@@ -257,7 +257,7 @@ export default {
 
 				if (filters.personFilterIsApplied) {
 					if (provider.filters.person) {
-						params.person = this.personFilter.id
+						params.person = this.personFilter.user
 					} else {
 						// Person filter is applied but provider does not support it, no need to search provider
 						return
@@ -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
@@ -378,7 +387,7 @@ export default {
 			this.providerActionMenuIsOpen = false
 			const existingFilter = this.filteredProviders.find(existing => existing.id === providerFilter.id)
 			if (!existingFilter) {
-				this.filteredProviders.push({ id: providerFilter.id, name: providerFilter.name, icon: providerFilter.icon, type: 'provider' })
+				this.filteredProviders.push({ id: providerFilter.id, name: providerFilter.name, icon: providerFilter.icon, type: 'provider', filters: providerFilter.filters })
 			}
 			this.filters = this.syncProviderFilters(this.filters, this.filteredProviders)
 			console.debug('Search filters (newly added)', this.filters)
@@ -397,9 +406,13 @@ 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)
+						if (filter.type === 'person') {
+							this.personFilterIsApplied = false
+						}
 						break
 					}
 				}