diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue new file mode 100644 index 00000000000..101c7150c55 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue @@ -0,0 +1,133 @@ +<script> +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import { debounce } from 'lodash'; + +import createFlash from '~/flash'; +import { isNumeric } from '~/lib/utils/number_utils'; +import { __ } from '~/locale'; +import { DEBOUNCE_DELAY } from '../constants'; +import { stripQuotes } from '../filtered_search_utils'; + +export default { + components: { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlLoadingIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + epics: this.config.initialEpics || [], + loading: true, + }; + }, + computed: { + currentValue() { + /* + * When the URL contains the epic_iid, we'd get: '123' + */ + if (isNumeric(this.value.data)) { + return parseInt(this.value.data, 10); + } + + /* + * When the token is added in current session it'd be: 'Foo::&123' + */ + const id = this.value.data.split('::&')[1]; + + if (id) { + return parseInt(id, 10); + } + + return this.value.data; + }, + activeEpic() { + const currentValueIsString = typeof this.currentValue === 'string'; + return this.epics.find( + (epic) => epic[currentValueIsString ? 'title' : 'iid'] === this.currentValue, + ); + }, + }, + watch: { + active: { + immediate: true, + handler(newValue) { + if (!newValue && !this.epics.length) { + this.searchEpics({ data: this.currentValue }); + } + }, + }, + }, + methods: { + fetchEpicsBySearchTerm(searchTerm = '') { + this.loading = true; + this.config + .fetchEpics(searchTerm) + .then(({ data }) => { + this.epics = data; + }) + .catch(() => createFlash({ message: __('There was a problem fetching epics.') })) + .finally(() => { + this.loading = false; + }); + }, + fetchSingleEpic(iid) { + this.loading = true; + this.config + .fetchSingleEpic(iid) + .then(({ data }) => { + this.epics = [data]; + }) + .catch(() => createFlash({ message: __('There was a problem fetching epics.') })) + .finally(() => { + this.loading = false; + }); + }, + searchEpics: debounce(function debouncedSearch({ data }) { + if (isNumeric(data)) { + return this.fetchSingleEpic(data); + } + return this.fetchEpicsBySearchTerm(data); + }, DEBOUNCE_DELAY), + + getEpicValue(epic) { + return `${epic.title}::&${epic.iid}`; + }, + }, + stripQuotes, +}; +</script> + +<template> + <gl-filtered-search-token + :config="config" + v-bind="{ ...$props, ...$attrs }" + v-on="$listeners" + @input="searchEpics" + > + <template #view="{ inputValue }"> + <span>{{ activeEpic ? getEpicValue(activeEpic) : $options.stripQuotes(inputValue) }}</span> + </template> + <template #suggestions> + <gl-loading-icon v-if="loading" /> + <template v-else> + <gl-filtered-search-suggestion + v-for="epic in epics" + :key="epic.id" + :value="getEpicValue(epic)" + > + <div>{{ epic.title }}</div> + </gl-filtered-search-suggestion> + </template> + </template> + </gl-filtered-search-token> +</template> |