94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<script>
|
|
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
|
|
import { debounce } from 'lodash';
|
|
import { mapActions, mapState } from 'vuex';
|
|
import Item from './item.vue';
|
|
|
|
export default {
|
|
components: {
|
|
Item,
|
|
GlIcon,
|
|
GlLoadingIcon,
|
|
},
|
|
data() {
|
|
return {
|
|
search: '',
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('branches', ['branches', 'isLoading']),
|
|
...mapState(['currentBranchId', 'currentProjectId']),
|
|
hasBranches() {
|
|
return this.branches.length !== 0;
|
|
},
|
|
hasNoSearchResults() {
|
|
return this.search !== '' && !this.hasBranches;
|
|
},
|
|
},
|
|
watch: {
|
|
isLoading: {
|
|
handler: 'focusSearch',
|
|
},
|
|
},
|
|
mounted() {
|
|
this.loadBranches();
|
|
},
|
|
methods: {
|
|
...mapActions('branches', ['fetchBranches']),
|
|
loadBranches() {
|
|
this.fetchBranches({ search: this.search });
|
|
},
|
|
searchBranches: debounce(function debounceSearch() {
|
|
this.loadBranches();
|
|
}, 250),
|
|
focusSearch() {
|
|
if (!this.isLoading) {
|
|
this.$nextTick(() => {
|
|
this.$refs.searchInput.focus();
|
|
});
|
|
}
|
|
},
|
|
isActiveBranch(item) {
|
|
return item.name === this.currentBranchId;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<label
|
|
class="dropdown-input gl-pt-3 gl-pb-5 gl-mb-0 gl-border-b-1 gl-border-b-solid gl-display-block"
|
|
@click.stop
|
|
>
|
|
<input
|
|
ref="searchInput"
|
|
v-model="search"
|
|
:placeholder="__('Search branches')"
|
|
type="search"
|
|
class="form-control dropdown-input-field"
|
|
@input="searchBranches"
|
|
/>
|
|
<gl-icon name="search" class="gl-ml-5 gl-mt-1 input-icon" />
|
|
</label>
|
|
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
|
|
<gl-loading-icon
|
|
v-if="isLoading"
|
|
size="lg"
|
|
class="mt-3 mb-3 align-self-center ml-auto mr-auto"
|
|
/>
|
|
<ul v-else class="mb-0 w-100">
|
|
<template v-if="hasBranches">
|
|
<li v-for="item in branches" :key="item.name">
|
|
<item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
|
|
</li>
|
|
</template>
|
|
<li v-else class="ide-search-list-empty d-flex align-items-center justify-content-center">
|
|
<template v-if="hasNoSearchResults">
|
|
{{ __('No branches found') }}
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|