Make typeahead and search limit/length configurable

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · Dec 17, 2021 · 80bd1dc · 80bd1dc
1 parent 22279df
commit 80bd1dc
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 54 deletions.
diff --git a/core/js/dist/install.js b/core/js/dist/install.js
diff --git a/core/js/dist/login.js b/core/js/dist/login.js
diff --git a/core/js/dist/login.js.map b/core/js/dist/login.js.map
diff --git a/core/js/dist/main.js b/core/js/dist/main.js
diff --git a/core/js/dist/main.js.map b/core/js/dist/main.js.map
diff --git a/core/js/dist/maintenance.js b/core/js/dist/maintenance.js
diff --git a/core/js/dist/profile.js b/core/js/dist/profile.js
diff --git a/core/js/dist/profile.js.map b/core/js/dist/profile.js.map
diff --git a/core/js/dist/recommendedapps.js b/core/js/dist/recommendedapps.js
diff --git a/core/js/dist/recommendedapps.js.map b/core/js/dist/recommendedapps.js.map
diff --git a/core/js/dist/unified-search.js b/core/js/dist/unified-search.js
diff --git a/core/js/dist/unified-search.js.map b/core/js/dist/unified-search.js.map
diff --git a/core/src/services/UnifiedSearchService.js b/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 typeAhead = loadState('unified-search', 'type-ahead', true)
+
 export const regexFilterIn = /[^-]in:([a-z_-]+)/ig
 export const regexFilterNot = /-in:([a-z_-]+)/ig
 

diff --git a/core/src/views/UnifiedSearch.vue b/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 && !typeAhead"
+					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, typeAhead } 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,
+			typeAhead,
 
 			open: false,
 		}
@@ -345,6 +356,7 @@ export default {
 			this.reached = {}
 			this.results = {}
 			this.focused = null
+			this.triggered = false
 			await this.cancelPendingRequests()
 		},
 
@@ -413,6 +425,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)
 
@@ -472,9 +485,13 @@ export default {
 				this.loading = {}
 			})
 		},
-		onInputDebounced: debounce(function(e) {
-			this.onInput(e)
-		}, 500),
+		onInputDebounced: typeAhead
+			? debounce(function(e) {
+				this.onInput(e)
+			}, 500)
+			: function() {
+				this.triggered = false
+			},
 
 		/**
 		 * Load more results for the provided type
@@ -711,7 +728,7 @@ $input-padding: 6px;
 			}
 		}
 
-		&-reset {
+		&-reset, &-submit {
 			position: absolute;
 			top: 0;
 			right: 0;
@@ -729,6 +746,10 @@ $input-padding: 6px;
 				opacity: 1;
 			}
 		}
+
+		&-submit {
+			right: 28px;
+		}
 	}
 
 	&__filters {

diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php
@@ -95,7 +95,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', 'type-ahead', $this->config->getAppValue('core', 'unified-search.type-ahead', 'yes') === 'yes');
 			Util::addScript('core', 'dist/unified-search', 'core');
 
 			// Add navigation entry