diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) | |
download | gitlab-ce-e8d2c2579383897a1dd7f9debd359abe8ae8373d.tar.gz |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue | 77 |
1 files changed, 39 insertions, 38 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue index bda6b340871..a4804525a53 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue @@ -6,9 +6,10 @@ import { GlDropdownSectionHeader, GlLoadingIcon, } from '@gitlab/ui'; +import { debounce } from 'lodash'; import { DEBOUNCE_DELAY } from '../constants'; -import { getRecentlyUsedTokenValues, setTokenValueToRecentlyUsed } from '../filtered_search_utils'; +import { getRecentlyUsedSuggestions, setTokenValueToRecentlyUsed } from '../filtered_search_utils'; export default { components: { @@ -31,12 +32,12 @@ export default { type: Boolean, required: true, }, - tokensListLoading: { + suggestionsLoading: { type: Boolean, required: false, default: false, }, - tokenValues: { + suggestions: { type: Array, required: false, default: () => [], @@ -44,21 +45,21 @@ export default { fnActiveTokenValue: { type: Function, required: false, - default: (tokenValues, currentTokenValue) => { - return tokenValues.find(({ value }) => value === currentTokenValue); + default: (suggestions, currentTokenValue) => { + return suggestions.find(({ value }) => value === currentTokenValue); }, }, - defaultTokenValues: { + defaultSuggestions: { type: Array, required: false, default: () => [], }, - preloadedTokenValues: { + preloadedSuggestions: { type: Array, required: false, default: () => [], }, - recentTokenValuesStorageKey: { + recentSuggestionsStorageKey: { type: String, required: false, default: '', @@ -77,21 +78,21 @@ export default { data() { return { searchKey: '', - recentTokenValues: this.recentTokenValuesStorageKey - ? getRecentlyUsedTokenValues(this.recentTokenValuesStorageKey) + recentSuggestions: this.recentSuggestionsStorageKey + ? getRecentlyUsedSuggestions(this.recentSuggestionsStorageKey) : [], loading: false, }; }, computed: { - isRecentTokenValuesEnabled() { - return Boolean(this.recentTokenValuesStorageKey); + isRecentSuggestionsEnabled() { + return Boolean(this.recentSuggestionsStorageKey); }, recentTokenIds() { - return this.recentTokenValues.map((tokenValue) => tokenValue[this.valueIdentifier]); + return this.recentSuggestions.map((tokenValue) => tokenValue[this.valueIdentifier]); }, preloadedTokenIds() { - return this.preloadedTokenValues.map((tokenValue) => tokenValue[this.valueIdentifier]); + return this.preloadedSuggestions.map((tokenValue) => tokenValue[this.valueIdentifier]); }, currentTokenValue() { if (this.fnCurrentTokenValue) { @@ -100,17 +101,17 @@ export default { return this.value.data.toLowerCase(); }, activeTokenValue() { - return this.fnActiveTokenValue(this.tokenValues, this.currentTokenValue); + return this.fnActiveTokenValue(this.suggestions, this.currentTokenValue); }, /** - * Return all the tokenValues when searchKey is present - * otherwise return only the tokenValues which aren't + * Return all the suggestions when searchKey is present + * otherwise return only the suggestions which aren't * present in "Recently used" */ - availableTokenValues() { + availableSuggestions() { return this.searchKey - ? this.tokenValues - : this.tokenValues.filter( + ? this.suggestions + : this.suggestions.filter( (tokenValue) => !this.recentTokenIds.includes(tokenValue[this.valueIdentifier]) && !this.preloadedTokenIds.includes(tokenValue[this.valueIdentifier]), @@ -121,30 +122,30 @@ export default { active: { immediate: true, handler(newValue) { - if (!newValue && !this.tokenValues.length) { - this.$emit('fetch-token-values', this.value.data); + if (!newValue && !this.suggestions.length) { + this.$emit('fetch-suggestions', this.value.data); } }, }, }, methods: { - handleInput({ data }) { + handleInput: debounce(function debouncedSearch({ data }) { this.searchKey = data; - setTimeout(() => { - if (!this.tokensListLoading) this.$emit('fetch-token-values', data); - }, DEBOUNCE_DELAY); - }, + if (!this.suggestionsLoading) { + this.$emit('fetch-suggestions', data); + } + }, DEBOUNCE_DELAY), handleTokenValueSelected(activeTokenValue) { // Make sure that; // 1. Recently used values feature is enabled // 2. User has actually selected a value // 3. Selected value is not part of preloaded list. if ( - this.isRecentTokenValuesEnabled && + this.isRecentSuggestionsEnabled && activeTokenValue && !this.preloadedTokenIds.includes(activeTokenValue[this.valueIdentifier]) ) { - setTokenValueToRecentlyUsed(this.recentTokenValuesStorageKey, activeTokenValue); + setTokenValueToRecentlyUsed(this.recentSuggestionsStorageKey, activeTokenValue); } }, }, @@ -168,9 +169,9 @@ export default { <slot name="view" :view-token-props="{ ...viewTokenProps, activeTokenValue }"></slot> </template> <template #suggestions> - <template v-if="defaultTokenValues.length"> + <template v-if="defaultSuggestions.length"> <gl-filtered-search-suggestion - v-for="token in defaultTokenValues" + v-for="token in defaultSuggestions" :key="token.value" :value="token.value" > @@ -178,19 +179,19 @@ export default { </gl-filtered-search-suggestion> <gl-dropdown-divider /> </template> - <template v-if="isRecentTokenValuesEnabled && recentTokenValues.length && !searchKey"> + <template v-if="isRecentSuggestionsEnabled && recentSuggestions.length && !searchKey"> <gl-dropdown-section-header>{{ __('Recently used') }}</gl-dropdown-section-header> - <slot name="token-values-list" :token-values="recentTokenValues"></slot> + <slot name="suggestions-list" :suggestions="recentSuggestions"></slot> <gl-dropdown-divider /> </template> <slot - v-if="preloadedTokenValues.length && !searchKey" - name="token-values-list" - :token-values="preloadedTokenValues" + v-if="preloadedSuggestions.length && !searchKey" + name="suggestions-list" + :suggestions="preloadedSuggestions" ></slot> - <gl-loading-icon v-if="tokensListLoading" /> + <gl-loading-icon v-if="suggestionsLoading" size="sm" /> <template v-else> - <slot name="token-values-list" :token-values="availableTokenValues"></slot> + <slot name="suggestions-list" :suggestions="availableSuggestions"></slot> </template> </template> </gl-filtered-search-token> |