diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue new file mode 100644 index 00000000000..b6eff2931d3 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue @@ -0,0 +1,73 @@ +<script> +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import Api from '~/api'; +import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; +import createFlash from '~/flash'; +import { debounce } from 'lodash'; + +export default { + components: { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlLoadingIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + branches: null, + loading: true, + }; + }, + created() { + this.fetchBranches(); + }, + methods: { + fetchBranches(searchterm) { + Api.branches(this.config.projectId, searchterm) + .then(({ data }) => { + this.branches = data.map(branch => branch.name); + this.loading = false; + }) + .catch(err => { + createFlash(FETCH_BRANCH_ERROR_MESSAGE); + this.loading = false; + throw err; + }); + }, + searchBranches: debounce(function debounceSearch({ data }) { + this.fetchBranches(data); + }, FILTER_PIPELINES_SEARCH_DELAY), + }, +}; +</script> + +<template> + <gl-filtered-search-token + :config="config" + v-bind="{ ...$props, ...$attrs }" + v-on="$listeners" + @input="searchBranches" + > + <template #suggestions> + <gl-loading-icon v-if="loading" /> + <template v-else> + <gl-filtered-search-suggestion + v-for="(branch, index) in branches" + :key="index" + :value="branch" + > + {{ branch }} + </gl-filtered-search-suggestion> + </template> + </template> + </gl-filtered-search-token> +</template> |