Implement drag-and-drop of tasks to other tasks or calendars

[nicolad]

No description provided.

[nicolad]

Hello herr @raimund-schluessler,
based on your comment from previuous PR:
#223 (comment)
I found default sorting a little bit unclear, this is why I started this PR.

I've added the same dependency as deck app did:
https://github.com/nextcloud/deck/blob/vue/package.json#L38

I took a look at angular version of drag and drop; but if you can provide your thoughts on what is expected from implementation - it will be nice.

[raimund-schluessler]

Hey Herr @nicolad 😉

I found default sorting a little bit unclear, this is why I started this PR.

Default sort order would basically mean to sort by multiple task properties. First by completed and the ambiguous ones then by due date etc. I will have a look later.

I've added the same dependency as deck app did:
https://github.com/nextcloud/deck/blob/vue/package.json#L38

This is a good idea. I didn't know they use this library.

I took a look at angular version of drag and drop; but if you can provide your thoughts on what is expected from implementation - it will be nice.

Most important would be to be able to move subtasks from one task to the other or make it a root task (because drag and drop is currently the only way to change or move subtasks). Dropping on a task would make the dragged task a subtask of the target task. If necessary, the calendar would also be changed.

The other options would be to drop it on one of the collections (important, due today, completed). Then the task would be set as important, due today, or completed. Or you could also drop it on a calendar in the sidebar and change the calendar like that.

The logic to actually change a task's properties is not yet implemented. I think in order to keep this PR clean, it is best to focus on the dnd logic and just log to the console which task has to be altered in which way e.g. as here: https://github.com/nextcloud/tasks/blob/vue/src/components/TheDetails.vue#L542

[nicolad]

Thank you for your input, based on your description, it seems that vue-smooth-dnd doesn't have all that is needed out of the box. On the other side, this library seems to have all we need:
https://github.com/phphe/vue-draggable-nested-tree
Here is the demo: https://codepen.io/phphe/pen/KRapQm
What do you think ?

[raimund-schluessler]

Here is the demo: https://codepen.io/phphe/pen/KRapQm

This demo does exactly what is needed for the app. It works even better than what currently is implemented in master. I haven't had a look at the code, though. But I guess it should work. 🎉

[raimund-schluessler]

@nicolad Since you are a member of NC now, could you create the branch in the Tasks repo, please? This makes it easier to checkout the branch.

[raimund-schluessler]

Closing as #194 was merged into master and I am not sure if "vue-draggable-nested-tree" is the best option.