Uses mixins for repeated functions

6 files changed, 26 insertions, 10 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 81df823cad1..afe4c9f9175 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/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>
     `,
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index 7bd7c27b579..9538f5b69e9 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/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>
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 059e2416b05..8883beb1290 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/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>
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 63268fcdb3d..194d598d42e 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/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>
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index 007e01f7d82..d556c6d3e04 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/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 }}
diff --git a/app/assets/javascripts/boards/mixins/modal_mixins.js.es6 b/app/assets/javascripts/boards/mixins/modal_mixins.js.es6
new file mode 100644
index 00000000000..d378b7d4baf
--- /dev/null
+++ b/app/assets/javascripts/boards/mixins/modal_mixins.js.es6
@@ -0,0 +1,14 @@
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalMixins = {
+    methods: {
+      toggleModal(toggle) {
+        ModalStore.store.showAddIssuesModal = toggle;
+      },
+      changeTab(tab) {
+        ModalStore.store.activeTab = tab;
+      },
+    },
+  };
+})();