replace NcButton with trailing button, cache full search results

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

1 files changed, 13 insertions, 21 deletions

diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 933a33f68..09983e690 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -27,18 +27,15 @@
 			:value.sync="searchText"
 			type="text"
 			:label="t('spreed', 'Search participants')"
+			:show-trailing-button="isSearching"
+			:trailing-button-label="cancelSearchLabel"
+			@trailing-button-click="abortSearch"
 			@input="handleInput">
 			<Magnify :size="16" />
-		</NcTextField>
-		<NcButton v-if="isSearching"
-			class="abort-search"
-			type="tertiary-no-background"
-			:aria-label="cancelSearchLabel"
-			@click="abortSearch">
-			<template #icon>
+			<template #trailing-button-icon>
 				<Close :size="20" />
 			</template>
-		</NcButton>
+		</NcTextField>
 		<transition-group v-if="hasSelectedParticipants"
 			name="zoom"
 			tag="div"
@@ -66,7 +63,6 @@ import Magnify from 'vue-material-design-icons/Magnify.vue'
 
 import { showError } from '@nextcloud/dialogs'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ParticipantSearchResults from '../../../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
@@ -78,7 +74,6 @@ import CancelableRequest from '../../../../utils/cancelableRequest.js'
 export default {
 	name: 'SetContacts',
 	components: {
-		NcButton,
 		Close,
 		ParticipantSearchResults,
 		ContactSelectionBubble,
@@ -97,6 +92,7 @@ export default {
 		return {
 			searchText: '',
 			searchResults: [],
+			cachedFullSearchResults: [],
 			// The loading state is true when the component is initialised as we perform a search for 'contacts'
 			// with an empty screen as search text.
 			contactsLoading: true,
@@ -136,8 +132,6 @@ export default {
 		this.focusInput()
 		// Perform a search with an empty string
 		await this.fetchSearchResults()
-		// Once the contacts are fetched, remove the spinner.
-		this.contactsLoading = false
 	},
 
 	beforeDestroy() {
@@ -156,7 +150,7 @@ export default {
 		abortSearch() {
 			this.noResults = false
 			this.contactsLoading = false
-			this.searchResults = []
+			this.searchResults = this.cachedFullSearchResults
 			this.searchText = ''
 			this.focusInput()
 		},
@@ -166,6 +160,7 @@ export default {
 		}, 250),
 
 		async fetchSearchResults() {
+			this.contactsLoading = true
 			try {
 				this.cancelSearchPossibleConversations('canceled')
 				const { request, cancel } = CancelableRequest(searchPossibleConversations)
@@ -174,16 +169,20 @@ export default {
 				const response = await request({ searchText: this.searchText })
 
 				this.searchResults = response?.data?.ocs?.data || []
-				this.contactsLoading = false
 				if (this.searchResults.length === 0) {
 					this.noResults = true
 				}
+				if (!this.searchText) {
+					this.cachedFullSearchResults = this.searchResults
+				}
 			} catch (exception) {
 				if (CancelableRequest.isCancel(exception)) {
 					return
 				}
 				console.error(exception)
 				showError(t('spreed', 'An error occurred while performing the search'))
+			} finally {
+				this.contactsLoading = false
 			}
 		},
 		visibilityChanged(isVisible) {
@@ -201,7 +200,6 @@ export default {
 
 <style lang="scss" scoped>
 .set-contacts {
-	position: relative;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
@@ -213,12 +211,6 @@ export default {
 		margin-top: 20px;
 		text-align: center;
 	}
-	.abort-search {
-		position: absolute;
-		right: 0;
-		top: -2px;
-		z-index: 2;
-	}
 }
 
 .selected-participants {