From 243af32fc798f161e72eddf9e43053b1ba89d98a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= <andresmanelli@gmail.com>
Date: Mon, 19 Mar 2018 16:47:07 -0300
Subject: Add checklist ordering capability

---
 client/components/cards/cardDetails.js  | 46 +++++++++++++++++++++++++++++++++
 client/components/cards/checklists.jade | 35 +++++++++++++------------
 client/components/cards/checklists.js   | 42 +++++++++++++++++-------------
 3 files changed, 88 insertions(+), 35 deletions(-)

(limited to 'client/components/cards')

diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index ab8a6288..066e52ec 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -1,4 +1,5 @@
 const subManager = new SubsManager();
+const { calculateIndexData } = Utils;
 
 BlazeComponent.extendComponent({
   mixins() {
@@ -66,6 +67,51 @@ BlazeComponent.extendComponent({
 
   onRendered() {
     if (!Utils.isMiniScreen()) this.scrollParentContainer();
+    const $checklistsDom = this.$('.card-checklist-items');
+
+    $checklistsDom.sortable({
+      tolerance: 'pointer',
+      helper: 'clone',
+      handle: '.checklist-title',
+      items: '.js-checklist',
+      placeholder: 'js-checklist placeholder',
+      distance: 7,
+      start(evt, ui) {
+        ui.placeholder.height(ui.helper.height());
+        EscapeActions.executeUpTo('popup-close');
+      },
+      stop(evt, ui) {
+        let prevChecklist = ui.item.prev('.js-checklist').get(0);
+        if (prevChecklist) {
+          prevChecklist = Blaze.getData(prevChecklist).checklist;
+        }
+        let nextChecklist = ui.item.next('.js-checklist').get(0);
+        if (nextChecklist) {
+          nextChecklist = Blaze.getData(nextChecklist).checklist;
+        }
+        const sortIndex = calculateIndexData(prevChecklist, nextChecklist, 1);
+
+        $checklistsDom.sortable('cancel');
+        const checklist = Blaze.getData(ui.item.get(0)).checklist;
+
+        Checklists.update(checklist._id, {
+          $set: {
+            sort: sortIndex.base,
+          },
+        });
+      },
+    });
+
+    function userIsMember() {
+      return Meteor.user() && Meteor.user().isBoardMember();
+    }
+
+    // Disable sorting if the current user is not a board member
+    this.autorun(() => {
+      if ($checklistsDom.data('sortable')) {
+        $checklistsDom.sortable('option', 'disabled', !userIsMember());
+      }
+    });
   },
 
   onDestroyed() {
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index c73602b5..4753c2c6 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -18,24 +18,25 @@ template(name="checklists")
         | {{_ 'add-checklist'}}...
 
 template(name="checklistDetail")
-  +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
-    +editChecklistItemForm(checklist = checklist)
-  else
-    .checklist-title
-      .checkbox.fa.fa-check-square-o
-      if canModifyCard
-        a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
-
-      span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
-      if canModifyCard
-        h2.title.js-open-inlined-form.is-editable
-          +viewer
-            = checklist.title
-      else
-        h2.title
-          +viewer
+  .js-checklist
+    +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
+      +editChecklistItemForm(checklist = checklist)
+    else
+      .checklist-title
+        .checkbox.fa.fa-check-square-o
+        if canModifyCard
+          a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
+  
+        span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
+        if canModifyCard
+          h2.title.js-open-inlined-form.is-editable
+            +viewer
               = checklist.title
-  +checklistItems(checklist = checklist)
+        else
+          h2.title
+            +viewer
+                = checklist.title
+    +checklistItems(checklist = checklist)
 
 template(name="checklistDeleteDialog")
   .js-confirm-checklist-delete
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
index 232cc6e4..d68a1e47 100644
--- a/client/components/cards/checklists.js
+++ b/client/components/cards/checklists.js
@@ -38,26 +38,32 @@ function initSorting(items) {
   });
 }
 
-Template.checklists.onRendered(function () {
-  const self = BlazeComponent.getComponentForElement(this.firstNode);
-  self.itemsDom = this.$('.card-checklist-items');
-  initSorting(self.itemsDom);
-  self.itemsDom.mousedown(function(evt) {
-    evt.stopPropagation();
-  });
+BlazeComponent.extendComponent({
+  onRendered() {
+    const self = this;
+    self.itemsDom = this.$('.js-checklist-items');
+    initSorting(self.itemsDom);
+    self.itemsDom.mousedown(function(evt) {
+      evt.stopPropagation();
+    });
+
+    function userIsMember() {
+      return Meteor.user() && Meteor.user().isBoardMember();
+    }
 
-  function userIsMember() {
-    return Meteor.user() && Meteor.user().isBoardMember();
-  }
+    // Disable sorting if the current user is not a board member
+    self.autorun(() => {
+      const $itemsDom = $(self.itemsDom);
+      if ($itemsDom.data('sortable')) {
+        $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
+      }
+    });
+  },
 
-  // Disable sorting if the current user is not a board member
-  self.autorun(() => {
-    const $itemsDom = $(self.itemsDom);
-    if ($itemsDom.data('sortable')) {
-      $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
-    }
-  });
-});
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+}).register('checklistDetail');
 
 BlazeComponent.extendComponent({
 
-- 
cgit v1.2.3-1-g7c22