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/add-task.vue

@@ -66,6 +66,12 @@ export default {
 		this.labelService = new LabelService()
 		this.labelTaskService = new LabelTaskService()
 	},
+	props: {
+		defaultPosition: {
+			type: Number,
+			required: false,
+		},
+	},
 	methods: {
 		addTask() {
 			if (this.newTaskTitle === '') {
@@ -74,7 +80,7 @@ export default {
 			}
 			this.errorMessage = ''
 
-			this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId)
+			this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition)
 				.then(task => {
 					this.newTaskTitle = ''
 					this.$emit('taskAdded', task)

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)
+				})
+		},
 	},
 }

src/components/tasks/partials/kanban-card.vue

@@ -0,0 +1,111 @@
+<template>
+	<div
+		:class="{
+			'is-loading': loadingInternal || loading,
+			'draggable': !(loadingInternal || loading),
+			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
+		}"
+		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
+		@click.ctrl="() => markTaskAsDone(task)"
+		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+		@click.meta="() => markTaskAsDone(task)"
+		class="task loader-container draggable"
+	>
+		<span class="task-id">
+			<span class="is-done" v-if="task.done">Done</span>
+			<template v-if="task.identifier === ''">
+				#{{ task.index }}
+			</template>
+			<template v-else>
+				{{ task.identifier }}
+			</template>
+		</span>
+		<span
+			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+			class="due-date"
+			v-if="task.dueDate > 0"
+			v-tooltip="formatDate(task.dueDate)">
+			<span class="icon">
+				<icon :icon="['far', 'calendar-alt']"/>
+			</span>
+			<span>
+				{{ formatDateSince(task.dueDate) }}
+			</span>
+		</span>
+		<h3>{{ task.title }}</h3>
+		<progress
+			class="progress is-small"
+			v-if="task.percentDone > 0"
+			:value="task.percentDone * 100" max="100">
+			{{ task.percentDone * 100 }}%
+		</progress>
+		<div class="footer">
+			<labels :labels="task.labels"/>
+			<priority-label :priority="task.priority"/>
+			<div class="assignees" v-if="task.assignees.length > 0">
+				<user
+					:avatar-size="24"
+					:key="task.id + 'assignee' + u.id"
+					:show-username="false"
+					:user="u"
+					v-for="u in task.assignees"
+				/>
+			</div>
+			<span class="icon" v-if="task.attachments.length > 0">
+				<icon icon="paperclip"/>	
+			</span>
+			<span v-if="task.description" class="icon">
+				<icon icon="align-left"/>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import {playPop} from '../../../helpers/playPop'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
+import User from '../../../components/misc/user'
+import Labels from '../../../components/tasks/partials/labels'
+
+export default {
+	name: 'kanban-card',
+	components: {
+		PriorityLabel,
+		User,
+		Labels,
+	},
+	data() {
+		return {
+			loadingInternal: false,
+		}
+	},
+	props: {
+		task: {
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	methods: {
+		markTaskAsDone(task) {
+			this.loadingInternal = true
+			task.done = !task.done
+			this.$store.dispatch('tasks/update', task)
+				.then(() => {
+					if (task.done) {
+						playPop()
+					}
+				})
+				.catch(e => {
+					this.error(e)
+				})
+				.finally(() => {
+					this.loadingInternal = false
+				})
+		},
+	},
+}
+</script>