From 7f3cfccfbb1899cbd635b99e2af98d3e5770010a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 28 Jul 2021 16:13:22 +0200
Subject: [PATCH] Move kanban task card to a new component

---
 src/components/tasks/partials/kanban-card.vue | 111 ++++++++++++++++++
 src/views/list/views/Kanban.vue               |  97 +--------------
 2 files changed, 116 insertions(+), 92 deletions(-)
 create mode 100644 src/components/tasks/partials/kanban-card.vue

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
new file mode 100644
index 000000000..d2ff37e34
--- /dev/null
+++ b/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>
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 615838c00..ca21ff936 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -127,72 +127,7 @@
 							:key="`bucket${bucket.id}-task${task.id}`"
 							v-for="task in bucket.tasks"
 						>
-							<div
-								:class="{
-							'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
-							'draggable': !(taskService.loading || taskLoading) || !taskUpdating[task.id],
-							'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">
-									<span
-										:key="label.id"
-										:style="{'background': label.hexColor, 'color': label.textColor}"
-										class="tag"
-										v-for="label in task.labels">
-										<span>{{ label.title }}</span>
-									</span>
-									<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>
+							<kanban-card :task="task"/>
 						</component>
 					</component>
 				</div>
@@ -280,10 +215,6 @@ import TaskService from '../../../services/task'
 import BucketModel from '../../../models/bucket'
 
 import {Container, Draggable} from 'vue-smooth-dnd'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
-import Labels from '../../../components/tasks/partials/labels'
-
 import {filterObject} from '@/helpers/filterObject'
 import {applyDrag} from '@/helpers/applyDrag'
 import {mapState} from 'vuex'
@@ -292,21 +223,21 @@ import Rights from '../../../models/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
-import {playPop} from '@/helpers/playPop'
 import createTask from '@/components/tasks/mixins/createTask'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+import draggable from 'vuedraggable'
+import KanbanCard from '../../../components/tasks/partials/kanban-card'
 
 export default {
 	name: 'Kanban',
 	components: {
+		KanbanCard,
 		Dropdown,
 		FilterPopup,
 		Container,
 		Draggable,
-		Labels,
-		User,
-		PriorityLabel,
+		draggable,
 	},
 	data() {
 		return {
@@ -463,24 +394,6 @@ export default {
 					})
 			}
 		},
-		markTaskAsDone(task) {
-			this.oneTaskUpdating = true
-			this.$set(this.taskUpdating, task.id, true)
-			task.done = !task.done
-			this.$store.dispatch('tasks/update', task)
-				.then(() => {
-					if (task.done) {
-						playPop()
-					}
-				})
-				.catch(e => {
-					this.error(e)
-				})
-				.finally(() => {
-					this.$set(this.taskUpdating, task.id, false)
-					this.oneTaskUpdating = false
-				})
-		},
 		getTaskPayload(bucketId) {
 			return index => {
 				const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]