Merge pull request #30311 from nextcloud/enh/search-load

Add unified search options

Author: juliusknorr

core/src/services/UnifiedSearchService.js

@@ -28,7 +28,9 @@ import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 
 export const defaultLimit = loadState('unified-search', 'limit-default')
-export const minSearchLength = 2
+export const minSearchLength = loadState('unified-search', 'min-search-length', 2)
+export const enableLiveSearch = loadState('unified-search', 'live-search', true)
+
 export const regexFilterIn = /[^-]in:([a-z_-]+)/ig
 export const regexFilterNot = /-in:([a-z_-]+)/ig
 

core/src/views/UnifiedSearch.vue

@@ -57,6 +57,12 @@
 					class="unified-search__form-reset icon-close"
 					:aria-label="t('core','Reset search')"
 					value="">
+
+				<input v-if="!!query && !isLoading && !enableLiveSearch"
+					type="submit"
+					class="unified-search__form-submit icon-confirm"
+					:aria-label="t('core','Start search')"
+					value="">
 			</form>
 
 			<!-- Search filters -->
@@ -76,7 +82,10 @@
 			<SearchResultPlaceholders v-if="isLoading" />
 
 			<EmptyContent v-else-if="isValidQuery" icon="icon-search">
-				<Highlight :text="t('core', 'No results for {query}', { query })" :search="query" />
+				<Highlight v-if="triggered" :text="t('core', 'No results for {query}', { query })" :search="query" />
+				<div v-else>
+					{{ t('core', 'Press enter to start searching') }}
+				</div>
 			</EmptyContent>
 
 			<EmptyContent v-else-if="!isLoading || isShortQuery" icon="icon-search">
@@ -124,7 +133,7 @@
 
 <script>
 import { emit } from '@nextcloud/event-bus'
-import { minSearchLength, getTypes, search, defaultLimit, regexFilterIn, regexFilterNot } from '../services/UnifiedSearchService'
+import { minSearchLength, getTypes, search, defaultLimit, regexFilterIn, regexFilterNot, enableLiveSearch } from '../services/UnifiedSearchService'
 import { showError } from '@nextcloud/dialogs'
 
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
@@ -175,9 +184,11 @@ export default {
 
 			query: '',
 			focused: null,
+			triggered: false,
 
 			defaultLimit,
 			minSearchLength,
+			enableLiveSearch,
 
 			open: false,
 		}
@@ -354,6 +365,7 @@ export default {
 			this.reached = {}
 			this.results = {}
 			this.focused = null
+			this.triggered = false
 			await this.cancelPendingRequests()
 		},
 
@@ -422,6 +434,7 @@ export default {
 
 			// Reset search if the query changed
 			await this.resetState()
+			this.triggered = true
 			this.$set(this.loading, 'all', true)
 			this.logger.debug(`Searching ${query} in`, types)
 
@@ -481,9 +494,13 @@ export default {
 				this.loading = {}
 			})
 		},
-		onInputDebounced: debounce(function(e) {
-			this.onInput(e)
-		}, 200),
+		onInputDebounced: enableLiveSearch
+			? debounce(function(e) {
+				this.onInput(e)
+			}, 500)
+			: function() {
+				this.triggered = false
+			},
 
 		/**
 		 * Load more results for the provided type
@@ -728,7 +745,7 @@ $input-padding: 6px;
 			}
 		}
 
-		&-reset {
+		&-reset, &-submit {
 			position: absolute;
 			top: 0;
 			right: 0;
@@ -746,6 +763,10 @@ $input-padding: 6px;
 				opacity: 1;
 			}
 		}
+
+		&-submit {
+			right: 28px;
+		}
 	}
 
 	&__filters {

dist/core-unified-search.js

@@ -94,7 +94,9 @@ public function __construct($renderAs, $appId = '') {
 			}
 
 			$this->initialState->provideInitialState('core', 'active-app', $this->navigationManager->getActiveEntry());
-			$this->initialState->provideInitialState('unified-search', 'limit-default', SearchQuery::LIMIT_DEFAULT);
+			$this->initialState->provideInitialState('unified-search', 'limit-default', (int)$this->config->getAppValue('core', 'unified-search.limit-default', (string)SearchQuery::LIMIT_DEFAULT));
+			$this->initialState->provideInitialState('unified-search', 'min-search-length', (int)$this->config->getAppValue('core', 'unified-search.min-search-length', (string)2));
+			$this->initialState->provideInitialState('unified-search', 'live-search', $this->config->getAppValue('core', 'unified-search.live-search', 'yes') === 'yes');
 			Util::addScript('core', 'unified-search', 'core');
 
 			// set logo link target