Add users and apps inner search and add HeaderMenu cancel

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 30 insertions, 15 deletions

diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue
index 9848dc45e38..bb58ba27ab3 100644
--- a/core/src/components/HeaderMenu.vue
+++ b/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)
 			}
 		},
 	},
diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
index 3406cd9db09..c721689537b 100644
--- a/core/src/views/UnifiedSearch.vue
+++ b/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 = {}
@@ -313,6 +320,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
 		 */