1 files changed, 82 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
new file mode 100644
index 00000000000..d00f81c9094
--- /dev/null
+++ b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
@@ -0,0 +1,82 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import PromoteMilestoneModal from './components/promote_milestone_modal.vue';
+import eventHub from './event_hub';
+
+Vue.use(Translate);
+
+export default () => {
+  const onRequestFinished = ({ milestoneUrl, successful }) => {
+    const button = document.querySelector(`.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`);
+
+    if (!successful) {
+      button.removeAttribute('disabled');
+    }
+  };
+
+  const onRequestStarted = (milestoneUrl) => {
+    const button = document.querySelector(`.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`);
+    button.setAttribute('disabled', '');
+    eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished);
+  };
+
+  const onDeleteButtonClick = (event) => {
+    const button = event.currentTarget;
+    const modalProps = {
+      milestoneTitle: button.dataset.milestoneTitle,
+      url: button.dataset.url,
+    };
+    eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted);
+    eventHub.$emit('promoteMilestoneModal.props', modalProps);
+  };
+
+  const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone-button');
+  promoteMilestoneButtons.forEach((button) => {
+    button.addEventListener('click', onDeleteButtonClick);
+  });
+
+  eventHub.$once('promoteMilestoneModal.mounted', () => {
+    promoteMilestoneButtons.forEach((button) => {
+      button.removeAttribute('disabled');
+    });
+  });
+
+  const promoteMilestoneModal = document.getElementById('promote-milestone-modal');
+  let promoteMilestoneComponent;
+
+  if (promoteMilestoneModal) {
+    promoteMilestoneComponent = new Vue({
+      el: promoteMilestoneModal,
+      components: {
+        PromoteMilestoneModal,
+      },
+      data() {
+        return {
+          modalProps: {
+            milestoneTitle: '',
+            url: '',
+          },
+        };
+      },
+      mounted() {
+        eventHub.$on('promoteMilestoneModal.props', this.setModalProps);
+        eventHub.$emit('promoteMilestoneModal.mounted');
+      },
+      beforeDestroy() {
+        eventHub.$off('promoteMilestoneModal.props', this.setModalProps);
+      },
+      methods: {
+        setModalProps(modalProps) {
+          this.modalProps = modalProps;
+        },
+      },
+      render(createElement) {
+        return createElement('promote-milestone-modal', {
+          props: this.modalProps,
+        });
+      },
+    });
+  }
+
+  return promoteMilestoneComponent;
+};