Change order using drag-n-drop for subtasks

client/components/cards/cardDetails.js

@@ -107,6 +107,41 @@ BlazeComponent.extendComponent({
       },
     });
 
+    const $subtasksDom = this.$('.card-subtasks-items');
+
+    $subtasksDom.sortable({
+      tolerance: 'pointer',
+      helper: 'clone',
+      handle: '.subtask-title',
+      items: '.js-subtasks',
+      placeholder: 'subtasks 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-subtasks').get(0);
+        if (prevChecklist) {
+          prevChecklist = Blaze.getData(prevChecklist).subtask;
+        }
+        let nextChecklist = ui.item.next('.js-subtasks').get(0);
+        if (nextChecklist) {
+          nextChecklist = Blaze.getData(nextChecklist).subtask;
+        }
+        const sortIndex = calculateIndexData(prevChecklist, nextChecklist, 1);
+
+        $subtasksDom.sortable('cancel');
+        const subtask = Blaze.getData(ui.item.get(0)).subtask;
+
+        Subtasks.update(subtask._id, {
+          $set: {
+            sort: sortIndex.base,
+          },
+        });
+      },
+    });
+
     function userIsMember() {
       return Meteor.user() && Meteor.user().isBoardMember();
     }
@@ -116,6 +151,9 @@ BlazeComponent.extendComponent({
       if ($checklistsDom.data('sortable')) {
         $checklistsDom.sortable('option', 'disabled', !userIsMember());
       }
+      if ($subtasksDom.data('sortable')) {
+        $subtasksDom.sortable('option', 'disabled', !userIsMember());
+      }
     });
   },
 

client/components/cards/subtasks.jade

@@ -2,12 +2,12 @@ template(name="subtasks")
   h3 {{_ 'subtasks'}}
   if toggleDeleteDialog.get
     .board-overlay#card-details-overlay
-    +subtaskDeleteDialog(subtasks = subtasksToDelete)
+    +subtaskDeleteDialog(subtask = subtaskToDelete)
 
 
   .card-subtasks-items
-    each subtasks in currentCard.subtasks
-      +subtasksDetail(subtasks = subtasks)
+    each subtask in currentCard.subtasks
+      +subtaskDetail(subtask = subtask)
 
   if canModifyCard
     +inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId)
@@ -17,36 +17,36 @@ template(name="subtasks")
         i.fa.fa-plus
         | {{_ 'add-subtask'}}...
 
-template(name="subtasksDetail")
-  .js-subtasks.subtasks
-    +inlinedForm(classNames="js-edit-subtasks-title" subtasks = subtasks)
-      +editsubtasksItemForm(subtasks = subtasks)
+template(name="subtaskDetail")
+  .js-subtasks.subtask
+    +inlinedForm(classNames="js-edit-subtask-title" subtask = subtask)
+      +editSubtaskItemForm(subtask = subtask)
     else
-      .subtasks-title
+      .subtask-title
         span
         if canModifyCard
-          a.js-delete-subtasks.toggle-delete-subtasks-dialog {{_ "delete"}}...
+          a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}...
 
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
             +viewer
-              = subtasks.title
+              = subtask.title
         else
           h2.title
             +viewer
-                = subtasks.title
+                = subtask.title
 
 template(name="subtaskDeleteDialog")
-  .js-confirm-subtasks-delete
+  .js-confirm-subtask-delete
     p
       i(class="fa fa-exclamation-triangle" aria-hidden="true")
     p
       | {{_ 'confirm-subtask-delete-dialog'}}
-      span {{subtasks.title}}
+      span {{subtask.title}}
       | ?
-    .js-subtasks-delete-buttons
-      button.confirm-subtasks-delete(type="button") {{_ 'delete'}}
-      button.toggle-delete-subtasks-dialog(type="button") {{_ 'cancel'}}
+    .js-subtask-delete-buttons
+      button.confirm-subtask-delete(type="button") {{_ 'delete'}}
+      button.toggle-delete-subtask-dialog(type="button") {{_ 'cancel'}}
 
 template(name="addSubtaskItemForm")
   textarea.js-add-subtask-item(rows='1' autofocus)
@@ -54,24 +54,24 @@ template(name="addSubtaskItemForm")
     button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
     a.fa.fa-times-thin.js-close-inlined-form
 
-template(name="editsubtasksItemForm")
-  textarea.js-edit-subtasks-item(rows='1' autofocus)
+template(name="editSubtaskItemForm")
+  textarea.js-edit-subtask-item(rows='1' autofocus)
     if $eq type 'item'
       = item.title
     else
-      = subtasks.title
+      = subtask.title
   .edit-controls.clearfix
-    button.primary.confirm.js-submit-edit-subtasks-item-form(type="submit") {{_ 'save'}}
+    button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
     a.fa.fa-times-thin.js-close-inlined-form
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
-      a.js-delete-subtasks-item {{_ "delete"}}...
+      a.js-delete-subtask-item {{_ "delete"}}...
 
 template(name="subtasksItems")
   .subtasks-items.js-subtasks-items
     each item in subtasks.items
-      +inlinedForm(classNames="js-edit-subtasks-item" item = item subtasks = subtasks)
-        +editsubtasksItemForm(type = 'item' item = item subtasks = subtasks)
+      +inlinedForm(classNames="js-edit-subtask-item" item = item subtasks = subtasks)
+        +editSubtaskItemForm(type = 'item' item = item subtasks = subtasks)
       else
         +subtaskItemDetail(item = item subtasks = subtasks)
     if canModifyCard

client/components/cards/subtasks.js

@@ -2,7 +2,7 @@ BlazeComponent.extendComponent({
   canModifyCard() {
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
-}).register('subtasksDetail');
+}).register('subtaskDetail');
 
 BlazeComponent.extendComponent({
 
@@ -32,24 +32,24 @@ BlazeComponent.extendComponent({
   },
 
   deleteSubtask() {
-    const subtasks = this.currentData().subtasks;
-    if (subtasks && subtasks._id) {
-      Subtasks.remove(subtasks._id);
+    const subtask = this.currentData().subtask;
+    if (subtask && subtask._id) {
+      Subtasks.remove(subtask._id);
       this.toggleDeleteDialog.set(false);
     }
   },
 
   editSubtask(event) {
     event.preventDefault();
-    const textarea = this.find('textarea.js-edit-subtasks-item');
+    const textarea = this.find('textarea.js-edit-subtask-item');
     const title = textarea.value.trim();
-    const subtasks = this.currentData().subtasks;
-    subtasks.setTitle(title);
+    const subtask = this.currentData().subtask;
+    subtask.setTitle(title);
   },
 
   onCreated() {
     this.toggleDeleteDialog = new ReactiveVar(false);
-    this.subtasksToDelete = null; //Store data context to pass to subtaskDeleteDialog template
+    this.subtaskToDelete = null; //Store data context to pass to subtaskDeleteDialog template
   },
 
   pressKey(event) {
@@ -64,9 +64,9 @@ BlazeComponent.extendComponent({
 
   events() {
     const events = {
-      'click .toggle-delete-subtasks-dialog'(event) {
-        if($(event.target).hasClass('js-delete-subtasks')){
-          this.subtasksToDelete = this.currentData().subtasks; //Store data context
+      'click .toggle-delete-subtask-dialog'(event) {
+        if($(event.target).hasClass('js-delete-subtask')){
+          this.subtaskToDelete = this.currentData().subtask; //Store data context
         }
         this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
       },
@@ -75,8 +75,8 @@ BlazeComponent.extendComponent({
     return [{
       ...events,
       'submit .js-add-subtask': this.addSubtask,
-      'submit .js-edit-subtasks-title': this.editSubtask,
-      'click .confirm-subtasks-delete': this.deleteSubtask,
+      'submit .js-edit-subtask-title': this.editSubtask,
+      'click .confirm-subtask-delete': this.deleteSubtask,
       keydown: this.pressKey,
     }];
   },

client/components/cards/subtasks.styl

@@ -1,7 +1,7 @@
 .js-add-subtask
   color: #8c8c8c
 
-textarea.js-add-subtask-item, textarea.js-edit-subtasks-item
+textarea.js-add-subtask-item, textarea.js-edit-subtask-item
   overflow: hidden
   word-wrap: break-word
   resize: none
@@ -16,7 +16,7 @@ textarea.js-add-subtask-item, textarea.js-edit-subtasks-item
   &:hover
     color: inherit
 
-.subtasks-title
+.subtask-title
   .checkbox
     float: left
     width: 30px
@@ -35,11 +35,11 @@ textarea.js-add-subtask-item, textarea.js-edit-subtasks-item
     &.is-finished
       color: #3cb500
 
-  .js-delete-subtasks
+  .js-delete-subtask
     @extends .delete-text
 
 
-.js-confirm-subtasks-delete
+.js-confirm-subtask-delete
   background-color: darken(white, 3%)
   position: absolute
   float: left;
@@ -63,13 +63,13 @@ textarea.js-add-subtask-item, textarea.js-edit-subtasks-item
     i
       font-size: 2em
 
-  .js-subtasks-delete-buttons
+  .js-subtask-delete-buttons
     position: relative
     padding: left 2% right 2%
-    .confirm-subtasks-delete
+    .confirm-subtask-delete
       margin-left: 12%
       float: left
-    .toggle-delete-subtasks-dialog
+    .toggle-delete-subtask-dialog
       margin-right: 12%
       float: right
 
@@ -129,7 +129,7 @@ textarea.js-add-subtask-item, textarea.js-edit-subtasks-item
       p
         margin-bottom: 2px
 
-.js-delete-subtasks-item
+.js-delete-subtask-item
   margin: 0 0 0.5em 1.33em
   @extends .delete-text
   padding: 12px 0 0 0