Added ability to generate default lists

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

@@ -20,7 +20,8 @@ $(function () {
     el: '#board-app',
     props: {
       disabled: Boolean,
-      endpoint: String
+      endpoint: String,
+      issueLinkBase: String
     },
     data: {
       state: BoardsStore.state,

app/assets/javascripts/boards/components/board.js.es6

@@ -2,7 +2,8 @@
   const Board = Vue.extend({
     props: {
       list: Object,
-      disabled: Boolean
+      disabled: Boolean,
+      issueLinkBase: String
     },
     data: function () {
       return {

app/assets/javascripts/boards/components/board_blank_state.js.es6

-(function () {
+(() => {
   const BoardBlankState = Vue.extend({
+    data: function () {
+      return {
+        predefinedLabels: [
+          new Label({ title: 'Development', color: '#5CB85C' }),
+          new Label({ title: 'Testing', color: '#F0AD4E' }),
+          new Label({ title: 'Production', color: '#FF5F00' }),
+          new Label({ title: 'Ready', color: '#FF0000' })
+        ]
+      }
+    },
     methods: {
       addDefaultLists: function () {
+        BoardsStore.removeBlankState();
+        
+        _.each(this.predefinedLabels, (label, i) => {
+          BoardsStore.addList({
+            title: label.title,
+            position: i,
+            type: 'label',
+            label: {
+              title: label.title,
+              color: label.color
+            }
+          });
+        });
+
+        // Save the labels
+        gl.boardService
+          .generateDefaultLists()
+          .then((resp) => {
+            const data = resp.json();
 
+            _.each(data, (listObj) => {
+              const list = BoardsStore.findList('title', listObj.title);
+              list.id = listObj.id;
+              list.label.id = listObj.label.id;
+              list.getIssues();
+            });
+          });
       },
       clearBlankState: function () {
         BoardsStore.removeBlankState();

app/assets/javascripts/boards/services/board_service.js.es6

@@ -3,7 +3,12 @@ class BoardService {
     Vue.http.options.root = root;
 
     this.lists = Vue.resource(`${root}{/id}.json`, {});
-    this.list = Vue.resource(`${root}/lists{/id}.json`, {});
+    this.list = Vue.resource(`${root}/lists{/id}.json`, {}, {
+      generate: {
+        method: 'POST',
+        url: `${root}/lists/generate.json`
+      }
+    });
     this.issue = Vue.resource(`${root}/issues{/id}.json`, {});
     this.issues = Vue.resource(`${root}/lists{/id}/issues.json`, {});
   }
@@ -17,6 +22,12 @@ class BoardService {
     return this.lists.get();
   }
 
+  generateDefaultLists () {
+    this.setCSRF();
+
+    return this.list.generate({});
+  }
+
   createList (labelId) {
     this.setCSRF();
 

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

@@ -39,7 +39,7 @@
     },
     shouldAddBlankState: function () {
       // Decide whether to add the blank state
-      return !_.find(this.state.lists, function (list) {
+      return !!_.find(this.state.lists, function (list) {
         return list.type === 'backlog' || list.type === 'done';
       });
     },

app/views/projects/boards/components/_blank_state.html.haml

@@ -4,9 +4,9 @@
     %p
       Add the following default lists to your Issue Board with one click:
     %ul.board-blank-state-list
-      %li
-        %span.label-color{ style: "background-color: red;" }
-        Development
+      %li{ "v-for" => "label in predefinedLabels" }
+        %span.label-color{ ":style" =>  "{ backgroundColor: label.color } " }
+        {{ label.title }}
     %p
       Starting out with the default set of lists will get you right on the way to making the most of your board.
     %button.btn.btn-create.btn-inverted.btn-block{ type: "button", "@click" => "addDefaultLists" }

app/views/projects/boards/components/_board.html.haml

@@ -2,7 +2,8 @@
   "v-cloak" => true,
   "v-for" => "list in state.lists | orderBy 'position'",
   ":list" => "list",
-  ":disabled" => "#{current_user.nil?}" }
+  ":disabled" => "disabled",
+  ":issue-link-base" => "issueLinkBase" }
   .board{ ":class" => "{ 'is-draggable': !isPreset }" }
     .board-inner
       %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
@@ -27,7 +28,7 @@
         ":issues" => "list.issues",
         ":loading" => "list.loading",
         ":disabled" => "disabled",
-        ":issue-link-base" => "'#{namespace_project_issues_path(@project.namespace, @project)}'" }
+        ":issue-link-base" => "issueLinkBase" }
         .board-list-loading.text-center{ "v-if" => "loading" }
           = icon("spinner spin")
         %ul.board-list{ "v-el:list" => true,

app/views/projects/boards/show.html.haml

@@ -10,8 +10,10 @@
 
 = render 'shared/issuable/filter', type: :boards
 
-.boards-list#board-app{ ":endpoint" => "'#{namespace_project_board_path(@project.namespace, @project)}'",
-  ":disabled" => "#{current_user.nil?}" }
+.boards-list#board-app{ "v-cloak" => true,
+  ":endpoint" => "'#{namespace_project_board_path(@project.namespace, @project)}'",
+  ":disabled" => "#{current_user.nil?}",
+  ":issue-link-base" => "'#{namespace_project_issues_path(@project.namespace, @project)}'" }
   .boards-app-loading.text-center{ "v-if" => "loading" }
     = icon("spinner spin")
   = render "projects/boards/components/board"