debian-mirror-gitlab/app/assets/javascripts/milestones/components/promote_milestone_modal.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

105 lines
2.7 KiB
Vue
Raw Normal View History

2018-03-27 19:54:05 +05:30
<script>
2021-03-08 18:12:59 +05:30
import { GlModal } from '@gitlab/ui';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import axios from '~/lib/utils/axios_utils';
2018-12-13 13:39:08 +05:30
import { visitUrl } from '~/lib/utils/url_utility';
2021-12-11 22:18:48 +05:30
import { __, s__, sprintf } from '~/locale';
2018-03-27 19:54:05 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
2021-03-08 18:12:59 +05:30
GlModal,
2018-12-13 13:39:08 +05:30
},
2021-03-08 18:12:59 +05:30
data() {
return {
milestoneTitle: '',
url: '',
groupName: '',
currentButton: null,
visible: false,
};
2018-12-13 13:39:08 +05:30
},
computed: {
title() {
return sprintf(s__('Milestones|Promote %{milestoneTitle} to group milestone?'), {
milestoneTitle: this.milestoneTitle,
});
},
text() {
return sprintf(
s__(`Milestones|Promoting %{milestoneTitle} will make it available for all projects inside %{groupName}.
2019-09-04 21:01:54 +05:30
Existing project milestones with the same title will be merged.`),
2018-12-13 13:39:08 +05:30
{ milestoneTitle: this.milestoneTitle, groupName: this.groupName },
);
2018-03-27 19:54:05 +05:30
},
2018-12-13 13:39:08 +05:30
},
2021-03-08 18:12:59 +05:30
mounted() {
this.getButtons().forEach((button) => {
button.addEventListener('click', this.onPromoteButtonClick);
button.removeAttribute('disabled');
});
},
beforeDestroy() {
this.getButtons().forEach((button) => {
button.removeEventListener('click', this.onPromoteButtonClick);
});
},
2018-12-13 13:39:08 +05:30
methods: {
2021-03-08 18:12:59 +05:30
onPromoteButtonClick({ currentTarget }) {
const { milestoneTitle, url, groupName } = currentTarget.dataset;
currentTarget.setAttribute('disabled', '');
this.visible = true;
this.milestoneTitle = milestoneTitle;
this.url = url;
this.groupName = groupName;
this.currentButton = currentTarget;
},
getButtons() {
return document.querySelectorAll('.js-promote-project-milestone-button');
},
2018-12-13 13:39:08 +05:30
onSubmit() {
return axios
.post(this.url, { params: { format: 'json' } })
2021-03-08 18:12:59 +05:30
.then((response) => {
2018-12-13 13:39:08 +05:30
visitUrl(response.data.url);
})
2021-03-08 18:12:59 +05:30
.catch((error) => {
2021-09-04 01:27:46 +05:30
createFlash({
message: error,
});
2021-03-08 18:12:59 +05:30
})
.finally(() => {
this.visible = false;
2018-12-13 13:39:08 +05:30
});
2018-03-27 19:54:05 +05:30
},
2021-03-08 18:12:59 +05:30
onClose() {
this.visible = false;
if (this.currentButton) {
this.currentButton.removeAttribute('disabled');
}
},
},
primaryAction: {
text: s__('Milestones|Promote Milestone'),
2022-07-23 23:45:48 +05:30
attributes: [{ variant: 'confirm' }],
2021-03-08 18:12:59 +05:30
},
cancelAction: {
2021-12-11 22:18:48 +05:30
text: __('Cancel'),
2021-03-08 18:12:59 +05:30
attributes: [],
2018-12-13 13:39:08 +05:30
},
};
2018-03-27 19:54:05 +05:30
</script>
<template>
<gl-modal
2021-03-08 18:12:59 +05:30
:visible="visible"
modal-id="promote-milestone-modal"
:action-primary="$options.primaryAction"
:action-cancel="$options.cancelAction"
:title="title"
@primary="onSubmit"
@hide="onClose"
2018-03-27 19:54:05 +05:30
>
2021-03-08 18:12:59 +05:30
<p>{{ text }}</p>
<p>{{ s__('Milestones|This action cannot be reversed.') }}</p>
2018-03-27 19:54:05 +05:30
</gl-modal>
</template>