Search bar now returns data

Selected data is added into a different array

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

@@ -28,7 +28,7 @@
       },
       addIssues() {
         const list = this.store.selectedList;
-        const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
+        const issueIds = this.store.selectedIssues.map(issue => issue.id);
 
         // Post the data to the backend
         gl.boardService.addMultipleIssues(list, issueIds);

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

@@ -25,8 +25,8 @@
             <modal-dismiss></modal-dismiss>
           </h2>
         </header>
-        <modal-tabs v-if="issues.length"></modal-tabs>
-        <modal-search v-if="issues.length"></modal-search>
+        <modal-tabs v-if="!loading"></modal-tabs>
+        <modal-search v-if="!loading"></modal-search>
       </div>
     `,
   });

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

@@ -22,9 +22,7 @@
       issues: {
         handler() {
           this.$nextTick(() => {
-            if (this.activeTab === 'selected') {
             listMasonry.layout();
-            }
           });
         },
         deep: true,
@@ -37,12 +35,26 @@
       selectedCount() {
         return Store.modalSelectedCount();
       },
+      loopIssues() {
+        if (this.activeTab === 'all') {
+          return this.issues;
+        }
+
+        return this.selectedIssues;
+      },
     },
     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);
+        }
       },
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
@@ -64,7 +76,6 @@
       this.initMasonry();
     },
     destroyed() {
-      this.issues = [];
       this.destroyMasonry();
     },
     components: {
@@ -77,7 +88,7 @@
           ref="list"
           v-show="!loading">
           <div
-            v-for="issue in issues"
+            v-for="issue in loopIssues"
             v-if="showIssue(issue)"
             class="card-parent">
             <div

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

@@ -12,16 +12,41 @@
     data() {
       return Store.modal;
     },
+    watch: {
+      searchTerm() {
+        this.searchOperation();
+      },
+    },
     mounted() {
-      gl.boardService.getBacklog()
-        .then((res) => {
+      this.loading = true;
+
+      this.loadIssues()
+        .then(() => {
+          this.loading = false;
+        });
+    },
+    methods: {
+      searchOperation: _.debounce(function() {
+        this.loadIssues();
+      }, 500),
+      loadIssues() {
+        return gl.boardService.getBacklog({
+          search: this.searchTerm,
+        }).then((res) => {
           const data = res.json();
 
+          this.issues = [];
           data.forEach((issueObj) => {
-            this.issues.push(new ListIssue(issueObj));
+            const issue = new ListIssue(issueObj);
+            const foundSelectedIssue = this.selectedIssues
+              .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+            issue.selected = foundSelectedIssue !== undefined;
+
+            this.issues.push(issue);
           });
         });
       },
+    },
     components: {
       'modal-header': gl.issueBoards.IssuesModalHeader,
       'modal-list': gl.issueBoards.ModalList,
@@ -33,10 +58,10 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list v-if="issues.length"></modal-list>
+          <modal-list v-if="!loading"></modal-list>
           <section
             class="add-issues-list"
-            v-if="issues.length == 0">
+            v-if="loading">
             <div class="add-issues-list-loading">
               <i class="fa fa-spinner fa-spin"></i>
             </div>

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

@@ -24,7 +24,17 @@
 
         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);
+            }
+          }
         });
       },
     },
@@ -35,7 +45,8 @@
         <input
           placeholder="Search issues..."
           class="form-control"
-          type="search" />
+          type="search"
+          v-model="searchTerm" />
         <button
           type="button"
           class="btn btn-success btn-inverted"

app/assets/javascripts/boards/services/board_service.js.es6

@@ -76,8 +76,8 @@ class BoardService {
     });
   }
 
-  getBacklog() {
-    return this.boards.backlog();
+  getBacklog(data) {
+    return this.boards.backlog(data);
   }
 
   addMultipleIssues(list, issue_ids) {

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

@@ -14,9 +14,12 @@
     },
     modal: {
       issues: [],
+      selectedIssues: [],
       showAddIssuesModal: false,
       activeTab: 'all',
-      selectedList: {}
+      selectedList: {},
+      searchTerm: '',
+      loading: false,
     },
     moving: {
       issue: {},
@@ -40,15 +43,10 @@
     },
     new (listObj) {
       const list = this.addList(listObj);
-      const backlogList = this.findList('type', 'backlog', 'backlog');
 
       list
         .save()
         .then(() => {
-          // Remove any new issues from the backlog
-          // as they will be visible in the new list
-          list.issues.forEach(backlogList.removeIssue.bind(backlogList));
-
           this.state.lists = _.sortBy(this.state.lists, 'position');
         });
       this.removeBlankState();
@@ -58,7 +56,7 @@
     },
     shouldAddBlankState () {
       // Decide whether to add the blank state
-      return !(this.state.lists.filter(list => list.type !== 'backlog' && list.type !== 'done')[0]);
+      return !(this.state.lists.filter(list => list.type !== 'done')[0]);
     },
     addBlankState () {
       if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
@@ -108,7 +106,7 @@
         listTo.addIssue(issue, listFrom, newIndex);
       }
 
-      if (listTo.type === 'done' && listFrom.type !== 'backlog') {
+      if (listTo.type === 'done') {
         issueLists.forEach((list) => {
           list.removeIssue(issue);
         });
@@ -128,15 +126,7 @@
       history.pushState(null, null, `?${$.param(this.state.filters)}`);
     },
     modalSelectedCount() {
-      let count = 0;
-
-      this.modal.issues.forEach((issue) => {
-        if (issue.selected) {
-          count += 1;
-        }
-      });
-
-      return count;
+      return this.modal.selectedIssues.length;
     },
   };
 })();