Use eventhub to trigger gl-ui-modalch-modal-trigger-eventhub

4 files changed, 22 insertions, 11 deletions

diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index 0c38a1afaf7..610a4be2c46 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { highCountTrim } from '~/lib/utils/text_utility';
 import setStatusModalTrigger from './set_status_modal/set_status_modal_trigger.vue';
-// import setStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue';
+import setStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue';
 
 /**
  * Updates todo counter when todos are toggled.
@@ -24,7 +24,7 @@ export default function initTodoToggle() {
 
 document.addEventListener('DOMContentLoaded', () => {
   const setStatusModalTriggerEl = document.querySelector('.js-set-status-modal-trigger');
-  // const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper');
+  const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper');
 
   if (setStatusModalTriggerEl || setStatusModalWrapperEl) {
     Vue.use(Translate);
@@ -36,11 +36,11 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
 
-    // new Vue({
-    //   el: setStatusModalWrapperEl,
-    //   render(createElement) {
-    //     return createElement(setStatusModalWrapper);
-    //   },
-    // });
+    new Vue({
+      el: setStatusModalWrapperEl,
+      render(createElement) {
+        return createElement(setStatusModalWrapper);
+      },
+    });
   }
 });
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
index 1bae4dc8216..217da735b7a 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
@@ -1,5 +1,6 @@
 <script>
 import { s__, sprintf } from '~/locale';
+import eventHub from './eventHub';
 
 export default {
   computed: {
@@ -11,6 +12,9 @@ export default {
     onSubmit() {
       console.log('Do something');
     },
+    openModal() {
+      eventHub.$emit('openModal');
+    }
   },
 };
 </script>
@@ -18,13 +22,13 @@ export default {
 <template>
   <li>
     <button
-      v-gl-modal="modalId"
       type="button"
       class="btn menu-item"
+      @click="openModal"
     >
       {{ s__('SetStatusModal|Set a status') }}
     </button>
-    <gl-ui-modal
+    <!-- <gl-ui-modal
       :title="s__('SetStatusModal|Set a Status')"
       :ok-title="s__('SetStatusModal|Set status')"
       :modal-id="modalId"
@@ -55,6 +59,6 @@ export default {
           name="emoji"
         />
       </form>
-    </gl-ui-modal>
+    </gl-ui-modal> -->
   </li>
 </template>
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index 7faa53ad485..8f44c311429 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -8,10 +8,16 @@ export default {
       return 'set-status-modal';
     },
   },
+  mounted() {
+    eventHub.$on('openModal', this.openModal);
+  },
   methods: {
     onSubmit() {
       console.log('Do something');
     },
+    openModal() {
+      this.$root.$emit('bv::show::modal', this.modalId)
+    },
   },
 };
 </script>
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 044b49c12cc..dc1d4f8565f 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -70,6 +70,7 @@
                 - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
                 = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
 
+      .js-set-status-modal-wrapper
       %button.navbar-toggler.d-block.d-sm-none{ type: 'button' }
         %span.sr-only= _('Toggle navigation')
         = sprite_icon('ellipsis_h', size: 12, css_class: 'more-icon js-navbar-toggle-right')