Add new issue form to lists

Closes #21219

5 files changed, 89 insertions, 5 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;
+      }
+    }
+  });
+})();
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index ecc5b24e360..46e92b8a187 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -233,3 +233,29 @@ lex
     margin-right: 5px;
   }
 }
+
+.board-issue-count-holder {
+  margin-top: -3px;
+
+  .btn {
+    line-height: 12px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.board-issue-count {
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 21px;
+  border-radius: $border-radius-base;
+  border-color: $border-color;
+  border-style: solid;
+  border-width: 1px 1px 1px 1px;
+
+  &.has-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-width: 1px 0 1px 1px;
+  }
+}
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index 73066150fb3..6c95812aebd 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -12,8 +12,15 @@
       %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
         %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
           {{ list.title }}
-          %span.pull-right{ "v-if" => "list.type !== 'blank'" }
-            {{ list.issuesSize }}
+          .board-issue-count-holder.pull-right.clearfix
+            %span.board-issue-count.pull-left{ "v-if" => "list.type !== 'blank'",
+              ":class" => "{ 'has-btn': list.type !== 'done' }" }
+              {{ list.issuesSize }}
+            - if can? current_user, :create_issue, @project
+              %button.btn.btn-small.btn-default.pull-right{ type: "button",
+                "@click" => "showNewIssueForm",
+                "v-if" => "list.type !== 'done'" }
+                = icon("plus")
           - if can?(current_user, :admin_list, @project)
             %board-delete{ "inline-template" => true,
               ":list" => "list",
@@ -26,12 +33,30 @@
         ":issues" => "list.issues",
         ":loading" => "list.loading",
         ":disabled" => "disabled",
+        ":show-issue-form.sync" => "showIssueForm",
         ":issue-link-base" => "issueLinkBase" }
         .board-list-loading.text-center{ "v-if" => "loading" }
           = icon("spinner spin")
         %ul.board-list{ "v-el:list" => true,
           "v-show" => "!loading",
           ":data-board" => "list.id" }
+          - if can? current_user, :create_issue, @project
+            %board-new-issue{ "inline-template" => true,
+              ":show-issue-form.sync" => "showIssueForm",
+              "v-if" => "list.type !== 'done' && showIssueForm" }
+              %li.card
+                %form{ "@submit" => "submit($event)" }
+                  %label.label-light
+                    Title
+                  %input.form-control{ type: "text",
+                    "v-model" => "title" }
+                  .clearfix.prepend-top-10
+                    %button.btn.btn-success.pull-left{ type: "submit",
+                      ":disabled" => "title === ''" }
+                      Submit issue
+                    %button.btn.btn-default.pull-right{ type: "button",
+                      "@click" => "cancel" }
+                      Cancel
           = render "projects/boards/components/card"
           %li.board-list-count.text-center{ "v-if" => "showCount" }
             = icon("spinner spin", "v-show" => "list.loadingMore" )