debian-mirror-gitlab/app/assets/javascripts/projects/compare/components/revision_dropdown.vue

164 lines
4.1 KiB
Vue
Raw Normal View History

2021-03-11 19:13:27 +05:30
<script>
import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlDropdownSectionHeader } from '@gitlab/ui';
2021-04-29 21:17:54 +05:30
import { debounce } from 'lodash';
2021-03-11 19:13:27 +05:30
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { s__ } from '~/locale';
2021-04-29 21:17:54 +05:30
const EMPTY_DROPDOWN_TEXT = s__('CompareRevisions|Select branch/tag');
const SEARCH_DEBOUNCE_MS = 300;
2021-04-17 20:07:23 +05:30
2021-03-11 19:13:27 +05:30
export default {
components: {
GlDropdown,
GlDropdownItem,
GlDropdownSectionHeader,
GlSearchBoxByType,
},
props: {
refsProjectPath: {
type: String,
required: true,
},
paramsName: {
type: String,
required: true,
},
paramsBranch: {
type: String,
required: false,
default: null,
},
},
data() {
return {
branches: [],
tags: [],
loading: true,
searchTerm: '',
selectedRevision: this.getDefaultBranch(),
};
},
computed: {
2021-04-29 21:17:54 +05:30
hasBranches() {
return Boolean(this.branches?.length);
2021-03-11 19:13:27 +05:30
},
2021-04-29 21:17:54 +05:30
hasTags() {
return Boolean(this.tags?.length);
2021-03-11 19:13:27 +05:30
},
},
2021-04-17 20:07:23 +05:30
watch: {
refsProjectPath(newRefsProjectPath, oldRefsProjectPath) {
if (newRefsProjectPath !== oldRefsProjectPath) {
this.fetchBranchesAndTags(true);
}
},
2021-04-29 21:17:54 +05:30
searchTerm: debounce(function debounceSearch() {
this.searchBranchesAndTags();
}, SEARCH_DEBOUNCE_MS),
2021-04-17 20:07:23 +05:30
},
2021-03-11 19:13:27 +05:30
mounted() {
this.fetchBranchesAndTags();
},
methods: {
2021-04-29 21:17:54 +05:30
searchBranchesAndTags() {
return axios
.get(this.refsProjectPath, {
params: {
search: this.searchTerm,
},
})
.then(({ data }) => {
this.branches = data.Branches || [];
this.tags = data.Tags || [];
})
.catch(() => {
createFlash({
message: s__(
'CompareRevisions|There was an error while searching the branch/tag list. Please try again.',
),
});
});
},
2021-04-17 20:07:23 +05:30
fetchBranchesAndTags(reset = false) {
this.loading = true;
if (reset) {
this.selectedRevision = this.getDefaultBranch();
}
2021-03-11 19:13:27 +05:30
return axios
2021-04-29 21:17:54 +05:30
.get(this.refsProjectPath)
2021-03-11 19:13:27 +05:30
.then(({ data }) => {
this.branches = data.Branches || [];
this.tags = data.Tags || [];
})
.catch(() => {
createFlash({
2021-04-17 20:07:23 +05:30
message: s__(
'CompareRevisions|There was an error while loading the branch/tag list. Please try again.',
),
2021-03-11 19:13:27 +05:30
});
})
.finally(() => {
this.loading = false;
});
},
getDefaultBranch() {
2021-04-29 21:17:54 +05:30
return this.paramsBranch || EMPTY_DROPDOWN_TEXT;
2021-03-11 19:13:27 +05:30
},
onClick(revision) {
this.selectedRevision = revision;
},
onSearchEnter() {
this.selectedRevision = this.searchTerm;
},
},
};
</script>
<template>
2021-04-17 20:07:23 +05:30
<div :class="`js-compare-${paramsName}-dropdown`">
<input type="hidden" :name="paramsName" :value="selectedRevision" />
<gl-dropdown
class="gl-w-full gl-font-monospace"
toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0"
:text="selectedRevision"
:header-text="s__('CompareRevisions|Select Git revision')"
:loading="loading"
>
<template #header>
<gl-search-box-by-type
v-model.trim="searchTerm"
:placeholder="s__('CompareRevisions|Filter by Git revision')"
@keyup.enter="onSearchEnter"
/>
</template>
2021-04-29 21:17:54 +05:30
<gl-dropdown-section-header v-if="hasBranches">
2021-04-17 20:07:23 +05:30
{{ s__('CompareRevisions|Branches') }}
</gl-dropdown-section-header>
<gl-dropdown-item
2021-04-29 21:17:54 +05:30
v-for="branch in branches"
:key="branch"
2021-04-17 20:07:23 +05:30
is-check-item
:is-checked="selectedRevision === branch"
@click="onClick(branch)"
>
{{ branch }}
</gl-dropdown-item>
2021-04-29 21:17:54 +05:30
<gl-dropdown-section-header v-if="hasTags">
2021-04-17 20:07:23 +05:30
{{ s__('CompareRevisions|Tags') }}
</gl-dropdown-section-header>
<gl-dropdown-item
2021-04-29 21:17:54 +05:30
v-for="tag in tags"
:key="tag"
2021-04-17 20:07:23 +05:30
is-check-item
:is-checked="selectedRevision === tag"
@click="onClick(tag)"
2021-03-11 19:13:27 +05:30
>
2021-04-17 20:07:23 +05:30
{{ tag }}
</gl-dropdown-item>
</gl-dropdown>
2021-03-11 19:13:27 +05:30
</div>
</template>