diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-20 08:43:02 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-20 08:43:02 +0000 |
commit | d9ab72d6080f594d0b3cae15f14b3ef2c6c638cb (patch) | |
tree | 2341ef426af70ad1e289c38036737e04b0aa5007 /app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue | |
parent | d6e514dd13db8947884cd58fe2a9c2a063400a9b (diff) | |
download | gitlab-ce-d9ab72d6080f594d0b3cae15f14b3ef2c6c638cb.tar.gz |
Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue | 97 |
1 files changed, 70 insertions, 27 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue index 3c834770563..6bd43da2203 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue @@ -1,21 +1,18 @@ <script> -import Vue from 'vue'; -import Vuex from 'vuex'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; +import { labelsQueries } from '~/sidebar/constants'; import { DropdownVariant } from './constants'; import DropdownContents from './dropdown_contents.vue'; import DropdownValue from './dropdown_value.vue'; import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; -import issueLabelsQuery from './graphql/issue_labels.query.graphql'; import { isDropdownVariantSidebar, isDropdownVariantStandalone, isDropdownVariantEmbedded, } from './utils'; -Vue.use(Vuex); - export default { components: { DropdownValue, @@ -23,8 +20,21 @@ export default { DropdownValueCollapsed, SidebarEditableItem, }, - inject: ['iid', 'projectPath', 'allowLabelEdit'], + inject: { + allowLabelEdit: { + default: false, + }, + }, props: { + iid: { + type: String, + required: false, + default: '', + }, + fullPath: { + type: String, + required: true, + }, allowLabelRemove: { type: Boolean, required: false, @@ -90,43 +100,60 @@ export default { required: false, default: false, }, + issuableType: { + type: String, + required: true, + }, + attrWorkspacePath: { + type: String, + required: false, + default: undefined, + }, }, data() { return { contentIsOnViewport: true, - issueLabels: [], + issuableLabels: [], }; }, + computed: { + isLoading() { + return this.labelsSelectInProgress || this.$apollo.queries.issuableLabels.loading; + }, + }, apollo: { - issueLabels: { - query: issueLabelsQuery, + issuableLabels: { + query() { + return labelsQueries[this.issuableType].issuableQuery; + }, + skip() { + return !isDropdownVariantSidebar(this.variant); + }, variables() { return { iid: this.iid, - fullPath: this.projectPath, + fullPath: this.fullPath, }; }, update(data) { return data.workspace?.issuable?.labels.nodes || []; }, + error() { + createFlash({ message: __('Error fetching labels.') }); + }, }, }, methods: { handleDropdownClose(labels) { - if (labels.length) this.$emit('updateSelectedLabels', labels); - this.$emit('onDropdownClose'); + this.$emit('updateSelectedLabels', labels); + this.collapseEditableItem(); }, - collapseDropdown() { - this.$refs.editable.collapse(); + collapseEditableItem() { + this.$refs.editable?.collapse(); }, handleCollapsedValueClick() { this.$emit('toggleCollapse'); }, - showDropdown() { - this.$nextTick(() => { - this.$refs.dropdownContents.showDropdown(); - }); - }, isDropdownVariantSidebar, isDropdownVariantStandalone, isDropdownVariantEmbedded, @@ -145,20 +172,19 @@ export default { <template v-if="isDropdownVariantSidebar(variant)"> <dropdown-value-collapsed ref="dropdownButtonCollapsed" - :labels="issueLabels" + :labels="issuableLabels" @onValueClick="handleCollapsedValueClick" /> <sidebar-editable-item ref="editable" :title="__('Labels')" - :loading="labelsSelectInProgress" + :loading="isLoading" :can-edit="allowLabelEdit" - @open="showDropdown" > <template #collapsed> <dropdown-value :disable-labels="labelsSelectInProgress" - :selected-labels="issueLabels" + :selected-labels="issuableLabels" :allow-label-remove="allowLabelRemove" :labels-filter-base-path="labelsFilterBasePath" :labels-filter-param="labelsFilterParam" @@ -170,7 +196,7 @@ export default { <template #default="{ edit }"> <dropdown-value :disable-labels="labelsSelectInProgress" - :selected-labels="issueLabels" + :selected-labels="issuableLabels" :allow-label-remove="allowLabelRemove" :labels-filter-base-path="labelsFilterBasePath" :labels-filter-param="labelsFilterParam" @@ -180,8 +206,6 @@ export default { <slot></slot> </dropdown-value> <dropdown-contents - v-if="edit" - ref="dropdownContents" :dropdown-button-text="dropdownButtonText" :allow-multiselect="allowMultiselect" :labels-list-title="labelsListTitle" @@ -190,11 +214,30 @@ export default { :labels-create-title="labelsCreateTitle" :selected-labels="selectedLabels" :variant="variant" - @closeDropdown="collapseDropdown" + :issuable-type="issuableType" + :is-visible="edit" + :full-path="fullPath" + :attr-workspace-path="attrWorkspacePath" @setLabels="handleDropdownClose" + @closeDropdown="collapseEditableItem" /> </template> </sidebar-editable-item> </template> + <dropdown-contents + v-else + ref="dropdownContents" + :allow-multiselect="allowMultiselect" + :dropdown-button-text="dropdownButtonText" + :labels-list-title="labelsListTitle" + :footer-create-label-title="footerCreateLabelTitle" + :footer-manage-label-title="footerManageLabelTitle" + :labels-create-title="labelsCreateTitle" + :selected-labels="selectedLabels" + :variant="variant" + :issuable-type="issuableType" + :full-path="fullPath" + @setLabels="handleDropdownClose" + /> </div> </template> |