Add siwmlane button. Allow card drop between swimlanes

7 files changed, 106 insertions, 24 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index 98384c84..e00794f3 100644
--- a/client/components/boards/boardBody.jade
+++ b/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'}}
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index 7d3c8f71..f5ecc08e 100644
--- a/client/components/boards/boardBody.styl
+++ b/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
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index 1d38f8f6..e922a3fd 100644
--- a/client/components/lists/list.js
+++ b/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);
       },
diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index 21d267ca..c3753360 100644
--- a/client/components/lists/list.styl
+++ b/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
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade
index 8dbef116..e3b6b6d7 100644
--- a/client/components/swimlanes/swimlanes.jade
+++ b/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'}}
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index 9388be3a..5c2429dd 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/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();
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index e9397594..48bc495c 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/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;