From f89de026c414879bdb61a0f3117e92fde6acf5aa Mon Sep 17 00:00:00 2001 From: Nicu Tofan Date: Tue, 19 Jun 2018 00:25:43 +0300 Subject: Change order using drag-n-drop for subtasks --- client/components/cards/cardDetails.js | 38 ++++++++++++++++++++++++++++ client/components/cards/subtasks.jade | 46 +++++++++++++++++----------------- client/components/cards/subtasks.js | 26 +++++++++---------- client/components/cards/subtasks.styl | 16 ++++++------ 4 files changed, 82 insertions(+), 44 deletions(-) (limited to 'client') diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 22dacb70..8d917830 100644 --- a/client/components/cards/cardDetails.js +++ b/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()); + } }); }, diff --git a/client/components/cards/subtasks.jade b/client/components/cards/subtasks.jade index 378d7a46..5bf6c7ce 100644 --- a/client/components/cards/subtasks.jade +++ b/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 diff --git a/client/components/cards/subtasks.js b/client/components/cards/subtasks.js index e65ef518..dc6c607f 100644 --- a/client/components/cards/subtasks.js +++ b/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, }]; }, diff --git a/client/components/cards/subtasks.styl b/client/components/cards/subtasks.styl index 2d18407c..5bb2d4bd 100644 --- a/client/components/cards/subtasks.styl +++ b/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 -- cgit v1.2.3-1-g7c22