Add new issue form to lists

Closes #21219

3 files changed, 36 insertions, 3 deletions

diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 7e86f001f44..cacb36a897f 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -21,7 +21,8 @@
     },
     data () {
       return {
-        filters: Store.state.filters
+        filters: Store.state.filters,
+        showIssueForm: false
       };
     },
     watch: {
@@ -33,6 +34,11 @@
         deep: true
       }
     },
+    methods: {
+      showNewIssueForm() {
+        this.showIssueForm = !this.showIssueForm;
+      }
+    },
     ready () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 474805c1437..d2e905ae062 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -1,4 +1,5 @@
 //= require ./board_card
+//= require ./board_new_issue
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
@@ -8,14 +9,16 @@
 
   gl.issueBoards.BoardList = Vue.extend({
     components: {
-      'board-card': gl.issueBoards.BoardCard
+      'board-card': gl.issueBoards.BoardCard,
+      'board-new-issue': gl.issueBoards.BoardNewIssue
     },
     props: {
       disabled: Boolean,
       list: Object,
       issues: Array,
       loading: Boolean,
-      issueLinkBase: String
+      issueLinkBase: String,
+      showIssueForm: Boolean
     },
     data () {
       return {
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
new file mode 100644
index 00000000000..057844f3ebb
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6
@@ -0,0 +1,24 @@
+(() => {
+  window.gl = window.gl || {};
+
+  gl.issueBoards.BoardNewIssue = Vue.extend({
+    props: {
+      showIssueForm: Boolean
+    },
+    data() {
+      return {
+        title: ''
+      };
+    },
+    methods: {
+      submit(e) {
+        e.preventDefault();
+
+        this.title = '';
+      },
+      cancel() {
+        this.showIssueForm = false;
+      }
+    }
+  });
+})();