Fix order lists in lists view

4 files changed, 82 insertions, 86 deletions

diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index a068dd04..94f9af39 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -1,6 +1,9 @@
 const subManager = new SubsManager();
 
 BlazeComponent.extendComponent({
+  openNewListForm() {
+    this.childComponents('addListForm')[0].open();
+  },
   onCreated() {
     this.draggingActive = new ReactiveVar(false);
     this.showOverlay = new ReactiveVar(false);
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index e922a3fd..51a9a0de 100644
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@@ -19,6 +19,83 @@ BlazeComponent.extendComponent({
   // comment below provides further details.
   onRendered() {
     const boardComponent = this.parentComponent().parentComponent();
+    const $listsDom = boardComponent.$('.js-lists');
+
+    if (!Session.get('currentCard')) {
+      boardComponent.scrollLeft();
+    }
+
+    // We want to animate the card details window closing. We rely on CSS
+    // transition for the actual animation.
+    $listsDom._uihooks = {
+      removeElement(node) {
+        const removeNode = _.once(() => {
+          node.parentNode.removeChild(node);
+        });
+        if ($(node).hasClass('js-card-details')) {
+          $(node).css({
+            flexBasis: 0,
+            padding: 0,
+          });
+          $listsDom.one(CSSEvents.transitionend, removeNode);
+        } else {
+          removeNode();
+        }
+      },
+    };
+
+    $listsDom.sortable({
+      tolerance: 'pointer',
+      helper: 'clone',
+      handle: '.js-list-header',
+      items: '.js-list:not(.js-list-composer)',
+      placeholder: 'list placeholder',
+      distance: 7,
+      start(evt, ui) {
+        ui.placeholder.height(ui.helper.height());
+        EscapeActions.executeUpTo('popup-close');
+        boardComponent.setIsDragging(true);
+      },
+      stop(evt, ui) {
+        // To attribute the new index number, we need to get the DOM element
+        // of the previous and the following card -- if any.
+        const prevListDom = ui.item.prev('.js-list').get(0);
+        const nextListDom = ui.item.next('.js-list').get(0);
+        const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
+
+        $listsDom.sortable('cancel');
+        const listDomElement = ui.item.get(0);
+        const list = Blaze.getData(listDomElement);
+
+        Lists.update(list._id, {
+          $set: {
+            sort: sortIndex.base,
+          },
+        });
+      },
+    });
+
+    function userIsMember() {
+      return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+    }
+
+    // Disable drag-dropping while in multi-selection mode, or if the current user
+    // is not a board member
+    boardComponent.autorun(() => {
+      const $listDom = $listsDom;
+      if ($listDom.data('sortable')) {
+        $listsDom.sortable('option', 'disabled',
+          MultiSelection.isActive() || !userIsMember());
+      }
+    });
+
+    // If there is no data in the board (ie, no lists) we autofocus the list
+    // creation form by clicking on the corresponding element.
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    if (userIsMember() && currentBoard.lists().count() === 0) {
+      boardComponent.openNewListForm();
+    }
+
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
     $cards.sortable({
@@ -79,10 +156,6 @@ BlazeComponent.extendComponent({
       },
     });
 
-    function userIsMember() {
-      return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
-    }
-
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
       $cards.sortable('option', 'disabled', !userIsMember());
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade
index 8c96dfba..0c3fc5de 100644
--- a/client/components/swimlanes/swimlanes.jade
+++ b/client/components/swimlanes/swimlanes.jade
@@ -36,7 +36,7 @@ template(name="listsGroup")
         +addListForm
 
 template(name="addListAndSwimlaneForm")
-  .list.js-list.list-composer.js-list-composer
+  .list.list-composer.js-list-composer
     .list-header
       +inlinedForm(autoclose=false)
         input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
@@ -61,7 +61,7 @@ template(name="addListAndSwimlaneForm")
           | {{_ 'add-swimlane'}}
 
 template(name="addListForm")
-  .list.js-list.list-composer.js-list-composer
+  .list.list-composer.js-list-composer
     .list-header
       +inlinedForm(autoclose=false)
         input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index 9c3435d6..c121a222 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@@ -29,7 +29,6 @@ BlazeComponent.extendComponent({
         const swimlaneDomElement = ui.item.get(0);
         const swimlane = Blaze.getData(swimlaneDomElement);
 
-        console.log(swimlane._id);
         Swimlanes.update(swimlane._id, {
           $set: {
             sort: sortIndex.base,
@@ -45,10 +44,6 @@ BlazeComponent.extendComponent({
     this._lastDragPositionX = 0;
   },
 
-  openNewListForm() {
-    this.childComponents('addListForm')[0].open();
-  },
-
   id() {
     return this._id;
   },
@@ -117,81 +112,6 @@ BlazeComponent.extendComponent({
   },
 }).register('swimlane');
 
-Template.swimlane.onRendered(function() {
-  const self = BlazeComponent.getComponentForElement(this.firstNode);
-
-  self.listsDom = this.find('.js-lists');
-
-  if (!Session.get('currentCard')) {
-    self.scrollLeft();
-  }
-
-  // We want to animate the card details window closing. We rely on CSS
-  // transition for the actual animation.
-  self.listsDom._uihooks = {
-    removeElement(node) {
-      const removeNode = _.once(() => {
-        node.parentNode.removeChild(node);
-      });
-      if ($(node).hasClass('js-card-details')) {
-        $(node).css({
-          flexBasis: 0,
-          padding: 0,
-        });
-        $(self.listsDom).one(CSSEvents.transitionend, removeNode);
-      } else {
-        removeNode();
-      }
-    },
-  };
-
-  $(self.listsDom).sortable({
-    tolerance: 'pointer',
-    helper: 'clone',
-    handle: '.js-list-header',
-    items: '.js-list:not(.js-list-composer)',
-    placeholder: 'list placeholder',
-    distance: 7,
-    start(evt, ui) {
-      ui.placeholder.height(ui.helper.height());
-      Popup.close();
-    },
-    stop() {
-      $(self.listsDom).find('.js-list:not(.js-list-composer)').each(
-        (i, list) => {
-          const data = Blaze.getData(list);
-          Lists.update(data._id, {
-            $set: {
-              sort: i,
-            },
-          });
-        }
-      );
-    },
-  });
-
-  function userIsMember() {
-    return Meteor.user() && Meteor.user().isBoardMember();
-  }
-
-  // Disable drag-dropping while in multi-selection mode, or if the current user
-  // is not a board member
-  self.autorun(() => {
-    const $listDom = $(self.listsDom);
-    if ($listDom.data('sortable')) {
-      $(self.listsDom).sortable('option', 'disabled',
-        MultiSelection.isActive() || !userIsMember());
-    }
-  });
-
-  // If there is no data in the board (ie, no lists) we autofocus the list
-  // creation form by clicking on the corresponding element.
-  const currentBoard = Boards.findOne(Session.get('currentBoard'));
-  if (userIsMember() && currentBoard.lists().count() === 0) {
-    self.openNewListForm();
-  }
-});
-
 BlazeComponent.extendComponent({
   // Proxy
   open() {