Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 23:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Change order using drag-n-drop for subtasks

Browse source
This commit is contained in:
Nicu Tofan 2018-06-19 00:25:43 +03:00
parent 5f20e56721
commit f89de026c4
No known key found for this signature in database
GPG key ID: 7EE66E95E64FD0B7
4 changed files with 82 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

38
client/components/cards/cardDetails.js
View file

@ -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() { function userIsMember() {
return Meteor.user() && Meteor.user().isBoardMember(); return Meteor.user() && Meteor.user().isBoardMember();
} }
@ -116,6 +151,9 @@ BlazeComponent.extendComponent({
if ($checklistsDom.data('sortable')) { if ($checklistsDom.data('sortable')) {
$checklistsDom.sortable('option', 'disabled', !userIsMember()); $checklistsDom.sortable('option', 'disabled', !userIsMember());
} }
if ($subtasksDom.data('sortable')) {
$subtasksDom.sortable('option', 'disabled', !userIsMember());
}
}); });
}, },

46
client/components/cards/subtasks.jade
View file

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

26
client/components/cards/subtasks.js
View file

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

16
client/components/cards/subtasks.styl
View file

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