diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 14:18:50 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 14:18:50 +0300 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /app/assets/javascripts/vue_shared/components/filtered_search_bar | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar')
3 files changed, 375 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js new file mode 100644 index 00000000000..6665a5754b3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js @@ -0,0 +1,8 @@ +export const ANY_AUTHOR = 'Any'; + +export const DEBOUNCE_DELAY = 200; + +export const SortDirection = { + descending: 'descending', + ascending: 'ascending', +}; diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue new file mode 100644 index 00000000000..a858ffdbed5 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue @@ -0,0 +1,253 @@ +<script> +import { + GlFilteredSearch, + GlButtonGroup, + GlButton, + GlNewDropdown as GlDropdown, + GlNewDropdownItem as GlDropdownItem, + GlTooltipDirective, +} from '@gitlab/ui'; + +import { __ } from '~/locale'; +import createFlash from '~/flash'; + +import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store'; +import RecentSearchesService from '~/filtered_search/services/recent_searches_service'; +import RecentSearchesStorageKeys from 'ee_else_ce/filtered_search/recent_searches_storage_keys'; + +import { SortDirection } from './constants'; + +export default { + components: { + GlFilteredSearch, + GlButtonGroup, + GlButton, + GlDropdown, + GlDropdownItem, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + namespace: { + type: String, + required: true, + }, + recentSearchesStorageKey: { + type: String, + required: false, + default: '', + }, + tokens: { + type: Array, + required: true, + }, + sortOptions: { + type: Array, + required: true, + }, + initialFilterValue: { + type: Array, + required: false, + default: () => [], + }, + initialSortBy: { + type: String, + required: false, + default: '', + validator: value => value === '' || /(_desc)|(_asc)/g.test(value), + }, + searchInputPlaceholder: { + type: String, + required: true, + }, + }, + data() { + let selectedSortOption = this.sortOptions[0].sortDirection.descending; + let selectedSortDirection = SortDirection.descending; + + // Extract correct sortBy value based on initialSortBy + if (this.initialSortBy) { + selectedSortOption = this.sortOptions + .filter( + sortBy => + sortBy.sortDirection.ascending === this.initialSortBy || + sortBy.sortDirection.descending === this.initialSortBy, + ) + .pop(); + selectedSortDirection = this.initialSortBy.endsWith('_desc') + ? SortDirection.descending + : SortDirection.ascending; + } + + return { + initialRender: true, + recentSearchesPromise: null, + filterValue: this.initialFilterValue, + selectedSortOption, + selectedSortDirection, + }; + }, + computed: { + tokenSymbols() { + return this.tokens.reduce( + (tokenSymbols, token) => ({ + ...tokenSymbols, + [token.type]: token.symbol, + }), + {}, + ); + }, + sortDirectionIcon() { + return this.selectedSortDirection === SortDirection.ascending + ? 'sort-lowest' + : 'sort-highest'; + }, + sortDirectionTooltip() { + return this.selectedSortDirection === SortDirection.ascending + ? __('Sort direction: Ascending') + : __('Sort direction: Descending'); + }, + }, + watch: { + /** + * GlFilteredSearch currently doesn't emit any event when + * search field is cleared, but we still want our parent + * component to know that filters were cleared and do + * necessary data refetch, so this watcher is basically + * a dirty hack/workaround to identify if filter input + * was cleared. :( + */ + filterValue(value) { + const [firstVal] = value; + if ( + !this.initialRender && + value.length === 1 && + firstVal.type === 'filtered-search-term' && + !firstVal.value.data + ) { + this.$emit('onFilter', []); + } + + // Set initial render flag to false + // as we don't want to emit event + // on initial load when value is empty already. + this.initialRender = false; + }, + }, + created() { + if (this.recentSearchesStorageKey) this.setupRecentSearch(); + }, + methods: { + /** + * Initialize service and store instances for + * getting Recent Search functional. + */ + setupRecentSearch() { + this.recentSearchesService = new RecentSearchesService( + `${this.namespace}-${RecentSearchesStorageKeys[this.recentSearchesStorageKey]}`, + ); + + this.recentSearchesStore = new RecentSearchesStore({ + isLocalStorageAvailable: RecentSearchesService.isAvailable(), + allowedKeys: this.tokens.map(token => token.type), + }); + + this.recentSearchesPromise = this.recentSearchesService + .fetch() + .catch(error => { + if (error.name === 'RecentSearchesServiceError') return undefined; + + createFlash(__('An error occurred while parsing recent searches')); + + // Gracefully fail to empty array + return []; + }) + .then(searches => { + if (!searches) return; + + // Put any searches that may have come in before + // we fetched the saved searches ahead of the already saved ones + const resultantSearches = this.recentSearchesStore.setRecentSearches( + this.recentSearchesStore.state.recentSearches.concat(searches), + ); + this.recentSearchesService.save(resultantSearches); + }); + }, + getRecentSearches() { + return this.recentSearchesStore?.state.recentSearches; + }, + handleSortOptionClick(sortBy) { + this.selectedSortOption = sortBy; + this.$emit('onSort', sortBy.sortDirection[this.selectedSortDirection]); + }, + handleSortDirectionClick() { + this.selectedSortDirection = + this.selectedSortDirection === SortDirection.ascending + ? SortDirection.descending + : SortDirection.ascending; + this.$emit('onSort', this.selectedSortOption.sortDirection[this.selectedSortDirection]); + }, + handleFilterSubmit(filters) { + if (this.recentSearchesStorageKey) { + this.recentSearchesPromise + .then(() => { + if (filters.length) { + const searchTokens = filters.map(filter => { + // check filter was plain text search + if (typeof filter === 'string') { + return filter; + } + // filter was a token. + return `${filter.type}:${filter.value.operator}${this.tokenSymbols[filter.type]}${ + filter.value.data + }`; + }); + + const resultantSearches = this.recentSearchesStore.addRecentSearch( + searchTokens.join(' '), + ); + this.recentSearchesService.save(resultantSearches); + } + }) + .catch(() => { + // https://gitlab.com/gitlab-org/gitlab-foss/issues/30821 + }); + } + this.$emit('onFilter', filters); + }, + }, +}; +</script> + +<template> + <div class="vue-filtered-search-bar-container d-md-flex"> + <gl-filtered-search + v-model="filterValue" + :placeholder="searchInputPlaceholder" + :available-tokens="tokens" + :history-items="getRecentSearches()" + class="flex-grow-1" + @submit="handleFilterSubmit" + /> + <gl-button-group class="sort-dropdown-container d-flex"> + <gl-dropdown :text="selectedSortOption.title" :right="true" class="w-100"> + <gl-dropdown-item + v-for="sortBy in sortOptions" + :key="sortBy.id" + :is-check-item="true" + :is-checked="sortBy.id === selectedSortOption.id" + @click="handleSortOptionClick(sortBy)" + >{{ sortBy.title }}</gl-dropdown-item + > + </gl-dropdown> + <gl-button + v-gl-tooltip + :title="sortDirectionTooltip" + :icon="sortDirectionIcon" + class="flex-shrink-1" + @click="handleSortDirectionClick" + /> + </gl-button-group> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue new file mode 100644 index 00000000000..412bfa5aa7f --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue @@ -0,0 +1,114 @@ +<script> +import { + GlFilteredSearchToken, + GlAvatar, + GlFilteredSearchSuggestion, + GlDropdownDivider, + GlLoadingIcon, +} from '@gitlab/ui'; +import { debounce } from 'lodash'; + +import createFlash from '~/flash'; +import { __ } from '~/locale'; + +import { ANY_AUTHOR, DEBOUNCE_DELAY } from '../constants'; + +export default { + anyAuthor: ANY_AUTHOR, + components: { + GlFilteredSearchToken, + GlAvatar, + GlFilteredSearchSuggestion, + GlDropdownDivider, + GlLoadingIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + authors: this.config.initialAuthors || [], + loading: true, + }; + }, + computed: { + currentValue() { + return this.value.data.toLowerCase(); + }, + activeAuthor() { + return this.authors.find(author => author.username.toLowerCase() === this.currentValue); + }, + }, + methods: { + fetchAuthorBySearchTerm(searchTerm) { + const fetchPromise = this.config.fetchPath + ? this.config.fetchAuthors(this.config.fetchPath, searchTerm) + : this.config.fetchAuthors(searchTerm); + + fetchPromise + .then(res => { + // We'd want to avoid doing this check but + // users.json and /groups/:id/members & /projects/:id/users + // return response differently. + this.authors = Array.isArray(res) ? res : res.data; + }) + .catch(() => createFlash(__('There was a problem fetching users.'))) + .finally(() => { + this.loading = false; + }); + }, + searchAuthors: debounce(function debouncedSearch({ data }) { + this.fetchAuthorBySearchTerm(data); + }, DEBOUNCE_DELAY), + }, +}; +</script> + +<template> + <gl-filtered-search-token + :config="config" + v-bind="{ ...$props, ...$attrs }" + v-on="$listeners" + @input="searchAuthors" + > + <template #view="{ inputValue }"> + <gl-avatar + v-if="activeAuthor" + :size="16" + :src="activeAuthor.avatar_url" + shape="circle" + class="gl-mr-2" + /> + <span>{{ activeAuthor ? activeAuthor.name : inputValue }}</span> + </template> + <template #suggestions> + <gl-filtered-search-suggestion :value="$options.anyAuthor">{{ + __('Any') + }}</gl-filtered-search-suggestion> + <gl-dropdown-divider /> + <gl-loading-icon v-if="loading" /> + <template v-else> + <gl-filtered-search-suggestion + v-for="author in authors" + :key="author.username" + :value="author.username" + > + <div class="d-flex"> + <gl-avatar :size="32" :src="author.avatar_url" /> + <div> + <div>{{ author.name }}</div> + <div>@{{ author.username }}</div> + </div> + </div> + </gl-filtered-search-suggestion> + </template> + </template> + </gl-filtered-search-token> +</template> |