diff options
Diffstat (limited to 'app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js')
-rw-r--r-- | app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js | 54 |
1 files changed, 20 insertions, 34 deletions
diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js index 1d559dc6e41..6e68114e04b 100644 --- a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js +++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; -import deleteMilestoneModal from './components/delete_milestone_modal.vue'; +import DeleteMilestoneModal from './components/delete_milestone_modal.vue'; import eventHub from './event_hub'; export default () => { @@ -18,6 +18,8 @@ export default () => { button.querySelector('.js-loading-icon').classList.add('hidden'); }; + const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); + const onRequestStarted = milestoneUrl => { const button = document.querySelector( `.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`, @@ -27,35 +29,8 @@ export default () => { eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished); }; - const onDeleteButtonClick = event => { - const button = event.currentTarget; - const modalProps = { - milestoneId: parseInt(button.dataset.milestoneId, 10), - milestoneTitle: button.dataset.milestoneTitle, - milestoneUrl: button.dataset.milestoneUrl, - issueCount: parseInt(button.dataset.milestoneIssueCount, 10), - mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10), - }; - eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted); - eventHub.$emit('deleteMilestoneModal.props', modalProps); - }; - - const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); - deleteMilestoneButtons.forEach(button => { - button.addEventListener('click', onDeleteButtonClick); - }); - - eventHub.$once('deleteMilestoneModal.mounted', () => { - deleteMilestoneButtons.forEach(button => { - button.removeAttribute('disabled'); - }); - }); - return new Vue({ - el: '#delete-milestone-modal', - components: { - deleteMilestoneModal, - }, + el: '#js-delete-milestone-modal', data() { return { modalProps: { @@ -69,10 +44,21 @@ export default () => { }, mounted() { eventHub.$on('deleteMilestoneModal.props', this.setModalProps); - eventHub.$emit('deleteMilestoneModal.mounted'); - }, - beforeDestroy() { - eventHub.$off('deleteMilestoneModal.props', this.setModalProps); + deleteMilestoneButtons.forEach(button => { + button.removeAttribute('disabled'); + button.addEventListener('click', () => { + this.$root.$emit('bv::show::modal', 'delete-milestone-modal'); + eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted); + + this.setModalProps({ + milestoneId: parseInt(button.dataset.milestoneId, 10), + milestoneTitle: button.dataset.milestoneTitle, + milestoneUrl: button.dataset.milestoneUrl, + issueCount: parseInt(button.dataset.milestoneIssueCount, 10), + mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10), + }); + }); + }); }, methods: { setModalProps(modalProps) { @@ -80,7 +66,7 @@ export default () => { }, }, render(createElement) { - return createElement(deleteMilestoneModal, { + return createElement(DeleteMilestoneModal, { props: this.modalProps, }); }, |