Merge pull request #22800 from nextcloud/fix/settings-search

Add users and apps inner search and add HeaderMenu cancel

apps/settings/src/components/UserList.vue

@@ -241,11 +241,16 @@
 </template>
 
 <script>
-import userRow from './UserList/UserRow'
-import { Multiselect, Actions, ActionButton } from '@nextcloud/vue'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import InfiniteLoading from 'vue-infinite-loading'
 import Vue from 'vue'
 
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+
+import userRow from './UserList/UserRow'
+
 const unlimitedQuota = {
 	id: 'none',
 	label: t('settings', 'Unlimited'),
@@ -407,6 +412,7 @@ export default {
 			}
 		},
 	},
+
 	mounted() {
 		if (!this.settings.canChangePassword) {
 			OC.Notification.showTemporary(t('settings', 'Password change is disabled because the master key is disabled'))
@@ -420,13 +426,19 @@ export default {
 		/**
 		 * Register search
 		 */
-		this.userSearch = new OCA.Search(this.search, this.resetSearch)
+		subscribe('nextcloud:unified-search:search', this.search)
+		subscribe('nextcloud:unified-search:reset', this.resetSearch)
 
 		/**
 		 * If disabled group but empty, redirect
 		 */
 		this.redirectIfDisabled()
 	},
+	beforeDestroy() {
+		unsubscribe('nextcloud:unified-search:search', this.search)
+		unsubscribe('nextcloud:unified-search:reset', this.resetSearch)
+	},
+
 	methods: {
 		onScroll(event) {
 			this.scrolled = event.target.scrollTo > 0
@@ -465,13 +477,13 @@ export default {
 		},
 
 		/* SEARCH */
-		search(query) {
+		search({ query }) {
 			this.searchQuery = query
 			this.$store.commit('resetUsers')
 			this.$refs.infiniteLoading.stateChanger.reset()
 		},
 		resetSearch() {
-			this.search('')
+			this.search({ query: '' })
 		},
 
 		resetForm() {

apps/settings/src/views/Apps.vue

@@ -141,6 +141,10 @@
 </template>
 
 <script>
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import Vue from 'vue'
+import VueLocalStorage from 'vue-localstorage'
+
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
@@ -149,8 +153,6 @@ import AppNavigationSpacer from '@nextcloud/vue/dist/Components/AppNavigationSpa
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
 import Content from '@nextcloud/vue/dist/Components/Content'
-import Vue from 'vue'
-import VueLocalStorage from 'vue-localstorage'
 
 import AppList from '../components/AppList'
 import AppDetails from '../components/AppDetails'
@@ -254,8 +256,8 @@ export default {
 	},
 
 	watch: {
-		category(val, old) {
-			this.setSearch('')
+		category() {
+			this.searchQuery = ''
 		},
 
 		app() {
@@ -276,20 +278,24 @@ export default {
 		this.$store.dispatch('getGroups', { offset: 0, limit: 5 })
 		this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)
 	},
+
 	mounted() {
-		/**
-		 * Register search
-		 */
-		this.appSearch = new OCA.Search(this.setSearch, this.resetSearch)
+		subscribe('nextcloud:unified-search:search', this.setSearch)
+		subscribe('nextcloud:unified-search:reset', this.resetSearch)
+	},
+	beforeDestroy() {
+		unsubscribe('nextcloud:unified-search:search', this.setSearch)
+		unsubscribe('nextcloud:unified-search:reset', this.resetSearch)
 	},
 
 	methods: {
-		setSearch(query) {
+		setSearch({ query }) {
 			this.searchQuery = query
 		},
 		resetSearch() {
-			this.setSearch('')
+			this.searchQuery = ''
 		},
+
 		hideAppDetails() {
 			this.$router.push({
 				name: 'apps-category',

core/src/components/HeaderMenu.vue

@@ -43,7 +43,6 @@
 
 <script>
 import { directive as ClickOutside } from 'v-click-outside'
-import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import excludeClickOutsideClasses from '@nextcloud/vue/dist/Mixins/excludeClickOutsideClasses'
 
 export default {
@@ -94,15 +93,8 @@ export default {
 	mounted() {
 		document.addEventListener('keydown', this.onKeyDown)
 	},
-
-	beforeMount() {
-		subscribe(`header-menu-${this.id}-close`, this.closeMenu)
-		subscribe(`header-menu-${this.id}-open`, this.openMenu)
-	},
-
 	beforeDestroy() {
-		unsubscribe(`header-menu-${this.id}-close`, this.closeMenu)
-		unsubscribe(`header-menu-${this.id}-open`, this.openMenu)
+		document.removeEventListener('keydown', this.onKeyDown)
 	},
 
 	methods: {
@@ -129,7 +121,6 @@ export default {
 			this.opened = false
 			this.$emit('close')
 			this.$emit('update:open', false)
-			emit(`header-menu-${this.id}-close`)
 		},
 
 		/**
@@ -143,14 +134,19 @@ export default {
 			this.opened = true
 			this.$emit('open')
 			this.$emit('update:open', true)
-			emit(`header-menu-${this.id}-open`)
 		},
 
 		onKeyDown(event) {
 			// If opened and escape pressed, close
 			if (event.key === 'Escape' && this.opened) {
 				event.preventDefault()
-				this.closeMenu()
+
+				/** user cancelled the menu by pressing escape */
+				this.$emit('cancel')
+
+				/** we do NOT fire a close event to differentiate cancel and close */
+				this.opened = false
+				this.$emit('update:open', false)
 			}
 		},
 	},

core/src/views/UnifiedSearch.vue

@@ -39,7 +39,8 @@
 				type="search"
 				:placeholder="t('core', 'Search {types} …', { types: typesNames.join(', ').toLowerCase() })"
 				@input="onInputDebounced"
-				@keypress.enter.prevent.stop="onInputEnter">
+				@keypress.enter.prevent.stop="onInputEnter"
+				@search="onSearch">
 			<!-- Search filters -->
 			<Actions v-if="availableFilters.length > 1" class="unified-search__filters" placement="bottom">
 				<ActionButton v-for="type in availableFilters"
@@ -288,11 +289,17 @@ export default {
 			this.types = await getTypes()
 		},
 		onClose() {
-			this.resetState()
-			this.query = ''
 			emit('nextcloud:unified-search:close')
 		},
 
+		/**
+		 * Reset the search state
+		 */
+		resetSearch() {
+			emit('nextcloud:unified-search:reset')
+			this.query = ''
+			this.resetState()
+		},
 		resetState() {
 			this.cursors = {}
 			this.limits = {}
@@ -312,6 +319,18 @@ export default {
 			})
 		},
 
+		/**
+		 * Watch the search event on the input
+		 * Used to detect the reset button press
+		 * @param {Event} event the search event
+		 */
+		onSearch(event) {
+			// If value is empty, the reset button has been pressed
+			if (event.target.value === '') {
+				this.resetSearch()
+			}
+		},
+
 		/**
 		 * If we have results already, open first one
 		 * If not, trigger the search again