From 97fbb3d1ff1d22aa8597ff0bad0520634d9e351e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 11:33:45 +0000
Subject: [PATCH] Added selectable list before adding issues Adds issues to
 list on frontend - need to push to backend

---
 .../javascripts/boards/boards_bundle.js.es6   |  6 ++
 .../boards/components/modal/footer.js.es6     | 31 +++++++---
 .../components/modal/lists_dropdown.js.es6    | 61 +++++++++++++++++++
 .../boards/stores/boards_store.js.es6         |  3 +-
 app/assets/stylesheets/pages/boards.scss      |  7 +++
 5 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index ef73d381fb4..67d9f023866 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/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;
         });
     }
   });
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index aadb754fd9e..e9f400952b7 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -1,3 +1,4 @@
+//= 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">
-        <button
-          class="btn btn-success pull-left"
-          type="button"
-          :disabled="submitDisabled"
-          @click="addIssues">
-          {{ submitText }}
-        </button>
+        <div class="pull-left">
+          <button
+            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"
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
new file mode 100644
index 00000000000..27da5057083
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -0,0 +1,61 @@
+/* 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>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 4c5eb57f5c9..fa0224beee5 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -14,8 +14,9 @@
     },
     modal: {
       issues: [],
-      showAddIssuesModal: true,
+      showAddIssuesModal: false,
       activeTab: 'all',
+      selectedList: {}
     },
     moving: {
       issue: {},
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index cd70a14bec5..bf1c0d1842b 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/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;
-- 
GitLab