Add siwmlane button. Allow card drop between swimlanes

2025-04-20 12:07:11 -04:00 · 2018-01-19 16:00:02 -03:00 · 2018-01-19 16:00:02 -03:00 · ee2a43dd5b
commit ee2a43dd5b
parent 690a5b9703
9 changed files with 109 additions and 25 deletions
--- 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'}}
--- 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
--- 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);
      },
--- 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
--- 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'}}
--- 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();
--- 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;
--- a/i18n/en.i18n.json
+++ b/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",
--- a/models/cards.js
+++ b/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,
    };