Add siwmlane button. Allow card drop between swimlanes

client/components/boards/boardBody.jade

@@ -22,19 +22,3 @@ template(name="boardBody")
         .board-overlay
       each currentBoard.swimlanes
         +swimlane(this)
-//      if currentUser.isBoardMember
-//        +addSwimlaneForm
-
-template(name="addListForm")
-  .list.js-list.list-composer.js-list-composer
-    .list-header
-      +inlinedForm(autoclose=false)
-        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
-          autocomplete="off" autofocus)
-        .edit-controls.clearfix
-          button.primary.confirm(type="submit") {{_ 'save'}}
-          a.fa.fa-times-thin.js-close-inlined-form
-      else
-        a.open-list-composer.js-open-inlined-form
-          i.fa.fa-plus
-          | {{_ 'add-list'}}

client/components/boards/boardBody.styl

@@ -22,14 +22,12 @@ position()
 
     .swimlane
       border-bottom: 1px solid #CCC
-      align-items: flex-start
       display: flex
       flex-direction: row
       margin: 0 0 10px
       padding: 0 40px 5px 0
       overflow-x: auto
       overflow-y: hidden
-      position: cover
 
     .board-overlay
       position: cover
@@ -51,7 +49,6 @@ position()
     .board-canvas
 
       .swimlane
-        align-items: flex-start
         border-bottom: 1px solid #CCC
         display: flex
         flex-direction: column
@@ -59,4 +56,3 @@ position()
         padding: 0 40px 0px 0
         overflow-x: hidden
         overflow-y: auto
-        position: cover

client/components/lists/list.js

@@ -55,6 +55,7 @@ BlazeComponent.extendComponent({
         const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1;
         const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards);
         const listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
+        const swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id;
 
         // Normally the jquery-ui sortable library moves the dragged DOM element
         // to its new position, which disrupts Blaze reactive updates mechanism
@@ -67,12 +68,12 @@ BlazeComponent.extendComponent({
 
         if (MultiSelection.isActive()) {
           Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => {
-            card.move(listId, sortIndex.base + i * sortIndex.increment);
+            card.move(swimlaneId, listId, sortIndex.base + i * sortIndex.increment);
           });
         } else {
           const cardDomElement = ui.item.get(0);
           const card = Blaze.getData(cardDomElement);
-          card.move(listId, sortIndex.base);
+          card.move(swimlaneId, listId, sortIndex.base);
         }
         boardComponent.setIsDragging(false);
       },

client/components/lists/list.styl

@@ -9,7 +9,6 @@
   // Even if this background color is the same as the body we can't leave it
   // transparent, because that won't work during a list drag.
   background: darken(white, 13%)
-  height: 100%
   border-left: 1px solid darken(white, 20%)
   padding: 0
   float: left

client/components/swimlanes/swimlanes.jade

@@ -18,3 +18,43 @@ template(name="swimlane")
           +cardDetails(currentCard)
       if currentUser.isBoardMember
         +addListForm
+        +addListAndSwimlaneForm
+
+template(name="addListAndSwimlaneForm")
+  .list.js-list.list-composer.js-list-composer
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-list'}}
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-swimlane'}}
+
+template(name="addListForm")
+  .list.js-list.list-composer.js-list-composer
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-list'}}

client/components/swimlanes/swimlanes.js

@@ -174,6 +174,69 @@ BlazeComponent.extendComponent({
   },
 }).register('addListForm');
 
+BlazeComponent.extendComponent({
+  // Proxy
+  open() {
+    this.childComponents('inlinedForm')[0].open();
+  },
+
+  events() {
+    return [{
+      submit(evt) {
+        evt.preventDefault();
+        var titleInput = this.find('.list-name-input');
+        if (titleInput) {
+          const title = titleInput.value.trim();
+          if (title) {
+            Lists.insert({
+              title,
+              boardId: Session.get('currentBoard'),
+              sort: $('.list').length,
+            });
+
+            titleInput.value = '';
+            titleInput.focus();
+          }
+        } else {
+          titleInput = this.find('.swimlane-name-input');
+          const title = titleInput.value.trim();
+          console.log(title);
+          if (title) {
+            Swimlanes.insert({
+              title,
+              boardId: Session.get('currentBoard'),
+              sort: $('.swimlane').length,
+            });
+
+            titleInput.value = '';
+            titleInput.focus();
+          }
+        }
+      },
+    }];
+  },/*
+        if (titleInput) {
+          const title = titleInput.value.trim();
+          if (title) {
+            Lists.insert({
+              title,
+              boardId: Session.get('currentBoard'),
+              sort: $('.list').length,
+            });
+
+            titleInput.value = '';
+            titleInput.focus();
+          }
+        } else {
+          titleInput = this.find('.swimlane-name-input');
+          console.log(titleInput);
+        }
+      },
+    }];
+  },
+  */
+}).register('addListAndSwimlaneForm');
+
 Template.swimlane.helpers({
   canSeeAddList() {
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();

client/components/swimlanes/swimlanes.styl

@@ -7,7 +7,6 @@
 
   .swimlane-header
     writing-mode: sideways-lr;
-    height: 100%;
     font-size: 14px;
     line-height: 50px;
     margin: 0;

i18n/en.i18n.json

@@ -44,6 +44,7 @@
     "add-attachment": "Add Attachment",
     "add-board": "Add Board",
     "add-card": "Add Card",
+    "add-swimlane": "Add Swimlane",
     "add-checklist": "Add Checklist",
     "add-checklist-item": "Add an item to checklist",
     "add-cover": "Add Cover",

models/cards.js

@@ -219,9 +219,10 @@ Cards.mutations({
     return {$set: {description}};
   },
 
-  move(listId, sortIndex) {
+  move(swimlaneId, listId, sortIndex) {
     const list = Lists.findOne(listId);
     const mutatedFields = {
+      swimlaneId,
       listId,
       boardId: list.boardId,
     };