Filters backlog by search query

app/assets/javascripts/boards/components/board.js.es6

@@ -3,11 +3,19 @@
     props: {
       board: Object
     },
-    data: () => {
+    data: function () {
       return {
         filters: BoardsStore.state.filters
       };
     },
+    watch: {
+      'query': function () {
+        if (this.board.canSearch()) {
+          const data = _.extend(this.filters, { search: this.query });
+          this.board.getIssues(data);
+        }
+      }
+    },
     methods: {
       clearSearch: function () {
         this.query = '';

app/assets/javascripts/boards/components/board_list.js.es6

@@ -5,11 +5,10 @@
       boardId: [Number, String],
       filters: Object,
       issues: Array,
-      query: String,
       loading: Boolean,
       issueLinkBase: String
     },
-    data: () => {
+    data: function () {
       return {
         scrollOffset: 20,
         loadMore: false
@@ -26,33 +25,8 @@
         return this.$els.list.scrollTop + this.listHeight();
       },
       loadFromLastId: function () {
-        this.loadMore = true;
-        setTimeout(() => {
-          this.loadMore = false;
-        }, 2000);
-      },
-      customFilter: function (issue) {
-        let returnIssue = issue;
-        if (this.filters.author && this.filters.author.id) {
-          if (!issue.author || issue.author.id !== this.filters.author.id) {
-            returnIssue = null;
-          }
-        }
-
-        if (this.filters.assignee && this.filters.assignee.id) {
-          if (!issue.assignee || issue.assignee.id !== this.filters.assignee.id) {
-            returnIssue = null;
-          }
-        }
 
-        if (this.filters.milestone && this.filters.milestone.id) {
-          if (!issue.milestone || issue.milestone.id !== this.filters.milestone.id) {
-            returnIssue = null;
-          }
-        }
-
-        return returnIssue;
-      }
+      },
     },
     ready: function () {
       this.sortable = Sortable.create(this.$els.list, {

app/assets/javascripts/boards/models/list.js.es6

@@ -11,16 +11,7 @@ class List {
     }
 
     if (this.type !== 'blank') {
-      this.loading = true;
-      gl.boardService.getIssuesForList(this.id)
-        .then((resp) => {
-          const data = resp.json();
-          this.loading = false;
-
-          data.forEach((issue) => {
-            this.issues.push(new Issue(issue));
-          });
-        });
+      this.getIssues();
     }
   }
 
@@ -49,6 +40,25 @@ class List {
     return this.type === 'backlog';
   }
 
+  getIssues (filter = {}) {
+    this.loading = true;
+    
+    gl.boardService.getIssuesForList(this.id, filter)
+      .then((resp) => {
+        const data = resp.json();
+        this.loading = false;
+
+        this.issues = [];
+        this.createIssues(data);
+      });
+  }
+
+  createIssues (data) {
+    data.forEach((issue) => {
+      this.issues.push(new Issue(issue));
+    });
+  }
+
   addIssue (issue, listFrom) {
     this.issues.push(issue);
 

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

@@ -43,10 +43,11 @@ class BoardService {
     return this.list.delete({ id });
   }
 
-  getIssuesForList (id) {
+  getIssuesForList (id, filter = {}) {
+    const data = _.extend({ id }, filter)
     this.setCSRF();
 
-    return this.issues.get({ id });
+    return this.issues.get(data);
   }
 
   moveIssue (id, from, to) {

app/views/projects/boards/components/_board.html.haml

@@ -19,7 +19,6 @@
         ":board-id" => "board.id",
         ":issues" => "board.issues",
         ":disabled" => "#{current_user.nil?}",
-        ":query" => "query",
         ":filters" => "filters",
         ":loading" => "board.loading",
         ":issue-link-base" => "'#{namespace_project_issues_path(@project.namespace, @project)}'" }

app/views/projects/boards/components/_card.html.haml

-%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter", "track-by" => "id" }
+%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | orderBy 'id' -1", "track-by" => "id" }
   %h4.card-title
     %a{ ":href" => "issueLinkBase + '/' + issue.id", ":title" => "issue.title" }
       {{ issue.title }}