Added selectable list before adding issues

Adds issues to list on frontend - need to push to backend

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -71,6 +71,12 @@ $(() => {
 
           Store.addBlankState();
           this.loading = false;
+
+          if (this.state.lists.length > 0) {
+            Store.modal.selectedList = this.state.lists[0];
+          }
+
+          Store.modal.showAddIssuesModal = true;
         });
     }
   });

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

+//= require ./lists_dropdown
 /* global Vue */
 (() => {
   const Store = gl.issueBoards.BoardsStore;
@@ -31,18 +32,34 @@
       addIssues() {
         const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
 
+        issueIds.forEach((id) => {
+          const issue = this.store.issues.filter(issue => issue.id == id)[0];
+          this.store.selectedList.addIssue(issue);
+          this.store.selectedList.issuesSize += 1;
+        });
+
         this.disabled = true;
+        this.hideModal();
+      },
     },
+    components: {
+      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
       <footer class="form-actions add-issues-footer">
+        <div class="pull-left">
           <button
-          class="btn btn-success pull-left"
+            class="btn btn-success"
             type="button"
             :disabled="submitDisabled"
             @click="addIssues">
             {{ submitText }}
           </button>
+          <span class="add-issues-footer-to-list">
+            to list
+          </span>
+          <lists-dropdown></lists-dropdown>
+        </div>
         <button
           class="btn btn-default pull-right"
           type="button"

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

+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
+    data() {
+      return {
+        modal: Store.modal,
+        state: Store.state,
+      }
+    },
+    computed: {
+      selected() {
+        return this.modal.selectedList;
+      },
+    },
+    methods: {
+      selectList(list) {
+        this.modal.selectedList = list;
+      },
+    },
+    template: `
+      <div class="dropdown inline">
+        <button
+          class="dropdown-menu-toggle"
+          type="button"
+          data-toggle="dropdown"
+          aria-expanded="false">
+          {{ selected.title }}
+          <span
+            class="dropdown-label-box pull-right"
+            :style="{ backgroundColor: selected.label.color }">
+          </span>
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div class="dropdown-menu dropdown-menu-selectable">
+          <ul>
+            <li
+              v-for="list in state.lists"
+              v-if="list.type == 'label'">
+              <a
+                href="#"
+                role="button"
+                :class="{ 'is-active': list.id == selected.id }"
+                @click="selectList(list)">
+                <span
+                  class="dropdown-label-box"
+                  :style="{ backgroundColor: list.label.color }">
+                </span>
+                {{ list.title }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    `,
+  });
+})();

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

@@ -14,8 +14,9 @@
     },
     modal: {
       issues: [],
-      showAddIssuesModal: true,
+      showAddIssuesModal: false,
       activeTab: 'all',
+      selectedList: {}
     },
     moving: {
       issue: {},

app/assets/stylesheets/pages/boards.scss

@@ -427,6 +427,13 @@
   padding-right: 15px;
 }
 
+.add-issues-footer-to-list {
+  display: inline-block;
+  padding-left: 6px;
+  padding-right: 6px;
+  line-height: 34px;
+}
+
 .add-issues-list-columns {
   width: 100%;
   padding-top: 3px;