mirror of
https://github.com/wekan/wekan.git
synced 2025-04-22 04:57:07 -04:00
Change order using drag-n-drop for subtasks
This commit is contained in:
Nicu Tofan
parent
5f20e56721
commit
f89de026c4
4 changed files with 82 additions and 44 deletions
|
|
@ -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());
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue