Created a modal store

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

@@ -1,13 +1,13 @@
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.DismissModal = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     methods: {
       toggleModal(toggle) {

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

@@ -1,41 +1,39 @@
 //= require ./lists_dropdown
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
-      return {
-        store: Store.modal,
-      };
+      return ModalStore.globalStore;
     },
     computed: {
       submitDisabled() {
-        return !Store.modalSelectedCount();
+        return !ModalStore.selectedCount();
       },
       submitText() {
-        const count = Store.modalSelectedCount();
+        const count = ModalStore.selectedCount();
 
         return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
       },
     },
     methods: {
       hideModal() {
-        this.store.showAddIssuesModal = false;
+        this.showAddIssuesModal = false;
       },
       addIssues() {
-        const list = this.store.selectedList;
-        const issueIds = this.store.selectedIssues.map(issue => issue.id);
+        const list = this.selectedList;
+        const issueIds = this.selectedIssues.map(issue => issue.id);
 
         // Post the data to the backend
         gl.boardService.addMultipleIssues(list, issueIds);
 
         // Add the issues on the frontend
         issueIds.forEach((id) => {
-          const issue = this.store.issues.filter(issue => issue.id == id)[0];
+          const issue = this.issues.filter(fIssue => fIssue.id === id)[0];
           list.addIssue(issue);
           list.issuesSize += 1;
         });

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

@@ -3,14 +3,14 @@
 //= require ./search
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssuesModalHeader = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     components: {
       'modal-dismiss': gl.issueBoards.DismissModal,

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

@@ -3,38 +3,27 @@
 /* global Masonry */
 (() => {
   let listMasonry;
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalList = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     watch: {
       activeTab() {
-        this.$nextTick(() => {
-          this.destroyMasonry();
-          this.initMasonry();
-        });
+        this.initMasonry();
       },
       issues: {
         handler() {
-          this.$nextTick(() => {
-            listMasonry.layout();
-          });
+          this.initMasonry();
         },
         deep: true,
-      }
+      },
     },
     computed: {
-      loading() {
-        return this.issues.length === 0;
-      },
-      selectedCount() {
-        return Store.modalSelectedCount();
-      },
       loopIssues() {
         if (this.activeTab === 'all') {
           return this.issues;
@@ -44,31 +33,24 @@
       },
     },
     methods: {
-      toggleIssue(issueObj) {
-        const issue = issueObj;
-        issue.selected = !issue.selected;
-
-        if (issue.selected) {
-          this.selectedIssues.push(issue);
-        } else {
-          // Remove this issue
-          const index = this.selectedIssues.indexOf(issue);
-          this.selectedIssues.splice(index, 1);
-        }
-      },
+      toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
 
         return issue.selected;
       },
       initMasonry() {
-        listMasonry = new Masonry(this.$refs.list, {
-          transitionDuration: 0,
+        this.$nextTick(() => {
+          this.destroyMasonry();
+          listMasonry = new Masonry(this.$refs.list, {
+            transitionDuration: 0,
+          });
         });
       },
       destroyMasonry() {
         if (listMasonry) {
           listMasonry.destroy();
+          listMasonry = undefined;
         }
       },
     },

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

@@ -10,7 +10,7 @@
       return {
         modal: Store.modal,
         state: Store.state,
-      }
+      };
     },
     computed: {
       selected() {

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

@@ -3,14 +3,14 @@
 //= require ./footer
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssuesModal = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     watch: {
       searchTerm() {
@@ -38,8 +38,7 @@
           this.issues = [];
           data.forEach((issueObj) => {
             const issue = new ListIssue(issueObj);
-            const foundSelectedIssue = this.selectedIssues
-              .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+            const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
             issue.selected = foundSelectedIssue !== undefined;
 
             this.issues.push(issue);

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

@@ -1,17 +1,17 @@
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalSearch = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     computed: {
       selectAllText() {
-        if (Store.modalSelectedCount() !== this.issues.length || this.issues.length === 0) {
+        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
           return 'Select all';
         }
 
@@ -19,24 +19,7 @@
       },
     },
     methods: {
-      toggleAll() {
-        const select = Store.modalSelectedCount() !== this.issues.length;
-
-        this.issues.forEach((issue) => {
-          const issueUpdate = issue;
-
-          if (issueUpdate.selected !== select) {
-            issueUpdate.selected = select;
-
-            if (select) {
-              this.selectedIssues.push(issueUpdate);
-            } else {
-              const index = this.selectedIssues.indexOf(issue);
-              this.selectedIssues.splice(index, 1);
-            }
-          }
-        });
-      },
+      toggleAll: ModalStore.toggleAll.bind(ModalStore),
     },
     template: `
       <div

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

@@ -1,13 +1,13 @@
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalTabs = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     methods: {
       changeTab(tab) {
@@ -16,7 +16,7 @@
     },
     computed: {
       selectedCount() {
-        return Store.modalSelectedCount();
+        return ModalStore.selectedCount();
       },
     },
     destroyed() {

app/assets/javascripts/boards/stores/modal_store.js.es6

@@ -0,0 +1,63 @@
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  class ModalStore {
+    constructor() {
+      this.globalStore = gl.issueBoards.BoardsStore.modal;
+    }
+
+    selectedCount() {
+      return this.globalStore.selectedIssues.length;
+    }
+
+    toggleIssue(issueObj) {
+      const issue = issueObj;
+      issue.selected = !issue.selected;
+
+      if (issue.selected) {
+        this.addSelectedIssue(issue);
+      } else {
+        this.removeSelectedIssue(issue);
+      }
+    }
+
+    toggleAll() {
+      const select = this.selectedCount() !== this.globalStore.issues.length;
+
+      this.globalStore.issues.forEach((issue) => {
+        const issueUpdate = issue;
+
+        if (issueUpdate.selected !== select) {
+          issueUpdate.selected = select;
+
+          if (select) {
+            this.addSelectedIssue(issue);
+          } else {
+            this.removeSelectedIssue(issue);
+          }
+        }
+      });
+    }
+
+    addSelectedIssue(issue) {
+      this.globalStore.selectedIssues.push(issue);
+    }
+
+    removeSelectedIssue(issue) {
+      const index = this.selectedIssueIndex(issue);
+      this.globalStore.selectedIssues.splice(index, 1);
+    }
+
+    selectedIssueIndex(issue) {
+      return this.globalStore.selectedIssues.indexOf(issue);
+    }
+
+    findSelectedIssue(issue) {
+      return this.globalStore.selectedIssues
+        .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+    }
+  }
+
+  gl.issueBoards.ModalStore = new ModalStore();
+})();