Reorder tasks, lists and kanban buckets (#620)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/620
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/tasks/mixins/createTask.js

@@ -6,10 +6,12 @@ import LabelModel from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {mapState} from 'vuex'
 import UserService from '@/services/user'
+import TaskService from '@/services/task'
 
 export default {
 	data() {
 		return {
+			taskService: TaskService,
 			labelTaskService: LabelTaskService,
 			userService: UserService,
 		}
@@ -17,12 +19,13 @@ export default {
 	created() {
 		this.labelTaskService = new LabelTaskService()
 		this.userService = new UserService()
+		this.taskService = new TaskService()
 	},
 	computed: mapState({
 		labels: state => state.labels.labels,
 	}),
 	methods: {
-		createNewTask(newTaskTitle, bucketId = 0, lId = 0) {
+		createNewTask(newTaskTitle, bucketId = 0, lId = 0, position = 0) {
 			const parsedTask = parseTaskText(newTaskTitle)
 			const assignees = []
 
@@ -36,14 +39,17 @@ export default {
 				const list = this.$store.getters['lists/findListByExactname'](parsedTask.list)
 				listId = list === null ? null : list.id
 			}
-			if (listId === null) {
-				listId = lId !== 0 ? lId : this.$route.params.listId
+			if (lId !== 0) {
+				listId = lId
+			}
+			if (typeof this.$route.params.listId !== 'undefined') {
+				listId = parseInt(this.$route.params.listId)
 			}
 			
-			if (typeof listId === 'undefined' || listId === 0) {
+			if (typeof listId === 'undefined' || listId === null) {
 				return Promise.reject('NO_LIST')
 			}
-			
+
 			// Separate closure because we need to wait for the results of the user search if users were entered in the
 			// task create request. Because _that_ happens in a promise, we'll need something to call when it resolves.
 			const createTask = () => {
@@ -54,6 +60,7 @@ export default {
 					priority: parsedTask.priority,
 					assignees: assignees,
 					bucketId: bucketId,
+					position: position,
 				})
 				return this.taskService.create(task)
 					.then(task => {

src/components/tasks/mixins/taskList.js

@@ -1,5 +1,6 @@
 import TaskCollectionService from '../../../services/taskCollection'
 import cloneDeep from 'lodash/cloneDeep'
+import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
 
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
@@ -20,7 +21,7 @@ export default {
 
 			showTaskFilter: false,
 			params: {
-				sort_by: ['done', 'id'],
+				sort_by: ['position', 'id'],
 				order_by: ['asc', 'desc'],
 				filter_by: ['done'],
 				filter_value: ['false'],
@@ -148,9 +149,9 @@ export default {
 				if (a.done > b.done)
 					return 1
 
-				if (a.id > b.id)
+				if (a.position < b.position)
 					return -1
-				if (a.id < b.id)
+				if (a.position > b.position)
 					return 1
 				return 0
 			})
@@ -187,5 +188,22 @@ export default {
 				},
 			}
 		},
+		saveTaskPosition(e) {
+			this.drag = false
+			
+			const task = this.tasks[e.newIndex]
+			const taskBefore = this.tasks[e.newIndex - 1] ?? null
+			const taskAfter = this.tasks[e.newIndex + 1] ??  null
+			
+			task.position = calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
+
+			this.$store.dispatch('tasks/update', task)
+				.then(r => {
+					this.$set(this.tasks, e.newIndex, r)
+				})
+				.catch(e => {
+					this.error(e)
+				})
+		},
 	},
 }