diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue new file mode 100644 index 00000000000..d7be8927c29 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue @@ -0,0 +1,97 @@ +<script> +import $ from 'jquery'; +import { difference, union } from 'lodash'; +import { mapState, mapActions } from 'vuex'; +import flash from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import { __ } from '~/locale'; +import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants'; +import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; + +export default { + components: { + LabelsSelect, + }, + variant: DropdownVariant.Sidebar, + inject: [ + 'allowLabelCreate', + 'allowLabelEdit', + 'allowScopedLabels', + 'iid', + 'initiallySelectedLabels', + 'issuableType', + 'labelsFetchPath', + 'labelsManagePath', + 'labelsUpdatePath', + 'projectIssuesPath', + 'projectPath', + ], + data: () => ({ + labelsSelectInProgress: false, + }), + computed: { + ...mapState(['selectedLabels']), + }, + mounted() { + this.setInitialState({ + selectedLabels: this.initiallySelectedLabels, + }); + }, + methods: { + ...mapActions(['setInitialState', 'replaceSelectedLabels']), + handleDropdownClose() { + $(this.$el).trigger('hidden.gl.dropdown'); + }, + handleUpdateSelectedLabels(labels) { + const currentLabelIds = this.selectedLabels.map(label => label.id); + const userAddedLabelIds = labels.filter(label => label.set).map(label => label.id); + const userRemovedLabelIds = labels.filter(label => !label.set).map(label => label.id); + + const issuableLabels = difference( + union(currentLabelIds, userAddedLabelIds), + userRemovedLabelIds, + ); + + this.labelsSelectInProgress = true; + + axios({ + data: { + [this.issuableType]: { + label_ids: issuableLabels, + }, + }, + method: 'put', + url: this.labelsUpdatePath, + }) + .then(({ data }) => this.replaceSelectedLabels(data.labels)) + .catch(() => flash(__('An error occurred while updating labels.'))) + .finally(() => { + this.labelsSelectInProgress = false; + }); + }, + }, +}; +</script> + +<template> + <labels-select + class="block labels js-labels-block" + :allow-label-create="allowLabelCreate" + :allow-label-edit="allowLabelEdit" + :allow-multiselect="true" + :allow-scoped-labels="allowScopedLabels" + :footer-create-label-title="__('Create project label')" + :footer-manage-label-title="__('Manage project labels')" + :labels-create-title="__('Create project label')" + :labels-fetch-path="labelsFetchPath" + :labels-filter-base-path="projectIssuesPath" + :labels-manage-path="labelsManagePath" + :labels-select-in-progress="labelsSelectInProgress" + :selected-labels="selectedLabels" + :variant="$options.sidebar" + @onDropdownClose="handleDropdownClose" + @updateSelectedLabels="handleUpdateSelectedLabels" + > + {{ __('None') }} + </labels-select> +</template> |