summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorNicu Tofan <nicu.tofan@gmail.com>2018-06-19 00:25:43 +0300
committerNicu Tofan <nicu.tofan@gmail.com>2018-06-26 14:32:48 +0300
commitf89de026c414879bdb61a0f3117e92fde6acf5aa (patch)
tree3a52e9e0c22f2322385846d16f30fc8eafc27e51
parent5f20e56721cd23ef6b65138f1b2aa074d7f830c6 (diff)
downloadwekan-f89de026c414879bdb61a0f3117e92fde6acf5aa.tar.gz
wekan-f89de026c414879bdb61a0f3117e92fde6acf5aa.tar.bz2
wekan-f89de026c414879bdb61a0f3117e92fde6acf5aa.zip
Change order using drag-n-drop for subtasks
-rw-r--r--client/components/cards/cardDetails.js38
-rw-r--r--client/components/cards/subtasks.jade46
-rw-r--r--client/components/cards/subtasks.js26
-rw-r--r--client/components/cards/subtasks.styl16
4 files changed, 82 insertions, 44 deletions
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