1 files changed, 123 insertions, 0 deletions
diff --git a/app/assets/javascripts/milestones/index.js b/app/assets/javascripts/milestones/index.js
new file mode 100644
index 00000000000..2ca5f104b4f
--- /dev/null
+++ b/app/assets/javascripts/milestones/index.js
@@ -0,0 +1,123 @@
+import $ from 'jquery';
+import Vue from 'vue';
+import initDatePicker from '~/behaviors/date_picker';
+import GLForm from '~/gl_form';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
+import Milestone from '~/milestones/milestone';
+import Sidebar from '~/right_sidebar';
+import MountMilestoneSidebar from '~/sidebar/mount_milestone_sidebar';
+import Translate from '~/vue_shared/translate';
+import ZenMode from '~/zen_mode';
+import DeleteMilestoneModal from './components/delete_milestone_modal.vue';
+import PromoteMilestoneModal from './components/promote_milestone_modal.vue';
+import eventHub from './event_hub';
+
+export function initForm(initGFM = true) {
+  new ZenMode(); // eslint-disable-line no-new
+  initDatePicker();
+
+  // eslint-disable-next-line no-new
+  new GLForm($('.milestone-form'), {
+    emojis: true,
+    members: initGFM,
+    issues: initGFM,
+    mergeRequests: initGFM,
+    epics: initGFM,
+    milestones: initGFM,
+    labels: initGFM,
+    snippets: initGFM,
+    vulnerabilities: initGFM,
+  });
+}
+
+export function initShow() {
+  new Milestone(); // eslint-disable-line no-new
+  new Sidebar(); // eslint-disable-line no-new
+  new MountMilestoneSidebar(); // eslint-disable-line no-new
+}
+
+export function initPromoteMilestoneModal() {
+  Vue.use(Translate);
+
+  const promoteMilestoneModal = document.getElementById('promote-milestone-modal');
+  if (!promoteMilestoneModal) {
+    return null;
+  }
+
+  return new Vue({
+    el: promoteMilestoneModal,
+    render(createElement) {
+      return createElement(PromoteMilestoneModal);
+    },
+  });
+}
+
+export function initDeleteMilestoneModal() {
+  Vue.use(Translate);
+
+  const onRequestFinished = ({ milestoneUrl, successful }) => {
+    const button = document.querySelector(
+      `.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`,
+    );
+
+    if (!successful) {
+      button.removeAttribute('disabled');
+    }
+
+    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}"]`,
+    );
+    button.setAttribute('disabled', '');
+    button.querySelector('.js-loading-icon').classList.remove('hidden');
+    eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished);
+  };
+
+  return new Vue({
+    el: '#js-delete-milestone-modal',
+    data() {
+      return {
+        modalProps: {
+          milestoneId: -1,
+          milestoneTitle: '',
+          milestoneUrl: '',
+          issueCount: -1,
+          mergeRequestCount: -1,
+        },
+      };
+    },
+    mounted() {
+      eventHub.$on('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) {
+        this.modalProps = modalProps;
+      },
+    },
+    render(createElement) {
+      return createElement(DeleteMilestoneModal, {
+        props: this.modalProps,
+      });
+    },
+  });
+}