Uses mixins for repeated functions

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -91,6 +91,7 @@ $(() => {
   });
 
   gl.IssueBoardsModalAddBtn = new Vue({
+    mixins: [gl.issueBoards.ModalMixins],
     el: '#js-add-issues-btn',
     data: {
       modal: ModalStore.store,
@@ -106,7 +107,7 @@ $(() => {
         class="btn btn-create pull-right prepend-left-10 has-tooltip"
         type="button"
         :disabled="disabled"
-        @click="modal.showAddIssuesModal = true">
+        @click="toggleModal(true)">
         Add issues
       </button>
     `,

app/assets/javascripts/boards/components/modal/empty_state.js.es6

@@ -3,6 +3,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalEmptyState = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -56,7 +57,7 @@
               <button
                 type="button"
                 class="btn btn-default"
-                @click="activeTab = 'all'"
+                @click="changeTab('all')"
                 v-if="activeTab === 'selected'">
                 All issues
               </button>

app/assets/javascripts/boards/components/modal/footer.js.es6

@@ -4,6 +4,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFooter = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -18,9 +19,6 @@
       },
     },
     methods: {
-      hideModal() {
-        this.showAddIssuesModal = false;
-      },
       addIssues() {
         const list = this.selectedList;
         const selectedIssues = ModalStore.getSelectedIssues();
@@ -37,7 +35,7 @@
           list.issuesSize += 1;
         });
 
-        this.hideModal();
+        this.toggleModal(false);
       },
     },
     components: {
@@ -62,7 +60,7 @@
         <button
           class="btn btn-default pull-right"
           type="button"
-          @click="hideModal">
+          @click="toggleModal(false)">
           Cancel
         </button>
       </footer>

app/assets/javascripts/boards/components/modal/header.js.es6

@@ -4,6 +4,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.IssuesModalHeader = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -36,7 +37,7 @@
               class="close"
               data-dismiss="modal"
               aria-label="Close"
-              @click="showAddIssuesModal = false">
+              @click="toggleModal(false)">
               <span aria-hidden="true">×</span>
             </button>
           </h2>

app/assets/javascripts/boards/components/modal/tabs.js.es6

@@ -3,6 +3,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalTabs = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -21,7 +22,7 @@
             <a
               href="#"
               role="button"
-              @click.prevent="activeTab = 'all'">
+              @click.prevent="changeTab('all')">
               <span>All issues</span>
               <span class="badge">
                 {{ issuesCount }}
@@ -32,7 +33,7 @@
             <a
               href="#"
               role="button"
-              @click.prevent="activeTab = 'selected'">
+              @click.prevent="changeTab('selected')">
               <span>Selected issues</span>
               <span class="badge">
                 {{ selectedCount }}

app/assets/javascripts/boards/mixins/modal_mixins.js.es6

+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalMixins = {
+    methods: {
+      toggleModal(toggle) {
+        ModalStore.store.showAddIssuesModal = toggle;
+      },
+      changeTab(tab) {
+        ModalStore.store.activeTab = tab;
+      },
+    },
+  };
+})();