debian-mirror-gitlab/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue

191 lines
6.3 KiB
Vue
Raw Normal View History

2020-11-24 15:15:51 +05:30
<script>
import $ from 'jquery';
2021-01-29 00:20:46 +05:30
import { camelCase, difference, union } from 'lodash';
2021-02-22 17:27:13 +05:30
import updateIssueLabelsMutation from '~/boards/graphql/issue_set_labels.mutation.graphql';
2021-01-29 00:20:46 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import { getIdFromGraphQLId, MutationOperationMode } from '~/graphql_shared/utils';
2021-01-29 00:20:46 +05:30
import { IssuableType } from '~/issue_show/constants';
2020-11-24 15:15:51 +05:30
import { __ } from '~/locale';
2021-01-29 00:20:46 +05:30
import updateMergeRequestLabelsMutation from '~/sidebar/queries/update_merge_request_labels.mutation.graphql';
import { toLabelGid } from '~/sidebar/utils';
2020-11-24 15:15:51 +05:30
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';
2021-09-04 01:27:46 +05:30
import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2021-01-29 00:20:46 +05:30
const mutationMap = {
[IssuableType.Issue]: {
mutation: updateIssueLabelsMutation,
mutationName: 'updateIssue',
},
[IssuableType.MergeRequest]: {
mutation: updateMergeRequestLabelsMutation,
mutationName: 'mergeRequestSetLabels',
},
};
2020-11-24 15:15:51 +05:30
export default {
components: {
LabelsSelect,
2021-09-04 01:27:46 +05:30
LabelsSelectWidget,
2020-11-24 15:15:51 +05:30
},
variant: DropdownVariant.Sidebar,
2021-09-04 01:27:46 +05:30
mixins: [glFeatureFlagMixin()],
2020-11-24 15:15:51 +05:30
inject: [
'allowLabelCreate',
'allowLabelEdit',
'allowScopedLabels',
'iid',
'initiallySelectedLabels',
'issuableType',
'labelsFetchPath',
'labelsManagePath',
'projectIssuesPath',
'projectPath',
],
2021-01-03 14:25:43 +05:30
data() {
return {
isLabelsSelectInProgress: false,
2020-11-24 15:15:51 +05:30
selectedLabels: this.initiallySelectedLabels,
2021-01-03 14:25:43 +05:30
};
2020-11-24 15:15:51 +05:30
},
methods: {
handleDropdownClose() {
$(this.$el).trigger('hidden.gl.dropdown');
},
2021-01-29 00:20:46 +05:30
getUpdateVariables(dropdownLabels) {
2021-03-08 18:12:59 +05:30
const currentLabelIds = this.selectedLabels.map((label) => label.id);
const userAddedLabelIds = dropdownLabels
.filter((label) => label.set)
.map((label) => label.id);
const userRemovedLabelIds = dropdownLabels
.filter((label) => !label.set)
.map((label) => label.id);
2020-11-24 15:15:51 +05:30
2021-01-03 14:25:43 +05:30
const labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds);
2020-11-24 15:15:51 +05:30
2021-01-29 00:20:46 +05:30
switch (this.issuableType) {
case IssuableType.Issue:
return {
addLabelIds: userAddedLabelIds,
iid: this.iid,
projectPath: this.projectPath,
removeLabelIds: userRemovedLabelIds,
};
case IssuableType.MergeRequest:
return {
iid: this.iid,
labelIds: labelIds.map(toLabelGid),
operationMode: MutationOperationMode.Replace,
projectPath: this.projectPath,
};
default:
return {};
}
},
handleUpdateSelectedLabels(dropdownLabels) {
this.updateSelectedLabels(this.getUpdateVariables(dropdownLabels));
},
getRemoveVariables(labelId) {
switch (this.issuableType) {
case IssuableType.Issue:
return {
iid: this.iid,
projectPath: this.projectPath,
removeLabelIds: [labelId],
};
case IssuableType.MergeRequest:
return {
iid: this.iid,
labelIds: [toLabelGid(labelId)],
operationMode: MutationOperationMode.Remove,
projectPath: this.projectPath,
};
default:
return {};
}
2021-01-03 14:25:43 +05:30
},
handleLabelRemove(labelId) {
2021-01-29 00:20:46 +05:30
this.updateSelectedLabels(this.getRemoveVariables(labelId));
2021-01-03 14:25:43 +05:30
},
2021-01-29 00:20:46 +05:30
updateSelectedLabels(inputVariables) {
2021-01-03 14:25:43 +05:30
this.isLabelsSelectInProgress = true;
2020-11-24 15:15:51 +05:30
2021-01-29 00:20:46 +05:30
this.$apollo
.mutate({
mutation: mutationMap[this.issuableType].mutation,
variables: { input: inputVariables },
})
2021-01-03 14:25:43 +05:30
.then(({ data }) => {
2021-01-29 00:20:46 +05:30
const { mutationName } = mutationMap[this.issuableType];
if (data[mutationName]?.errors?.length) {
throw new Error();
}
const issuableType = camelCase(this.issuableType);
2021-03-08 18:12:59 +05:30
this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map((label) => ({
2021-01-29 00:20:46 +05:30
...label,
id: getIdFromGraphQLId(label.id),
}));
2021-01-03 14:25:43 +05:30
})
2021-01-29 00:20:46 +05:30
.catch(() => createFlash({ message: __('An error occurred while updating labels.') }))
2020-11-24 15:15:51 +05:30
.finally(() => {
2021-01-03 14:25:43 +05:30
this.isLabelsSelectInProgress = false;
2020-11-24 15:15:51 +05:30
});
},
},
};
</script>
<template>
2021-09-04 01:27:46 +05:30
<labels-select-widget
v-if="glFeatures.labelsWidget"
class="block labels js-labels-block"
:allow-label-remove="allowLabelEdit"
: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="isLabelsSelectInProgress"
:selected-labels="selectedLabels"
:variant="$options.sidebar"
data-qa-selector="labels_block"
@onDropdownClose="handleDropdownClose"
@onLabelRemove="handleLabelRemove"
@updateSelectedLabels="handleUpdateSelectedLabels"
>
{{ __('None') }}
</labels-select-widget>
2020-11-24 15:15:51 +05:30
<labels-select
2021-09-04 01:27:46 +05:30
v-else
2020-11-24 15:15:51 +05:30
class="block labels js-labels-block"
2021-01-03 14:25:43 +05:30
:allow-label-remove="allowLabelEdit"
2020-11-24 15:15:51 +05:30
: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"
2021-01-03 14:25:43 +05:30
:labels-select-in-progress="isLabelsSelectInProgress"
2020-11-24 15:15:51 +05:30
:selected-labels="selectedLabels"
:variant="$options.sidebar"
2021-01-03 14:25:43 +05:30
data-qa-selector="labels_block"
2020-11-24 15:15:51 +05:30
@onDropdownClose="handleDropdownClose"
2021-01-03 14:25:43 +05:30
@onLabelRemove="handleLabelRemove"
2020-11-24 15:15:51 +05:30
@updateSelectedLabels="handleUpdateSelectedLabels"
>
{{ __('None') }}
</labels-select>
</template>