diff options
Diffstat (limited to 'app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue')
-rw-r--r-- | app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue | 99 |
1 files changed, 61 insertions, 38 deletions
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue index 0dc54b612ba..ecde11aff40 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue +++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue @@ -1,28 +1,22 @@ <script> +import { GlModal } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; import { s__, sprintf } from '~/locale'; import { visitUrl } from '~/lib/utils/url_utility'; -import eventHub from '../event_hub'; export default { components: { - GlModal: DeprecatedModal2, + GlModal, }, - props: { - milestoneTitle: { - type: String, - required: true, - }, - url: { - type: String, - required: true, - }, - groupName: { - type: String, - required: true, - }, + data() { + return { + milestoneTitle: '', + url: '', + groupName: '', + currentButton: null, + visible: false, + }; }, computed: { title() { @@ -38,42 +32,71 @@ export default { ); }, }, + mounted() { + this.getButtons().forEach((button) => { + button.addEventListener('click', this.onPromoteButtonClick); + button.removeAttribute('disabled'); + }); + }, + beforeDestroy() { + this.getButtons().forEach((button) => { + button.removeEventListener('click', this.onPromoteButtonClick); + }); + }, methods: { + 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'); + }, onSubmit() { - eventHub.$emit('promoteMilestoneModal.requestStarted', this.url); return axios .post(this.url, { params: { format: 'json' } }) - .then(response => { - eventHub.$emit('promoteMilestoneModal.requestFinished', { - milestoneUrl: this.url, - successful: true, - }); + .then((response) => { visitUrl(response.data.url); }) - .catch(error => { - eventHub.$emit('promoteMilestoneModal.requestFinished', { - milestoneUrl: this.url, - successful: false, - }); + .catch((error) => { createFlash(error); + }) + .finally(() => { + this.visible = false; }); }, + onClose() { + this.visible = false; + if (this.currentButton) { + this.currentButton.removeAttribute('disabled'); + } + }, + }, + primaryAction: { + text: s__('Milestones|Promote Milestone'), + attributes: [{ variant: 'warning' }], + }, + cancelAction: { + text: s__('Cancel'), + attributes: [], }, }; </script> <template> <gl-modal - id="promote-milestone-modal" - :footer-primary-button-text="s__('Milestones|Promote Milestone')" - footer-primary-button-variant="warning" - @submit="onSubmit" + :visible="visible" + modal-id="promote-milestone-modal" + :action-primary="$options.primaryAction" + :action-cancel="$options.cancelAction" + :title="title" + @primary="onSubmit" + @hide="onClose" > - <template #title> - {{ title }} - </template> - <div> - <p>{{ text }}</p> - <p>{{ s__('Milestones|This action cannot be reversed.') }}</p> - </div> + <p>{{ text }}</p> + <p>{{ s__('Milestones|This action cannot be reversed.') }}</p> </gl-modal> </template> |