Changed store

Async updates the boards when searching

6 files changed, 40 insertions, 20 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 951cb854ce8..6b294290f77 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -27,8 +27,6 @@ $(() => {
   const Store = gl.issueBoards.BoardsStore;
   const ModalStore = gl.issueBoards.ModalStore;
 
-  new FilteredSearchBoards();
-
   window.gl = window.gl || {};
 
   if (gl.IssueBoardsApp) {
@@ -62,6 +60,8 @@ $(() => {
     },
     created () {
       gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
+
+      new FilteredSearchBoards(Store.filter);
     },
     mounted () {
       Store.disabled = this.disabled;
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 18324de18b3..30d3be453be 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -28,16 +28,16 @@ require('./board_list');
     data () {
       return {
         detailIssue: Store.detail,
-        filters: Store.state.filters,
+        filter: Store.filter,
       };
     },
     watch: {
-      filters: {
-        handler () {
+      filter: {
+        handler() {
           this.list.page = 1;
           this.list.getIssues(true);
         },
-        deep: true
+        deep: true,
       },
       detailIssue: {
         handler () {
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index 6a00d84faf1..0b11237b03d 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -1,5 +1,12 @@
 export default class FilteredSearchBoards extends gl.FilteredSearchManager {
-  constructor() {
+  constructor(store) {
     super('boards');
+
+    this.store = store;
+    this.destroyOnSubmit = false
+  }
+
+  updateObject(path) {
+    this.store.path = path.substr(1);
   }
 }
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index f237567208c..ae117aa3900 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -10,7 +10,7 @@ class List {
     this.title = obj.title;
     this.type = obj.list_type;
     this.preset = ['done', 'blank'].indexOf(this.type) > -1;
-    this.filters = gl.issueBoards.BoardsStore.state.filters;
+    this.filterPath = gl.issueBoards.BoardsStore.filter.path;
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;
@@ -65,12 +65,24 @@ class List {
   }
 
   getIssues (emptyIssues = true) {
-    const filters = this.filters;
     const data = { page: this.page };
+    gl.issueBoards.BoardsStore.filter.path.split('&').forEach((filterParam) => {
+      const paramSplit = filterParam.split('=');
+      const paramKeyNormalized = paramSplit[0].replace('[]', '');
+      const isArray = paramSplit[0].indexOf('[]');
+
+      if (isArray >= 0) {
+        if (!data[paramKeyNormalized]) {
+          data[paramKeyNormalized] = [];
+        }
 
-    Object.keys(filters).forEach((key) => { data[key] = filters[key]; });
+        data[paramKeyNormalized].push(paramSplit[1]);
+      } else {
+        data[paramKeyNormalized] = paramSplit[1];
+      }
+    });
 
-    if (this.label) {
+    if (this.label && data.label_name) {
       data.label_name = data.label_name.filter(label => label !== this.label.title);
     }
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index c902a1d8bfc..d7e3973b327 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -8,6 +8,9 @@
 
   gl.issueBoards.BoardsStore = {
     disabled: false,
+    filter: {
+      path: '',
+    },
     state: {},
     detail: {
       issue: {}
@@ -18,13 +21,7 @@
     },
     create () {
       this.state.lists = [];
-      this.state.filters = {
-        author_username: gl.utils.getParameterValues('author_username')[0],
-        assignee_username: gl.utils.getParameterValues('assignee_username')[0],
-        milestone_title: gl.utils.getParameterValues('milestone_title')[0],
-        label_name: gl.utils.getParameterValues('label_name[]'),
-        search: ''
-      };
+      this.filter.path = gl.utils.getUrlParamsArray().join('&');
     },
     addList (listObj) {
       const list = new List(listObj);
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 58a984048de..56ff091197c 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -106,7 +106,7 @@
 
         if (!activeElements.length) {
           // Prevent droplab from opening dropdown
-          this.dropdownManager.destroyDroplab();
+          //this.dropdownManager.destroyDroplab();
 
           this.search();
         }
@@ -345,7 +345,11 @@
 
       const parameterizedUrl = `?scope=all&utf8=✓&${paths.join('&')}`;
 
-      gl.utils.visitUrl(parameterizedUrl);
+      if (this.updateObject) {
+        this.updateObject(parameterizedUrl);
+      } else {
+        gl.utils.visitUrl(parameterizedUrl);
+      }
     }
 
     getUsernameParams() {