diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue')
3 files changed, 35 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js index ab652c9356a..e94e7d46f85 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js @@ -1,5 +1,6 @@ -// eslint-disable-next-line import/prefer-default-export export const DropdownVariant = { Sidebar: 'sidebar', Standalone: 'standalone', }; + +export const LIST_BUFFER_SIZE = 5; diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue index 1ef2e8b3bed..af16088b6b9 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue @@ -3,15 +3,20 @@ import { mapState, mapGetters, mapActions } from 'vuex'; import { GlLoadingIcon, GlButton, GlSearchBoxByType, GlLink } from '@gitlab/ui'; import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; +import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue'; import LabelItem from './label_item.vue'; +import { LIST_BUFFER_SIZE } from './constants'; + export default { + LIST_BUFFER_SIZE, components: { GlLoadingIcon, GlButton, GlSearchBoxByType, GlLink, + SmartVirtualList, LabelItem, }, data() { @@ -139,10 +144,18 @@ export default { <gl-search-box-by-type v-model="searchKey" :autofocus="true" /> </div> <div v-show="!labelsFetchInProgress" ref="labelsListContainer" class="dropdown-content"> - <ul class="list-unstyled mb-0"> + <smart-virtual-list + :length="visibleLabels.length" + :remain="$options.LIST_BUFFER_SIZE" + :size="$options.LIST_BUFFER_SIZE" + wclass="list-unstyled mb-0" + wtag="ul" + class="h-100" + > <li v-for="(label, index) in visibleLabels" :key="label.id" class="d-block text-left"> <label-item :label="label" + :is-label-set="label.set" :highlight="index === currentHighlightItem" @clickLabel="handleLabelClick(label)" /> @@ -150,7 +163,7 @@ export default { <li v-show="!visibleLabels.length" class="p-2 text-center"> {{ __('No matching results') }} </li> - </ul> + </smart-virtual-list> </div> <div v-if="isDropdownVariantSidebar" class="dropdown-footer"> <ul class="list-unstyled"> @@ -162,9 +175,9 @@ export default { > </li> <li> - <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item">{{ - footerManageLabelTitle - }}</gl-link> + <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item"> + {{ footerManageLabelTitle }} + </gl-link> </li> </ul> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue index c95221d71b5..002e741ab96 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue @@ -11,6 +11,10 @@ export default { type: Object, required: true, }, + isLabelSet: { + type: Boolean, + required: true, + }, highlight: { type: Boolean, required: false, @@ -19,7 +23,7 @@ export default { }, data() { return { - isSet: this.label.set, + isSet: this.isLabelSet, }; }, computed: { @@ -29,6 +33,16 @@ export default { }; }, }, + watch: { + /** + * This watcher assures that if user used + * `Enter` key to set/unset label, changes + * are reflected here too. + */ + isLabelSet(value) { + this.isSet = value; + }, + }, methods: { handleClick() { this.isSet = !this.isSet; |